scale.time.tests.js 52 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843
  1. // Time scale tests
  2. describe('Time scale tests', function() {
  3. function createScale(data, options, dimensions) {
  4. var scaleID = 'myScale';
  5. var mockContext = window.createMockContext();
  6. var Constructor = Chart.scaleService.getScaleConstructor('time');
  7. var scale = new Constructor({
  8. ctx: mockContext,
  9. options: options,
  10. chart: {
  11. data: data
  12. },
  13. id: scaleID
  14. });
  15. var width = (dimensions && dimensions.width) || 400;
  16. var height = (dimensions && dimensions.height) || 50;
  17. scale.update(width, height);
  18. return scale;
  19. }
  20. function getTicksLabels(scale) {
  21. return scale.ticks;
  22. }
  23. beforeEach(function() {
  24. // Need a time matcher for getValueFromPixel
  25. jasmine.addMatchers({
  26. toBeCloseToTime: function() {
  27. return {
  28. compare: function(actual, expected) {
  29. var result = false;
  30. var diff = actual.diff(expected.value, expected.unit, true);
  31. result = Math.abs(diff) < (expected.threshold !== undefined ? expected.threshold : 0.01);
  32. return {
  33. pass: result
  34. };
  35. }
  36. };
  37. }
  38. });
  39. });
  40. it('should load moment.js as a dependency', function() {
  41. expect(window.moment).not.toBe(undefined);
  42. });
  43. it('should register the constructor with the scale service', function() {
  44. var Constructor = Chart.scaleService.getScaleConstructor('time');
  45. expect(Constructor).not.toBe(undefined);
  46. expect(typeof Constructor).toBe('function');
  47. });
  48. it('should have the correct default config', function() {
  49. var defaultConfig = Chart.scaleService.getScaleDefaults('time');
  50. expect(defaultConfig).toEqual({
  51. display: true,
  52. gridLines: {
  53. color: 'rgba(0,0,0,0.1)',
  54. drawBorder: true,
  55. drawOnChartArea: true,
  56. drawTicks: true,
  57. tickMarkLength: 10,
  58. lineWidth: 1,
  59. offsetGridLines: false,
  60. display: true,
  61. zeroLineColor: 'rgba(0,0,0,0.25)',
  62. zeroLineWidth: 1,
  63. zeroLineBorderDash: [],
  64. zeroLineBorderDashOffset: 0.0,
  65. borderDash: [],
  66. borderDashOffset: 0.0
  67. },
  68. position: 'bottom',
  69. offset: false,
  70. scaleLabel: Chart.defaults.scale.scaleLabel,
  71. bounds: 'data',
  72. distribution: 'linear',
  73. adapters: {},
  74. ticks: {
  75. beginAtZero: false,
  76. minRotation: 0,
  77. maxRotation: 50,
  78. mirror: false,
  79. source: 'auto',
  80. padding: 0,
  81. reverse: false,
  82. display: true,
  83. callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below,
  84. autoSkip: false,
  85. autoSkipPadding: 0,
  86. labelOffset: 0,
  87. minor: {},
  88. major: {
  89. enabled: false
  90. },
  91. },
  92. time: {
  93. parser: false,
  94. unit: false,
  95. round: false,
  96. isoWeekday: false,
  97. displayFormat: false,
  98. minUnit: 'millisecond',
  99. displayFormats: {}
  100. }
  101. });
  102. // Is this actually a function
  103. expect(defaultConfig.ticks.callback).toEqual(jasmine.any(Function));
  104. });
  105. describe('when given inputs of different types', function() {
  106. // Helper to build date objects
  107. function newDateFromRef(days) {
  108. return moment('01/01/2015 12:00', 'DD/MM/YYYY HH:mm').add(days, 'd').toDate();
  109. }
  110. it('should accept labels as strings', function() {
  111. var mockData = {
  112. labels: ['2015-01-01T12:00:00', '2015-01-02T21:00:00', '2015-01-03T22:00:00', '2015-01-05T23:00:00', '2015-01-07T03:00', '2015-01-08T10:00', '2015-01-10T12:00'], // days
  113. };
  114. var scaleOptions = Chart.scaleService.getScaleDefaults('time');
  115. var scale = createScale(mockData, scaleOptions, {width: 1000, height: 200});
  116. var ticks = getTicksLabels(scale);
  117. // `bounds === 'data'`: first and last ticks removed since outside the data range
  118. expect(ticks).toEqual(['Jan 2', 'Jan 3', 'Jan 4', 'Jan 5', 'Jan 6', 'Jan 7', 'Jan 8', 'Jan 9', 'Jan 10']);
  119. });
  120. it('should accept labels as date objects', function() {
  121. var mockData = {
  122. labels: [newDateFromRef(0), newDateFromRef(1), newDateFromRef(2), newDateFromRef(4), newDateFromRef(6), newDateFromRef(7), newDateFromRef(9)], // days
  123. };
  124. var scale = createScale(mockData, Chart.scaleService.getScaleDefaults('time'), {width: 1000, height: 200});
  125. var ticks = getTicksLabels(scale);
  126. // `bounds === 'data'`: first and last ticks removed since outside the data range
  127. expect(ticks).toEqual(['Jan 2', 'Jan 3', 'Jan 4', 'Jan 5', 'Jan 6', 'Jan 7', 'Jan 8', 'Jan 9', 'Jan 10']);
  128. });
  129. it('should accept data as xy points', function() {
  130. var chart = window.acquireChart({
  131. type: 'line',
  132. data: {
  133. datasets: [{
  134. xAxisID: 'xScale0',
  135. data: [{
  136. x: newDateFromRef(0),
  137. y: 1
  138. }, {
  139. x: newDateFromRef(1),
  140. y: 10
  141. }, {
  142. x: newDateFromRef(2),
  143. y: 0
  144. }, {
  145. x: newDateFromRef(4),
  146. y: 5
  147. }, {
  148. x: newDateFromRef(6),
  149. y: 77
  150. }, {
  151. x: newDateFromRef(7),
  152. y: 9
  153. }, {
  154. x: newDateFromRef(9),
  155. y: 5
  156. }]
  157. }],
  158. },
  159. options: {
  160. scales: {
  161. xAxes: [{
  162. id: 'xScale0',
  163. type: 'time',
  164. position: 'bottom'
  165. }],
  166. }
  167. }
  168. }, {canvas: {width: 800, height: 200}});
  169. var xScale = chart.scales.xScale0;
  170. var ticks = getTicksLabels(xScale);
  171. // `bounds === 'data'`: first and last ticks removed since outside the data range
  172. expect(ticks).toEqual(['Jan 2', 'Jan 3', 'Jan 4', 'Jan 5', 'Jan 6', 'Jan 7', 'Jan 8', 'Jan 9', 'Jan 10']);
  173. });
  174. it('should accept data as ty points', function() {
  175. var chart = window.acquireChart({
  176. type: 'line',
  177. data: {
  178. datasets: [{
  179. xAxisID: 'tScale0',
  180. data: [{
  181. t: newDateFromRef(0),
  182. y: 1
  183. }, {
  184. t: newDateFromRef(1),
  185. y: 10
  186. }, {
  187. t: newDateFromRef(2),
  188. y: 0
  189. }, {
  190. t: newDateFromRef(4),
  191. y: 5
  192. }, {
  193. t: newDateFromRef(6),
  194. y: 77
  195. }, {
  196. t: newDateFromRef(7),
  197. y: 9
  198. }, {
  199. t: newDateFromRef(9),
  200. y: 5
  201. }]
  202. }],
  203. },
  204. options: {
  205. scales: {
  206. xAxes: [{
  207. id: 'tScale0',
  208. type: 'time',
  209. position: 'bottom'
  210. }],
  211. }
  212. }
  213. }, {canvas: {width: 800, height: 200}});
  214. var tScale = chart.scales.tScale0;
  215. var ticks = getTicksLabels(tScale);
  216. // `bounds === 'data'`: first and last ticks removed since outside the data range
  217. expect(ticks).toEqual(['Jan 2', 'Jan 3', 'Jan 4', 'Jan 5', 'Jan 6', 'Jan 7', 'Jan 8', 'Jan 9', 'Jan 10']);
  218. });
  219. });
  220. it('should allow custom time parsers', function() {
  221. var chart = window.acquireChart({
  222. type: 'line',
  223. data: {
  224. labels: ['foo', 'bar'],
  225. datasets: [{
  226. xAxisID: 'xScale0',
  227. data: [0, 1]
  228. }],
  229. },
  230. options: {
  231. scales: {
  232. xAxes: [{
  233. id: 'xScale0',
  234. type: 'time',
  235. position: 'bottom',
  236. time: {
  237. unit: 'day',
  238. round: true,
  239. parser: function(label) {
  240. return label === 'foo' ?
  241. moment('2000/01/02', 'YYYY/MM/DD') :
  242. moment('2016/05/08', 'YYYY/MM/DD');
  243. }
  244. },
  245. ticks: {
  246. source: 'labels'
  247. }
  248. }],
  249. }
  250. }
  251. });
  252. // Counts down because the lines are drawn top to bottom
  253. var xScale = chart.scales.xScale0;
  254. // Counts down because the lines are drawn top to bottom
  255. expect(xScale.ticks[0]).toBe('Jan 2');
  256. expect(xScale.ticks[1]).toBe('May 8');
  257. });
  258. it('should build ticks using the config unit', function() {
  259. var mockData = {
  260. labels: ['2015-01-01T20:00:00', '2015-01-02T21:00:00'], // days
  261. };
  262. var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('time'));
  263. config.time.unit = 'hour';
  264. var scale = createScale(mockData, config, {width: 2500, height: 200});
  265. var ticks = getTicksLabels(scale);
  266. expect(ticks).toEqual(['8PM', '9PM', '10PM', '11PM', '12AM', '1AM', '2AM', '3AM', '4AM', '5AM', '6AM', '7AM', '8AM', '9AM', '10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM']);
  267. });
  268. it('should build ticks honoring the minUnit', function() {
  269. var mockData = {
  270. labels: ['2015-01-01T20:00:00', '2015-01-02T21:00:00'], // days
  271. };
  272. var config = Chart.helpers.mergeIf({
  273. bounds: 'ticks',
  274. time: {
  275. minUnit: 'day'
  276. }
  277. }, Chart.scaleService.getScaleDefaults('time'));
  278. var scale = createScale(mockData, config);
  279. var ticks = getTicksLabels(scale);
  280. expect(ticks).toEqual(['Jan 1', 'Jan 2', 'Jan 3']);
  281. });
  282. it('should correctly determine the unit', function() {
  283. var date = moment('Jan 01 1990', 'MMM DD YYYY');
  284. var data = [];
  285. for (var i = 0; i < 60; i++) {
  286. data.push({x: date.valueOf(), y: Math.random()});
  287. date = date.clone().add(1, 'month');
  288. }
  289. var chart = window.acquireChart({
  290. type: 'line',
  291. data: {
  292. datasets: [{
  293. xAxisID: 'xScale0',
  294. data: data
  295. }],
  296. },
  297. options: {
  298. scales: {
  299. xAxes: [{
  300. id: 'xScale0',
  301. type: 'time',
  302. ticks: {
  303. source: 'data',
  304. autoSkip: true
  305. }
  306. }],
  307. }
  308. }
  309. });
  310. var scale = chart.scales.xScale0;
  311. expect(scale._unit).toEqual('month');
  312. });
  313. it('should build ticks based on the appropriate label capacity', function() {
  314. var mockData = {
  315. labels: [
  316. '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01',
  317. '2016-01-01', '2017-01-01', '2018-01-01', '2019-01-01'
  318. ]
  319. };
  320. var config = Chart.helpers.mergeIf({
  321. time: {
  322. unit: 'year'
  323. }
  324. }, Chart.scaleService.getScaleDefaults('time'));
  325. var scale = createScale(mockData, config);
  326. var ticks = getTicksLabels(scale);
  327. expect(ticks).toEqual(['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019']);
  328. });
  329. it('should build ticks using the config diff', function() {
  330. var mockData = {
  331. labels: ['2015-01-01T20:00:00', '2015-02-02T21:00:00', '2015-02-21T01:00:00'], // days
  332. };
  333. var config = Chart.helpers.mergeIf({
  334. bounds: 'ticks',
  335. time: {
  336. unit: 'week',
  337. round: 'week'
  338. }
  339. }, Chart.scaleService.getScaleDefaults('time'));
  340. var scale = createScale(mockData, config, {width: 800, height: 200});
  341. var ticks = getTicksLabels(scale);
  342. // last date is feb 15 because we round to start of week
  343. expect(ticks).toEqual(['Dec 28, 2014', 'Jan 4, 2015', 'Jan 11, 2015', 'Jan 18, 2015', 'Jan 25, 2015', 'Feb 1, 2015', 'Feb 8, 2015', 'Feb 15, 2015']);
  344. });
  345. describe('config step size', function() {
  346. it('should use the stepSize property', function() {
  347. var mockData = {
  348. labels: ['2015-01-01T20:00:00', '2015-01-01T21:00:00'],
  349. };
  350. var config = Chart.helpers.mergeIf({
  351. bounds: 'ticks',
  352. time: {
  353. unit: 'hour',
  354. stepSize: 2
  355. }
  356. }, Chart.scaleService.getScaleDefaults('time'));
  357. var scale = createScale(mockData, config, {width: 2500, height: 200});
  358. var ticks = getTicksLabels(scale);
  359. expect(ticks).toEqual(['8PM', '10PM']);
  360. });
  361. });
  362. describe('when specifying limits', function() {
  363. var mockData = {
  364. labels: ['2015-01-01T20:00:00', '2015-01-02T20:00:00', '2015-01-03T20:00:00'],
  365. };
  366. var config;
  367. beforeEach(function() {
  368. config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('time'));
  369. config.ticks.source = 'labels';
  370. config.time.unit = 'day';
  371. });
  372. it('should use the min option when less than first label for building ticks', function() {
  373. config.ticks.min = '2014-12-29T04:00:00';
  374. var scale = createScale(mockData, config);
  375. expect(scale.ticks[0]).toEqual('Jan 1');
  376. });
  377. it('should use the min option when greater than first label for building ticks', function() {
  378. config.ticks.min = '2015-01-02T04:00:00';
  379. var scale = createScale(mockData, config);
  380. expect(scale.ticks[0]).toEqual('Jan 2');
  381. });
  382. it('should use the max option when greater than last label for building ticks', function() {
  383. config.ticks.max = '2015-01-05T06:00:00';
  384. var scale = createScale(mockData, config);
  385. expect(scale.ticks[scale.ticks.length - 1]).toEqual('Jan 3');
  386. });
  387. it('should use the max option when less than last label for building ticks', function() {
  388. config.ticks.max = '2015-01-02T23:00:00';
  389. var scale = createScale(mockData, config);
  390. expect(scale.ticks[scale.ticks.length - 1]).toEqual('Jan 2');
  391. });
  392. });
  393. describe('when specifying limits in a deprecated fashion', function() {
  394. var mockData = {
  395. labels: ['2015-01-01T20:00:00', '2015-01-02T20:00:00', '2015-01-03T20:00:00'],
  396. };
  397. var config;
  398. beforeEach(function() {
  399. config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('time'));
  400. config.ticks.source = 'labels';
  401. config.time.unit = 'day';
  402. });
  403. it('should use the min option when less than first label for building ticks', function() {
  404. config.ticks.min = '2014-12-29T04:00:00';
  405. var scale = createScale(mockData, config);
  406. expect(scale.ticks[0]).toEqual('Jan 1');
  407. });
  408. it('should use the min option when greater than first label for building ticks', function() {
  409. config.ticks.min = '2015-01-02T04:00:00';
  410. var scale = createScale(mockData, config);
  411. expect(scale.ticks[0]).toEqual('Jan 2');
  412. });
  413. it('should use the max option when greater than last label for building ticks', function() {
  414. config.ticks.max = '2015-01-05T06:00:00';
  415. var scale = createScale(mockData, config);
  416. expect(scale.ticks[scale.ticks.length - 1]).toEqual('Jan 3');
  417. });
  418. it('should use the max option when less than last label for building ticks', function() {
  419. config.ticks.max = '2015-01-02T23:00:00';
  420. var scale = createScale(mockData, config);
  421. expect(scale.ticks[scale.ticks.length - 1]).toEqual('Jan 2');
  422. });
  423. });
  424. it('should use the isoWeekday option', function() {
  425. var mockData = {
  426. labels: [
  427. '2015-01-01T20:00:00', // Thursday
  428. '2015-01-02T20:00:00', // Friday
  429. '2015-01-03T20:00:00' // Saturday
  430. ]
  431. };
  432. var config = Chart.helpers.mergeIf({
  433. bounds: 'ticks',
  434. time: {
  435. unit: 'week',
  436. isoWeekday: 3 // Wednesday
  437. }
  438. }, Chart.scaleService.getScaleDefaults('time'));
  439. var scale = createScale(mockData, config);
  440. var ticks = getTicksLabels(scale);
  441. expect(ticks).toEqual(['Dec 31, 2014', 'Jan 7, 2015']);
  442. });
  443. describe('when rendering several days', function() {
  444. beforeEach(function() {
  445. this.chart = window.acquireChart({
  446. type: 'line',
  447. data: {
  448. datasets: [{
  449. xAxisID: 'xScale0',
  450. data: []
  451. }],
  452. labels: [
  453. '2015-01-01T20:00:00',
  454. '2015-01-02T21:00:00',
  455. '2015-01-03T22:00:00',
  456. '2015-01-05T23:00:00',
  457. '2015-01-07T03:00',
  458. '2015-01-08T10:00',
  459. '2015-01-10T12:00'
  460. ]
  461. },
  462. options: {
  463. scales: {
  464. xAxes: [{
  465. id: 'xScale0',
  466. type: 'time',
  467. position: 'bottom'
  468. }],
  469. }
  470. }
  471. });
  472. this.scale = this.chart.scales.xScale0;
  473. });
  474. it('should be bounded by the nearest week beginnings', function() {
  475. var chart = this.chart;
  476. var scale = this.scale;
  477. expect(scale.getValueForPixel(scale.left)).toBeGreaterThan(moment(chart.data.labels[0]).startOf('week'));
  478. expect(scale.getValueForPixel(scale.right)).toBeLessThan(moment(chart.data.labels[chart.data.labels.length - 1]).add(1, 'week').endOf('week'));
  479. });
  480. it('should convert between screen coordinates and times', function() {
  481. var chart = this.chart;
  482. var scale = this.scale;
  483. var timeRange = moment(scale.max).valueOf() - moment(scale.min).valueOf();
  484. var msPerPix = timeRange / scale.width;
  485. var firstPointOffsetMs = moment(chart.config.data.labels[0]).valueOf() - scale.min;
  486. var firstPointPixel = scale.left + firstPointOffsetMs / msPerPix;
  487. var lastPointOffsetMs = moment(chart.config.data.labels[chart.config.data.labels.length - 1]).valueOf() - scale.min;
  488. var lastPointPixel = scale.left + lastPointOffsetMs / msPerPix;
  489. expect(scale.getPixelForValue('', 0, 0)).toBeCloseToPixel(firstPointPixel);
  490. expect(scale.getPixelForValue(chart.data.labels[0])).toBeCloseToPixel(firstPointPixel);
  491. expect(scale.getValueForPixel(firstPointPixel)).toBeCloseToTime({
  492. value: moment(chart.data.labels[0]),
  493. unit: 'hour',
  494. });
  495. expect(scale.getPixelForValue('', 6, 0)).toBeCloseToPixel(lastPointPixel);
  496. expect(scale.getValueForPixel(lastPointPixel)).toBeCloseToTime({
  497. value: moment(chart.data.labels[6]),
  498. unit: 'hour'
  499. });
  500. });
  501. });
  502. describe('when rendering several years', function() {
  503. beforeEach(function() {
  504. this.chart = window.acquireChart({
  505. type: 'line',
  506. data: {
  507. labels: ['2005-07-04', '2017-01-20'],
  508. },
  509. options: {
  510. scales: {
  511. xAxes: [{
  512. id: 'xScale0',
  513. type: 'time',
  514. bounds: 'ticks',
  515. position: 'bottom'
  516. }],
  517. }
  518. }
  519. }, {canvas: {width: 800, height: 200}});
  520. this.scale = this.chart.scales.xScale0;
  521. });
  522. it('should be bounded by nearest step\'s year start and end', function() {
  523. var scale = this.scale;
  524. var ticks = scale.getTicks();
  525. var step = ticks[1].value - ticks[0].value;
  526. var stepsAmount = Math.floor((scale.max - scale.min) / step);
  527. expect(scale.getValueForPixel(scale.left)).toBeCloseToTime({
  528. value: moment(scale.min).startOf('year'),
  529. unit: 'hour',
  530. });
  531. expect(scale.getValueForPixel(scale.right)).toBeCloseToTime({
  532. value: moment(scale.min + step * stepsAmount).endOf('year'),
  533. unit: 'hour',
  534. });
  535. });
  536. it('should build the correct ticks', function() {
  537. // Where 'correct' is a two year spacing.
  538. expect(getTicksLabels(this.scale)).toEqual(['2005', '2007', '2009', '2011', '2013', '2015', '2017', '2019']);
  539. });
  540. it('should have ticks with accurate labels', function() {
  541. var scale = this.scale;
  542. var ticks = scale.getTicks();
  543. var pixelsPerYear = scale.width / 14;
  544. for (var i = 0; i < ticks.length - 1; i++) {
  545. var offset = 2 * pixelsPerYear * i;
  546. expect(scale.getValueForPixel(scale.left + offset)).toBeCloseToTime({
  547. value: moment(ticks[i].label + '-01-01'),
  548. unit: 'day',
  549. threshold: 0.5,
  550. });
  551. }
  552. });
  553. });
  554. it('should get the correct label for a data value', function() {
  555. var chart = window.acquireChart({
  556. type: 'line',
  557. data: {
  558. datasets: [{
  559. xAxisID: 'xScale0',
  560. data: [null, 10, 3]
  561. }],
  562. labels: ['2015-01-01T20:00:00', '2015-01-02T21:00:00', '2015-01-03T22:00:00', '2015-01-05T23:00:00', '2015-01-07T03:00', '2015-01-08T10:00', '2015-01-10T12:00'], // days
  563. },
  564. options: {
  565. scales: {
  566. xAxes: [{
  567. id: 'xScale0',
  568. type: 'time',
  569. position: 'bottom'
  570. }],
  571. }
  572. }
  573. });
  574. var xScale = chart.scales.xScale0;
  575. expect(xScale.getLabelForIndex(0, 0)).toBeTruthy();
  576. expect(xScale.getLabelForIndex(0, 0)).toBe('2015-01-01T20:00:00');
  577. expect(xScale.getLabelForIndex(6, 0)).toBe('2015-01-10T12:00');
  578. });
  579. describe('when ticks.callback is specified', function() {
  580. beforeEach(function() {
  581. this.chart = window.acquireChart({
  582. type: 'line',
  583. data: {
  584. datasets: [{
  585. xAxisID: 'xScale0',
  586. data: [0, 0]
  587. }],
  588. labels: ['2015-01-01T20:00:00', '2015-01-01T20:01:00']
  589. },
  590. options: {
  591. scales: {
  592. xAxes: [{
  593. id: 'xScale0',
  594. type: 'time',
  595. time: {
  596. displayFormats: {
  597. second: 'h:mm:ss'
  598. }
  599. },
  600. ticks: {
  601. callback: function(value) {
  602. return '<' + value + '>';
  603. }
  604. }
  605. }]
  606. }
  607. }
  608. });
  609. this.scale = this.chart.scales.xScale0;
  610. });
  611. it('should get the correct labels for ticks', function() {
  612. var scale = this.scale;
  613. expect(scale._ticks.map(function(tick) {
  614. return tick.major;
  615. })).toEqual([true, false, false, false, false, false, true]);
  616. expect(scale.ticks).toEqual(['<8:00:00>', '<8:00:10>', '<8:00:20>', '<8:00:30>', '<8:00:40>', '<8:00:50>', '<8:01:00>']);
  617. });
  618. it('should update ticks.callback correctly', function() {
  619. var chart = this.chart;
  620. var scale = this.scale;
  621. chart.options.scales.xAxes[0].ticks.callback = function(value) {
  622. return '{' + value + '}';
  623. };
  624. chart.update();
  625. expect(scale.ticks).toEqual(['{8:00:00}', '{8:00:10}', '{8:00:20}', '{8:00:30}', '{8:00:40}', '{8:00:50}', '{8:01:00}']);
  626. });
  627. });
  628. describe('when ticks.major.callback and ticks.minor.callback are specified', function() {
  629. beforeEach(function() {
  630. this.chart = window.acquireChart({
  631. type: 'line',
  632. data: {
  633. datasets: [{
  634. xAxisID: 'xScale0',
  635. data: [0, 0]
  636. }],
  637. labels: ['2015-01-01T20:00:00', '2015-01-01T20:01:00']
  638. },
  639. options: {
  640. scales: {
  641. xAxes: [{
  642. id: 'xScale0',
  643. type: 'time',
  644. ticks: {
  645. callback: function(value) {
  646. return '<' + value + '>';
  647. },
  648. major: {
  649. enabled: true,
  650. callback: function(value) {
  651. return '[[' + value + ']]';
  652. }
  653. },
  654. minor: {
  655. callback: function(value) {
  656. return '(' + value + ')';
  657. }
  658. }
  659. }
  660. }]
  661. }
  662. }
  663. });
  664. this.scale = this.chart.scales.xScale0;
  665. });
  666. it('should get the correct labels for major and minor ticks', function() {
  667. var scale = this.scale;
  668. expect(scale._ticks.map(function(tick) {
  669. return tick.major;
  670. })).toEqual([true, false, false, false, false, false, true]);
  671. expect(scale.ticks).toEqual(['[[8:00 pm]]', '(8:00:10 pm)', '(8:00:20 pm)', '(8:00:30 pm)', '(8:00:40 pm)', '(8:00:50 pm)', '[[8:01 pm]]']);
  672. });
  673. it('should only use ticks.minor callback if ticks.major.enabled is false', function() {
  674. var chart = this.chart;
  675. var scale = this.scale;
  676. chart.options.scales.xAxes[0].ticks.major.enabled = false;
  677. chart.update();
  678. expect(scale.ticks).toEqual(['(8:00:00 pm)', '(8:00:10 pm)', '(8:00:20 pm)', '(8:00:30 pm)', '(8:00:40 pm)', '(8:00:50 pm)', '(8:01:00 pm)']);
  679. });
  680. it('should use ticks.callback if ticks.major.callback is omitted', function() {
  681. var chart = this.chart;
  682. var scale = this.scale;
  683. chart.options.scales.xAxes[0].ticks.major.callback = undefined;
  684. chart.update();
  685. expect(scale.ticks).toEqual(['<8:00 pm>', '(8:00:10 pm)', '(8:00:20 pm)', '(8:00:30 pm)', '(8:00:40 pm)', '(8:00:50 pm)', '<8:01 pm>']);
  686. });
  687. it('should use ticks.callback if ticks.minor.callback is omitted', function() {
  688. var chart = this.chart;
  689. var scale = this.scale;
  690. chart.options.scales.xAxes[0].ticks.minor.callback = undefined;
  691. chart.update();
  692. expect(scale.ticks).toEqual(['[[8:00 pm]]', '<8:00:10 pm>', '<8:00:20 pm>', '<8:00:30 pm>', '<8:00:40 pm>', '<8:00:50 pm>', '[[8:01 pm]]']);
  693. });
  694. });
  695. it('should get the correct label when time is specified as a string', function() {
  696. var chart = window.acquireChart({
  697. type: 'line',
  698. data: {
  699. datasets: [{
  700. xAxisID: 'xScale0',
  701. data: [{t: '2015-01-01T20:00:00', y: 10}, {t: '2015-01-02T21:00:00', y: 3}]
  702. }],
  703. },
  704. options: {
  705. scales: {
  706. xAxes: [{
  707. id: 'xScale0',
  708. type: 'time',
  709. position: 'bottom'
  710. }],
  711. }
  712. }
  713. });
  714. var xScale = chart.scales.xScale0;
  715. expect(xScale.getLabelForIndex(0, 0)).toBeTruthy();
  716. expect(xScale.getLabelForIndex(0, 0)).toBe('2015-01-01T20:00:00');
  717. });
  718. it('should get the correct label for a timestamp', function() {
  719. var chart = window.acquireChart({
  720. type: 'line',
  721. data: {
  722. datasets: [{
  723. xAxisID: 'xScale0',
  724. data: [
  725. {t: +new Date('2018-01-08 05:14:23.234'), y: 10},
  726. {t: +new Date('2018-01-09 06:17:43.426'), y: 3}
  727. ]
  728. }],
  729. },
  730. options: {
  731. scales: {
  732. xAxes: [{
  733. id: 'xScale0',
  734. type: 'time',
  735. position: 'bottom'
  736. }],
  737. }
  738. }
  739. });
  740. var xScale = chart.scales.xScale0;
  741. var label = xScale.getLabelForIndex(0, 0);
  742. expect(label).toEqual('Jan 8, 2018, 5:14:23 am');
  743. });
  744. it('should get the correct pixel for only one data in the dataset', function() {
  745. var chart = window.acquireChart({
  746. type: 'line',
  747. data: {
  748. labels: ['2016-05-27'],
  749. datasets: [{
  750. xAxisID: 'xScale0',
  751. data: [5]
  752. }]
  753. },
  754. options: {
  755. scales: {
  756. xAxes: [{
  757. id: 'xScale0',
  758. display: true,
  759. type: 'time'
  760. }]
  761. }
  762. }
  763. });
  764. var xScale = chart.scales.xScale0;
  765. var pixel = xScale.getPixelForValue('', 0, 0);
  766. expect(xScale.getValueForPixel(pixel).valueOf()).toEqual(moment(chart.data.labels[0]).valueOf());
  767. });
  768. it('does not create a negative width chart when hidden', function() {
  769. var chart = window.acquireChart({
  770. type: 'line',
  771. data: {
  772. datasets: [{
  773. data: []
  774. }]
  775. },
  776. options: {
  777. scales: {
  778. xAxes: [{
  779. type: 'time',
  780. ticks: {
  781. min: moment().subtract(1, 'months'),
  782. max: moment(),
  783. }
  784. }],
  785. },
  786. responsive: true,
  787. },
  788. }, {
  789. wrapper: {
  790. style: 'display: none',
  791. },
  792. });
  793. expect(chart.scales['y-axis-0'].width).toEqual(0);
  794. expect(chart.scales['y-axis-0'].maxWidth).toEqual(0);
  795. expect(chart.width).toEqual(0);
  796. });
  797. describe('when ticks.source', function() {
  798. describe('is "labels"', function() {
  799. beforeEach(function() {
  800. this.chart = window.acquireChart({
  801. type: 'line',
  802. data: {
  803. labels: ['2017', '2019', '2020', '2025', '2042'],
  804. datasets: [{data: [0, 1, 2, 3, 4, 5]}]
  805. },
  806. options: {
  807. scales: {
  808. xAxes: [{
  809. id: 'x',
  810. type: 'time',
  811. time: {
  812. parser: 'YYYY'
  813. },
  814. ticks: {
  815. source: 'labels'
  816. }
  817. }]
  818. }
  819. }
  820. });
  821. });
  822. it ('should generate ticks from "data.labels"', function() {
  823. var scale = this.chart.scales.x;
  824. expect(scale.min).toEqual(+moment('2017', 'YYYY'));
  825. expect(scale.max).toEqual(+moment('2042', 'YYYY'));
  826. expect(getTicksLabels(scale)).toEqual([
  827. '2017', '2019', '2020', '2025', '2042']);
  828. });
  829. it ('should not add ticks for min and max if they extend the labels range', function() {
  830. var chart = this.chart;
  831. var scale = chart.scales.x;
  832. var options = chart.options.scales.xAxes[0];
  833. options.ticks.min = '2012';
  834. options.ticks.max = '2051';
  835. chart.update();
  836. expect(scale.min).toEqual(+moment('2012', 'YYYY'));
  837. expect(scale.max).toEqual(+moment('2051', 'YYYY'));
  838. expect(getTicksLabels(scale)).toEqual([
  839. '2017', '2019', '2020', '2025', '2042']);
  840. });
  841. it ('should not duplicate ticks if min and max are the labels limits', function() {
  842. var chart = this.chart;
  843. var scale = chart.scales.x;
  844. var options = chart.options.scales.xAxes[0];
  845. options.ticks.min = '2017';
  846. options.ticks.max = '2042';
  847. chart.update();
  848. expect(scale.min).toEqual(+moment('2017', 'YYYY'));
  849. expect(scale.max).toEqual(+moment('2042', 'YYYY'));
  850. expect(getTicksLabels(scale)).toEqual([
  851. '2017', '2019', '2020', '2025', '2042']);
  852. });
  853. it ('should correctly handle empty `data.labels` using "day" if `time.unit` is undefined`', function() {
  854. var chart = this.chart;
  855. var scale = chart.scales.x;
  856. chart.data.labels = [];
  857. chart.update();
  858. expect(scale.min).toEqual(+moment().startOf('day'));
  859. expect(scale.max).toEqual(+moment().endOf('day') + 1);
  860. expect(getTicksLabels(scale)).toEqual([]);
  861. });
  862. it ('should correctly handle empty `data.labels` using `time.unit`', function() {
  863. var chart = this.chart;
  864. var scale = chart.scales.x;
  865. var options = chart.options.scales.xAxes[0];
  866. options.time.unit = 'year';
  867. chart.data.labels = [];
  868. chart.update();
  869. expect(scale.min).toEqual(+moment().startOf('year'));
  870. expect(scale.max).toEqual(+moment().endOf('year') + 1);
  871. expect(getTicksLabels(scale)).toEqual([]);
  872. });
  873. });
  874. describe('is "data"', function() {
  875. beforeEach(function() {
  876. this.chart = window.acquireChart({
  877. type: 'line',
  878. data: {
  879. labels: ['2017', '2019', '2020', '2025', '2042'],
  880. datasets: [
  881. {data: [0, 1, 2, 3, 4, 5]},
  882. {data: [
  883. {t: '2018', y: 6},
  884. {t: '2020', y: 7},
  885. {t: '2043', y: 8}
  886. ]}
  887. ]
  888. },
  889. options: {
  890. scales: {
  891. xAxes: [{
  892. id: 'x',
  893. type: 'time',
  894. time: {
  895. parser: 'YYYY'
  896. },
  897. ticks: {
  898. source: 'data'
  899. }
  900. }]
  901. }
  902. }
  903. });
  904. });
  905. it ('should generate ticks from "datasets.data"', function() {
  906. var scale = this.chart.scales.x;
  907. expect(scale.min).toEqual(+moment('2017', 'YYYY'));
  908. expect(scale.max).toEqual(+moment('2043', 'YYYY'));
  909. expect(getTicksLabels(scale)).toEqual([
  910. '2017', '2018', '2019', '2020', '2025', '2042', '2043']);
  911. });
  912. it ('should not add ticks for min and max if they extend the labels range', function() {
  913. var chart = this.chart;
  914. var scale = chart.scales.x;
  915. var options = chart.options.scales.xAxes[0];
  916. options.ticks.min = '2012';
  917. options.ticks.max = '2051';
  918. chart.update();
  919. expect(scale.min).toEqual(+moment('2012', 'YYYY'));
  920. expect(scale.max).toEqual(+moment('2051', 'YYYY'));
  921. expect(getTicksLabels(scale)).toEqual([
  922. '2017', '2018', '2019', '2020', '2025', '2042', '2043']);
  923. });
  924. it ('should not duplicate ticks if min and max are the labels limits', function() {
  925. var chart = this.chart;
  926. var scale = chart.scales.x;
  927. var options = chart.options.scales.xAxes[0];
  928. options.ticks.min = '2017';
  929. options.ticks.max = '2043';
  930. chart.update();
  931. expect(scale.min).toEqual(+moment('2017', 'YYYY'));
  932. expect(scale.max).toEqual(+moment('2043', 'YYYY'));
  933. expect(getTicksLabels(scale)).toEqual([
  934. '2017', '2018', '2019', '2020', '2025', '2042', '2043']);
  935. });
  936. it ('should correctly handle empty `data.labels` using "day" if `time.unit` is undefined`', function() {
  937. var chart = this.chart;
  938. var scale = chart.scales.x;
  939. chart.data.labels = [];
  940. chart.update();
  941. expect(scale.min).toEqual(+moment('2018', 'YYYY'));
  942. expect(scale.max).toEqual(+moment('2043', 'YYYY'));
  943. expect(getTicksLabels(scale)).toEqual([
  944. '2018', '2020', '2043']);
  945. });
  946. it ('should correctly handle empty `data.labels` and hidden datasets using `time.unit`', function() {
  947. var chart = this.chart;
  948. var scale = chart.scales.x;
  949. var options = chart.options.scales.xAxes[0];
  950. options.time.unit = 'year';
  951. chart.data.labels = [];
  952. var meta = chart.getDatasetMeta(1);
  953. meta.hidden = true;
  954. chart.update();
  955. expect(scale.min).toEqual(+moment().startOf('year'));
  956. expect(scale.max).toEqual(+moment().endOf('year') + 1);
  957. expect(getTicksLabels(scale)).toEqual([]);
  958. });
  959. });
  960. });
  961. describe('when distribution', function() {
  962. describe('is "series"', function() {
  963. beforeEach(function() {
  964. this.chart = window.acquireChart({
  965. type: 'line',
  966. data: {
  967. labels: ['2017', '2019', '2020', '2025', '2042'],
  968. datasets: [{data: [0, 1, 2, 3, 4, 5]}]
  969. },
  970. options: {
  971. scales: {
  972. xAxes: [{
  973. id: 'x',
  974. type: 'time',
  975. time: {
  976. parser: 'YYYY'
  977. },
  978. distribution: 'series',
  979. ticks: {
  980. source: 'labels'
  981. }
  982. }],
  983. yAxes: [{
  984. display: false
  985. }]
  986. }
  987. }
  988. });
  989. });
  990. it ('should space data out with the same gap, whatever their time values', function() {
  991. var scale = this.chart.scales.x;
  992. var start = scale.left;
  993. var slice = scale.width / 4;
  994. expect(scale.getPixelForValue('2017')).toBeCloseToPixel(start);
  995. expect(scale.getPixelForValue('2019')).toBeCloseToPixel(start + slice);
  996. expect(scale.getPixelForValue('2020')).toBeCloseToPixel(start + slice * 2);
  997. expect(scale.getPixelForValue('2025')).toBeCloseToPixel(start + slice * 3);
  998. expect(scale.getPixelForValue('2042')).toBeCloseToPixel(start + slice * 4);
  999. });
  1000. it ('should add a step before if scale.min is before the first data', function() {
  1001. var chart = this.chart;
  1002. var scale = chart.scales.x;
  1003. var options = chart.options.scales.xAxes[0];
  1004. options.ticks.min = '2012';
  1005. chart.update();
  1006. var start = scale.left;
  1007. var slice = scale.width / 5;
  1008. expect(scale.getPixelForValue('2017')).toBeCloseToPixel(start + slice);
  1009. expect(scale.getPixelForValue('2042')).toBeCloseToPixel(start + slice * 5);
  1010. });
  1011. it ('should add a step after if scale.max is after the last data', function() {
  1012. var chart = this.chart;
  1013. var scale = chart.scales.x;
  1014. var options = chart.options.scales.xAxes[0];
  1015. options.ticks.max = '2050';
  1016. chart.update();
  1017. var start = scale.left;
  1018. var slice = scale.width / 5;
  1019. expect(scale.getPixelForValue('2017')).toBeCloseToPixel(start);
  1020. expect(scale.getPixelForValue('2042')).toBeCloseToPixel(start + slice * 4);
  1021. });
  1022. it ('should add steps before and after if scale.min/max are outside the data range', function() {
  1023. var chart = this.chart;
  1024. var scale = chart.scales.x;
  1025. var options = chart.options.scales.xAxes[0];
  1026. options.ticks.min = '2012';
  1027. options.ticks.max = '2050';
  1028. chart.update();
  1029. var start = scale.left;
  1030. var slice = scale.width / 6;
  1031. expect(scale.getPixelForValue('2017')).toBeCloseToPixel(start + slice);
  1032. expect(scale.getPixelForValue('2042')).toBeCloseToPixel(start + slice * 5);
  1033. });
  1034. });
  1035. describe('is "linear"', function() {
  1036. beforeEach(function() {
  1037. this.chart = window.acquireChart({
  1038. type: 'line',
  1039. data: {
  1040. labels: ['2017', '2019', '2020', '2025', '2042'],
  1041. datasets: [{data: [0, 1, 2, 3, 4, 5]}]
  1042. },
  1043. options: {
  1044. scales: {
  1045. xAxes: [{
  1046. id: 'x',
  1047. type: 'time',
  1048. time: {
  1049. parser: 'YYYY'
  1050. },
  1051. distribution: 'linear',
  1052. ticks: {
  1053. source: 'labels'
  1054. }
  1055. }],
  1056. yAxes: [{
  1057. display: false
  1058. }]
  1059. }
  1060. }
  1061. });
  1062. });
  1063. it ('should space data out with a gap relative to their time values', function() {
  1064. var scale = this.chart.scales.x;
  1065. var start = scale.left;
  1066. var slice = scale.width / (2042 - 2017);
  1067. expect(scale.getPixelForValue('2017')).toBeCloseToPixel(start);
  1068. expect(scale.getPixelForValue('2019')).toBeCloseToPixel(start + slice * (2019 - 2017));
  1069. expect(scale.getPixelForValue('2020')).toBeCloseToPixel(start + slice * (2020 - 2017));
  1070. expect(scale.getPixelForValue('2025')).toBeCloseToPixel(start + slice * (2025 - 2017));
  1071. expect(scale.getPixelForValue('2042')).toBeCloseToPixel(start + slice * (2042 - 2017));
  1072. });
  1073. it ('should take in account scale min and max if outside the ticks range', function() {
  1074. var chart = this.chart;
  1075. var scale = chart.scales.x;
  1076. var options = chart.options.scales.xAxes[0];
  1077. options.ticks.min = '2012';
  1078. options.ticks.max = '2050';
  1079. chart.update();
  1080. var start = scale.left;
  1081. var slice = scale.width / (2050 - 2012);
  1082. expect(scale.getPixelForValue('2017')).toBeCloseToPixel(start + slice * (2017 - 2012));
  1083. expect(scale.getPixelForValue('2019')).toBeCloseToPixel(start + slice * (2019 - 2012));
  1084. expect(scale.getPixelForValue('2020')).toBeCloseToPixel(start + slice * (2020 - 2012));
  1085. expect(scale.getPixelForValue('2025')).toBeCloseToPixel(start + slice * (2025 - 2012));
  1086. expect(scale.getPixelForValue('2042')).toBeCloseToPixel(start + slice * (2042 - 2012));
  1087. });
  1088. });
  1089. });
  1090. describe('when bounds', function() {
  1091. describe('is "data"', function() {
  1092. it ('should preserve the data range', function() {
  1093. var chart = window.acquireChart({
  1094. type: 'line',
  1095. data: {
  1096. labels: ['02/20 08:00', '02/21 09:00', '02/22 10:00', '02/23 11:00'],
  1097. datasets: [{data: [0, 1, 2, 3, 4, 5]}]
  1098. },
  1099. options: {
  1100. scales: {
  1101. xAxes: [{
  1102. id: 'x',
  1103. type: 'time',
  1104. bounds: 'data',
  1105. time: {
  1106. parser: 'MM/DD HH:mm',
  1107. unit: 'day'
  1108. }
  1109. }],
  1110. yAxes: [{
  1111. display: false
  1112. }]
  1113. }
  1114. }
  1115. });
  1116. var scale = chart.scales.x;
  1117. expect(scale.min).toEqual(+moment('02/20 08:00', 'MM/DD HH:mm'));
  1118. expect(scale.max).toEqual(+moment('02/23 11:00', 'MM/DD HH:mm'));
  1119. expect(scale.getPixelForValue('02/20 08:00')).toBeCloseToPixel(scale.left);
  1120. expect(scale.getPixelForValue('02/23 11:00')).toBeCloseToPixel(scale.left + scale.width);
  1121. expect(getTicksLabels(scale)).toEqual([
  1122. 'Feb 21', 'Feb 22', 'Feb 23']);
  1123. });
  1124. });
  1125. describe('is "labels"', function() {
  1126. it('should preserve the label range', function() {
  1127. var chart = window.acquireChart({
  1128. type: 'line',
  1129. data: {
  1130. labels: ['02/20 08:00', '02/21 09:00', '02/22 10:00', '02/23 11:00'],
  1131. datasets: [{data: [0, 1, 2, 3, 4, 5]}]
  1132. },
  1133. options: {
  1134. scales: {
  1135. xAxes: [{
  1136. id: 'x',
  1137. type: 'time',
  1138. bounds: 'ticks',
  1139. time: {
  1140. parser: 'MM/DD HH:mm',
  1141. unit: 'day'
  1142. }
  1143. }],
  1144. yAxes: [{
  1145. display: false
  1146. }]
  1147. }
  1148. }
  1149. });
  1150. var scale = chart.scales.x;
  1151. var ticks = scale.getTicks();
  1152. expect(scale.min).toEqual(ticks[0].value);
  1153. expect(scale.max).toEqual(ticks[ticks.length - 1].value);
  1154. expect(scale.getPixelForValue('02/20 08:00')).toBeCloseToPixel(60);
  1155. expect(scale.getPixelForValue('02/23 11:00')).toBeCloseToPixel(426);
  1156. expect(getTicksLabels(scale)).toEqual([
  1157. 'Feb 20', 'Feb 21', 'Feb 22', 'Feb 23', 'Feb 24']);
  1158. });
  1159. });
  1160. });
  1161. describe('when ticks.min and/or ticks.max are defined', function() {
  1162. ['auto', 'data', 'labels'].forEach(function(source) {
  1163. ['data', 'ticks'].forEach(function(bounds) {
  1164. describe('and ticks.source is "' + source + '" and bounds "' + bounds + '"', function() {
  1165. beforeEach(function() {
  1166. this.chart = window.acquireChart({
  1167. type: 'line',
  1168. data: {
  1169. labels: ['02/20 08:00', '02/21 09:00', '02/22 10:00', '02/23 11:00'],
  1170. datasets: [{data: [0, 1, 2, 3, 4, 5]}]
  1171. },
  1172. options: {
  1173. scales: {
  1174. xAxes: [{
  1175. id: 'x',
  1176. type: 'time',
  1177. bounds: bounds,
  1178. time: {
  1179. parser: 'MM/DD HH:mm',
  1180. unit: 'day'
  1181. },
  1182. ticks: {
  1183. source: source
  1184. }
  1185. }],
  1186. yAxes: [{
  1187. display: false
  1188. }]
  1189. }
  1190. }
  1191. });
  1192. });
  1193. it ('should expand scale to the min/max range', function() {
  1194. var chart = this.chart;
  1195. var scale = chart.scales.x;
  1196. var options = chart.options.scales.xAxes[0];
  1197. var min = '02/19 07:00';
  1198. var max = '02/24 08:00';
  1199. options.ticks.min = min;
  1200. options.ticks.max = max;
  1201. chart.update();
  1202. expect(scale.min).toEqual(+moment(min, 'MM/DD HH:mm'));
  1203. expect(scale.max).toEqual(+moment(max, 'MM/DD HH:mm'));
  1204. expect(scale.getPixelForValue(min)).toBeCloseToPixel(scale.left);
  1205. expect(scale.getPixelForValue(max)).toBeCloseToPixel(scale.left + scale.width);
  1206. scale.getTicks().forEach(function(tick) {
  1207. expect(tick.value >= +moment(min, 'MM/DD HH:mm')).toBeTruthy();
  1208. expect(tick.value <= +moment(max, 'MM/DD HH:mm')).toBeTruthy();
  1209. });
  1210. });
  1211. it ('should shrink scale to the min/max range', function() {
  1212. var chart = this.chart;
  1213. var scale = chart.scales.x;
  1214. var options = chart.options.scales.xAxes[0];
  1215. var min = '02/21 07:00';
  1216. var max = '02/22 20:00';
  1217. options.ticks.min = min;
  1218. options.ticks.max = max;
  1219. chart.update();
  1220. expect(scale.min).toEqual(+moment(min, 'MM/DD HH:mm'));
  1221. expect(scale.max).toEqual(+moment(max, 'MM/DD HH:mm'));
  1222. expect(scale.getPixelForValue(min)).toBeCloseToPixel(scale.left);
  1223. expect(scale.getPixelForValue(max)).toBeCloseToPixel(scale.left + scale.width);
  1224. scale.getTicks().forEach(function(tick) {
  1225. expect(tick.value >= +moment(min, 'MM/DD HH:mm')).toBeTruthy();
  1226. expect(tick.value <= +moment(max, 'MM/DD HH:mm')).toBeTruthy();
  1227. });
  1228. });
  1229. });
  1230. });
  1231. });
  1232. });
  1233. ['auto', 'data', 'labels'].forEach(function(source) {
  1234. ['series', 'linear'].forEach(function(distribution) {
  1235. describe('when ticks.source is "' + source + '" and distribution is "' + distribution + '"', function() {
  1236. beforeEach(function() {
  1237. this.chart = window.acquireChart({
  1238. type: 'line',
  1239. data: {
  1240. labels: ['2017', '2019', '2020', '2025', '2042'],
  1241. datasets: [{data: [0, 1, 2, 3, 4, 5]}]
  1242. },
  1243. options: {
  1244. scales: {
  1245. xAxes: [{
  1246. id: 'x',
  1247. type: 'time',
  1248. time: {
  1249. parser: 'YYYY'
  1250. },
  1251. ticks: {
  1252. source: source
  1253. },
  1254. distribution: distribution
  1255. }]
  1256. }
  1257. }
  1258. });
  1259. });
  1260. it ('should not add offset from the edges', function() {
  1261. var scale = this.chart.scales.x;
  1262. expect(scale.getPixelForValue('2017')).toBeCloseToPixel(scale.left);
  1263. expect(scale.getPixelForValue('2042')).toBeCloseToPixel(scale.left + scale.width);
  1264. });
  1265. it ('should add offset from the edges if offset is true', function() {
  1266. var chart = this.chart;
  1267. var scale = chart.scales.x;
  1268. var options = chart.options.scales.xAxes[0];
  1269. options.offset = true;
  1270. chart.update();
  1271. var numTicks = scale.ticks.length;
  1272. var firstTickInterval = scale.getPixelForTick(1) - scale.getPixelForTick(0);
  1273. var lastTickInterval = scale.getPixelForTick(numTicks - 1) - scale.getPixelForTick(numTicks - 2);
  1274. expect(scale.getPixelForValue('2017')).toBeCloseToPixel(scale.left + firstTickInterval / 2);
  1275. expect(scale.getPixelForValue('2042')).toBeCloseToPixel(scale.left + scale.width - lastTickInterval / 2);
  1276. });
  1277. it ('should not add offset if min and max extend the labels range', function() {
  1278. var chart = this.chart;
  1279. var scale = chart.scales.x;
  1280. var options = chart.options.scales.xAxes[0];
  1281. options.ticks.min = '2012';
  1282. options.ticks.max = '2051';
  1283. chart.update();
  1284. expect(scale.getPixelForValue('2012')).toBeCloseToPixel(scale.left);
  1285. expect(scale.getPixelForValue('2051')).toBeCloseToPixel(scale.left + scale.width);
  1286. });
  1287. it ('should add offset if min and max extend the labels range and offset is true', function() {
  1288. var chart = this.chart;
  1289. var scale = chart.scales.x;
  1290. var options = chart.options.scales.xAxes[0];
  1291. options.ticks.min = '2012';
  1292. options.ticks.max = '2051';
  1293. options.offset = true;
  1294. chart.update();
  1295. var numTicks = scale.ticks.length;
  1296. var firstTickInterval = scale.getPixelForTick(1) - scale.getPixelForTick(0);
  1297. var lastTickInterval = scale.getPixelForTick(numTicks - 1) - scale.getPixelForTick(numTicks - 2);
  1298. expect(scale.getPixelForValue('2012')).toBeCloseToPixel(scale.left + firstTickInterval / 2);
  1299. expect(scale.getPixelForValue('2051')).toBeCloseToPixel(scale.left + scale.width - lastTickInterval / 2);
  1300. });
  1301. });
  1302. });
  1303. });
  1304. describe('when ticks.reverse', function() {
  1305. describe('is "true"', function() {
  1306. beforeEach(function() {
  1307. this.chart = window.acquireChart({
  1308. type: 'line',
  1309. data: {
  1310. labels: ['2017', '2019', '2020', '2025', '2042'],
  1311. datasets: [{data: [0, 1, 2, 3, 4, 5]}]
  1312. },
  1313. options: {
  1314. scales: {
  1315. xAxes: [{
  1316. id: 'x',
  1317. type: 'time',
  1318. time: {
  1319. parser: 'YYYY',
  1320. },
  1321. ticks: {
  1322. source: 'labels',
  1323. reverse: true
  1324. }
  1325. }],
  1326. yAxes: [{
  1327. display: false
  1328. }]
  1329. }
  1330. }
  1331. });
  1332. });
  1333. it ('should reverse the labels', function() {
  1334. var scale = this.chart.scales.x;
  1335. expect(scale.getPixelForValue('2017')).toBeCloseToPixel(scale.left + scale.width);
  1336. expect(scale.getPixelForValue('2042')).toBeCloseToPixel(scale.left);
  1337. });
  1338. it ('should reverse the values for pixels', function() {
  1339. var scale = this.chart.chart.scales.x;
  1340. expect(scale.getValueForPixel(scale.left)).toBeCloseToTime({
  1341. value: moment('2042-01-01T00:00:00'),
  1342. unit: 'hour',
  1343. });
  1344. expect(scale.getValueForPixel(scale.left + scale.width)).toBeCloseToTime({
  1345. value: moment('2017-01-01T00:00:00'),
  1346. unit: 'hour',
  1347. });
  1348. });
  1349. it ('should reverse the bars and add offsets if offset is true', function() {
  1350. var chart = this.chart;
  1351. var scale = chart.scales.x;
  1352. var options = chart.options.scales.xAxes[0];
  1353. options.offset = true;
  1354. chart.update();
  1355. var numTicks = scale.ticks.length;
  1356. var firstTickInterval = scale.getPixelForTick(1) - scale.getPixelForTick(0);
  1357. var lastTickInterval = scale.getPixelForTick(numTicks - 1) - scale.getPixelForTick(numTicks - 2);
  1358. expect(scale.getPixelForValue('2017')).toBeCloseToPixel(scale.left + scale.width - lastTickInterval / 2);
  1359. expect(scale.getPixelForValue('2042')).toBeCloseToPixel(scale.left + firstTickInterval / 2);
  1360. });
  1361. it ('should reverse the values for pixels if offset is true', function() {
  1362. var chart = this.chart;
  1363. var scale = chart.scales.x;
  1364. var options = chart.options.scales.xAxes[0];
  1365. options.offset = true;
  1366. chart.update();
  1367. var numTicks = scale.ticks.length;
  1368. var firstTickInterval = scale.getPixelForTick(1) - scale.getPixelForTick(0);
  1369. var lastTickInterval = scale.getPixelForTick(numTicks - 1) - scale.getPixelForTick(numTicks - 2);
  1370. expect(scale.getValueForPixel(scale.left + lastTickInterval / 2)).toBeCloseToTime({
  1371. value: moment('2042-01-01T00:00:00'),
  1372. unit: 'hour',
  1373. });
  1374. expect(scale.getValueForPixel(scale.left + scale.width - firstTickInterval / 2)).toBeCloseToTime({
  1375. value: moment('2017-01-01T00:00:00'),
  1376. unit: 'hour',
  1377. });
  1378. });
  1379. });
  1380. });
  1381. describe('when ticks.reverse is "true" and distribution', function() {
  1382. describe('is "series"', function() {
  1383. beforeEach(function() {
  1384. this.chart = window.acquireChart({
  1385. type: 'line',
  1386. data: {
  1387. labels: ['2017', '2019', '2020', '2025', '2042'],
  1388. datasets: [{data: [0, 1, 2, 3, 4, 5]}]
  1389. },
  1390. options: {
  1391. scales: {
  1392. xAxes: [{
  1393. id: 'x',
  1394. type: 'time',
  1395. time: {
  1396. parser: 'YYYY'
  1397. },
  1398. distribution: 'series',
  1399. ticks: {
  1400. source: 'labels',
  1401. reverse: true
  1402. }
  1403. }],
  1404. yAxes: [{
  1405. display: false
  1406. }]
  1407. }
  1408. }
  1409. });
  1410. });
  1411. it ('should reverse the labels and space data out with the same gap, whatever their time values', function() {
  1412. var scale = this.chart.scales.x;
  1413. var start = scale.left;
  1414. var slice = scale.width / 4;
  1415. expect(scale.getPixelForValue('2017')).toBeCloseToPixel(start + slice * 4);
  1416. expect(scale.getPixelForValue('2019')).toBeCloseToPixel(start + slice * 3);
  1417. expect(scale.getPixelForValue('2020')).toBeCloseToPixel(start + slice * 2);
  1418. expect(scale.getPixelForValue('2025')).toBeCloseToPixel(start + slice);
  1419. expect(scale.getPixelForValue('2042')).toBeCloseToPixel(start);
  1420. });
  1421. it ('should reverse the labels and should add a step before if scale.min is before the first data', function() {
  1422. var chart = this.chart;
  1423. var scale = chart.scales.x;
  1424. var options = chart.options.scales.xAxes[0];
  1425. options.ticks.min = '2012';
  1426. chart.update();
  1427. var start = scale.left;
  1428. var slice = scale.width / 5;
  1429. expect(scale.getPixelForValue('2017')).toBeCloseToPixel(start + slice * 4);
  1430. expect(scale.getPixelForValue('2042')).toBeCloseToPixel(start);
  1431. });
  1432. it ('should reverse the labels and should add a step after if scale.max is after the last data', function() {
  1433. var chart = this.chart;
  1434. var scale = chart.scales.x;
  1435. var options = chart.options.scales.xAxes[0];
  1436. options.ticks.max = '2050';
  1437. chart.update();
  1438. var start = scale.left;
  1439. var slice = scale.width / 5;
  1440. expect(scale.getPixelForValue('2017')).toBeCloseToPixel(start + slice * 5);
  1441. expect(scale.getPixelForValue('2042')).toBeCloseToPixel(start + slice);
  1442. });
  1443. it ('should reverse the labels and should add steps before and after if scale.min/max are outside the data range', function() {
  1444. var chart = this.chart;
  1445. var scale = chart.scales.x;
  1446. var options = chart.options.scales.xAxes[0];
  1447. options.ticks.min = '2012';
  1448. options.ticks.max = '2050';
  1449. chart.update();
  1450. var start = scale.left;
  1451. var slice = scale.width / 6;
  1452. expect(scale.getPixelForValue('2017')).toBeCloseToPixel(start + slice * 5);
  1453. expect(scale.getPixelForValue('2042')).toBeCloseToPixel(start + slice);
  1454. });
  1455. });
  1456. describe('is "linear"', function() {
  1457. beforeEach(function() {
  1458. this.chart = window.acquireChart({
  1459. type: 'line',
  1460. data: {
  1461. labels: ['2017', '2019', '2020', '2025', '2042'],
  1462. datasets: [{data: [0, 1, 2, 3, 4, 5]}]
  1463. },
  1464. options: {
  1465. scales: {
  1466. xAxes: [{
  1467. id: 'x',
  1468. type: 'time',
  1469. time: {
  1470. parser: 'YYYY'
  1471. },
  1472. distribution: 'linear',
  1473. ticks: {
  1474. source: 'labels',
  1475. reverse: true
  1476. }
  1477. }],
  1478. yAxes: [{
  1479. display: false
  1480. }]
  1481. }
  1482. }
  1483. });
  1484. });
  1485. it ('should reverse the labels and should space data out with a gap relative to their time values', function() {
  1486. var scale = this.chart.scales.x;
  1487. var start = scale.left;
  1488. var slice = scale.width / (2042 - 2017);
  1489. expect(scale.getPixelForValue('2017')).toBeCloseToPixel(start + slice * (2042 - 2017));
  1490. expect(scale.getPixelForValue('2019')).toBeCloseToPixel(start + slice * (2042 - 2019));
  1491. expect(scale.getPixelForValue('2020')).toBeCloseToPixel(start + slice * (2042 - 2020));
  1492. expect(scale.getPixelForValue('2025')).toBeCloseToPixel(start + slice * (2042 - 2025));
  1493. expect(scale.getPixelForValue('2042')).toBeCloseToPixel(start);
  1494. });
  1495. it ('should reverse the labels and should take in account scale min and max if outside the ticks range', function() {
  1496. var chart = this.chart;
  1497. var scale = chart.scales.x;
  1498. var options = chart.options.scales.xAxes[0];
  1499. options.ticks.min = '2012';
  1500. options.ticks.max = '2050';
  1501. chart.update();
  1502. var start = scale.left;
  1503. var slice = scale.width / (2050 - 2012);
  1504. expect(scale.getPixelForValue('2017')).toBeCloseToPixel(start + slice * (2050 - 2017));
  1505. expect(scale.getPixelForValue('2019')).toBeCloseToPixel(start + slice * (2050 - 2019));
  1506. expect(scale.getPixelForValue('2020')).toBeCloseToPixel(start + slice * (2050 - 2020));
  1507. expect(scale.getPixelForValue('2025')).toBeCloseToPixel(start + slice * (2050 - 2025));
  1508. expect(scale.getPixelForValue('2042')).toBeCloseToPixel(start + slice * (2050 - 2042));
  1509. });
  1510. });
  1511. });
  1512. describe('labels', function() {
  1513. it('should read labels from scale / xLabels / yLabels', function() {
  1514. var timeOpts = {
  1515. parser: 'YYYY',
  1516. unit: 'year',
  1517. displayFormats: {
  1518. year: 'YYYY'
  1519. }
  1520. };
  1521. var chart = window.acquireChart({
  1522. type: 'line',
  1523. data: {
  1524. labels: ['1975', '1976', '1977'],
  1525. xLabels: ['1985', '1986', '1987'],
  1526. yLabels: ['1995', '1996', '1997']
  1527. },
  1528. options: {
  1529. scales: {
  1530. xAxes: [{
  1531. id: 'x',
  1532. type: 'time',
  1533. labels: ['2015', '2016', '2017'],
  1534. time: timeOpts
  1535. },
  1536. {
  1537. id: 'x2',
  1538. type: 'time',
  1539. time: timeOpts
  1540. }],
  1541. yAxes: [{
  1542. id: 'y',
  1543. type: 'time',
  1544. time: timeOpts
  1545. },
  1546. {
  1547. id: 'y2',
  1548. type: 'time',
  1549. labels: ['2005', '2006', '2007'],
  1550. time: timeOpts
  1551. }]
  1552. }
  1553. }
  1554. });
  1555. expect(getTicksLabels(chart.scales.x)).toEqual(['2015', '2016', '2017']);
  1556. expect(getTicksLabels(chart.scales.x2)).toEqual(['1985', '1986', '1987']);
  1557. expect(getTicksLabels(chart.scales.y)).toEqual(['1995', '1996', '1997']);
  1558. expect(getTicksLabels(chart.scales.y2)).toEqual(['2005', '2006', '2007']);
  1559. });
  1560. });
  1561. describe('Deprecations', function() {
  1562. describe('options.time.displayFormats', function() {
  1563. it('should generate defaults from adapter presets', function() {
  1564. var chart = window.acquireChart({
  1565. type: 'line',
  1566. data: {},
  1567. options: {
  1568. scales: {
  1569. xAxes: [{
  1570. id: 'x',
  1571. type: 'time'
  1572. }]
  1573. }
  1574. }
  1575. });
  1576. // NOTE: built-in adapter uses moment
  1577. var expected = {
  1578. datetime: 'MMM D, YYYY, h:mm:ss a',
  1579. millisecond: 'h:mm:ss.SSS a',
  1580. second: 'h:mm:ss a',
  1581. minute: 'h:mm a',
  1582. hour: 'hA',
  1583. day: 'MMM D',
  1584. week: 'll',
  1585. month: 'MMM YYYY',
  1586. quarter: '[Q]Q - YYYY',
  1587. year: 'YYYY'
  1588. };
  1589. expect(chart.scales.x.options.time.displayFormats).toEqual(expected);
  1590. expect(chart.options.scales.xAxes[0].time.displayFormats).toEqual(expected);
  1591. });
  1592. it('should merge user formats with adapter presets', function() {
  1593. var chart = window.acquireChart({
  1594. type: 'line',
  1595. data: {},
  1596. options: {
  1597. scales: {
  1598. xAxes: [{
  1599. id: 'x',
  1600. type: 'time',
  1601. time: {
  1602. displayFormats: {
  1603. millisecond: 'foo',
  1604. hour: 'bar',
  1605. month: 'bla'
  1606. }
  1607. }
  1608. }]
  1609. }
  1610. }
  1611. });
  1612. // NOTE: built-in adapter uses moment
  1613. var expected = {
  1614. datetime: 'MMM D, YYYY, h:mm:ss a',
  1615. millisecond: 'foo',
  1616. second: 'h:mm:ss a',
  1617. minute: 'h:mm a',
  1618. hour: 'bar',
  1619. day: 'MMM D',
  1620. week: 'll',
  1621. month: 'bla',
  1622. quarter: '[Q]Q - YYYY',
  1623. year: 'YYYY'
  1624. };
  1625. expect(chart.scales.x.options.time.displayFormats).toEqual(expected);
  1626. expect(chart.options.scales.xAxes[0].time.displayFormats).toEqual(expected);
  1627. });
  1628. });
  1629. });
  1630. });