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');
});
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
- });
-
- // 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,
+ options: {
+ scales: {
+ xAxes: [{
+ id: 'xScale0',
+ type: 'linear',
+ position: 'bottom'
+ }],
+ yAxes: [{
+ id: 'yScale0',
+ type: 'linear'
+ }]
+ }
+ }
});
+ chartInstance.update();
- // 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;
-
- scale.determineDataLimits();
- scale.buildTicks();
- expect(scale.ticks).toEqual([50, 45, 40, 35, 30, 25, 20]);
+ expect(chartInstance.scales.yScale0).not.toEqual(undefined); // must construct
+ expect(chartInstance.scales.yScale0.ticks).toEqual(['50', '45', '40', '35', '30', '25', '20']);
- config.ticks.beginAtZero = true;
- scale.determineDataLimits();
- scale.buildTicks();
- expect(scale.ticks).toEqual([50, 45, 40, 35, 30, 25, 20, 15, 10, 5, 0]);
+ 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']);
- 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]);
+ 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']);
- 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
- });
-
- // 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
+ options: {
+ scales: {
+ yAxes: [{
+ id: 'yScale0',
+ type: 'linear',
+ ticks: {
+ reverse: true
+ }
+ }]
+ }
+ }
});
- // 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
- },
- id: scaleID
- });
-
- // 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
+ 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'
+ }]
+ }
+ }
});
-
- 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 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*/
+
+ 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
- },
- id: scaleID
- });
-
- 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);
-
- // 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);
-
- // Extra size when scale label showing
- config.scaleLabel.display = true;
- minSize = verticalScale.update(100, 300);
- expect(minSize).toEqual({
- width: 58,
- height: 300,
- });
- });
-
- it('should fit correctly when horizontal', 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: 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 = 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);
+ 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);
+
+ 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 = horizontalScale.update(200, 300);
- expect(minSize).toEqual({
- width: 200,
- height: 46,
- });
+ xScale.options.scaleLabel.display = true;
+ yScale.options.scaleLabel.display = true;
+ chartInstance.update();
+
+ 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);
+
+ 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",
"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": []
"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": []
"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": []
"args": []
}, {
"name": "translate",
- "args": [101, 110]
+ "args": [109, 494]
}, {
"name": "rotate",
"args": [-0]
"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": []
"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": "setLineWidth",
- "args": [1]
- }, {
- "name": "setStrokeStyle",
- "args": ["rgba(0, 0, 0, 0.1)"]
}, {
"name": "beginPath",
"args": []
}, {
"name": "moveTo",
- "args": [0, 100.5]
+ "args": [265.5, 484]
+ }, {
+ "name": "lineTo",
+ "args": [265.5, 494]
+ }, {
+ "name": "moveTo",
+ "args": [265.5, 32]
}, {
"name": "lineTo",
- "args": [200, 100.5]
+ "args": [265.5, 484]
}, {
"name": "stroke",
"args": []
- }];
- 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';
-
- mockContext.resetCalls();
-
- horizontalScale.draw();
- expect(mockContext.getCalls()).toEqual([{
- "name": "setFillStyle",
- "args": ["#666"]
}, {
- "name": "setLineWidth",
- "args": [1]
+ "name": "save",
+ "args": []
}, {
- "name": "setStrokeStyle",
- "args": ["rgba(0, 0, 0, 0.1)"]
+ "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": "setLineWidth",
- "args": [1]
+ "name": "save",
+ "args": []
}, {
- "name": "setStrokeStyle",
- "args": ["rgba(0,0,0,0.25)"]
+ "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": "setLineWidth",
- "args": [1]
+ "name": "save",
+ "args": []
}, {
- "name": "setStrokeStyle",
- "args": ["rgba(0, 0, 0, 0.1)"]
+ "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": "setFillStyle",
- "args": ["#666"]
+ "name": "save",
+ "args": []
+ }, {
+ "name": "translate",
+ "args": [499, 494]
+ }, {
+ "name": "rotate",
+ "args": [-0]
}, {
"name": "fillText",
- "args": ["myLabel", 100, 122]
+ "args": ["100", 0, 0]
+ }, {
+ "name": "restore",
+ "args": []
}, {
"name": "setLineWidth",
"args": [1]
"args": []
}, {
"name": "moveTo",
- "args": [0, 100.5]
+ "args": [31, 484.5]
}, {
"name": "lineTo",
- "args": [200, 100.5]
+ "args": [512, 484.5]
}, {
"name": "stroke",
"args": []
- }]);
-
- // Turn off display
-
- mockContext.resetCalls();
- config.display = false;
- horizontalScale.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
- },
- id: scaleID
- });
-
- 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,
- });
-
- verticalScale.left = 0;
- verticalScale.right = minSize.width;
- verticalScale.top = 0;
- verticalScale.bottom = minSize.height;
+ }];
+ expect(mockContext.getCalls()).toEqual(expected);
- var chartArea = {
- top: 0,
- bottom: minSize.height,
- left: minSize.width,
- right: minSize.width + 100
- };
+ // Turn off some drawing
+ 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();
- verticalScale.draw(chartArea);
+ chartInstance.draw();
expect(mockContext.getCalls()).toEqual([{
"name": "setFillStyle",
"args": ["#666"]
"name": "beginPath",
"args": []
}, {
- "name": "moveTo",
- "args": [25, 0.5]
- }, {
- "name": "lineTo",
- "args": [30, 0.5]
+ "name": "stroke",
+ "args": []
}, {
- "name": "moveTo",
- "args": [30, 0.5]
+ "name": "setLineWidth",
+ "args": [1]
}, {
- "name": "lineTo",
- "args": [130, 0.5]
+ "name": "setStrokeStyle",
+ "args": ["rgba(0,0,0,0.25)"]
}, {
- "name": "stroke",
+ "name": "beginPath",
"args": []
}, {
- "name": "save",
+ "name": "stroke",
"args": []
}, {
- "name": "translate",
- "args": [20, 0]
+ "name": "setLineWidth",
+ "args": [1]
}, {
- "name": "rotate",
- "args": [-0]
+ "name": "setStrokeStyle",
+ "args": ["rgba(0, 0, 0, 0.1)"]
}, {
- "name": "fillText",
- "args": ["5", 0, 0]
+ "name": "beginPath",
+ "args": []
}, {
- "name": "restore",
+ "name": "stroke",
"args": []
}, {
"name": "beginPath",
"args": []
}, {
- "name": "moveTo",
- "args": [25, 30.5]
+ "name": "stroke",
+ "args": []
}, {
- "name": "lineTo",
- "args": [30, 30.5]
+ "name": "beginPath",
+ "args": []
}, {
- "name": "moveTo",
- "args": [30, 30.5]
+ "name": "stroke",
+ "args": []
}, {
- "name": "lineTo",
- "args": [130, 30.5]
+ "name": "beginPath",
+ "args": []
}, {
"name": "stroke",
"args": []
}, {
- "name": "save",
+ "name": "beginPath",
"args": []
}, {
- "name": "translate",
- "args": [20, 30]
+ "name": "stroke",
+ "args": []
}, {
- "name": "rotate",
- "args": [-0]
+ "name": "setFillStyle",
+ "args": ["#666"]
}, {
"name": "fillText",
- "args": ["4", 0, 0]
+ "args": ["myLabel", 271.5, 506]
}, {
- "name": "restore",
- "args": []
+ "name": "setLineWidth",
+ "args": [1]
+ }, {
+ "name": "setStrokeStyle",
+ "args": ["rgba(0, 0, 0, 0.1)"]
}, {
"name": "beginPath",
"args": []
}, {
"name": "moveTo",
- "args": [25, 59.5]
- }, {
- "name": "lineTo",
- "args": [30, 59.5]
- }, {
- "name": "moveTo",
- "args": [30, 59.5]
+ "args": [31, 484.5]
}, {
"name": "lineTo",
- "args": [130, 59.5]
+ "args": [512, 484.5]
}, {
"name": "stroke",
"args": []
+ }]);
+
+ // Turn off display
+
+ mockContext.resetCalls();
+ xScale.options.display = false;
+ chartInstance.draw();
+ expect(mockContext.getCalls()).toEqual([]);
+ });
+
+ it('Should draw correctly vertically', function() {
+ 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
+ }]
+ }],
+ },
+ options: {
+ scales: {
+ xAxes: [{
+ id: 'xScale0',
+ type: 'linear',
+ position: 'bottom'
+ }],
+ yAxes: [{
+ id: 'yScale0',
+ type: 'linear'
+ }]
+ }
+ }
+ });
+
+ var yScale = chartInstance.scales.yScale0;
+ var mockContext = window.createMockContext();
+ yScale.ctx = mockContext;
+
+ chartInstance.draw();
+
+ expect(mockContext.getCalls()).toEqual([{
+ "name": "setFillStyle",
+ "args": ["#666"]
}, {
- "name": "save",
- "args": []
- }, {
- "name": "translate",
- "args": [20, 59]
- }, {
- "name": "rotate",
- "args": [-0]
- }, {
- "name": "fillText",
- "args": ["3", 0, 0]
+ "name": "setLineWidth",
+ "args": [1]
}, {
- "name": "restore",
- "args": []
+ "name": "setStrokeStyle",
+ "args": ["rgba(0, 0, 0, 0.1)"]
}, {
"name": "beginPath",
"args": []
}, {
"name": "moveTo",
- "args": [25, 89.5]
+ "args": [26, 32.5]
}, {
"name": "lineTo",
- "args": [30, 89.5]
+ "args": [31, 32.5]
}, {
"name": "moveTo",
- "args": [30, 89.5]
+ "args": [31, 32.5]
}, {
"name": "lineTo",
- "args": [130, 89.5]
+ "args": [512, 32.5]
}, {
"name": "stroke",
"args": []
"args": []
}, {
"name": "translate",
- "args": [20, 89]
+ "args": [21, 32]
}, {
"name": "rotate",
"args": [-0]
"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": []
"args": []
}, {
"name": "translate",
- "args": [20, 119]
+ "args": [21, 97]
}, {
"name": "rotate",
"args": [-0]
"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": []
"args": []
}, {
"name": "translate",
- "args": [20, 149]
+ "args": [21, 161]
}, {
"name": "rotate",
"args": [-0]
"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": []
"args": []
}, {
"name": "translate",
- "args": [20, 178]
+ "args": [21, 226]
}, {
"name": "rotate",
"args": [-0]
"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": []
"args": []
}, {
"name": "translate",
- "args": [20, 208]
+ "args": [21, 290]
}, {
"name": "rotate",
"args": [-0]
"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": []
"args": []
}, {
"name": "translate",
- "args": [20, 238]
+ "args": [21, 355]
}, {
"name": "rotate",
"args": [-0]
"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": []
"args": []
}, {
"name": "translate",
- "args": [20, 267]
+ "args": [21, 419]
}, {
"name": "rotate",
"args": [-0]
"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": []
"args": []
}, {
"name": "translate",
- "args": [20, 297]
+ "args": [21, 484]
}, {
"name": "rotate",
"args": [-0]
"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"]
}, {
"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]
"args": []
}, {
"name": "translate",
- "args": [6, 150]
+ "args": [6, 258]
}, {
"name": "rotate",
"args": [-1.5707963267948966]
"args": []
}, {
"name": "moveTo",
- "args": [30.5, 0]
+ "args": [31.5, 32]
}, {
"name": "lineTo",
- "args": [30.5, 300]
+ "args": [31.5, 484]
}, {
"name": "stroke",
"args": []
});
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
- });
-
- 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,
+ 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();
+ }
+ }
+ }]
+ }
+ }
});
- 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
- };
+ var yScale = chartInstance.scales.yScale0;
+ var mockContext = window.createMockContext();
+ yScale.ctx = mockContext;
- mockContext.resetCalls();
- verticalScale.draw(chartArea);
+ chartInstance.draw();
expect(mockContext.getCalls()).toEqual([{
"name": "setFillStyle",
"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": []
"args": []
}, {
"name": "translate",
- "args": [20, 30]
+ "args": [21, 97]
}, {
"name": "rotate",
"args": [-0]
}, {
"name": "fillText",
- "args": ["4", 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]
- }, {
- "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, 226.5]
}, {
"name": "lineTo",
- "args": [30, 149.5]
+ "args": [31, 226.5]
}, {
"name": "moveTo",
- "args": [30, 149.5]
+ "args": [31, 226.5]
}, {
"name": "lineTo",
- "args": [130, 149.5]
+ "args": [512, 226.5]
}, {
"name": "stroke",
"args": []
"args": []
}, {
"name": "translate",
- "args": [20, 149]
+ "args": [21, 226]
}, {
"name": "rotate",
"args": [-0]
}, {
"name": "fillText",
- "args": ["0", 0, 0]
+ "args": ["-1", 0, 0]
}, {
"name": "restore",
"args": []
- }, {
- "name": "setLineWidth",
- "args": [1]
- }, {
- "name": "setStrokeStyle",
- "args": ["rgba(0, 0, 0, 0.1)"]
}, {
"name": "beginPath",
"args": []
}, {
"name": "moveTo",
- "args": [25, 208.5]
+ "args": [26, 355.5]
}, {
"name": "lineTo",
- "args": [30, 208.5]
+ "args": [31, 355.5]
}, {
"name": "moveTo",
- "args": [30, 208.5]
+ "args": [31, 355.5]
}, {
"name": "lineTo",
- "args": [130, 208.5]
+ "args": [512, 355.5]
}, {
"name": "stroke",
"args": []
"args": []
}, {
"name": "translate",
- "args": [20, 208]
+ "args": [21, 355]
}, {
"name": "rotate",
"args": [-0]
}, {
"name": "fillText",
- "args": ["-2", 0, 0]
+ "args": ["-3", 0, 0]
}, {
"name": "restore",
"args": []
"args": []
}, {
"name": "moveTo",
- "args": [25, 267.5]
+ "args": [26, 484.5]
}, {
"name": "lineTo",
- "args": [30, 267.5]
+ "args": [31, 484.5]
}, {
"name": "moveTo",
- "args": [30, 267.5]
+ "args": [31, 484.5]
}, {
"name": "lineTo",
- "args": [130, 267.5]
+ "args": [512, 484.5]
}, {
"name": "stroke",
"args": []
"args": []
}, {
"name": "translate",
- "args": [20, 267]
+ "args": [21, 484]
}, {
"name": "rotate",
"args": [-0]
}, {
"name": "fillText",
- "args": ["-4", 0, 0]
+ "args": ["-5", 0, 0]
}, {
"name": "restore",
"args": []
"args": []
}, {
"name": "moveTo",
- "args": [30.5, 0]
+ "args": [31.5, 32]
}, {
"name": "lineTo",
- "args": [30.5, 300]
+ "args": [31.5, 484]
}, {
"name": "stroke",
"args": []
projects / thirdparty / Chart.js.git / commitdiff
