controller.polarArea.tests.js 10 KB

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