controller.polarArea.tests.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
  1. describe('Chart.controllers.polarArea', function() {
  2. it('should be constructed', function() {
  3. var chart = window.acquireChart({
  4. type: 'polarArea',
  5. data: {
  6. datasets: [
  7. {data: []},
  8. {data: []}
  9. ],
  10. labels: []
  11. }
  12. });
  13. var meta = chart.getDatasetMeta(1);
  14. expect(meta.type).toEqual('polarArea');
  15. expect(meta.data).toEqual([]);
  16. expect(meta.hidden).toBe(null);
  17. expect(meta.controller).not.toBe(undefined);
  18. expect(meta.controller.index).toBe(1);
  19. meta.controller.updateIndex(0);
  20. expect(meta.controller.index).toBe(0);
  21. });
  22. it('should create arc elements for each data item during initialization', function() {
  23. var chart = window.acquireChart({
  24. type: 'polarArea',
  25. data: {
  26. datasets: [
  27. {data: []},
  28. {data: [10, 15, 0, -4]}
  29. ],
  30. labels: []
  31. }
  32. });
  33. var meta = chart.getDatasetMeta(1);
  34. expect(meta.data.length).toBe(4); // 4 arcs created
  35. expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
  36. expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
  37. expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true);
  38. expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true);
  39. });
  40. it('should draw all elements', function() {
  41. var chart = window.acquireChart({
  42. type: 'polarArea',
  43. data: {
  44. datasets: [{
  45. data: [10, 15, 0, -4],
  46. label: 'dataset2'
  47. }],
  48. labels: ['label1', 'label2', 'label3', 'label4']
  49. }
  50. });
  51. var meta = chart.getDatasetMeta(0);
  52. spyOn(meta.data[0], 'draw');
  53. spyOn(meta.data[1], 'draw');
  54. spyOn(meta.data[2], 'draw');
  55. spyOn(meta.data[3], 'draw');
  56. chart.update();
  57. expect(meta.data[0].draw.calls.count()).toBe(1);
  58. expect(meta.data[1].draw.calls.count()).toBe(1);
  59. expect(meta.data[2].draw.calls.count()).toBe(1);
  60. expect(meta.data[3].draw.calls.count()).toBe(1);
  61. });
  62. it('should update elements when modifying data', function() {
  63. var chart = window.acquireChart({
  64. type: 'polarArea',
  65. data: {
  66. datasets: [{
  67. data: [10, 15, 0, -4],
  68. label: 'dataset2'
  69. }],
  70. labels: ['label1', 'label2', 'label3', 'label4']
  71. },
  72. options: {
  73. showLines: true,
  74. legend: false,
  75. title: false,
  76. elements: {
  77. arc: {
  78. backgroundColor: 'rgb(255, 0, 0)',
  79. borderColor: 'rgb(0, 255, 0)',
  80. borderWidth: 1.2
  81. }
  82. }
  83. }
  84. });
  85. var meta = chart.getDatasetMeta(0);
  86. expect(meta.data.length).toBe(4);
  87. [
  88. {o: 179, s: -0.5 * Math.PI, e: 0},
  89. {o: 243, s: 0, e: 0.5 * Math.PI},
  90. {o: 51, s: 0.5 * Math.PI, e: Math.PI},
  91. {o: 0, s: Math.PI, e: 1.5 * Math.PI}
  92. ].forEach(function(expected, i) {
  93. expect(meta.data[i]._model.x).toBeCloseToPixel(256);
  94. expect(meta.data[i]._model.y).toBeCloseToPixel(256);
  95. expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(0);
  96. expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(expected.o);
  97. expect(meta.data[i]._model.startAngle).toBe(expected.s);
  98. expect(meta.data[i]._model.endAngle).toBe(expected.e);
  99. expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
  100. backgroundColor: 'rgb(255, 0, 0)',
  101. borderColor: 'rgb(0, 255, 0)',
  102. borderWidth: 1.2,
  103. label: chart.data.labels[i]
  104. }));
  105. });
  106. // arc styles
  107. chart.data.datasets[0].backgroundColor = 'rgb(128, 129, 130)';
  108. chart.data.datasets[0].borderColor = 'rgb(56, 57, 58)';
  109. chart.data.datasets[0].borderWidth = 1.123;
  110. chart.update();
  111. for (var i = 0; i < 4; ++i) {
  112. expect(meta.data[i]._model.backgroundColor).toBe('rgb(128, 129, 130)');
  113. expect(meta.data[i]._model.borderColor).toBe('rgb(56, 57, 58)');
  114. expect(meta.data[i]._model.borderWidth).toBe(1.123);
  115. }
  116. // arc styles
  117. meta.data[0].custom = {
  118. backgroundColor: 'rgb(0, 1, 3)',
  119. borderColor: 'rgb(4, 6, 8)',
  120. borderWidth: 0.787
  121. };
  122. chart.update();
  123. expect(meta.data[0]._model.x).toBeCloseToPixel(256);
  124. expect(meta.data[0]._model.y).toBeCloseToPixel(256);
  125. expect(meta.data[0]._model.innerRadius).toBeCloseToPixel(0);
  126. expect(meta.data[0]._model.outerRadius).toBeCloseToPixel(179);
  127. expect(meta.data[0]._model).toEqual(jasmine.objectContaining({
  128. startAngle: -0.5 * Math.PI,
  129. endAngle: 0,
  130. backgroundColor: 'rgb(0, 1, 3)',
  131. borderWidth: 0.787,
  132. borderColor: 'rgb(4, 6, 8)',
  133. label: 'label1'
  134. }));
  135. });
  136. it('should update elements with start angle from options', function() {
  137. var chart = window.acquireChart({
  138. type: 'polarArea',
  139. data: {
  140. datasets: [{
  141. data: [10, 15, 0, -4],
  142. label: 'dataset2'
  143. }],
  144. labels: ['label1', 'label2', 'label3', 'label4']
  145. },
  146. options: {
  147. showLines: true,
  148. legend: false,
  149. title: false,
  150. startAngle: 0, // default is -0.5 * Math.PI
  151. elements: {
  152. arc: {
  153. backgroundColor: 'rgb(255, 0, 0)',
  154. borderColor: 'rgb(0, 255, 0)',
  155. borderWidth: 1.2
  156. }
  157. }
  158. }
  159. });
  160. var meta = chart.getDatasetMeta(0);
  161. expect(meta.data.length).toBe(4);
  162. [
  163. {o: 179, s: 0, e: 0.5 * Math.PI},
  164. {o: 243, s: 0.5 * Math.PI, e: Math.PI},
  165. {o: 51, s: Math.PI, e: 1.5 * Math.PI},
  166. {o: 0, s: 1.5 * Math.PI, e: 2.0 * Math.PI}
  167. ].forEach(function(expected, i) {
  168. expect(meta.data[i]._model.x).toBeCloseToPixel(256);
  169. expect(meta.data[i]._model.y).toBeCloseToPixel(256);
  170. expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(0);
  171. expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(expected.o);
  172. expect(meta.data[i]._model.startAngle).toBe(expected.s);
  173. expect(meta.data[i]._model.endAngle).toBe(expected.e);
  174. expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
  175. backgroundColor: 'rgb(255, 0, 0)',
  176. borderColor: 'rgb(0, 255, 0)',
  177. borderWidth: 1.2,
  178. label: chart.data.labels[i]
  179. }));
  180. });
  181. });
  182. it('should handle number of data point changes in update', function() {
  183. var chart = window.acquireChart({
  184. type: 'polarArea',
  185. data: {
  186. datasets: [{
  187. data: [10, 15, 0, -4],
  188. label: 'dataset2'
  189. }],
  190. labels: ['label1', 'label2', 'label3', 'label4']
  191. },
  192. options: {
  193. showLines: true,
  194. elements: {
  195. arc: {
  196. backgroundColor: 'rgb(255, 0, 0)',
  197. borderColor: 'rgb(0, 255, 0)',
  198. borderWidth: 1.2
  199. }
  200. }
  201. }
  202. });
  203. var meta = chart.getDatasetMeta(0);
  204. expect(meta.data.length).toBe(4);
  205. // remove 2 items
  206. chart.data.labels = ['label1', 'label2'];
  207. chart.data.datasets[0].data = [1, 2];
  208. chart.update();
  209. expect(meta.data.length).toBe(2);
  210. expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
  211. expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
  212. // add 3 items
  213. chart.data.labels = ['label1', 'label2', 'label3', 'label4', 'label5'];
  214. chart.data.datasets[0].data = [1, 2, 3, 4, 5];
  215. chart.update();
  216. expect(meta.data.length).toBe(5);
  217. expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
  218. expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
  219. expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true);
  220. expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true);
  221. expect(meta.data[4] instanceof Chart.elements.Arc).toBe(true);
  222. });
  223. it('should set arc hover styles', function() {
  224. var chart = window.acquireChart({
  225. type: 'polarArea',
  226. data: {
  227. datasets: [{
  228. data: [10, 15, 0, -4],
  229. label: 'dataset2'
  230. }],
  231. labels: ['label1', 'label2', 'label3', 'label4']
  232. },
  233. options: {
  234. showLines: true,
  235. elements: {
  236. arc: {
  237. backgroundColor: 'rgb(255, 0, 0)',
  238. borderColor: 'rgb(0, 255, 0)',
  239. borderWidth: 1.2
  240. }
  241. }
  242. }
  243. });
  244. var meta = chart.getDatasetMeta(0);
  245. var arc = meta.data[0];
  246. meta.controller.setHoverStyle(arc);
  247. expect(arc._model.backgroundColor).toBe('rgb(230, 0, 0)');
  248. expect(arc._model.borderColor).toBe('rgb(0, 230, 0)');
  249. expect(arc._model.borderWidth).toBe(1.2);
  250. // Can set hover style per dataset
  251. chart.data.datasets[0].hoverBackgroundColor = 'rgb(77, 79, 81)';
  252. chart.data.datasets[0].hoverBorderColor = 'rgb(123, 125, 127)';
  253. chart.data.datasets[0].hoverBorderWidth = 2.1;
  254. meta.controller.setHoverStyle(arc);
  255. expect(arc._model.backgroundColor).toBe('rgb(77, 79, 81)');
  256. expect(arc._model.borderColor).toBe('rgb(123, 125, 127)');
  257. expect(arc._model.borderWidth).toBe(2.1);
  258. // Custom style
  259. arc.custom = {
  260. hoverBorderWidth: 5.5,
  261. hoverBackgroundColor: 'rgb(0, 0, 0)',
  262. hoverBorderColor: 'rgb(10, 10, 10)'
  263. };
  264. meta.controller.setHoverStyle(arc);
  265. expect(arc._model.backgroundColor).toBe('rgb(0, 0, 0)');
  266. expect(arc._model.borderColor).toBe('rgb(10, 10, 10)');
  267. expect(arc._model.borderWidth).toBe(5.5);
  268. });
  269. it('should remove hover styles', function() {
  270. var chart = window.acquireChart({
  271. type: 'polarArea',
  272. data: {
  273. datasets: [{
  274. data: [10, 15, 0, -4],
  275. label: 'dataset2'
  276. }],
  277. labels: ['label1', 'label2', 'label3', 'label4']
  278. },
  279. options: {
  280. showLines: true,
  281. elements: {
  282. arc: {
  283. backgroundColor: 'rgb(255, 0, 0)',
  284. borderColor: 'rgb(0, 255, 0)',
  285. borderWidth: 1.2
  286. }
  287. }
  288. }
  289. });
  290. var meta = chart.getDatasetMeta(0);
  291. var arc = meta.data[0];
  292. chart.options.elements.arc.backgroundColor = 'rgb(45, 46, 47)';
  293. chart.options.elements.arc.borderColor = 'rgb(50, 51, 52)';
  294. chart.options.elements.arc.borderWidth = 10.1;
  295. meta.controller.removeHoverStyle(arc);
  296. expect(arc._model.backgroundColor).toBe('rgb(45, 46, 47)');
  297. expect(arc._model.borderColor).toBe('rgb(50, 51, 52)');
  298. expect(arc._model.borderWidth).toBe(10.1);
  299. // Can set hover style per dataset
  300. chart.data.datasets[0].backgroundColor = 'rgb(77, 79, 81)';
  301. chart.data.datasets[0].borderColor = 'rgb(123, 125, 127)';
  302. chart.data.datasets[0].borderWidth = 2.1;
  303. meta.controller.removeHoverStyle(arc);
  304. expect(arc._model.backgroundColor).toBe('rgb(77, 79, 81)');
  305. expect(arc._model.borderColor).toBe('rgb(123, 125, 127)');
  306. expect(arc._model.borderWidth).toBe(2.1);
  307. // Custom style
  308. arc.custom = {
  309. borderWidth: 5.5,
  310. backgroundColor: 'rgb(0, 0, 0)',
  311. borderColor: 'rgb(10, 10, 10)'
  312. };
  313. meta.controller.removeHoverStyle(arc);
  314. expect(arc._model.backgroundColor).toBe('rgb(0, 0, 0)');
  315. expect(arc._model.borderColor).toBe('rgb(10, 10, 10)');
  316. expect(arc._model.borderWidth).toBe(5.5);
  317. });
  318. });