controller.line.tests.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938
  1. describe('Chart.controllers.line', function() {
  2. describe('auto', jasmine.fixture.specs('controller.line'));
  3. it('should be registered as dataset controller', function() {
  4. expect(typeof Chart.controllers.line).toBe('function');
  5. });
  6. it('should be constructed', function() {
  7. var chart = window.acquireChart({
  8. type: 'line',
  9. data: {
  10. datasets: [{
  11. data: []
  12. }],
  13. labels: []
  14. }
  15. });
  16. var meta = chart.getDatasetMeta(0);
  17. expect(meta.type).toBe('line');
  18. expect(meta.controller).not.toBe(undefined);
  19. expect(meta.controller.index).toBe(0);
  20. expect(meta.data).toEqual([]);
  21. meta.controller.updateIndex(1);
  22. expect(meta.controller.index).toBe(1);
  23. });
  24. it('Should use the first scale IDs if the dataset does not specify them', function() {
  25. var chart = window.acquireChart({
  26. type: 'line',
  27. data: {
  28. datasets: [{
  29. data: []
  30. }],
  31. labels: []
  32. },
  33. options: {
  34. scales: {
  35. xAxes: [{
  36. id: 'firstXScaleID'
  37. }],
  38. yAxes: [{
  39. id: 'firstYScaleID'
  40. }]
  41. }
  42. }
  43. });
  44. var meta = chart.getDatasetMeta(0);
  45. expect(meta.xAxisID).toBe('firstXScaleID');
  46. expect(meta.yAxisID).toBe('firstYScaleID');
  47. });
  48. it('Should create line elements and point elements for each data item during initialization', function() {
  49. var chart = window.acquireChart({
  50. type: 'line',
  51. data: {
  52. datasets: [{
  53. data: [10, 15, 0, -4],
  54. label: 'dataset1'
  55. }],
  56. labels: ['label1', 'label2', 'label3', 'label4']
  57. }
  58. });
  59. var meta = chart.getDatasetMeta(0);
  60. expect(meta.data.length).toBe(4); // 4 points created
  61. expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
  62. expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
  63. expect(meta.data[2] instanceof Chart.elements.Point).toBe(true);
  64. expect(meta.data[3] instanceof Chart.elements.Point).toBe(true);
  65. expect(meta.dataset instanceof Chart.elements.Line).toBe(true); // 1 line element
  66. });
  67. it('should draw all elements', function() {
  68. var chart = window.acquireChart({
  69. type: 'line',
  70. data: {
  71. datasets: [{
  72. data: [10, 15, 0, -4],
  73. label: 'dataset1'
  74. }],
  75. labels: ['label1', 'label2', 'label3', 'label4']
  76. },
  77. options: {
  78. showLines: true
  79. }
  80. });
  81. var meta = chart.getDatasetMeta(0);
  82. spyOn(meta.dataset, 'draw');
  83. spyOn(meta.data[0], 'draw');
  84. spyOn(meta.data[1], 'draw');
  85. spyOn(meta.data[2], 'draw');
  86. spyOn(meta.data[3], 'draw');
  87. chart.update();
  88. expect(meta.data[0].draw.calls.count()).toBe(1);
  89. expect(meta.data[1].draw.calls.count()).toBe(1);
  90. expect(meta.data[2].draw.calls.count()).toBe(1);
  91. expect(meta.data[3].draw.calls.count()).toBe(1);
  92. });
  93. it('should draw all elements except lines', function() {
  94. var chart = window.acquireChart({
  95. type: 'line',
  96. data: {
  97. datasets: [{
  98. data: [10, 15, 0, -4],
  99. label: 'dataset1'
  100. }],
  101. labels: ['label1', 'label2', 'label3', 'label4']
  102. },
  103. options: {
  104. showLines: false
  105. }
  106. });
  107. var meta = chart.getDatasetMeta(0);
  108. spyOn(meta.dataset, 'draw');
  109. spyOn(meta.data[0], 'draw');
  110. spyOn(meta.data[1], 'draw');
  111. spyOn(meta.data[2], 'draw');
  112. spyOn(meta.data[3], 'draw');
  113. chart.update();
  114. expect(meta.dataset.draw.calls.count()).toBe(0);
  115. expect(meta.data[0].draw.calls.count()).toBe(1);
  116. expect(meta.data[1].draw.calls.count()).toBe(1);
  117. expect(meta.data[2].draw.calls.count()).toBe(1);
  118. expect(meta.data[3].draw.calls.count()).toBe(1);
  119. });
  120. it('should draw all elements except lines turned off per dataset', function() {
  121. var chart = window.acquireChart({
  122. type: 'line',
  123. data: {
  124. datasets: [{
  125. data: [10, 15, 0, -4],
  126. label: 'dataset1',
  127. showLine: false
  128. }],
  129. labels: ['label1', 'label2', 'label3', 'label4']
  130. },
  131. options: {
  132. showLines: true
  133. }
  134. });
  135. var meta = chart.getDatasetMeta(0);
  136. spyOn(meta.dataset, 'draw');
  137. spyOn(meta.data[0], 'draw');
  138. spyOn(meta.data[1], 'draw');
  139. spyOn(meta.data[2], 'draw');
  140. spyOn(meta.data[3], 'draw');
  141. chart.update();
  142. expect(meta.dataset.draw.calls.count()).toBe(0);
  143. expect(meta.data[0].draw.calls.count()).toBe(1);
  144. expect(meta.data[1].draw.calls.count()).toBe(1);
  145. expect(meta.data[2].draw.calls.count()).toBe(1);
  146. expect(meta.data[3].draw.calls.count()).toBe(1);
  147. });
  148. it('should update elements when modifying data', function() {
  149. var chart = window.acquireChart({
  150. type: 'line',
  151. data: {
  152. datasets: [{
  153. data: [10, 15, 0, -4],
  154. label: 'dataset',
  155. xAxisID: 'firstXScaleID',
  156. yAxisID: 'firstYScaleID'
  157. }],
  158. labels: ['label1', 'label2', 'label3', 'label4']
  159. },
  160. options: {
  161. showLines: true,
  162. legend: false,
  163. title: false,
  164. elements: {
  165. point: {
  166. backgroundColor: 'red',
  167. borderColor: 'blue',
  168. }
  169. },
  170. scales: {
  171. xAxes: [{
  172. id: 'firstXScaleID',
  173. display: false
  174. }],
  175. yAxes: [{
  176. id: 'firstYScaleID',
  177. display: false
  178. }]
  179. }
  180. },
  181. });
  182. var meta = chart.getDatasetMeta(0);
  183. expect(meta.data.length).toBe(4);
  184. chart.data.datasets[0].data = [1, 2]; // remove 2 items
  185. chart.data.datasets[0].borderWidth = 1;
  186. chart.update();
  187. expect(meta.data.length).toBe(2);
  188. [
  189. {x: 0, y: 512},
  190. {x: 171, y: 0}
  191. ].forEach(function(expected, i) {
  192. expect(meta.data[i]._datasetIndex).toBe(0);
  193. expect(meta.data[i]._index).toBe(i);
  194. expect(meta.data[i]._xScale).toBe(chart.scales.firstXScaleID);
  195. expect(meta.data[i]._yScale).toBe(chart.scales.firstYScaleID);
  196. expect(meta.data[i]._model.x).toBeCloseToPixel(expected.x);
  197. expect(meta.data[i]._model.y).toBeCloseToPixel(expected.y);
  198. expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
  199. backgroundColor: 'red',
  200. borderColor: 'blue',
  201. }));
  202. });
  203. chart.data.datasets[0].data = [1, 2, 3]; // add 1 items
  204. chart.update();
  205. expect(meta.data.length).toBe(3); // should add a new meta data item
  206. });
  207. it('should correctly calculate x scale for label and point', function() {
  208. var chart = window.acquireChart({
  209. type: 'line',
  210. data: {
  211. labels: ['One'],
  212. datasets: [{
  213. data: [1],
  214. }]
  215. },
  216. options: {
  217. legend: false,
  218. title: false,
  219. hover: {
  220. mode: 'single'
  221. },
  222. scales: {
  223. xAxes: [{
  224. display: false,
  225. }],
  226. yAxes: [{
  227. display: false,
  228. ticks: {
  229. beginAtZero: true
  230. }
  231. }]
  232. }
  233. }
  234. });
  235. var meta = chart.getDatasetMeta(0);
  236. // 1 point
  237. var point = meta.data[0];
  238. expect(point._model.x).toBeCloseToPixel(0);
  239. // 2 points
  240. chart.data.labels = ['One', 'Two'];
  241. chart.data.datasets[0].data = [1, 2];
  242. chart.update();
  243. var points = meta.data;
  244. expect(points[0]._model.x).toBeCloseToPixel(0);
  245. expect(points[1]._model.x).toBeCloseToPixel(512);
  246. // 3 points
  247. chart.data.labels = ['One', 'Two', 'Three'];
  248. chart.data.datasets[0].data = [1, 2, 3];
  249. chart.update();
  250. points = meta.data;
  251. expect(points[0]._model.x).toBeCloseToPixel(0);
  252. expect(points[1]._model.x).toBeCloseToPixel(256);
  253. expect(points[2]._model.x).toBeCloseToPixel(512);
  254. // 4 points
  255. chart.data.labels = ['One', 'Two', 'Three', 'Four'];
  256. chart.data.datasets[0].data = [1, 2, 3, 4];
  257. chart.update();
  258. points = meta.data;
  259. expect(points[0]._model.x).toBeCloseToPixel(0);
  260. expect(points[1]._model.x).toBeCloseToPixel(171);
  261. expect(points[2]._model.x).toBeCloseToPixel(340);
  262. expect(points[3]._model.x).toBeCloseToPixel(512);
  263. });
  264. it('should update elements when the y scale is stacked', function() {
  265. var chart = window.acquireChart({
  266. type: 'line',
  267. data: {
  268. datasets: [{
  269. data: [10, -10, 10, -10],
  270. label: 'dataset1'
  271. }, {
  272. data: [10, 15, 0, -4],
  273. label: 'dataset2'
  274. }],
  275. labels: ['label1', 'label2', 'label3', 'label4']
  276. },
  277. options: {
  278. legend: false,
  279. title: false,
  280. scales: {
  281. xAxes: [{
  282. display: false,
  283. }],
  284. yAxes: [{
  285. display: false,
  286. stacked: true
  287. }]
  288. }
  289. }
  290. });
  291. var meta0 = chart.getDatasetMeta(0);
  292. [
  293. {x: 0, y: 146},
  294. {x: 171, y: 439},
  295. {x: 341, y: 146},
  296. {x: 512, y: 439}
  297. ].forEach(function(values, i) {
  298. expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x);
  299. expect(meta0.data[i]._model.y).toBeCloseToPixel(values.y);
  300. });
  301. var meta1 = chart.getDatasetMeta(1);
  302. [
  303. {x: 0, y: 0},
  304. {x: 171, y: 73},
  305. {x: 341, y: 146},
  306. {x: 512, y: 497}
  307. ].forEach(function(values, i) {
  308. expect(meta1.data[i]._model.x).toBeCloseToPixel(values.x);
  309. expect(meta1.data[i]._model.y).toBeCloseToPixel(values.y);
  310. });
  311. });
  312. it('should update elements when the y scale is stacked with multiple axes', function() {
  313. var chart = window.acquireChart({
  314. type: 'line',
  315. data: {
  316. datasets: [{
  317. data: [10, -10, 10, -10],
  318. label: 'dataset1'
  319. }, {
  320. data: [10, 15, 0, -4],
  321. label: 'dataset2'
  322. }, {
  323. data: [10, 10, -10, -10],
  324. label: 'dataset3',
  325. yAxisID: 'secondAxis'
  326. }],
  327. labels: ['label1', 'label2', 'label3', 'label4']
  328. },
  329. options: {
  330. legend: false,
  331. title: false,
  332. scales: {
  333. xAxes: [{
  334. display: false,
  335. }],
  336. yAxes: [{
  337. display: false,
  338. stacked: true
  339. }, {
  340. id: 'secondAxis',
  341. type: 'linear',
  342. display: false
  343. }]
  344. }
  345. }
  346. });
  347. var meta0 = chart.getDatasetMeta(0);
  348. [
  349. {x: 0, y: 146},
  350. {x: 171, y: 439},
  351. {x: 341, y: 146},
  352. {x: 512, y: 439}
  353. ].forEach(function(values, i) {
  354. expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x);
  355. expect(meta0.data[i]._model.y).toBeCloseToPixel(values.y);
  356. });
  357. var meta1 = chart.getDatasetMeta(1);
  358. [
  359. {x: 0, y: 0},
  360. {x: 171, y: 73},
  361. {x: 341, y: 146},
  362. {x: 512, y: 497}
  363. ].forEach(function(values, i) {
  364. expect(meta1.data[i]._model.x).toBeCloseToPixel(values.x);
  365. expect(meta1.data[i]._model.y).toBeCloseToPixel(values.y);
  366. });
  367. });
  368. it('should update elements when the y scale is stacked and datasets is scatter data', function() {
  369. var chart = window.acquireChart({
  370. type: 'line',
  371. data: {
  372. datasets: [{
  373. data: [{
  374. x: 0,
  375. y: 10
  376. }, {
  377. x: 1,
  378. y: -10
  379. }, {
  380. x: 2,
  381. y: 10
  382. }, {
  383. x: 3,
  384. y: -10
  385. }],
  386. label: 'dataset1'
  387. }, {
  388. data: [{
  389. x: 0,
  390. y: 10
  391. }, {
  392. x: 1,
  393. y: 15
  394. }, {
  395. x: 2,
  396. y: 0
  397. }, {
  398. x: 3,
  399. y: -4
  400. }],
  401. label: 'dataset2'
  402. }],
  403. labels: ['label1', 'label2', 'label3', 'label4']
  404. },
  405. options: {
  406. legend: false,
  407. title: false,
  408. scales: {
  409. xAxes: [{
  410. display: false,
  411. }],
  412. yAxes: [{
  413. display: false,
  414. stacked: true
  415. }]
  416. }
  417. }
  418. });
  419. var meta0 = chart.getDatasetMeta(0);
  420. [
  421. {x: 0, y: 146},
  422. {x: 171, y: 439},
  423. {x: 341, y: 146},
  424. {x: 512, y: 439}
  425. ].forEach(function(values, i) {
  426. expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x);
  427. expect(meta0.data[i]._model.y).toBeCloseToPixel(values.y);
  428. });
  429. var meta1 = chart.getDatasetMeta(1);
  430. [
  431. {x: 0, y: 0},
  432. {x: 171, y: 73},
  433. {x: 341, y: 146},
  434. {x: 512, y: 497}
  435. ].forEach(function(values, i) {
  436. expect(meta1.data[i]._model.x).toBeCloseToPixel(values.x);
  437. expect(meta1.data[i]._model.y).toBeCloseToPixel(values.y);
  438. });
  439. });
  440. it('should update elements when the y scale is stacked and data is strings', function() {
  441. var chart = window.acquireChart({
  442. type: 'line',
  443. data: {
  444. datasets: [{
  445. data: ['10', '-10', '10', '-10'],
  446. label: 'dataset1'
  447. }, {
  448. data: ['10', '15', '0', '-4'],
  449. label: 'dataset2'
  450. }],
  451. labels: ['label1', 'label2', 'label3', 'label4']
  452. },
  453. options: {
  454. legend: false,
  455. title: false,
  456. scales: {
  457. xAxes: [{
  458. display: false,
  459. }],
  460. yAxes: [{
  461. display: false,
  462. stacked: true
  463. }]
  464. }
  465. }
  466. });
  467. var meta0 = chart.getDatasetMeta(0);
  468. [
  469. {x: 0, y: 146},
  470. {x: 171, y: 439},
  471. {x: 341, y: 146},
  472. {x: 512, y: 439}
  473. ].forEach(function(values, i) {
  474. expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x);
  475. expect(meta0.data[i]._model.y).toBeCloseToPixel(values.y);
  476. });
  477. var meta1 = chart.getDatasetMeta(1);
  478. [
  479. {x: 0, y: 0},
  480. {x: 171, y: 73},
  481. {x: 341, y: 146},
  482. {x: 512, y: 497}
  483. ].forEach(function(values, i) {
  484. expect(meta1.data[i]._model.x).toBeCloseToPixel(values.x);
  485. expect(meta1.data[i]._model.y).toBeCloseToPixel(values.y);
  486. });
  487. });
  488. it('should fall back to the line styles for points', function() {
  489. var chart = window.acquireChart({
  490. type: 'line',
  491. data: {
  492. datasets: [{
  493. data: [0, 0],
  494. label: 'dataset1',
  495. // line styles
  496. backgroundColor: 'rgb(98, 98, 98)',
  497. borderColor: 'rgb(8, 8, 8)',
  498. borderWidth: 0.55,
  499. }],
  500. labels: ['label1', 'label2']
  501. }
  502. });
  503. var meta = chart.getDatasetMeta(0);
  504. expect(meta.dataset._model.backgroundColor).toBe('rgb(98, 98, 98)');
  505. expect(meta.dataset._model.borderColor).toBe('rgb(8, 8, 8)');
  506. expect(meta.dataset._model.borderWidth).toBe(0.55);
  507. });
  508. describe('dataset global defaults', function() {
  509. beforeEach(function() {
  510. this._defaults = Chart.helpers.clone(Chart.defaults.global.datasets.line);
  511. });
  512. afterEach(function() {
  513. Chart.defaults.global.datasets.line = this._defaults;
  514. delete this._defaults;
  515. });
  516. it('should utilize the dataset global default options', function() {
  517. Chart.defaults.global.datasets.line = Chart.defaults.global.datasets.line || {};
  518. Chart.helpers.merge(Chart.defaults.global.datasets.line, {
  519. spanGaps: true,
  520. lineTension: 0.231,
  521. backgroundColor: '#add',
  522. borderWidth: '#daa',
  523. borderColor: '#dad',
  524. borderCapStyle: 'round',
  525. borderDash: [0],
  526. borderDashOffset: 0.871,
  527. borderJoinStyle: 'miter',
  528. fill: 'start',
  529. cubicInterpolationMode: 'monotone'
  530. });
  531. var chart = window.acquireChart({
  532. type: 'line',
  533. data: {
  534. datasets: [{
  535. data: [0, 0],
  536. label: 'dataset1'
  537. }],
  538. labels: ['label1', 'label2']
  539. }
  540. });
  541. var model = chart.getDatasetMeta(0).dataset._model;
  542. expect(model.spanGaps).toBe(true);
  543. expect(model.tension).toBe(0.231);
  544. expect(model.backgroundColor).toBe('#add');
  545. expect(model.borderWidth).toBe('#daa');
  546. expect(model.borderColor).toBe('#dad');
  547. expect(model.borderCapStyle).toBe('round');
  548. expect(model.borderDash).toEqual([0]);
  549. expect(model.borderDashOffset).toBe(0.871);
  550. expect(model.borderJoinStyle).toBe('miter');
  551. expect(model.fill).toBe('start');
  552. expect(model.cubicInterpolationMode).toBe('monotone');
  553. });
  554. it('should be overriden by user-supplied values', function() {
  555. Chart.defaults.global.datasets.line = Chart.defaults.global.datasets.line || {};
  556. Chart.helpers.merge(Chart.defaults.global.datasets.line, {
  557. spanGaps: true,
  558. lineTension: 0.231
  559. });
  560. var chart = window.acquireChart({
  561. type: 'line',
  562. data: {
  563. datasets: [{
  564. data: [0, 0],
  565. label: 'dataset1',
  566. spanGaps: true,
  567. backgroundColor: '#dad'
  568. }],
  569. labels: ['label1', 'label2']
  570. },
  571. options: {
  572. datasets: {
  573. line: {
  574. lineTension: 0.345,
  575. backgroundColor: '#add'
  576. }
  577. }
  578. }
  579. });
  580. var model = chart.getDatasetMeta(0).dataset._model;
  581. // dataset-level option overrides global default
  582. expect(model.spanGaps).toBe(true);
  583. // chart-level default overrides global default
  584. expect(model.tension).toBe(0.345);
  585. // dataset-level option overrides chart-level default
  586. expect(model.backgroundColor).toBe('#dad');
  587. });
  588. });
  589. it('should obey the chart-level dataset options', function() {
  590. var chart = window.acquireChart({
  591. type: 'line',
  592. data: {
  593. datasets: [{
  594. data: [0, 0],
  595. label: 'dataset1'
  596. }],
  597. labels: ['label1', 'label2']
  598. },
  599. options: {
  600. datasets: {
  601. line: {
  602. spanGaps: true,
  603. lineTension: 0.231,
  604. backgroundColor: '#add',
  605. borderWidth: '#daa',
  606. borderColor: '#dad',
  607. borderCapStyle: 'round',
  608. borderDash: [0],
  609. borderDashOffset: 0.871,
  610. borderJoinStyle: 'miter',
  611. fill: 'start',
  612. cubicInterpolationMode: 'monotone'
  613. }
  614. }
  615. }
  616. });
  617. var model = chart.getDatasetMeta(0).dataset._model;
  618. expect(model.spanGaps).toBe(true);
  619. expect(model.tension).toBe(0.231);
  620. expect(model.backgroundColor).toBe('#add');
  621. expect(model.borderWidth).toBe('#daa');
  622. expect(model.borderColor).toBe('#dad');
  623. expect(model.borderCapStyle).toBe('round');
  624. expect(model.borderDash).toEqual([0]);
  625. expect(model.borderDashOffset).toBe(0.871);
  626. expect(model.borderJoinStyle).toBe('miter');
  627. expect(model.fill).toBe('start');
  628. expect(model.cubicInterpolationMode).toBe('monotone');
  629. });
  630. it('should obey the dataset options', function() {
  631. var chart = window.acquireChart({
  632. type: 'line',
  633. data: {
  634. datasets: [{
  635. data: [0, 0],
  636. label: 'dataset1',
  637. spanGaps: true,
  638. lineTension: 0.231,
  639. backgroundColor: '#add',
  640. borderWidth: '#daa',
  641. borderColor: '#dad',
  642. borderCapStyle: 'round',
  643. borderDash: [0],
  644. borderDashOffset: 0.871,
  645. borderJoinStyle: 'miter',
  646. fill: 'start',
  647. cubicInterpolationMode: 'monotone'
  648. }],
  649. labels: ['label1', 'label2']
  650. }
  651. });
  652. var model = chart.getDatasetMeta(0).dataset._model;
  653. expect(model.spanGaps).toBe(true);
  654. expect(model.tension).toBe(0.231);
  655. expect(model.backgroundColor).toBe('#add');
  656. expect(model.borderWidth).toBe('#daa');
  657. expect(model.borderColor).toBe('#dad');
  658. expect(model.borderCapStyle).toBe('round');
  659. expect(model.borderDash).toEqual([0]);
  660. expect(model.borderDashOffset).toBe(0.871);
  661. expect(model.borderJoinStyle).toBe('miter');
  662. expect(model.fill).toBe('start');
  663. expect(model.cubicInterpolationMode).toBe('monotone');
  664. });
  665. it('should handle number of data point changes in update', function() {
  666. var chart = window.acquireChart({
  667. type: 'line',
  668. data: {
  669. datasets: [{
  670. data: [10, 15, 0, -4],
  671. label: 'dataset1',
  672. }],
  673. labels: ['label1', 'label2', 'label3', 'label4']
  674. }
  675. });
  676. var meta = chart.getDatasetMeta(0);
  677. chart.data.datasets[0].data = [1, 2]; // remove 2 items
  678. chart.update();
  679. expect(meta.data.length).toBe(2);
  680. expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
  681. expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
  682. chart.data.datasets[0].data = [1, 2, 3, 4, 5]; // add 3 items
  683. chart.update();
  684. expect(meta.data.length).toBe(5);
  685. expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
  686. expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
  687. expect(meta.data[2] instanceof Chart.elements.Point).toBe(true);
  688. expect(meta.data[3] instanceof Chart.elements.Point).toBe(true);
  689. expect(meta.data[4] instanceof Chart.elements.Point).toBe(true);
  690. });
  691. describe('Interactions', function() {
  692. beforeEach(function() {
  693. this.chart = window.acquireChart({
  694. type: 'line',
  695. data: {
  696. labels: ['label1', 'label2', 'label3', 'label4'],
  697. datasets: [{
  698. data: [10, 15, 0, -4]
  699. }]
  700. },
  701. options: {
  702. elements: {
  703. point: {
  704. backgroundColor: 'rgb(100, 150, 200)',
  705. borderColor: 'rgb(50, 100, 150)',
  706. borderWidth: 2,
  707. radius: 3
  708. }
  709. }
  710. }
  711. });
  712. });
  713. it ('should handle default hover styles', function() {
  714. var chart = this.chart;
  715. var point = chart.getDatasetMeta(0).data[0];
  716. jasmine.triggerMouseEvent(chart, 'mousemove', point);
  717. expect(point._model.backgroundColor).toBe('rgb(49, 135, 221)');
  718. expect(point._model.borderColor).toBe('rgb(22, 89, 156)');
  719. expect(point._model.borderWidth).toBe(1);
  720. expect(point._model.radius).toBe(4);
  721. jasmine.triggerMouseEvent(chart, 'mouseout', point);
  722. expect(point._model.backgroundColor).toBe('rgb(100, 150, 200)');
  723. expect(point._model.borderColor).toBe('rgb(50, 100, 150)');
  724. expect(point._model.borderWidth).toBe(2);
  725. expect(point._model.radius).toBe(3);
  726. });
  727. it ('should handle hover styles defined via dataset properties', function() {
  728. var chart = this.chart;
  729. var point = chart.getDatasetMeta(0).data[0];
  730. Chart.helpers.merge(chart.data.datasets[0], {
  731. hoverBackgroundColor: 'rgb(200, 100, 150)',
  732. hoverBorderColor: 'rgb(150, 50, 100)',
  733. hoverBorderWidth: 8.4,
  734. hoverRadius: 4.2
  735. });
  736. chart.update();
  737. jasmine.triggerMouseEvent(chart, 'mousemove', point);
  738. expect(point._model.backgroundColor).toBe('rgb(200, 100, 150)');
  739. expect(point._model.borderColor).toBe('rgb(150, 50, 100)');
  740. expect(point._model.borderWidth).toBe(8.4);
  741. expect(point._model.radius).toBe(4.2);
  742. jasmine.triggerMouseEvent(chart, 'mouseout', point);
  743. expect(point._model.backgroundColor).toBe('rgb(100, 150, 200)');
  744. expect(point._model.borderColor).toBe('rgb(50, 100, 150)');
  745. expect(point._model.borderWidth).toBe(2);
  746. expect(point._model.radius).toBe(3);
  747. });
  748. it ('should handle hover styles defined via element options', function() {
  749. var chart = this.chart;
  750. var point = chart.getDatasetMeta(0).data[0];
  751. Chart.helpers.merge(chart.options.elements.point, {
  752. hoverBackgroundColor: 'rgb(200, 100, 150)',
  753. hoverBorderColor: 'rgb(150, 50, 100)',
  754. hoverBorderWidth: 8.4,
  755. hoverRadius: 4.2
  756. });
  757. chart.update();
  758. jasmine.triggerMouseEvent(chart, 'mousemove', point);
  759. expect(point._model.backgroundColor).toBe('rgb(200, 100, 150)');
  760. expect(point._model.borderColor).toBe('rgb(150, 50, 100)');
  761. expect(point._model.borderWidth).toBe(8.4);
  762. expect(point._model.radius).toBe(4.2);
  763. jasmine.triggerMouseEvent(chart, 'mouseout', point);
  764. expect(point._model.backgroundColor).toBe('rgb(100, 150, 200)');
  765. expect(point._model.borderColor).toBe('rgb(50, 100, 150)');
  766. expect(point._model.borderWidth).toBe(2);
  767. expect(point._model.radius).toBe(3);
  768. });
  769. it ('should handle hover styles defined via element custom', function() {
  770. var chart = this.chart;
  771. var point = chart.getDatasetMeta(0).data[0];
  772. point.custom = {
  773. hoverBackgroundColor: 'rgb(200, 100, 150)',
  774. hoverBorderColor: 'rgb(150, 50, 100)',
  775. hoverBorderWidth: 8.4,
  776. hoverRadius: 4.2
  777. };
  778. chart.update();
  779. jasmine.triggerMouseEvent(chart, 'mousemove', point);
  780. expect(point._model.backgroundColor).toBe('rgb(200, 100, 150)');
  781. expect(point._model.borderColor).toBe('rgb(150, 50, 100)');
  782. expect(point._model.borderWidth).toBe(8.4);
  783. expect(point._model.radius).toBe(4.2);
  784. jasmine.triggerMouseEvent(chart, 'mouseout', point);
  785. expect(point._model.backgroundColor).toBe('rgb(100, 150, 200)');
  786. expect(point._model.borderColor).toBe('rgb(50, 100, 150)');
  787. expect(point._model.borderWidth).toBe(2);
  788. expect(point._model.radius).toBe(3);
  789. });
  790. });
  791. it('should allow 0 as a point border width', function() {
  792. var chart = window.acquireChart({
  793. type: 'line',
  794. data: {
  795. datasets: [{
  796. data: [10, 15, 0, -4],
  797. label: 'dataset1',
  798. pointBorderWidth: 0
  799. }],
  800. labels: ['label1', 'label2', 'label3', 'label4']
  801. }
  802. });
  803. var meta = chart.getDatasetMeta(0);
  804. var point = meta.data[0];
  805. expect(point._model.borderWidth).toBe(0);
  806. });
  807. it('should allow an array as the point border width setting', function() {
  808. var chart = window.acquireChart({
  809. type: 'line',
  810. data: {
  811. datasets: [{
  812. data: [10, 15, 0, -4],
  813. label: 'dataset1',
  814. pointBorderWidth: [1, 2, 3, 4]
  815. }],
  816. labels: ['label1', 'label2', 'label3', 'label4']
  817. }
  818. });
  819. var meta = chart.getDatasetMeta(0);
  820. expect(meta.data[0]._model.borderWidth).toBe(1);
  821. expect(meta.data[1]._model.borderWidth).toBe(2);
  822. expect(meta.data[2]._model.borderWidth).toBe(3);
  823. expect(meta.data[3]._model.borderWidth).toBe(4);
  824. });
  825. });