465 lines
14KB

  1. // Test the polar area controller
  2. describe('Radar 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: 'radar',
  12. data: {
  13. datasets: [{
  14. data: []
  15. }],
  16. labels: []
  17. }
  18. });
  19. var meta = chart.getDatasetMeta(0);
  20. expect(meta.type).toBe('radar');
  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: 'radar',
  30. data: {
  31. datasets: [{
  32. data: [10, 15, 0, 4]
  33. }],
  34. labels: ['label1', 'label2', 'label3', 'label4']
  35. }
  36. });
  37. var controller = new Chart.controllers.radar(chart, 0);
  38. var meta = chart.getDatasetMeta(0);
  39. expect(meta.dataset instanceof Chart.elements.Line).toBe(true); // line element
  40. expect(meta.data.length).toBe(4); // 4 points created
  41. expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
  42. expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
  43. expect(meta.data[2] instanceof Chart.elements.Point).toBe(true);
  44. expect(meta.data[3] instanceof Chart.elements.Point).toBe(true);
  45. });
  46. it('should draw all elements', function() {
  47. var chart = window.acquireChart({
  48. type: 'radar',
  49. data: {
  50. datasets: [{
  51. data: [10, 15, 0, 4]
  52. }],
  53. labels: ['label1', 'label2', 'label3', 'label4']
  54. }
  55. });
  56. var meta = chart.getDatasetMeta(0);
  57. spyOn(meta.dataset, 'draw');
  58. spyOn(meta.data[0], 'draw');
  59. spyOn(meta.data[1], 'draw');
  60. spyOn(meta.data[2], 'draw');
  61. spyOn(meta.data[3], 'draw');
  62. chart.update();
  63. expect(meta.dataset.draw.calls.count()).toBe(1);
  64. expect(meta.data[0].draw.calls.count()).toBe(1);
  65. expect(meta.data[1].draw.calls.count()).toBe(1);
  66. expect(meta.data[2].draw.calls.count()).toBe(1);
  67. expect(meta.data[3].draw.calls.count()).toBe(1);
  68. });
  69. it('should update elements', function() {
  70. var chart = window.acquireChart({
  71. type: 'radar',
  72. data: {
  73. datasets: [{
  74. data: [10, 15, 0, 4]
  75. }],
  76. labels: ['label1', 'label2', 'label3', 'label4']
  77. },
  78. options: {
  79. showLines: true,
  80. elements: {
  81. line: {
  82. backgroundColor: 'rgb(255, 0, 0)',
  83. borderCapStyle: 'round',
  84. borderColor: 'rgb(0, 255, 0)',
  85. borderDash: [],
  86. borderDashOffset: 0.1,
  87. borderJoinStyle: 'bevel',
  88. borderWidth: 1.2,
  89. fill: true,
  90. tension: 0.1,
  91. },
  92. point: {
  93. backgroundColor: Chart.defaults.global.defaultColor,
  94. borderWidth: 1,
  95. borderColor: Chart.defaults.global.defaultColor,
  96. hitRadius: 1,
  97. hoverRadius: 4,
  98. hoverBorderWidth: 1,
  99. radius: 3,
  100. pointStyle: 'circle'
  101. }
  102. }
  103. }
  104. });
  105. var meta = chart.getDatasetMeta(0);
  106. meta.controller.reset(); // reset first
  107. // Line element
  108. expect(meta.dataset._model.scaleTop).toBeCloseToPixel(32);
  109. expect(meta.dataset._model.scaleBottom).toBeCloseToPixel(512);
  110. expect(meta.dataset._model.scaleZero.x).toBeCloseToPixel(256);
  111. expect(meta.dataset._model.scaleZero.y).toBeCloseToPixel(272);
  112. expect(meta.dataset._model).toEqual(jasmine.objectContaining({
  113. backgroundColor: 'rgb(255, 0, 0)',
  114. borderCapStyle: 'round',
  115. borderColor: 'rgb(0, 255, 0)',
  116. borderDash: [],
  117. borderDashOffset: 0.1,
  118. borderJoinStyle: 'bevel',
  119. borderWidth: 1.2,
  120. fill: true,
  121. tension: 0.1,
  122. }));
  123. [
  124. { x: 256, y: 272, cppx: 256, cppy: 272, cpnx: 256, cpny: 272},
  125. { x: 256, y: 272, cppx: 256, cppy: 272, cpnx: 256, cpny: 272},
  126. { x: 256, y: 272, cppx: 256, cppy: 272, cpnx: 256, cpny: 272},
  127. { x: 256, y: 272, cppx: 256, cppy: 272, cpnx: 256, cpny: 272},
  128. ].forEach(function(expected, i) {
  129. expect(meta.data[i]._model.x).toBeCloseToPixel(expected.x);
  130. expect(meta.data[i]._model.y).toBeCloseToPixel(expected.y);
  131. expect(meta.data[i]._model.controlPointPreviousX).toBeCloseToPixel(expected.cppx);
  132. expect(meta.data[i]._model.controlPointPreviousY).toBeCloseToPixel(expected.cppy);
  133. expect(meta.data[i]._model.controlPointNextX).toBeCloseToPixel(expected.cpnx);
  134. expect(meta.data[i]._model.controlPointNextY).toBeCloseToPixel(expected.cpny);
  135. expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
  136. backgroundColor: Chart.defaults.global.defaultColor,
  137. borderWidth: 1,
  138. borderColor: Chart.defaults.global.defaultColor,
  139. hitRadius: 1,
  140. radius: 3,
  141. pointStyle: 'circle',
  142. skip: false,
  143. tension: 0.1,
  144. }));
  145. });
  146. // Now update controller and ensure proper updates
  147. meta.controller.update();
  148. [
  149. { x: 256, y: 133, cppx: 246, cppy: 133, cpnx: 272, cpny: 133 },
  150. { x: 464, y: 272, cppx: 464, cppy: 264, cpnx: 464, cpny: 278 },
  151. { x: 256, y: 272, cppx: 276.9, cppy: 272, cpnx: 250.4, cpny: 272 },
  152. { x: 200, y: 272, cppx: 200, cppy: 275, cpnx: 200, cpny: 261 },
  153. ].forEach(function(expected, i) {
  154. expect(meta.data[i]._model.x).toBeCloseToPixel(expected.x);
  155. expect(meta.data[i]._model.y).toBeCloseToPixel(expected.y);
  156. expect(meta.data[i]._model.controlPointPreviousX).toBeCloseToPixel(expected.cppx);
  157. expect(meta.data[i]._model.controlPointPreviousY).toBeCloseToPixel(expected.cppy);
  158. expect(meta.data[i]._model.controlPointNextX).toBeCloseToPixel(expected.cpnx);
  159. expect(meta.data[i]._model.controlPointNextY).toBeCloseToPixel(expected.cpny);
  160. expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
  161. backgroundColor: Chart.defaults.global.defaultColor,
  162. borderWidth: 1,
  163. borderColor: Chart.defaults.global.defaultColor,
  164. hitRadius: 1,
  165. radius: 3,
  166. pointStyle: 'circle',
  167. skip: false,
  168. tension: 0.1,
  169. }));
  170. });
  171. // Use dataset level styles for lines & points
  172. chart.data.datasets[0].tension = 0;
  173. chart.data.datasets[0].backgroundColor = 'rgb(98, 98, 98)';
  174. chart.data.datasets[0].borderColor = 'rgb(8, 8, 8)';
  175. chart.data.datasets[0].borderWidth = 0.55;
  176. chart.data.datasets[0].borderCapStyle = 'butt';
  177. chart.data.datasets[0].borderDash = [2, 3];
  178. chart.data.datasets[0].borderDashOffset = 7;
  179. chart.data.datasets[0].borderJoinStyle = 'miter';
  180. chart.data.datasets[0].fill = false;
  181. // point styles
  182. chart.data.datasets[0].pointRadius = 22;
  183. chart.data.datasets[0].hitRadius = 3.3;
  184. chart.data.datasets[0].pointBackgroundColor = 'rgb(128, 129, 130)';
  185. chart.data.datasets[0].pointBorderColor = 'rgb(56, 57, 58)';
  186. chart.data.datasets[0].pointBorderWidth = 1.123;
  187. meta.controller.update();
  188. expect(meta.dataset._model.scaleTop).toBeCloseToPixel(32);
  189. expect(meta.dataset._model.scaleBottom).toBeCloseToPixel(512);
  190. expect(meta.dataset._model.scaleZero.x).toBeCloseToPixel(256);
  191. expect(meta.dataset._model.scaleZero.y).toBeCloseToPixel(272);
  192. expect(meta.dataset._model).toEqual(jasmine.objectContaining({
  193. backgroundColor: 'rgb(98, 98, 98)',
  194. borderCapStyle: 'butt',
  195. borderColor: 'rgb(8, 8, 8)',
  196. borderDash: [2, 3],
  197. borderDashOffset: 7,
  198. borderJoinStyle: 'miter',
  199. borderWidth: 0.55,
  200. fill: false,
  201. tension: 0,
  202. }));
  203. // Since tension is now 0, we don't care about the control points
  204. [
  205. { x: 256, y: 133 },
  206. { x: 464, y: 272 },
  207. { x: 256, y: 272 },
  208. { x: 200, y: 272 },
  209. ].forEach(function(expected, i) {
  210. expect(meta.data[i]._model.x).toBeCloseToPixel(expected.x);
  211. expect(meta.data[i]._model.y).toBeCloseToPixel(expected.y);
  212. expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
  213. backgroundColor: 'rgb(128, 129, 130)',
  214. borderWidth: 1.123,
  215. borderColor: 'rgb(56, 57, 58)',
  216. hitRadius: 3.3,
  217. radius: 22,
  218. pointStyle: 'circle',
  219. skip: false,
  220. tension: 0,
  221. }));
  222. });
  223. // Use custom styles for lines & first point
  224. meta.dataset.custom = {
  225. tension: 0.25,
  226. backgroundColor: 'rgb(55, 55, 54)',
  227. borderColor: 'rgb(8, 7, 6)',
  228. borderWidth: 0.3,
  229. borderCapStyle: 'square',
  230. borderDash: [4, 3],
  231. borderDashOffset: 4.4,
  232. borderJoinStyle: 'round',
  233. fill: true,
  234. };
  235. // point styles
  236. meta.data[0].custom = {
  237. radius: 2.2,
  238. backgroundColor: 'rgb(0, 1, 3)',
  239. borderColor: 'rgb(4, 6, 8)',
  240. borderWidth: 0.787,
  241. tension: 0.15,
  242. skip: true,
  243. hitRadius: 5,
  244. };
  245. meta.controller.update();
  246. expect(meta.dataset._model.scaleTop).toBeCloseToPixel(32);
  247. expect(meta.dataset._model.scaleBottom).toBeCloseToPixel(512);
  248. expect(meta.dataset._model.scaleZero.x).toBeCloseToPixel(256);
  249. expect(meta.dataset._model.scaleZero.y).toBeCloseToPixel(272);
  250. expect(meta.dataset._model).toEqual(jasmine.objectContaining({
  251. backgroundColor: 'rgb(55, 55, 54)',
  252. borderCapStyle: 'square',
  253. borderColor: 'rgb(8, 7, 6)',
  254. borderDash: [4, 3],
  255. borderDashOffset: 4.4,
  256. borderJoinStyle: 'round',
  257. borderWidth: 0.3,
  258. fill: true,
  259. tension: 0.25,
  260. }));
  261. expect(meta.data[0]._model.x).toBeCloseToPixel(256);
  262. expect(meta.data[0]._model.y).toBeCloseToPixel(133);
  263. expect(meta.data[0]._model.controlPointPreviousX).toBeCloseToPixel(241);
  264. expect(meta.data[0]._model.controlPointPreviousY).toBeCloseToPixel(133);
  265. expect(meta.data[0]._model.controlPointNextX).toBeCloseToPixel(281);
  266. expect(meta.data[0]._model.controlPointNextY).toBeCloseToPixel(133);
  267. expect(meta.data[0]._model).toEqual(jasmine.objectContaining({
  268. radius: 2.2,
  269. backgroundColor: 'rgb(0, 1, 3)',
  270. borderColor: 'rgb(4, 6, 8)',
  271. borderWidth: 0.787,
  272. tension: 0.15,
  273. skip: true,
  274. hitRadius: 5,
  275. }));
  276. });
  277. it('should set point hover styles', function() {
  278. var chart = window.acquireChart({
  279. type: 'radar',
  280. data: {
  281. datasets: [{
  282. data: [10, 15, 0, 4]
  283. }],
  284. labels: ['label1', 'label2', 'label3', 'label4']
  285. },
  286. options: {
  287. showLines: true,
  288. elements: {
  289. line: {
  290. backgroundColor: 'rgb(255, 0, 0)',
  291. borderCapStyle: 'round',
  292. borderColor: 'rgb(0, 255, 0)',
  293. borderDash: [],
  294. borderDashOffset: 0.1,
  295. borderJoinStyle: 'bevel',
  296. borderWidth: 1.2,
  297. fill: true,
  298. skipNull: true,
  299. tension: 0.1,
  300. },
  301. point: {
  302. backgroundColor: 'rgb(255, 255, 0)',
  303. borderWidth: 1,
  304. borderColor: 'rgb(255, 255, 255)',
  305. hitRadius: 1,
  306. hoverRadius: 4,
  307. hoverBorderWidth: 1,
  308. radius: 3,
  309. }
  310. }
  311. }
  312. });
  313. var meta = chart.getDatasetMeta(0);
  314. meta.controller.update(); // reset first
  315. var point = meta.data[0];
  316. meta.controller.setHoverStyle(point);
  317. expect(point._model.backgroundColor).toBe('rgb(229, 230, 0)');
  318. expect(point._model.borderColor).toBe('rgb(230, 230, 230)');
  319. expect(point._model.borderWidth).toBe(1);
  320. expect(point._model.radius).toBe(4);
  321. // Can set hover style per dataset
  322. chart.data.datasets[0].pointHoverRadius = 3.3;
  323. chart.data.datasets[0].pointHoverBackgroundColor = 'rgb(77, 79, 81)';
  324. chart.data.datasets[0].pointHoverBorderColor = 'rgb(123, 125, 127)';
  325. chart.data.datasets[0].pointHoverBorderWidth = 2.1;
  326. meta.controller.setHoverStyle(point);
  327. expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)');
  328. expect(point._model.borderColor).toBe('rgb(123, 125, 127)');
  329. expect(point._model.borderWidth).toBe(2.1);
  330. expect(point._model.radius).toBe(3.3);
  331. // Custom style
  332. point.custom = {
  333. hoverRadius: 4.4,
  334. hoverBorderWidth: 5.5,
  335. hoverBackgroundColor: 'rgb(0, 0, 0)',
  336. hoverBorderColor: 'rgb(10, 10, 10)'
  337. };
  338. meta.controller.setHoverStyle(point);
  339. expect(point._model.backgroundColor).toBe('rgb(0, 0, 0)');
  340. expect(point._model.borderColor).toBe('rgb(10, 10, 10)');
  341. expect(point._model.borderWidth).toBe(5.5);
  342. expect(point._model.radius).toBe(4.4);
  343. });
  344. it('should remove hover styles', function() {
  345. var chart = window.acquireChart({
  346. type: 'radar',
  347. data: {
  348. datasets: [{
  349. data: [10, 15, 0, 4]
  350. }],
  351. labels: ['label1', 'label2', 'label3', 'label4']
  352. },
  353. options: {
  354. showLines: true,
  355. elements: {
  356. line: {
  357. backgroundColor: 'rgb(255, 0, 0)',
  358. borderCapStyle: 'round',
  359. borderColor: 'rgb(0, 255, 0)',
  360. borderDash: [],
  361. borderDashOffset: 0.1,
  362. borderJoinStyle: 'bevel',
  363. borderWidth: 1.2,
  364. fill: true,
  365. skipNull: true,
  366. tension: 0.1,
  367. },
  368. point: {
  369. backgroundColor: 'rgb(255, 255, 0)',
  370. borderWidth: 1,
  371. borderColor: 'rgb(255, 255, 255)',
  372. hitRadius: 1,
  373. hoverRadius: 4,
  374. hoverBorderWidth: 1,
  375. radius: 3,
  376. }
  377. }
  378. }
  379. });
  380. var meta = chart.getDatasetMeta(0);
  381. meta.controller.update(); // reset first
  382. var point = meta.data[0];
  383. chart.options.elements.point.backgroundColor = 'rgb(45, 46, 47)';
  384. chart.options.elements.point.borderColor = 'rgb(50, 51, 52)';
  385. chart.options.elements.point.borderWidth = 10.1;
  386. chart.options.elements.point.radius = 1.01;
  387. meta.controller.removeHoverStyle(point);
  388. expect(point._model.backgroundColor).toBe('rgb(45, 46, 47)');
  389. expect(point._model.borderColor).toBe('rgb(50, 51, 52)');
  390. expect(point._model.borderWidth).toBe(10.1);
  391. expect(point._model.radius).toBe(1.01);
  392. // Can set hover style per dataset
  393. chart.data.datasets[0].radius = 3.3;
  394. chart.data.datasets[0].pointBackgroundColor = 'rgb(77, 79, 81)';
  395. chart.data.datasets[0].pointBorderColor = 'rgb(123, 125, 127)';
  396. chart.data.datasets[0].pointBorderWidth = 2.1;
  397. meta.controller.removeHoverStyle(point);
  398. expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)');
  399. expect(point._model.borderColor).toBe('rgb(123, 125, 127)');
  400. expect(point._model.borderWidth).toBe(2.1);
  401. expect(point._model.radius).toBe(3.3);
  402. // Custom style
  403. point.custom = {
  404. radius: 4.4,
  405. borderWidth: 5.5,
  406. backgroundColor: 'rgb(0, 0, 0)',
  407. borderColor: 'rgb(10, 10, 10)'
  408. };
  409. meta.controller.removeHoverStyle(point);
  410. expect(point._model.backgroundColor).toBe('rgb(0, 0, 0)');
  411. expect(point._model.borderColor).toBe('rgb(10, 10, 10)');
  412. expect(point._model.borderWidth).toBe(5.5);
  413. expect(point._model.radius).toBe(4.4);
  414. });
  415. });