Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

controller.polarArea.tests.js 8.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. // Test the polar area controller
  2. describe('Polar area 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: 'polarArea',
  12. data: {
  13. datasets: [
  14. { data: [] },
  15. { data: [] }
  16. ],
  17. labels: []
  18. }
  19. });
  20. var meta = chart.getDatasetMeta(1);
  21. expect(meta.type).toEqual('polarArea');
  22. expect(meta.data).toEqual([]);
  23. expect(meta.hidden).toBe(null);
  24. expect(meta.controller).not.toBe(undefined);
  25. expect(meta.controller.index).toBe(1);
  26. meta.controller.updateIndex(0);
  27. expect(meta.controller.index).toBe(0);
  28. });
  29. it('should create arc elements for each data item during initialization', function() {
  30. var chart = window.acquireChart({
  31. type: 'polarArea',
  32. data: {
  33. datasets: [
  34. { data: [] },
  35. { data: [10, 15, 0, -4] }
  36. ],
  37. labels: []
  38. }
  39. });
  40. var meta = chart.getDatasetMeta(1);
  41. expect(meta.data.length).toBe(4); // 4 arcs created
  42. expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
  43. expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
  44. expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true);
  45. expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true);
  46. });
  47. it('should draw all elements', function() {
  48. var chart = window.acquireChart({
  49. type: 'polarArea',
  50. data: {
  51. datasets: [{
  52. data: [10, 15, 0, -4],
  53. label: 'dataset2'
  54. }],
  55. labels: ['label1', 'label2', 'label3', 'label4']
  56. }
  57. });
  58. var meta = chart.getDatasetMeta(0);
  59. spyOn(meta.data[0], 'draw');
  60. spyOn(meta.data[1], 'draw');
  61. spyOn(meta.data[2], 'draw');
  62. spyOn(meta.data[3], 'draw');
  63. chart.update();
  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 when modifying data', function() {
  70. var chart = window.acquireChart({
  71. type: 'polarArea',
  72. data: {
  73. datasets: [{
  74. data: [10, 15, 0, -4],
  75. label: 'dataset2'
  76. }],
  77. labels: ['label1', 'label2', 'label3', 'label4']
  78. },
  79. options: {
  80. showLines: true,
  81. elements: {
  82. arc: {
  83. backgroundColor: 'rgb(255, 0, 0)',
  84. borderColor: 'rgb(0, 255, 0)',
  85. borderWidth: 1.2
  86. }
  87. }
  88. }
  89. });
  90. var meta = chart.getDatasetMeta(0);
  91. expect(meta.data.length).toBe(4);
  92. [ { o: 156, s: -0.5 * Math.PI, e: 0 },
  93. { o: 211, s: 0, e: 0.5 * Math.PI },
  94. { o: 45, 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(272);
  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(272);
  129. expect(meta.data[0]._model.innerRadius).toBeCloseToPixel(0);
  130. expect(meta.data[0]._model.outerRadius).toBeCloseToPixel(156);
  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 handle number of data point changes in update', 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. elements: {
  153. arc: {
  154. backgroundColor: 'rgb(255, 0, 0)',
  155. borderColor: 'rgb(0, 255, 0)',
  156. borderWidth: 1.2
  157. }
  158. }
  159. }
  160. });
  161. var meta = chart.getDatasetMeta(0);
  162. expect(meta.data.length).toBe(4);
  163. // remove 2 items
  164. chart.data.labels = ['label1', 'label2'];
  165. chart.data.datasets[0].data = [1, 2];
  166. chart.update();
  167. expect(meta.data.length).toBe(2);
  168. expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
  169. expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
  170. // add 3 items
  171. chart.data.labels = ['label1', 'label2', 'label3', 'label4', 'label5'];
  172. chart.data.datasets[0].data = [1, 2, 3, 4, 5];
  173. chart.update();
  174. expect(meta.data.length).toBe(5);
  175. expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
  176. expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
  177. expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true);
  178. expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true);
  179. expect(meta.data[4] instanceof Chart.elements.Arc).toBe(true);
  180. });
  181. it('should set arc hover styles', function() {
  182. var chart = window.acquireChart({
  183. type: 'polarArea',
  184. data: {
  185. datasets: [{
  186. data: [10, 15, 0, -4],
  187. label: 'dataset2'
  188. }],
  189. labels: ['label1', 'label2', 'label3', 'label4']
  190. },
  191. options: {
  192. showLines: true,
  193. elements: {
  194. arc: {
  195. backgroundColor: 'rgb(255, 0, 0)',
  196. borderColor: 'rgb(0, 255, 0)',
  197. borderWidth: 1.2
  198. }
  199. }
  200. }
  201. });
  202. var meta = chart.getDatasetMeta(0);
  203. var arc = meta.data[0];
  204. meta.controller.setHoverStyle(arc);
  205. expect(arc._model.backgroundColor).toBe('rgb(230, 0, 0)');
  206. expect(arc._model.borderColor).toBe('rgb(0, 230, 0)');
  207. expect(arc._model.borderWidth).toBe(1.2);
  208. // Can set hover style per dataset
  209. chart.data.datasets[0].hoverBackgroundColor = 'rgb(77, 79, 81)';
  210. chart.data.datasets[0].hoverBorderColor = 'rgb(123, 125, 127)';
  211. chart.data.datasets[0].hoverBorderWidth = 2.1;
  212. meta.controller.setHoverStyle(arc);
  213. expect(arc._model.backgroundColor).toBe('rgb(77, 79, 81)');
  214. expect(arc._model.borderColor).toBe('rgb(123, 125, 127)');
  215. expect(arc._model.borderWidth).toBe(2.1);
  216. // Custom style
  217. arc.custom = {
  218. hoverBorderWidth: 5.5,
  219. hoverBackgroundColor: 'rgb(0, 0, 0)',
  220. hoverBorderColor: 'rgb(10, 10, 10)'
  221. };
  222. meta.controller.setHoverStyle(arc);
  223. expect(arc._model.backgroundColor).toBe('rgb(0, 0, 0)');
  224. expect(arc._model.borderColor).toBe('rgb(10, 10, 10)');
  225. expect(arc._model.borderWidth).toBe(5.5);
  226. });
  227. it('should remove hover styles', function() {
  228. var chart = window.acquireChart({
  229. type: 'polarArea',
  230. data: {
  231. datasets: [{
  232. data: [10, 15, 0, -4],
  233. label: 'dataset2'
  234. }],
  235. labels: ['label1', 'label2', 'label3', 'label4']
  236. },
  237. options: {
  238. showLines: true,
  239. elements: {
  240. arc: {
  241. backgroundColor: 'rgb(255, 0, 0)',
  242. borderColor: 'rgb(0, 255, 0)',
  243. borderWidth: 1.2
  244. }
  245. }
  246. }
  247. });
  248. var meta = chart.getDatasetMeta(0);
  249. var arc = meta.data[0];
  250. chart.options.elements.arc.backgroundColor = 'rgb(45, 46, 47)';
  251. chart.options.elements.arc.borderColor = 'rgb(50, 51, 52)';
  252. chart.options.elements.arc.borderWidth = 10.1;
  253. meta.controller.removeHoverStyle(arc);
  254. expect(arc._model.backgroundColor).toBe('rgb(45, 46, 47)');
  255. expect(arc._model.borderColor).toBe('rgb(50, 51, 52)');
  256. expect(arc._model.borderWidth).toBe(10.1);
  257. // Can set hover style per dataset
  258. chart.data.datasets[0].backgroundColor = 'rgb(77, 79, 81)';
  259. chart.data.datasets[0].borderColor = 'rgb(123, 125, 127)';
  260. chart.data.datasets[0].borderWidth = 2.1;
  261. meta.controller.removeHoverStyle(arc);
  262. expect(arc._model.backgroundColor).toBe('rgb(77, 79, 81)');
  263. expect(arc._model.borderColor).toBe('rgb(123, 125, 127)');
  264. expect(arc._model.borderWidth).toBe(2.1);
  265. // Custom style
  266. arc.custom = {
  267. borderWidth: 5.5,
  268. backgroundColor: 'rgb(0, 0, 0)',
  269. borderColor: 'rgb(10, 10, 10)'
  270. };
  271. meta.controller.removeHoverStyle(arc);
  272. expect(arc._model.backgroundColor).toBe('rgb(0, 0, 0)');
  273. expect(arc._model.borderColor).toBe('rgb(10, 10, 10)');
  274. expect(arc._model.borderWidth).toBe(5.5);
  275. });
  276. });