Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

441 lines
9.7KB

  1. // Test the bubble controller
  2. describe('Bubble 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: 'bubble',
  12. data: {
  13. datasets: [{
  14. data: []
  15. }]
  16. }
  17. });
  18. var meta = chart.getDatasetMeta(0);
  19. expect(meta.type).toBe('bubble');
  20. expect(meta.controller).not.toBe(undefined);
  21. expect(meta.controller.index).toBe(0);
  22. expect(meta.data).toEqual([]);
  23. meta.controller.updateIndex(1);
  24. expect(meta.controller.index).toBe(1);
  25. });
  26. it('should use the first scale IDs if the dataset does not specify them', function() {
  27. var chart = window.acquireChart({
  28. type: 'bubble',
  29. data: {
  30. datasets: [{
  31. data: []
  32. }]
  33. },
  34. options: {
  35. scales: {
  36. xAxes: [{
  37. id: 'firstXScaleID'
  38. }],
  39. yAxes: [{
  40. id: 'firstYScaleID'
  41. }]
  42. }
  43. }
  44. });
  45. var meta = chart.getDatasetMeta(0);
  46. expect(meta.xAxisID).toBe('firstXScaleID');
  47. expect(meta.yAxisID).toBe('firstYScaleID');
  48. });
  49. it('should create point elements for each data item during initialization', function() {
  50. var chart = window.acquireChart({
  51. type: 'bubble',
  52. data: {
  53. datasets: [{
  54. data: [10, 15, 0, -4]
  55. }]
  56. }
  57. });
  58. var meta = chart.getDatasetMeta(0);
  59. expect(meta.data.length).toBe(4); // 4 points created
  60. expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
  61. expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
  62. expect(meta.data[2] instanceof Chart.elements.Point).toBe(true);
  63. expect(meta.data[3] instanceof Chart.elements.Point).toBe(true);
  64. });
  65. it('should draw all elements', function() {
  66. var chart = window.acquireChart({
  67. type: 'bubble',
  68. data: {
  69. datasets: [{
  70. data: [10, 15, 0, -4]
  71. }]
  72. },
  73. options: {
  74. animation: false,
  75. showLines: true
  76. }
  77. });
  78. var meta = chart.getDatasetMeta(0);
  79. spyOn(meta.data[0], 'draw');
  80. spyOn(meta.data[1], 'draw');
  81. spyOn(meta.data[2], 'draw');
  82. spyOn(meta.data[3], 'draw');
  83. chart.update();
  84. expect(meta.data[0].draw.calls.count()).toBe(1);
  85. expect(meta.data[1].draw.calls.count()).toBe(1);
  86. expect(meta.data[2].draw.calls.count()).toBe(1);
  87. expect(meta.data[3].draw.calls.count()).toBe(1);
  88. });
  89. it('should update elements when modifying style', function() {
  90. var chart = window.acquireChart({
  91. type: 'bubble',
  92. data: {
  93. datasets: [{
  94. data: [{
  95. x: 10,
  96. y: 10,
  97. r: 5
  98. }, {
  99. x: -15,
  100. y: -10,
  101. r: 1
  102. }, {
  103. x: 0,
  104. y: -9,
  105. r: 2
  106. }, {
  107. x: -4,
  108. y: 10,
  109. r: 1
  110. }]
  111. }],
  112. labels: ['label1', 'label2', 'label3', 'label4']
  113. },
  114. options: {
  115. scales: {
  116. xAxes: [{
  117. type: 'category'
  118. }],
  119. yAxes: [{
  120. type: 'linear'
  121. }]
  122. }
  123. }
  124. });
  125. var meta = chart.getDatasetMeta(0);
  126. [ { r: 5, x: 38, y: 32 },
  127. { r: 1, x: 189, y: 484 },
  128. { r: 2, x: 341, y: 461 },
  129. { r: 1, x: 492, y: 32 }
  130. ].forEach(function(expected, i) {
  131. expect(meta.data[i]._model.radius).toBe(expected.r);
  132. expect(meta.data[i]._model.x).toBeCloseToPixel(expected.x);
  133. expect(meta.data[i]._model.y).toBeCloseToPixel(expected.y);
  134. expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
  135. backgroundColor: Chart.defaults.global.defaultColor,
  136. borderColor: Chart.defaults.global.defaultColor,
  137. borderWidth: 1,
  138. hitRadius: 1,
  139. skip: false
  140. }));
  141. });
  142. // Use dataset level styles for lines & points
  143. chart.data.datasets[0].backgroundColor = 'rgb(98, 98, 98)';
  144. chart.data.datasets[0].borderColor = 'rgb(8, 8, 8)';
  145. chart.data.datasets[0].borderWidth = 0.55;
  146. // point styles
  147. chart.data.datasets[0].radius = 22;
  148. chart.data.datasets[0].hitRadius = 3.3;
  149. chart.update();
  150. for (var i=0; i<4; ++i) {
  151. expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
  152. backgroundColor: 'rgb(98, 98, 98)',
  153. borderColor: 'rgb(8, 8, 8)',
  154. borderWidth: 0.55,
  155. hitRadius: 3.3,
  156. skip: false
  157. }));
  158. }
  159. // point styles
  160. meta.data[0].custom = {
  161. radius: 2.2,
  162. backgroundColor: 'rgb(0, 1, 3)',
  163. borderColor: 'rgb(4, 6, 8)',
  164. borderWidth: 0.787,
  165. tension: 0.15,
  166. hitRadius: 5,
  167. skip: true
  168. };
  169. chart.update();
  170. expect(meta.data[0]._model).toEqual(jasmine.objectContaining({
  171. backgroundColor: 'rgb(0, 1, 3)',
  172. borderColor: 'rgb(4, 6, 8)',
  173. borderWidth: 0.787,
  174. hitRadius: 5,
  175. skip: true
  176. }));
  177. });
  178. it('should handle number of data point changes in update', function() {
  179. var chart = window.acquireChart({
  180. type: 'bubble',
  181. data: {
  182. datasets: [{
  183. data: [{
  184. x: 10,
  185. y: 10,
  186. r: 5
  187. }, {
  188. x: -15,
  189. y: -10,
  190. r: 1
  191. }, {
  192. x: 0,
  193. y: -9,
  194. r: 2
  195. }, {
  196. x: -4,
  197. y: 10,
  198. r: 1
  199. }]
  200. }],
  201. labels: ['label1', 'label2', 'label3', 'label4']
  202. }
  203. });
  204. var meta = chart.getDatasetMeta(0);
  205. expect(meta.data.length).toBe(4);
  206. chart.data.datasets[0].data = [{
  207. x: 1,
  208. y: 1,
  209. r: 10
  210. }, {
  211. x: 10,
  212. y: 5,
  213. r: 2
  214. }]; // remove 2 items
  215. chart.update();
  216. expect(meta.data.length).toBe(2);
  217. expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
  218. expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
  219. chart.data.datasets[0].data = [{
  220. x: 10,
  221. y: 10,
  222. r: 5
  223. }, {
  224. x: -15,
  225. y: -10,
  226. r: 1
  227. }, {
  228. x: 0,
  229. y: -9,
  230. r: 2
  231. }, {
  232. x: -4,
  233. y: 10,
  234. r: 1
  235. }, {
  236. x: -5,
  237. y: 0,
  238. r: 3
  239. }]; // add 3 items
  240. chart.update();
  241. expect(meta.data.length).toBe(5);
  242. expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
  243. expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
  244. expect(meta.data[2] instanceof Chart.elements.Point).toBe(true);
  245. expect(meta.data[3] instanceof Chart.elements.Point).toBe(true);
  246. expect(meta.data[4] instanceof Chart.elements.Point).toBe(true);
  247. });
  248. it('should set hover styles', function() {
  249. var chart = window.acquireChart({
  250. type: 'bubble',
  251. data: {
  252. datasets: [{
  253. data: [{
  254. x: 10,
  255. y: 10,
  256. r: 5
  257. }, {
  258. x: -15,
  259. y: -10,
  260. r: 1
  261. }, {
  262. x: 0,
  263. y: -9,
  264. r: 2
  265. }, {
  266. x: -4,
  267. y: 10,
  268. r: 1
  269. }]
  270. }],
  271. labels: ['label1', 'label2', 'label3', 'label4']
  272. },
  273. options: {
  274. elements: {
  275. point: {
  276. backgroundColor: 'rgb(255, 255, 0)',
  277. borderWidth: 1,
  278. borderColor: 'rgb(255, 255, 255)',
  279. hitRadius: 1,
  280. hoverRadius: 4,
  281. hoverBorderWidth: 1,
  282. radius: 3
  283. }
  284. }
  285. }
  286. });
  287. var meta = chart.getDatasetMeta(0);
  288. var point = meta.data[0];
  289. meta.controller.setHoverStyle(point);
  290. expect(point._model.backgroundColor).toBe('rgb(229, 230, 0)');
  291. expect(point._model.borderColor).toBe('rgb(230, 230, 230)');
  292. expect(point._model.borderWidth).toBe(1);
  293. expect(point._model.radius).toBe(9);
  294. // Can set hover style per dataset
  295. chart.data.datasets[0].hoverRadius = 3.3;
  296. chart.data.datasets[0].hoverBackgroundColor = 'rgb(77, 79, 81)';
  297. chart.data.datasets[0].hoverBorderColor = 'rgb(123, 125, 127)';
  298. chart.data.datasets[0].hoverBorderWidth = 2.1;
  299. meta.controller.setHoverStyle(point);
  300. expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)');
  301. expect(point._model.borderColor).toBe('rgb(123, 125, 127)');
  302. expect(point._model.borderWidth).toBe(2.1);
  303. expect(point._model.radius).toBe(8.3);
  304. // Custom style
  305. point.custom = {
  306. hoverRadius: 4.4,
  307. hoverBorderWidth: 5.5,
  308. hoverBackgroundColor: 'rgb(0, 0, 0)',
  309. hoverBorderColor: 'rgb(10, 10, 10)'
  310. };
  311. meta.controller.setHoverStyle(point);
  312. expect(point._model.backgroundColor).toBe('rgb(0, 0, 0)');
  313. expect(point._model.borderColor).toBe('rgb(10, 10, 10)');
  314. expect(point._model.borderWidth).toBe(5.5);
  315. expect(point._model.radius).toBe(4.4);
  316. });
  317. it('should remove hover styles', function() {
  318. var chart = window.acquireChart({
  319. type: 'bubble',
  320. data: {
  321. datasets: [{
  322. data: [{
  323. x: 10,
  324. y: 10,
  325. r: 5
  326. }, {
  327. x: -15,
  328. y: -10,
  329. r: 1
  330. }, {
  331. x: 0,
  332. y: -9,
  333. r: 2
  334. }, {
  335. x: -4,
  336. y: 10,
  337. r: 1
  338. }]
  339. }],
  340. labels: ['label1', 'label2', 'label3', 'label4']
  341. },
  342. options: {
  343. elements: {
  344. point: {
  345. backgroundColor: 'rgb(255, 255, 0)',
  346. borderWidth: 1,
  347. borderColor: 'rgb(255, 255, 255)',
  348. hitRadius: 1,
  349. hoverRadius: 4,
  350. hoverBorderWidth: 1,
  351. radius: 3
  352. }
  353. }
  354. }
  355. });
  356. var meta = chart.getDatasetMeta(0);
  357. var point = meta.data[0];
  358. chart.options.elements.point.backgroundColor = 'rgb(45, 46, 47)';
  359. chart.options.elements.point.borderColor = 'rgb(50, 51, 52)';
  360. chart.options.elements.point.borderWidth = 10.1;
  361. chart.options.elements.point.radius = 1.01;
  362. meta.controller.removeHoverStyle(point);
  363. expect(point._model.backgroundColor).toBe('rgb(45, 46, 47)');
  364. expect(point._model.borderColor).toBe('rgb(50, 51, 52)');
  365. expect(point._model.borderWidth).toBe(10.1);
  366. expect(point._model.radius).toBe(5);
  367. // Can set hover style per dataset
  368. chart.data.datasets[0].radius = 3.3;
  369. chart.data.datasets[0].backgroundColor = 'rgb(77, 79, 81)';
  370. chart.data.datasets[0].borderColor = 'rgb(123, 125, 127)';
  371. chart.data.datasets[0].borderWidth = 2.1;
  372. meta.controller.removeHoverStyle(point);
  373. expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)');
  374. expect(point._model.borderColor).toBe('rgb(123, 125, 127)');
  375. expect(point._model.borderWidth).toBe(2.1);
  376. expect(point._model.radius).toBe(5);
  377. // Custom style
  378. point.custom = {
  379. radius: 4.4,
  380. borderWidth: 5.5,
  381. backgroundColor: 'rgb(0, 0, 0)',
  382. borderColor: 'rgb(10, 10, 10)'
  383. };
  384. meta.controller.removeHoverStyle(point);
  385. expect(point._model.backgroundColor).toBe('rgb(0, 0, 0)');
  386. expect(point._model.borderColor).toBe('rgb(10, 10, 10)');
  387. expect(point._model.borderWidth).toBe(5.5);
  388. expect(point._model.radius).toBe(4.4);
  389. });
  390. });