From 5c146a9da5bd45600f578268c1a9f94f9b3d7e1a Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Wed, 27 Apr 2016 21:19:02 -0400 Subject: [PATCH] Linear scale tests --- gulpfile.js | 1 - test/scale.linear.tests.js | 2132 ++++++++++++++++-------------------- 2 files changed, 936 insertions(+), 1197 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 786f73fd5..dc04c10ea 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -47,7 +47,6 @@ var testFiles = [ '!./test/controller.line.tests.js', '!./test/core.layoutService.tests.js', '!./test/defaultConfig.tests.js', - '!./test/scale.linear.tests.js', '!./test/scale.radialLinear.tests.js', '!./test/scale.time.tests.js' ]; diff --git a/test/scale.linear.tests.js b/test/scale.linear.tests.js index 3236949b1..3a508cc01 100644 --- a/test/scale.linear.tests.js +++ b/test/scale.linear.tests.js @@ -1,4 +1,16 @@ describe('Linear Scale', function() { + var chartInstance; + + beforeEach(function() { + window.addDefaultMatchers(jasmine); + }); + + afterEach(function() { + if (chartInstance) + { + releaseChart(chartInstance); + } + }); it('Should register the constructor with the scale service', function() { var Constructor = Chart.scaleService.getScaleConstructor('linear'); @@ -44,939 +56,685 @@ describe('Linear Scale', function() { }); it('Should correctly determine the max & min data values', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [10, 5, 0, -5, 78, -100] - }, { - yAxisID: 'second scale', - data: [-1000, 1000], - }, { - yAxisID: scaleID, - data: [150] - }] - }; - - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: Chart.scaleService.getScaleDefaults('linear'), // use default config for scale - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + yAxisID: 'yScale0', + data: [10, 5, 0, -5, 78, -100] + }, { + yAxisID: 'yScale1', + data: [-1000, 1000], + }, { + yAxisID: 'yScale0', + data: [150] + }], + labels: ['a', 'b', 'c', 'd', 'e', 'f'] }, - id: scaleID + options: { + scales: { + yAxes: [{ + id: 'yScale0', + type: 'linear' + }, { + id: 'yScale1', + type: 'linear' + }] + } + } }); - expect(scale).not.toEqual(undefined); // must construct - expect(scale.min).toBe(undefined); // not yet set - expect(scale.max).toBe(undefined); - - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; - - scale.determineDataLimits(); - expect(scale.min).toBe(-100); - expect(scale.max).toBe(150); + expect(chartInstance.scales.yScale0).not.toEqual(undefined); // must construct + expect(chartInstance.scales.yScale0.min).toBe(-100); + expect(chartInstance.scales.yScale0.max).toBe(150); }); it('Should correctly determine the max & min of string data values', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: ['10', '5', '0', '-5', '78', '-100'] - }, { - yAxisID: 'second scale', - data: ['-1000', '1000'], - }, { - yAxisID: scaleID, - data: ['150'] - }] - }; - - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: Chart.scaleService.getScaleDefaults('linear'), // use default config for scale - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + yAxisID: 'yScale0', + data: ['10', '5', '0', '-5', '78', '-100'] + }, { + yAxisID: 'yScale1', + data: ['-1000', '1000'], + }, { + yAxisID: 'yScale0', + data: ['150'] + }], + labels: ['a', 'b', 'c', 'd', 'e', 'f'] }, - id: scaleID + options: { + scales: { + yAxes: [{ + id: 'yScale0', + type: 'linear' + }, { + id: 'yScale1', + type: 'linear' + }] + } + } }); - expect(scale).not.toEqual(undefined); // must construct - expect(scale.min).toBe(undefined); // not yet set - expect(scale.max).toBe(undefined); - - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; - - scale.determineDataLimits(); - expect(scale.min).toBe(-100); - expect(scale.max).toBe(150); + expect(chartInstance.scales.yScale0).not.toEqual(undefined); // must construct + expect(chartInstance.scales.yScale0.min).toBe(-100); + expect(chartInstance.scales.yScale0.max).toBe(150); }); it('Should correctly determine the max & min data values ignoring hidden datasets', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [10, 5, 0, -5, 78, -100] - }, { - yAxisID: 'second scale', - data: [-1000, 1000], - }, { - yAxisID: scaleID, - data: [150], - hidden: true - }] - }; - - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: Chart.scaleService.getScaleDefaults('linear'), // use default config for scale - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + yAxisID: 'yScale0', + data: ['10', '5', '0', '-5', '78', '-100'] + }, { + yAxisID: 'yScale1', + data: ['-1000', '1000'], + }, { + yAxisID: 'yScale0', + data: ['150'], + hidden: true + }], + labels: ['a', 'b', 'c', 'd', 'e', 'f'] }, - id: scaleID + options: { + scales: { + yAxes: [{ + id: 'yScale0', + type: 'linear' + }, { + id: 'yScale1', + type: 'linear' + }] + } + } }); - expect(scale).not.toEqual(undefined); // must construct - expect(scale.min).toBe(undefined); // not yet set - expect(scale.max).toBe(undefined); - - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; - - scale.determineDataLimits(); - scale.buildTicks(); - expect(scale.min).toBe(-100); - expect(scale.max).toBe(80); + expect(chartInstance.scales.yScale0).not.toEqual(undefined); // must construct + expect(chartInstance.scales.yScale0.min).toBe(-100); + expect(chartInstance.scales.yScale0.max).toBe(80); }); it('Should correctly determine the max & min data values ignoring data that is NaN', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [null, 90, NaN, undefined, 45, 30] - }] - }; - - var options = Chart.scaleService.getScaleDefaults('linear'); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: options, // use default config for scale - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + yAxisID: 'yScale0', + data: [null, 90, NaN, undefined, 45, 30] + }], + labels: ['a', 'b', 'c', 'd', 'e', 'f'] }, - id: scaleID + options: { + scales: { + yAxes: [{ + id: 'yScale0', + type: 'linear' + }] + } + } }); - expect(scale).not.toEqual(undefined); // must construct - expect(scale.min).toBe(undefined); // not yet set - expect(scale.max).toBe(undefined); - - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; - - scale.determineDataLimits(); - scale.buildTicks(); - expect(scale.min).toBe(30); - expect(scale.max).toBe(90); + expect(chartInstance.scales.yScale0.min).toBe(30); + expect(chartInstance.scales.yScale0.max).toBe(90); // Scale is now stacked - options.stacked = true; + chartInstance.scales.yScale0.options.stacked = true; + chartInstance.update(); - scale.determineDataLimits(); - expect(scale.min).toBe(0); - expect(scale.max).toBe(90); + expect(chartInstance.scales.yScale0.min).toBe(0); + expect(chartInstance.scales.yScale0.max).toBe(90); }); it('Should correctly determine the max & min for scatter data', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [{ - x: 10, - y: 100 - }, { - x: -10, - y: 0 - }, { - x: 0, - y: 0 - }, { - x: 99, - y: 7 - }] - }] - }; - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScale = new Constructor({ - ctx: {}, - options: config, - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'line', + data: { + datasets: [{ + xAxisID: 'xScale0', + yAxisID: 'yScale0', + data: [{ + x: 10, + y: 100 + }, { + x: -10, + y: 0 + }, { + x: 0, + y: 0 + }, { + x: 99, + y: 7 + }] + }], }, - id: scaleID + options: { + scales: { + xAxes: [{ + id: 'xScale0', + type: 'linear', + position: 'bottom' + }], + yAxes: [{ + id: 'yScale0', + type: 'linear' + }] + } + } }); + chartInstance.update(); - // Set arbitrary width and height for now - verticalScale.width = 50; - verticalScale.height = 400; - - verticalScale.determineDataLimits(); - verticalScale.buildTicks(); - expect(verticalScale.min).toBe(0); - expect(verticalScale.max).toBe(100); - - var horizontalConfig = Chart.helpers.clone(config); - horizontalConfig.position = 'bottom'; - var horizontalScale = new Constructor({ - ctx: {}, - options: horizontalConfig, - chart: { - data: mockData - }, - id: scaleID, - }); - - // Set arbitrary width and height for now - horizontalScale.width = 400; - horizontalScale.height = 50; - - horizontalScale.determineDataLimits(); - horizontalScale.buildTicks(); - expect(horizontalScale.min).toBe(-20); - expect(horizontalScale.max).toBe(100); + expect(chartInstance.scales.xScale0.min).toBe(-20); + expect(chartInstance.scales.xScale0.max).toBe(100); + expect(chartInstance.scales.yScale0.min).toBe(0); + expect(chartInstance.scales.yScale0.max).toBe(100); }); it('Should correctly get the label for the given index', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [{ - x: 10, - y: 100 - }, { - x: -10, - y: 0 - }, { - x: 0, - y: 0 - }, { - x: 99, - y: 7 - }] - }] - }; - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: config, - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'line', + data: { + datasets: [{ + xAxisID: 'xScale0', + yAxisID: 'yScale0', + data: [{ + x: 10, + y: 100 + }, { + x: -10, + y: 0 + }, { + x: 0, + y: 0 + }, { + x: 99, + y: 7 + }] + }], }, - id: scaleID + options: { + scales: { + xAxes: [{ + id: 'xScale0', + type: 'linear', + position: 'bottom' + }], + yAxes: [{ + id: 'yScale0', + type: 'linear' + }] + } + } }); + chartInstance.update(); - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; - - scale.determineDataLimits(); - scale.buildTicks(); - - expect(scale.getLabelForIndex(3, 0)).toBe(7) + expect(chartInstance.scales.yScale0.getLabelForIndex(3, 0)).toBe(7); }); it('Should correctly determine the min and max data values when stacked mode is turned on', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [10, 5, 0, -5, 78, -100], - type: 'bar' - }, { - yAxisID: 'second scale', - data: [-1000, 1000], - }, { - yAxisID: scaleID, - data: [150, 0, 0, -100, -10, 9], - type: 'bar' - }, { - yAxisID: scaleID, - data: [10, 10, 10, 10, 10, 10], - type: 'line' - }] - }; - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - config.stacked = true; // enable scale stacked mode - - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: config, - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'line', + data: { + datasets: [{ + yAxisID: 'yScale0', + data: [10, 5, 0, -5, 78, -100], + type: 'bar' + }, { + yAxisID: 'yScale1', + data: [-1000, 1000], + }, { + yAxisID: 'yScale0', + data: [150, 0, 0, -100, -10, 9], + type: 'bar' + }, { + yAxisID: 'yScale0', + data: [10, 10, 10, 10, 10, 10], + type: 'line' + }], + labels: ['a', 'b', 'c', 'd', 'e', 'f'] }, - id: scaleID + options: { + scales: { + yAxes: [{ + id: 'yScale0', + type: 'linear', + stacked: true + }, { + id: 'yScale1', + type: 'linear' + }] + } + } }); + chartInstance.update(); - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; - - scale.determineDataLimits(); - scale.buildTicks(); - expect(scale.min).toBe(-150); - expect(scale.max).toBe(200); + expect(chartInstance.scales.yScale0.min).toBe(-150); + expect(chartInstance.scales.yScale0.max).toBe(200); }); it('Should correctly determine the min and max data values when stacked mode is turned on and there are hidden datasets', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [10, 5, 0, -5, 78, -100] - }, { - yAxisID: 'second scale', - data: [-1000, 1000], - }, { - yAxisID: scaleID, - data: [150, 0, 0, -100, -10, 9] - }, { - yAxisID: scaleID, - data: [10, 20, 30, 40, 50, 60], - hidden: true - }] - }; - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - config.stacked = true; // enable scale stacked mode - - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: config, - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + yAxisID: 'yScale0', + data: [10, 5, 0, -5, 78, -100], + }, { + yAxisID: 'yScale1', + data: [-1000, 1000], + }, { + yAxisID: 'yScale0', + data: [150, 0, 0, -100, -10, 9], + }, { + yAxisID: 'yScale0', + data: [10, 20, 30, 40, 50, 60], + hidden: true + }], + labels: ['a', 'b', 'c', 'd', 'e', 'f'] }, - id: scaleID + options: { + scales: { + yAxes: [{ + id: 'yScale0', + type: 'linear', + stacked: true + }, { + id: 'yScale1', + type: 'linear' + }] + } + } }); + chartInstance.update(); - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; - - scale.determineDataLimits(); - scale.buildTicks(); - expect(scale.min).toBe(-150); - expect(scale.max).toBe(200); + expect(chartInstance.scales.yScale0.min).toBe(-150); + expect(chartInstance.scales.yScale0.max).toBe(200); }); it('Should correctly determine the min and max data values when stacked mode is turned on there are multiple types of datasets', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - type: 'bar', - yAxisID: scaleID, - data: [10, 5, 0, -5, 78, -100] - }, { - type: 'line', - yAxisID: scaleID, - data: [10, 10, 10, 10, 10, 10], - }, { - type: 'bar', - yAxisID: scaleID, - data: [150, 0, 0, -100, -10, 9] - }] - }; - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - config.stacked = true; // enable scale stacked mode - - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: config, - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + yAxisID: 'yScale0', + type: 'bar', + data: [10, 5, 0, -5, 78, -100] + }, { + type: 'line', + data: [10, 10, 10, 10, 10, 10], + }, { + type: 'bar', + data: [150, 0, 0, -100, -10, 9] + }], + labels: ['a', 'b', 'c', 'd', 'e', 'f'] }, - id: scaleID + options: { + scales: { + yAxes: [{ + id: 'yScale0', + type: 'linear', + stacked: true + }] + } + } }); - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; - - scale.determineDataLimits(); - expect(scale.min).toBe(-105); - expect(scale.max).toBe(160); + chartInstance.scales.yScale0.determineDataLimits(); + expect(chartInstance.scales.yScale0.min).toBe(-105); + expect(chartInstance.scales.yScale0.max).toBe(160); }); it('Should ensure that the scale has a max and min that are not equal', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [] - }; - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: config, - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'bar', + data: { + datasets: [], + labels: ['a', 'b', 'c', 'd', 'e', 'f'] }, - id: scaleID + options: { + scales: { + yAxes: [{ + id: 'yScale0', + type: 'linear' + }] + } + } }); - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; - - scale.determineDataLimits(); - scale.buildTicks(); - expect(scale.min).toBe(-1); - expect(scale.max).toBe(1); + expect(chartInstance.scales.yScale0).not.toEqual(undefined); // must construct + expect(chartInstance.scales.yScale0.min).toBe(-1); + expect(chartInstance.scales.yScale0.max).toBe(1); }); it('Should use the suggestedMin and suggestedMax options', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [1, 1, 1, 2, 1, 0] - }] - }; - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - config.ticks.suggestedMin = -10; - config.ticks.suggestedMax = 10; - - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: config, - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + yAxisID: 'yScale0', + data: [1, 1, 1, 2, 1, 0] + }], + labels: ['a', 'b', 'c', 'd', 'e', 'f'] }, - id: scaleID + options: { + scales: { + yAxes: [{ + id: 'yScale0', + type: 'linear', + ticks: { + suggestedMax: 10, + suggestedMin: -10 + } + }] + } + } }); - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; - - scale.determineDataLimits(); - scale.buildTicks(); - expect(scale.min).toBe(-10); - expect(scale.max).toBe(10); + expect(chartInstance.scales.yScale0).not.toEqual(undefined); // must construct + expect(chartInstance.scales.yScale0.min).toBe(-10); + expect(chartInstance.scales.yScale0.max).toBe(10); }); it('Should use the min and max options', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [1, 1, 1, 2, 1, 0] - }] - }; - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - config.ticks.min = -1010; - config.ticks.max = 1010; - - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: config, - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + yAxisID: 'yScale0', + data: [1, 1, 1, 2, 1, 0] + }], + labels: ['a', 'b', 'c', 'd', 'e', 'f'] }, - id: scaleID + options: { + scales: { + yAxes: [{ + id: 'yScale0', + type: 'linear', + ticks: { + max: 1010, + min: -1010 + } + }] + } + } }); - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; - - scale.determineDataLimits(); - scale.buildTicks(); - expect(scale.min).toBe(-1010); - expect(scale.max).toBe(1010); - expect(scale.ticks[0]).toBe(1010); - expect(scale.ticks[scale.ticks.length - 1]).toBe(-1010); + expect(chartInstance.scales.yScale0).not.toEqual(undefined); // must construct + expect(chartInstance.scales.yScale0.min).toBe(-1010); + expect(chartInstance.scales.yScale0.max).toBe(1010); + expect(chartInstance.scales.yScale0.ticks[0]).toBe('1010'); + expect(chartInstance.scales.yScale0.ticks[chartInstance.scales.yScale0.ticks.length - 1]).toBe('-1010'); }); it('should forcibly include 0 in the range if the beginAtZero option is used', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [20, 30, 40, 50] - }] - }; - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - - - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: config, - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + yAxisID: 'yScale0', + data: [20, 30, 40, 50] + }], + labels: ['a', 'b', 'c', 'd'] }, - id: scaleID + options: { + scales: { + yAxes: [{ + id: 'yScale0', + type: 'linear', + }] + } + } }); - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; + expect(chartInstance.scales.yScale0).not.toEqual(undefined); // must construct + expect(chartInstance.scales.yScale0.ticks).toEqual(['50', '45', '40', '35', '30', '25', '20']); - scale.determineDataLimits(); - scale.buildTicks(); - expect(scale.ticks).toEqual([50, 45, 40, 35, 30, 25, 20]); + chartInstance.scales.yScale0.options.ticks.beginAtZero = true; + chartInstance.update(); + expect(chartInstance.scales.yScale0.ticks).toEqual(['50', '45', '40', '35', '30', '25', '20', '15', '10', '5', '0']); - config.ticks.beginAtZero = true; - scale.determineDataLimits(); - scale.buildTicks(); - expect(scale.ticks).toEqual([50, 45, 40, 35, 30, 25, 20, 15, 10, 5, 0]); + chartInstance.data.datasets[0].data = [-20, -30, -40, -50]; + chartInstance.update(); + expect(chartInstance.scales.yScale0.ticks).toEqual(['0', '-5', '-10', '-15', '-20', '-25', '-30', '-35', '-40', '-45', '-50']); - mockData.datasets[0].data = [-20, -30, -40, -50]; - scale.determineDataLimits(); - scale.buildTicks(); - expect(scale.ticks).toEqual([0, -5, -10, -15, -20, -25, -30, -35, -40, -45, -50]); - - config.ticks.beginAtZero = false; - scale.determineDataLimits(); - scale.buildTicks(); - expect(scale.ticks).toEqual([-20, -25, -30, -35, -40, -45, -50]); - }); - - it('Should generate tick marks', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [10, 5, 0, 25, 78] - }, ] - }; - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: config, - chart: { - data: mockData - }, - id: scaleID - }); - - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; - - scale.determineDataLimits(); - scale.buildTicks(); - - // Counts down because the lines are drawn top to bottom - expect(scale.ticks).toEqual([80, 70, 60, 50, 40, 30, 20, 10, 0]); - expect(scale.start).toBe(0); - expect(scale.end).toBe(80); + chartInstance.scales.yScale0.options.ticks.beginAtZero = false; + chartInstance.update(); + expect(chartInstance.scales.yScale0.ticks).toEqual(['-20', '-25', '-30', '-35', '-40', '-45', '-50']); }); it('Should generate tick marks in the correct order in reversed mode', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [10, 5, 0, 25, 78] - }, ] - }; - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - config.ticks.reverse = true; - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: config, - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + yAxisID: 'yScale0', + data: [10, 5, 0, 25, 78] + }], + labels: ['a', 'b', 'c', 'd'] }, - id: scaleID + options: { + scales: { + yAxes: [{ + id: 'yScale0', + type: 'linear', + ticks: { + reverse: true + } + }] + } + } }); - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; - - scale.determineDataLimits(); - scale.buildTicks(); - - // Reverse mode makes this count up - expect(scale.ticks).toEqual([0, 10, 20, 30, 40, 50, 60, 70, 80]); - expect(scale.start).toBe(80); - expect(scale.end).toBe(0); - }); - - it('Should build labels using the default template', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [10, 5, 0, 25, 78] - }, ] - }; - - var mockContext = window.createMockContext(); - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: mockContext, - options: config, - chart: { - data: mockData - }, - id: scaleID - }); - - // Set arbitrary width and height for now - scale.update(50, 400); - expect(scale.ticks).toEqual(['80', '70', '60', '50', '40', '30', '20', '10', '0']); + expect(chartInstance.scales.yScale0.ticks).toEqual(['0', '10', '20', '30', '40', '50', '60', '70', '80']); + expect(chartInstance.scales.yScale0.start).toBe(80); + expect(chartInstance.scales.yScale0.end).toBe(0); }); it('should use the correct number of decimal places in the default format function', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [0.06, 0.005, 0, 0.025, 0.0078] - }, ] - }; - - var mockContext = window.createMockContext(); - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: mockContext, - options: config, - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + yAxisID: 'yScale0', + data: [0.06, 0.005, 0, 0.025, 0.0078] + }], + labels: ['a', 'b', 'c', 'd'] }, - id: scaleID + options: { + scales: { + yAxes: [{ + id: 'yScale0', + type: 'linear', + }] + } + } }); - - // Set arbitrary width and height for now - scale.update(50, 400); - expect(scale.ticks).toEqual(['0.06', '0.05', '0.04', '0.03', '0.02', '0.01', '0']); + expect(chartInstance.scales.yScale0.ticks).toEqual(['0.06', '0.05', '0.04', '0.03', '0.02', '0.01', '0']); }); it('Should build labels using the user supplied callback', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [10, 5, 0, 25, 78] - }, ] - }; - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - config.ticks.callback = function(value, index) { - return index.toString(); - }; - - var mockContext = window.createMockContext(); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: mockContext, - options: config, - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + yAxisID: 'yScale0', + data: [10, 5, 0, 25, 78] + }], + labels: ['a', 'b', 'c', 'd'] }, - id: scaleID + options: { + scales: { + yAxes: [{ + id: 'yScale0', + type: 'linear', + ticks: { + callback: function(value, index) { + return index.toString(); + } + } + }] + } + } }); - scale.update(400, 400); - // Just the index - expect(scale.ticks).toEqual(['0', '1', '2', '3', '4', '5', '6', '7', '8']); + expect(chartInstance.scales.yScale0.ticks).toEqual(['0', '1', '2', '3', '4', '5', '6', '7', '8']); }); it('Should get the correct pixel value for a point', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [] - }] - }; - - var mockContext = window.createMockContext(); - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScale = new Constructor({ - ctx: mockContext, - options: config, - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'line', + data: { + datasets: [{ + xAxisID: 'xScale0', + yAxisID: 'yScale0', + data: [] + }], }, - id: scaleID + options: { + scales: { + xAxes: [{ + id: 'xScale0', + type: 'linear', + position: 'bottom' + }], + yAxes: [{ + id: 'yScale0', + type: 'linear' + }] + } + } }); + + var xScale = chartInstance.scales.xScale0; + expect(xScale.getPixelForValue(1, 0, 0)).toBeCloseToPixel(501); // right - paddingRight + expect(xScale.getPixelForValue(-1, 0, 0)).toBeCloseToPixel(41); // left + paddingLeft + expect(xScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(271); // halfway*/ - // Update - verticalScale.update(50, 100); - - // Fake out positioning of the scale service - verticalScale.left = 0; - verticalScale.top = 0; - verticalScale.right = 50; - verticalScale.bottom = 110; - verticalScale.paddingTop = 5; - verticalScale.paddingBottom = 5; - verticalScale.width = 50; - verticalScale.height = 110; - - expect(verticalScale.getPixelForValue(1, 0, 0)).toBe(5); // top + paddingTop - expect(verticalScale.getPixelForValue(-1, 0, 0)).toBe(105); // bottom - paddingBottom - expect(verticalScale.getPixelForValue(0, 0, 0)).toBe(55); // halfway - - var horizontalConfig = Chart.helpers.clone(config); - horizontalConfig.position = 'bottom'; - var horizontalScale = new Constructor({ - ctx: mockContext, - options: horizontalConfig, - chart: { - data: mockData - }, - id: scaleID, - }); - - horizontalScale.update(100, 50); - - // Fake out positioning of the scale service - horizontalScale.left = 0; - horizontalScale.top = 0; - horizontalScale.right = 110; - horizontalScale.bottom = 50; - horizontalScale.paddingLeft = 5; - horizontalScale.paddingRight = 5; - horizontalScale.width = 110; - horizontalScale.height = 50; - - // Range expands to [-2, 2] due to nicenum algorithm - expect(horizontalScale.getPixelForValue(2, 0, 0)).toBe(105); // right - paddingRight - expect(horizontalScale.getPixelForValue(-2, 0, 0)).toBe(5); // left + paddingLeft - expect(horizontalScale.getPixelForValue(0, 0, 0)).toBe(55); // halfway + var yScale = chartInstance.scales.yScale0; + expect(yScale.getPixelForValue(1, 0, 0)).toBeCloseToPixel(32); // top + paddingTop + expect(yScale.getPixelForValue(-1, 0, 0)).toBeCloseToPixel(484); // bottom - paddingBottom + expect(yScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(258); // halfway }); it('should fit correctly', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [-5, 0, 2, -3, 5] - }] - }; - var mockContext = window.createMockContext(); - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScale = new Constructor({ - ctx: mockContext, - options: config, - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'line', + data: { + datasets: [{ + xAxisID: 'xScale0', + yAxisID: 'yScale0', + data: [{ + x: 10, + y: 100 + }, { + x: -10, + y: 0 + }, { + x: 0, + y: 0 + }, { + x: 99, + y: 7 + }] + }], }, - id: scaleID + options: { + scales: { + xAxes: [{ + id: 'xScale0', + type: 'linear', + position: 'bottom' + }], + yAxes: [{ + id: 'yScale0', + type: 'linear' + }] + } + } }); - var minSize = verticalScale.update(100, 300); - expect(minSize).toEqual({ - width: 40, - height: 300, - }); - expect(verticalScale.width).toBe(40); - expect(verticalScale.height).toBe(300); - expect(verticalScale.paddingTop).toBe(6); - expect(verticalScale.paddingBottom).toBe(6); - expect(verticalScale.paddingLeft).toBe(0); - expect(verticalScale.paddingRight).toBe(0); + var xScale = chartInstance.scales.xScale0; + expect(xScale.paddingTop).toBe(0); + expect(xScale.paddingBottom).toBe(0); + expect(xScale.paddingLeft).toBe(0); + expect(xScale.paddingRight).toBe(13.5); + expect(xScale.width).toBeCloseToPixel(471); + expect(xScale.height).toBeCloseToPixel(28); - // Refit with margins to see the padding go away - minSize = verticalScale.update(30, 300, { - left: 0, - right: 0, - top: 15, - bottom: 3 - }); - expect(minSize).toEqual({ - width: 30, - height: 300, - }); - expect(verticalScale.paddingTop).toBe(0); - expect(verticalScale.paddingBottom).toBe(3); - expect(verticalScale.paddingLeft).toBe(0); - expect(verticalScale.paddingRight).toBe(0); + var yScale = chartInstance.scales.yScale0; + expect(yScale.paddingTop).toBe(0); + expect(yScale.paddingBottom).toBe(0); + expect(yScale.paddingLeft).toBe(0); + expect(yScale.paddingRight).toBe(0); + expect(yScale.width).toBeCloseToPixel(41); + expect(yScale.height).toBeCloseToPixel(452); // Extra size when scale label showing - config.scaleLabel.display = true; - minSize = verticalScale.update(100, 300); - expect(minSize).toEqual({ - width: 58, - height: 300, - }); - }); + xScale.options.scaleLabel.display = true; + yScale.options.scaleLabel.display = true; + chartInstance.update(); - it('should fit correctly when horizontal', function() { - var scaleID = 'myScale'; + expect(xScale.paddingTop).toBe(0); + expect(xScale.paddingBottom).toBe(0); + expect(xScale.paddingLeft).toBe(0); + expect(xScale.paddingRight).toBe(13.5); + expect(xScale.width).toBeCloseToPixel(453); + expect(xScale.height).toBeCloseToPixel(46); - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [-5, 0, 2, -3, 5] - }] - }; - var mockContext = window.createMockContext(); - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - config.position = "bottom"; - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var horizontalScale = new Constructor({ - ctx: mockContext, - options: config, - chart: { - data: mockData - }, - id: scaleID - }); - - var minSize = horizontalScale.update(200, 300); - expect(minSize).toEqual({ - width: 200, - height: 28, - }); - expect(horizontalScale.width).toBe(200); - expect(horizontalScale.height).toBe(28); - expect(horizontalScale.paddingTop).toBe(0); - expect(horizontalScale.paddingBottom).toBe(0); - expect(horizontalScale.paddingLeft).toBe(13); - expect(horizontalScale.paddingRight).toBe(8); - expect(horizontalScale.labelRotation).toBe(0); - - // Refit with margins to see the padding go away - minSize = horizontalScale.update(200, 28, { - left: 10, - right: 6, - top: 15, - bottom: 3 - }); - expect(minSize).toEqual({ - width: 200, - height: 28, - }); - expect(horizontalScale.paddingTop).toBe(0); - expect(horizontalScale.paddingBottom).toBe(0); - expect(horizontalScale.paddingLeft).toBe(3); - expect(horizontalScale.paddingRight).toBe(2); - - // Extra size when scale label showing - config.scaleLabel.display = true; - minSize = horizontalScale.update(200, 300); - expect(minSize).toEqual({ - width: 200, - height: 46, - }); + expect(yScale.paddingTop).toBe(0); + expect(yScale.paddingBottom).toBe(0); + expect(yScale.paddingLeft).toBe(0); + expect(yScale.paddingRight).toBe(0); + expect(yScale.width).toBeCloseToPixel(59); + expect(yScale.height).toBeCloseToPixel(434); }); it('Should draw correctly horizontally', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [-5, 0, 2, -3, 5] - }] - }; - var mockContext = window.createMockContext(); - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - config.position = "bottom"; - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var horizontalScale = new Constructor({ - ctx: mockContext, - options: config, - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'line', + data: { + datasets: [{ + xAxisID: 'xScale0', + yAxisID: 'yScale0', + data: [{ + x: 10, + y: -5 + }, { + x: -10, + y: 0 + }, { + x: 0, + y: 2 + }, { + x: 99, + y: -3 + }] + }], }, - id: scaleID + options: { + scales: { + xAxes: [{ + id: 'xScale0', + type: 'linear', + position: 'bottom' + }], + yAxes: [{ + id: 'yScale0', + type: 'linear' + }] + } + } }); - var minSize = horizontalScale.update(200, 300); - minSize = horizontalScale.update(200, 28, { - left: 10, - right: 6, - top: 15, - bottom: 3 - }); + var xScale = chartInstance.scales.xScale0; + var mockContext = window.createMockContext(); + xScale.ctx = mockContext; - horizontalScale.left = 0; - horizontalScale.right = minSize.width; - horizontalScale.top = 100; - horizontalScale.bottom = 100 + minSize.height; - - var chartArea = { - top: 0, - bottom: 100, - left: 0, - right: minSize.width - }; - mockContext.resetCalls(); - horizontalScale.draw(chartArea); + chartInstance.draw(); var expected = [{ "name": "setFillStyle", @@ -992,16 +750,16 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [3.5, 100] + "args": [31.5, 484] }, { "name": "lineTo", - "args": [3.5, 110] + "args": [31.5, 494] }, { "name": "moveTo", - "args": [3.5, 0] + "args": [31.5, 32] }, { "name": "lineTo", - "args": [3.5, 100] + "args": [31.5, 484] }, { "name": "stroke", "args": [] @@ -1010,13 +768,13 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [3, 110] + "args": [31, 494] }, { "name": "rotate", "args": [-0] }, { "name": "fillText", - "args": ["-5", 0, 0] + "args": ["-20", 0, 0] }, { "name": "restore", "args": [] @@ -1031,16 +789,16 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [101.5, 100] + "args": [109.5, 484] }, { "name": "lineTo", - "args": [101.5, 110] + "args": [109.5, 494] }, { "name": "moveTo", - "args": [101.5, 0] + "args": [109.5, 32] }, { "name": "lineTo", - "args": [101.5, 100] + "args": [109.5, 484] }, { "name": "stroke", "args": [] @@ -1049,7 +807,7 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [101, 110] + "args": [109, 494] }, { "name": "rotate", "args": [-0] @@ -1070,16 +828,16 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [198.5, 100] + "args": [187.5, 484] }, { "name": "lineTo", - "args": [198.5, 110] + "args": [187.5, 494] }, { "name": "moveTo", - "args": [198.5, 0] + "args": [187.5, 32] }, { "name": "lineTo", - "args": [198.5, 100] + "args": [187.5, 484] }, { "name": "stroke", "args": [] @@ -1088,13 +846,145 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [198, 110] + "args": [187, 494] }, { "name": "rotate", "args": [-0] }, { "name": "fillText", - "args": ["5", 0, 0] + "args": ["20", 0, 0] + }, { + "name": "restore", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [265.5, 484] + }, { + "name": "lineTo", + "args": [265.5, 494] + }, { + "name": "moveTo", + "args": [265.5, 32] + }, { + "name": "lineTo", + "args": [265.5, 484] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [265, 494] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["40", 0, 0] + }, { + "name": "restore", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [343.5, 484] + }, { + "name": "lineTo", + "args": [343.5, 494] + }, { + "name": "moveTo", + "args": [343.5, 32] + }, { + "name": "lineTo", + "args": [343.5, 484] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [343, 494] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["60", 0, 0] + }, { + "name": "restore", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [421.5, 484] + }, { + "name": "lineTo", + "args": [421.5, 494] + }, { + "name": "moveTo", + "args": [421.5, 32] + }, { + "name": "lineTo", + "args": [421.5, 484] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [421, 494] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["80", 0, 0] + }, { + "name": "restore", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [499.5, 484] + }, { + "name": "lineTo", + "args": [499.5, 494] + }, { + "name": "moveTo", + "args": [499.5, 32] + }, { + "name": "lineTo", + "args": [499.5, 484] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [499, 494] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["100", 0, 0] }, { "name": "restore", "args": [] @@ -1109,10 +999,10 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [0, 100.5] + "args": [31, 484.5] }, { "name": "lineTo", - "args": [200, 100.5] + "args": [512, 484.5] }, { "name": "stroke", "args": [] @@ -1120,15 +1010,15 @@ describe('Linear Scale', function() { expect(mockContext.getCalls()).toEqual(expected); // Turn off some drawing - config.gridLines.drawTicks = false; - config.gridLines.drawOnChartArea = false; - config.ticks.display = false; - config.scaleLabel.display = true; - config.scaleLabel.labelString = 'myLabel'; + xScale.options.gridLines.drawTicks = false; + xScale.options.gridLines.drawOnChartArea = false; + xScale.options.ticks.display = false; + xScale.options.scaleLabel.display = true; + xScale.options.scaleLabel.labelString = 'myLabel'; mockContext.resetCalls(); - horizontalScale.draw(); + chartInstance.draw(); expect(mockContext.getCalls()).toEqual([{ "name": "setFillStyle", "args": ["#666"] @@ -1168,12 +1058,36 @@ describe('Linear Scale', function() { }, { "name": "stroke", "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] }, { "name": "setFillStyle", "args": ["#666"] }, { "name": "fillText", - "args": ["myLabel", 100, 122] + "args": ["myLabel", 271.5, 506] }, { "name": "setLineWidth", "args": [1] @@ -1185,10 +1099,10 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [0, 100.5] + "args": [31, 484.5] }, { "name": "lineTo", - "args": [200, 100.5] + "args": [512, 484.5] }, { "name": "stroke", "args": [] @@ -1197,60 +1111,53 @@ describe('Linear Scale', function() { // Turn off display mockContext.resetCalls(); - config.display = false; - horizontalScale.draw(); + xScale.options.display = false; + chartInstance.draw(); expect(mockContext.getCalls()).toEqual([]); }); it('Should draw correctly vertically', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [-5, 0, 2, -3, 5] - }] - }; - var mockContext = window.createMockContext(); - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScale = new Constructor({ - ctx: mockContext, - options: config, - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'line', + data: { + datasets: [{ + xAxisID: 'xScale0', + yAxisID: 'yScale0', + data: [{ + x: 10, + y: -5 + }, { + x: -10, + y: 0 + }, { + x: 0, + y: 2 + }, { + x: 99, + y: -3 + }] + }], }, - id: scaleID + options: { + scales: { + xAxes: [{ + id: 'xScale0', + type: 'linear', + position: 'bottom' + }], + yAxes: [{ + id: 'yScale0', + type: 'linear' + }] + } + } }); - var minSize = verticalScale.update(100, 300); - minSize = verticalScale.update(30, 300, { - left: 0, - right: 0, - top: 15, - bottom: 3 - }); - expect(minSize).toEqual({ - width: 30, - height: 300, - }); + var yScale = chartInstance.scales.yScale0; + var mockContext = window.createMockContext(); + yScale.ctx = mockContext; - verticalScale.left = 0; - verticalScale.right = minSize.width; - verticalScale.top = 0; - verticalScale.bottom = minSize.height; - - var chartArea = { - top: 0, - bottom: minSize.height, - left: minSize.width, - right: minSize.width + 100 - }; - - mockContext.resetCalls(); - verticalScale.draw(chartArea); + chartInstance.draw(); expect(mockContext.getCalls()).toEqual([{ "name": "setFillStyle", @@ -1266,16 +1173,16 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [25, 0.5] + "args": [26, 32.5] }, { "name": "lineTo", - "args": [30, 0.5] + "args": [31, 32.5] }, { "name": "moveTo", - "args": [30, 0.5] + "args": [31, 32.5] }, { "name": "lineTo", - "args": [130, 0.5] + "args": [512, 32.5] }, { "name": "stroke", "args": [] @@ -1284,106 +1191,7 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [20, 0] - }, { - "name": "rotate", - "args": [-0] - }, { - "name": "fillText", - "args": ["5", 0, 0] - }, { - "name": "restore", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [25, 30.5] - }, { - "name": "lineTo", - "args": [30, 30.5] - }, { - "name": "moveTo", - "args": [30, 30.5] - }, { - "name": "lineTo", - "args": [130, 30.5] - }, { - "name": "stroke", - "args": [] - }, { - "name": "save", - "args": [] - }, { - "name": "translate", - "args": [20, 30] - }, { - "name": "rotate", - "args": [-0] - }, { - "name": "fillText", - "args": ["4", 0, 0] - }, { - "name": "restore", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [25, 59.5] - }, { - "name": "lineTo", - "args": [30, 59.5] - }, { - "name": "moveTo", - "args": [30, 59.5] - }, { - "name": "lineTo", - "args": [130, 59.5] - }, { - "name": "stroke", - "args": [] - }, { - "name": "save", - "args": [] - }, { - "name": "translate", - "args": [20, 59] - }, { - "name": "rotate", - "args": [-0] - }, { - "name": "fillText", - "args": ["3", 0, 0] - }, { - "name": "restore", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [25, 89.5] - }, { - "name": "lineTo", - "args": [30, 89.5] - }, { - "name": "moveTo", - "args": [30, 89.5] - }, { - "name": "lineTo", - "args": [130, 89.5] - }, { - "name": "stroke", - "args": [] - }, { - "name": "save", - "args": [] - }, { - "name": "translate", - "args": [20, 89] + "args": [21, 32] }, { "name": "rotate", "args": [-0] @@ -1398,16 +1206,16 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [25, 119.5] + "args": [26, 97.5] }, { "name": "lineTo", - "args": [30, 119.5] + "args": [31, 97.5] }, { "name": "moveTo", - "args": [30, 119.5] + "args": [31, 97.5] }, { "name": "lineTo", - "args": [130, 119.5] + "args": [512, 97.5] }, { "name": "stroke", "args": [] @@ -1416,7 +1224,7 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [20, 119] + "args": [21, 97] }, { "name": "rotate", "args": [-0] @@ -1437,16 +1245,16 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [25, 149.5] + "args": [26, 161.5] }, { "name": "lineTo", - "args": [30, 149.5] + "args": [31, 161.5] }, { "name": "moveTo", - "args": [30, 149.5] + "args": [31, 161.5] }, { "name": "lineTo", - "args": [130, 149.5] + "args": [512, 161.5] }, { "name": "stroke", "args": [] @@ -1455,7 +1263,7 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [20, 149] + "args": [21, 161] }, { "name": "rotate", "args": [-0] @@ -1476,16 +1284,16 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [25, 178.5] + "args": [26, 226.5] }, { "name": "lineTo", - "args": [30, 178.5] + "args": [31, 226.5] }, { "name": "moveTo", - "args": [30, 178.5] + "args": [31, 226.5] }, { "name": "lineTo", - "args": [130, 178.5] + "args": [512, 226.5] }, { "name": "stroke", "args": [] @@ -1494,7 +1302,7 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [20, 178] + "args": [21, 226] }, { "name": "rotate", "args": [-0] @@ -1509,16 +1317,16 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [25, 208.5] + "args": [26, 290.5] }, { "name": "lineTo", - "args": [30, 208.5] + "args": [31, 290.5] }, { "name": "moveTo", - "args": [30, 208.5] + "args": [31, 290.5] }, { "name": "lineTo", - "args": [130, 208.5] + "args": [512, 290.5] }, { "name": "stroke", "args": [] @@ -1527,7 +1335,7 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [20, 208] + "args": [21, 290] }, { "name": "rotate", "args": [-0] @@ -1542,16 +1350,16 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [25, 238.5] + "args": [26, 355.5] }, { "name": "lineTo", - "args": [30, 238.5] + "args": [31, 355.5] }, { "name": "moveTo", - "args": [30, 238.5] + "args": [31, 355.5] }, { "name": "lineTo", - "args": [130, 238.5] + "args": [512, 355.5] }, { "name": "stroke", "args": [] @@ -1560,7 +1368,7 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [20, 238] + "args": [21, 355] }, { "name": "rotate", "args": [-0] @@ -1575,16 +1383,16 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [25, 267.5] + "args": [26, 419.5] }, { "name": "lineTo", - "args": [30, 267.5] + "args": [31, 419.5] }, { "name": "moveTo", - "args": [30, 267.5] + "args": [31, 419.5] }, { "name": "lineTo", - "args": [130, 267.5] + "args": [512, 419.5] }, { "name": "stroke", "args": [] @@ -1593,7 +1401,7 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [20, 267] + "args": [21, 419] }, { "name": "rotate", "args": [-0] @@ -1608,16 +1416,16 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [25, 297.5] + "args": [26, 484.5] }, { "name": "lineTo", - "args": [30, 297.5] + "args": [31, 484.5] }, { "name": "moveTo", - "args": [30, 297.5] + "args": [31, 484.5] }, { "name": "lineTo", - "args": [130, 297.5] + "args": [512, 484.5] }, { "name": "stroke", "args": [] @@ -1626,7 +1434,7 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [20, 297] + "args": [21, 484] }, { "name": "rotate", "args": [-0] @@ -1647,24 +1455,24 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [30.5, 0] + "args": [31.5, 32] }, { "name": "lineTo", - "args": [30.5, 300] + "args": [31.5, 484] }, { "name": "stroke", "args": [] }]); // Turn off some drawing - config.gridLines.drawTicks = false; - config.gridLines.drawOnChartArea = false; - config.ticks.display = false; - config.scaleLabel.display = true; + yScale.options.gridLines.drawTicks = false; + yScale.options.gridLines.drawOnChartArea = false; + yScale.options.ticks.display = false; + yScale.options.scaleLabel.display = true; mockContext.resetCalls(); + chartInstance.draw(); - verticalScale.draw(); expect(mockContext.getCalls()).toEqual([{ "name": "setFillStyle", "args": ["#666"] @@ -1686,24 +1494,6 @@ describe('Linear Scale', function() { }, { "name": "stroke", "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] }, { "name": "setLineWidth", "args": [1] @@ -1757,7 +1547,7 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [6, 150] + "args": [6, 258] }, { "name": "rotate", "args": [-1.5707963267948966] @@ -1781,10 +1571,10 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [30.5, 0] + "args": [31.5, 32] }, { "name": "lineTo", - "args": [30.5, 300] + "args": [31.5, 484] }, { "name": "stroke", "args": [] @@ -1792,57 +1582,52 @@ describe('Linear Scale', function() { }); it("should not draw lines where the callback function returned null or undefined", function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [-5, 0, 2, -3, 5] - }] - }; - var mockContext = window.createMockContext(); - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - config.ticks.callback = function(tickValue, index) { - return index % 2 === 0 ? null : tickValue.toString(); - }; - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScale = new Constructor({ - ctx: mockContext, - options: config, - chart: { - data: mockData + chartInstance = window.acquireChart({ + type: 'line', + data: { + datasets: [{ + xAxisID: 'xScale0', + yAxisID: 'yScale0', + data: [{ + x: 10, + y: -5 + }, { + x: -10, + y: 0 + }, { + x: 0, + y: 2 + }, { + x: 99, + y: -3 + }] + }], }, - id: scaleID + options: { + scales: { + xAxes: [{ + id: 'xScale0', + type: 'linear', + position: 'bottom' + }], + yAxes: [{ + id: 'yScale0', + type: 'linear', + ticks: { + callback: function(tickValue, index) { + return index % 2 === 0 ? null : tickValue.toString(); + } + } + }] + } + } }); - var minSize = verticalScale.update(100, 300); - minSize = verticalScale.update(30, 300, { - left: 0, - right: 0, - top: 15, - bottom: 3 - }); - expect(minSize).toEqual({ - width: 30, - height: 300, - }); + var yScale = chartInstance.scales.yScale0; + var mockContext = window.createMockContext(); + yScale.ctx = mockContext; - verticalScale.left = 0; - verticalScale.right = minSize.width; - verticalScale.top = 0; - verticalScale.bottom = minSize.height; - - var chartArea = { - top: 0, - bottom: minSize.height, - left: minSize.width, - right: minSize.width + 100 - }; - - mockContext.resetCalls(); - verticalScale.draw(chartArea); + chartInstance.draw(); expect(mockContext.getCalls()).toEqual([{ "name": "setFillStyle", @@ -1858,16 +1643,16 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [25, 30.5] + "args": [26, 97.5] }, { "name": "lineTo", - "args": [30, 30.5] + "args": [31, 97.5] }, { "name": "moveTo", - "args": [30, 30.5] + "args": [31, 97.5] }, { "name": "lineTo", - "args": [130, 30.5] + "args": [512, 97.5] }, { "name": "stroke", "args": [] @@ -1876,13 +1661,13 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [20, 30] + "args": [21, 97] }, { "name": "rotate", "args": [-0] }, { "name": "fillText", - "args": ["4", 0, 0] + "args": ["1", 0, 0] }, { "name": "restore", "args": [] @@ -1891,16 +1676,16 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [25, 89.5] + "args": [26, 226.5] }, { "name": "lineTo", - "args": [30, 89.5] + "args": [31, 226.5] }, { "name": "moveTo", - "args": [30, 89.5] + "args": [31, 226.5] }, { "name": "lineTo", - "args": [130, 89.5] + "args": [512, 226.5] }, { "name": "stroke", "args": [] @@ -1909,37 +1694,31 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [20, 89] + "args": [21, 226] }, { "name": "rotate", "args": [-0] }, { "name": "fillText", - "args": ["2", 0, 0] + "args": ["-1", 0, 0] }, { "name": "restore", "args": [] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0,0,0,0.25)"] }, { "name": "beginPath", "args": [] }, { "name": "moveTo", - "args": [25, 149.5] + "args": [26, 355.5] }, { "name": "lineTo", - "args": [30, 149.5] + "args": [31, 355.5] }, { "name": "moveTo", - "args": [30, 149.5] + "args": [31, 355.5] }, { "name": "lineTo", - "args": [130, 149.5] + "args": [512, 355.5] }, { "name": "stroke", "args": [] @@ -1948,13 +1727,46 @@ describe('Linear Scale', function() { "args": [] }, { "name": "translate", - "args": [20, 149] + "args": [21, 355] }, { "name": "rotate", "args": [-0] }, { "name": "fillText", - "args": ["0", 0, 0] + "args": ["-3", 0, 0] + }, { + "name": "restore", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [26, 484.5] + }, { + "name": "lineTo", + "args": [31, 484.5] + }, { + "name": "moveTo", + "args": [31, 484.5] + }, { + "name": "lineTo", + "args": [512, 484.5] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [21, 484] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["-5", 0, 0] }, { "name": "restore", "args": [] @@ -1969,82 +1781,10 @@ describe('Linear Scale', function() { "args": [] }, { "name": "moveTo", - "args": [25, 208.5] + "args": [31.5, 32] }, { "name": "lineTo", - "args": [30, 208.5] - }, { - "name": "moveTo", - "args": [30, 208.5] - }, { - "name": "lineTo", - "args": [130, 208.5] - }, { - "name": "stroke", - "args": [] - }, { - "name": "save", - "args": [] - }, { - "name": "translate", - "args": [20, 208] - }, { - "name": "rotate", - "args": [-0] - }, { - "name": "fillText", - "args": ["-2", 0, 0] - }, { - "name": "restore", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [25, 267.5] - }, { - "name": "lineTo", - "args": [30, 267.5] - }, { - "name": "moveTo", - "args": [30, 267.5] - }, { - "name": "lineTo", - "args": [130, 267.5] - }, { - "name": "stroke", - "args": [] - }, { - "name": "save", - "args": [] - }, { - "name": "translate", - "args": [20, 267] - }, { - "name": "rotate", - "args": [-0] - }, { - "name": "fillText", - "args": ["-4", 0, 0] - }, { - "name": "restore", - "args": [] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0, 0, 0, 0.1)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [30.5, 0] - }, { - "name": "lineTo", - "args": [30.5, 300] + "args": [31.5, 484] }, { "name": "stroke", "args": []