345 lines
9.9KB

  1. // Test the bar controller
  2. describe('Doughnut controller tests', function() {
  3. beforeEach(function() {
  4. window.addDefaultMatchers(jasmine);
  5. });
  6. afterEach(function() {
  7. window.releaseAllCharts();
  8. });
  9. it('should be constructed', function() {
  10. var chart = window.acquireChart({
  11. type: 'doughnut',
  12. data: {
  13. datasets: [{
  14. data: []
  15. }],
  16. labels: []
  17. }
  18. });
  19. var meta = chart.getDatasetMeta(0);
  20. expect(meta.type).toBe('doughnut');
  21. expect(meta.controller).not.toBe(undefined);
  22. expect(meta.controller.index).toBe(0);
  23. expect(meta.data).toEqual([]);
  24. meta.controller.updateIndex(1);
  25. expect(meta.controller.index).toBe(1);
  26. });
  27. it('should create arc elements for each data item during initialization', function() {
  28. var chart = window.acquireChart({
  29. type: 'doughnut',
  30. data: {
  31. datasets: [{
  32. data: [10, 15, 0, 4]
  33. }],
  34. labels: []
  35. }
  36. });
  37. var meta = chart.getDatasetMeta(0);
  38. expect(meta.data.length).toBe(4); // 4 rectangles 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 reset and update elements', function() {
  45. var chart = window.acquireChart({
  46. type: 'doughnut',
  47. data: {
  48. datasets: [{
  49. data: [1, 2, 3, 4],
  50. hidden: true
  51. }, {
  52. data: [5, 6, 0, 7]
  53. }, {
  54. data: [8, 9, 10, 11]
  55. }],
  56. labels: ['label0', 'label1', 'label2', 'label3']
  57. },
  58. options: {
  59. animation: {
  60. animateRotate: true,
  61. animateScale: false
  62. },
  63. cutoutPercentage: 50,
  64. rotation: Math.PI * -0.5,
  65. circumference: Math.PI * 2.0,
  66. elements: {
  67. arc: {
  68. backgroundColor: 'rgb(255, 0, 0)',
  69. borderColor: 'rgb(0, 0, 255)',
  70. borderWidth: 2
  71. }
  72. }
  73. }
  74. });
  75. var meta = chart.getDatasetMeta(1);
  76. meta.controller.reset(); // reset first
  77. expect(meta.data.length).toBe(4);
  78. [ { c: 0 },
  79. { c: 0 },
  80. { c: 0, },
  81. { c: 0 }
  82. ].forEach(function(expected, i) {
  83. expect(meta.data[i]._model.x).toBeCloseToPixel(256);
  84. expect(meta.data[i]._model.y).toBeCloseToPixel(272);
  85. expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(239);
  86. expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(179);
  87. expect(meta.data[i]._model.circumference).toBeCloseTo(expected.c, 8);
  88. expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
  89. startAngle: Math.PI * -0.5,
  90. endAngle: Math.PI * -0.5,
  91. label: chart.data.labels[i],
  92. backgroundColor: 'rgb(255, 0, 0)',
  93. borderColor: 'rgb(0, 0, 255)',
  94. borderWidth: 2
  95. }));
  96. })
  97. chart.update();
  98. [ { c: 1.7453292519, s: -1.5707963267, e: 0.1745329251 },
  99. { c: 2.0943951023, s: 0.1745329251, e: 2.2689280275 },
  100. { c: 0, s: 2.2689280275, e: 2.2689280275 },
  101. { c: 2.4434609527, s: 2.2689280275, e: 4.7123889803 }
  102. ].forEach(function(expected, i) {
  103. expect(meta.data[i]._model.x).toBeCloseToPixel(256);
  104. expect(meta.data[i]._model.y).toBeCloseToPixel(272);
  105. expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(239);
  106. expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(179);
  107. expect(meta.data[i]._model.circumference).toBeCloseTo(expected.c, 8);
  108. expect(meta.data[i]._model.startAngle).toBeCloseTo(expected.s, 8);
  109. expect(meta.data[i]._model.endAngle).toBeCloseTo(expected.e, 8);
  110. expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
  111. label: chart.data.labels[i],
  112. backgroundColor: 'rgb(255, 0, 0)',
  113. borderColor: 'rgb(0, 0, 255)',
  114. borderWidth: 2
  115. }));
  116. })
  117. // Change the amount of data and ensure that arcs are updated accordingly
  118. chart.data.datasets[1].data = [1, 2]; // remove 2 elements from dataset 0
  119. chart.update();
  120. expect(meta.data.length).toBe(2);
  121. expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
  122. expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
  123. // Add data
  124. chart.data.datasets[1].data = [1, 2, 3, 4];
  125. chart.update();
  126. expect(meta.data.length).toBe(4);
  127. expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
  128. expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
  129. expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true);
  130. expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true);
  131. });
  132. it ('should rotate and limit circumference', function() {
  133. var chart = window.acquireChart({
  134. type: 'doughnut',
  135. data: {
  136. datasets: [{
  137. data: [2, 4],
  138. hidden: true
  139. }, {
  140. data: [1, 3]
  141. }, {
  142. data: [1, 0]
  143. }],
  144. labels: ['label0', 'label1']
  145. },
  146. options: {
  147. cutoutPercentage: 50,
  148. rotation: Math.PI,
  149. circumference: Math.PI * 0.5,
  150. elements: {
  151. arc: {
  152. backgroundColor: 'rgb(255, 0, 0)',
  153. borderColor: 'rgb(0, 0, 255)',
  154. borderWidth: 2
  155. }
  156. }
  157. }
  158. });
  159. var meta = chart.getDatasetMeta(1);
  160. expect(meta.data.length).toBe(2);
  161. // Only startAngle, endAngle and circumference should be different.
  162. [ { c: Math.PI / 8, s: Math.PI, e: Math.PI + Math.PI / 8 },
  163. { c: 3 * Math.PI / 8, s: Math.PI + Math.PI / 8, e: Math.PI + Math.PI / 2 }
  164. ].forEach(function(expected, i) {
  165. expect(meta.data[i]._model.x).toBeCloseToPixel(495);
  166. expect(meta.data[i]._model.y).toBeCloseToPixel(511);
  167. expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(478);
  168. expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(359);
  169. expect(meta.data[i]._model.circumference).toBeCloseTo(expected.c,8);
  170. expect(meta.data[i]._model.startAngle).toBeCloseTo(expected.s, 8);
  171. expect(meta.data[i]._model.endAngle).toBeCloseTo(expected.e, 8);
  172. })
  173. });
  174. it ('should draw all arcs', function() {
  175. var chart = window.acquireChart({
  176. type: 'doughnut',
  177. data: {
  178. datasets: [{
  179. data: [10, 15, 0, 4]
  180. }],
  181. labels: ['label0', 'label1', 'label2', 'label3']
  182. }
  183. });
  184. var meta = chart.getDatasetMeta(0);
  185. spyOn(meta.data[0], 'draw');
  186. spyOn(meta.data[1], 'draw');
  187. spyOn(meta.data[2], 'draw');
  188. spyOn(meta.data[3], 'draw');
  189. chart.update();
  190. expect(meta.data[0].draw.calls.count()).toBe(1);
  191. expect(meta.data[1].draw.calls.count()).toBe(1);
  192. expect(meta.data[2].draw.calls.count()).toBe(1);
  193. expect(meta.data[3].draw.calls.count()).toBe(1);
  194. });
  195. it ('should set the hover style of an arc', function() {
  196. var chart = window.acquireChart({
  197. type: 'doughnut',
  198. data: {
  199. datasets: [{
  200. data: [10, 15, 0, 4]
  201. }],
  202. labels: ['label0', 'label1', 'label2', 'label3']
  203. },
  204. options: {
  205. elements: {
  206. arc: {
  207. backgroundColor: 'rgb(255, 0, 0)',
  208. borderColor: 'rgb(0, 0, 255)',
  209. borderWidth: 2,
  210. }
  211. }
  212. }
  213. });
  214. var meta = chart.getDatasetMeta(0);
  215. var arc = meta.data[0];
  216. meta.controller.setHoverStyle(arc);
  217. expect(arc._model.backgroundColor).toBe('rgb(230, 0, 0)');
  218. expect(arc._model.borderColor).toBe('rgb(0, 0, 230)');
  219. expect(arc._model.borderWidth).toBe(2);
  220. // Set a dataset style to take precedence
  221. chart.data.datasets[0].hoverBackgroundColor = 'rgb(9, 9, 9)';
  222. chart.data.datasets[0].hoverBorderColor = 'rgb(18, 18, 18)';
  223. chart.data.datasets[0].hoverBorderWidth = 1.56;
  224. meta.controller.setHoverStyle(arc);
  225. expect(arc._model.backgroundColor).toBe('rgb(9, 9, 9)');
  226. expect(arc._model.borderColor).toBe('rgb(18, 18, 18)');
  227. expect(arc._model.borderWidth).toBe(1.56);
  228. // Dataset styles can be an array
  229. chart.data.datasets[0].hoverBackgroundColor = ['rgb(255, 255, 255)', 'rgb(9, 9, 9)'];
  230. chart.data.datasets[0].hoverBorderColor = ['rgb(18, 18, 18)'];
  231. chart.data.datasets[0].hoverBorderWidth = [0.1, 1.56];
  232. meta.controller.setHoverStyle(arc);
  233. expect(arc._model.backgroundColor).toBe('rgb(255, 255, 255)');
  234. expect(arc._model.borderColor).toBe('rgb(18, 18, 18)');
  235. expect(arc._model.borderWidth).toBe(0.1);
  236. // Element custom styles also work
  237. arc.custom = {
  238. hoverBackgroundColor: 'rgb(7, 7, 7)',
  239. hoverBorderColor: 'rgb(17, 17, 17)',
  240. hoverBorderWidth: 3.14159,
  241. };
  242. meta.controller.setHoverStyle(arc);
  243. expect(arc._model.backgroundColor).toBe('rgb(7, 7, 7)');
  244. expect(arc._model.borderColor).toBe('rgb(17, 17, 17)');
  245. expect(arc._model.borderWidth).toBe(3.14159);
  246. });
  247. it ('should unset the hover style of an arc', function() {
  248. var chart = window.acquireChart({
  249. type: 'doughnut',
  250. data: {
  251. datasets: [{
  252. data: [10, 15, 0, 4]
  253. }],
  254. labels: ['label0', 'label1', 'label2', 'label3']
  255. },
  256. options: {
  257. elements: {
  258. arc: {
  259. backgroundColor: 'rgb(255, 0, 0)',
  260. borderColor: 'rgb(0, 0, 255)',
  261. borderWidth: 2,
  262. }
  263. }
  264. }
  265. });
  266. var meta = chart.getDatasetMeta(0);
  267. var arc = meta.data[0];
  268. meta.controller.removeHoverStyle(arc);
  269. expect(arc._model.backgroundColor).toBe('rgb(255, 0, 0)');
  270. expect(arc._model.borderColor).toBe('rgb(0, 0, 255)');
  271. expect(arc._model.borderWidth).toBe(2);
  272. // Set a dataset style to take precedence
  273. chart.data.datasets[0].backgroundColor = 'rgb(9, 9, 9)';
  274. chart.data.datasets[0].borderColor = 'rgb(18, 18, 18)';
  275. chart.data.datasets[0].borderWidth = 1.56;
  276. meta.controller.removeHoverStyle(arc);
  277. expect(arc._model.backgroundColor).toBe('rgb(9, 9, 9)');
  278. expect(arc._model.borderColor).toBe('rgb(18, 18, 18)');
  279. expect(arc._model.borderWidth).toBe(1.56);
  280. // Dataset styles can be an array
  281. chart.data.datasets[0].backgroundColor = ['rgb(255, 255, 255)', 'rgb(9, 9, 9)'];
  282. chart.data.datasets[0].borderColor = ['rgb(18, 18, 18)'];
  283. chart.data.datasets[0].borderWidth = [0.1, 1.56];
  284. meta.controller.removeHoverStyle(arc);
  285. expect(arc._model.backgroundColor).toBe('rgb(255, 255, 255)');
  286. expect(arc._model.borderColor).toBe('rgb(18, 18, 18)');
  287. expect(arc._model.borderWidth).toBe(0.1);
  288. // Element custom styles also work
  289. arc.custom = {
  290. backgroundColor: 'rgb(7, 7, 7)',
  291. borderColor: 'rgb(17, 17, 17)',
  292. borderWidth: 3.14159,
  293. };
  294. meta.controller.removeHoverStyle(arc);
  295. expect(arc._model.backgroundColor).toBe('rgb(7, 7, 7)');
  296. expect(arc._model.borderColor).toBe('rgb(17, 17, 17)');
  297. expect(arc._model.borderWidth).toBe(3.14159);
  298. });
  299. });