2015-09-26 22:52:14 +02:00
|
|
|
// Test the category scale
|
|
|
|
|
|
|
|
describe('Category scale tests', function() {
|
|
|
|
it('Should register the constructor with the scale service', function() {
|
|
|
|
var Constructor = Chart.scaleService.getScaleConstructor('category');
|
|
|
|
expect(Constructor).not.toBe(undefined);
|
|
|
|
expect(typeof Constructor).toBe('function');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Should have the correct default config', function() {
|
|
|
|
var defaultConfig = Chart.scaleService.getScaleDefaults('category');
|
|
|
|
expect(defaultConfig).toEqual({
|
|
|
|
display: true,
|
|
|
|
|
|
|
|
gridLines: {
|
2016-10-16 23:34:59 +02:00
|
|
|
color: 'rgba(0, 0, 0, 0.1)',
|
2016-05-17 21:11:29 +02:00
|
|
|
drawBorder: true,
|
2015-09-26 22:52:14 +02:00
|
|
|
drawOnChartArea: true,
|
|
|
|
drawTicks: true, // draw ticks extending towards the label
|
2016-04-17 03:49:08 +02:00
|
|
|
tickMarkLength: 10,
|
2015-09-26 22:52:14 +02:00
|
|
|
lineWidth: 1,
|
|
|
|
offsetGridLines: false,
|
2015-11-25 01:18:15 +01:00
|
|
|
display: true,
|
2016-10-16 23:34:59 +02:00
|
|
|
zeroLineColor: 'rgba(0,0,0,0.25)',
|
2016-08-12 18:31:54 +02:00
|
|
|
zeroLineWidth: 1,
|
2017-03-21 11:38:09 +01:00
|
|
|
zeroLineBorderDash: [],
|
|
|
|
zeroLineBorderDashOffset: 0.0,
|
2016-08-12 18:31:54 +02:00
|
|
|
borderDash: [],
|
|
|
|
borderDashOffset: 0.0
|
2015-09-26 22:52:14 +02:00
|
|
|
},
|
2016-10-16 23:34:59 +02:00
|
|
|
position: 'bottom',
|
2015-09-26 22:52:14 +02:00
|
|
|
scaleLabel: {
|
|
|
|
labelString: '',
|
2016-04-17 00:38:03 +02:00
|
|
|
display: false
|
2015-09-26 22:52:14 +02:00
|
|
|
},
|
|
|
|
ticks: {
|
|
|
|
beginAtZero: false,
|
2016-05-10 13:10:01 +02:00
|
|
|
minRotation: 0,
|
2016-04-17 00:38:03 +02:00
|
|
|
maxRotation: 50,
|
2015-09-26 22:52:14 +02:00
|
|
|
mirror: false,
|
2016-11-05 01:41:54 +01:00
|
|
|
padding: 0,
|
2015-09-26 22:52:14 +02:00
|
|
|
reverse: false,
|
2015-11-25 01:18:15 +01:00
|
|
|
display: true,
|
2015-10-19 01:48:57 +02:00
|
|
|
callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below
|
2015-12-21 23:47:38 +01:00
|
|
|
autoSkip: true,
|
2016-05-11 11:43:22 +02:00
|
|
|
autoSkipPadding: 0,
|
2017-06-15 13:20:16 +02:00
|
|
|
labelOffset: 0,
|
|
|
|
minor: {},
|
|
|
|
major: {},
|
2015-09-26 22:52:14 +02:00
|
|
|
}
|
|
|
|
});
|
2015-10-19 01:48:57 +02:00
|
|
|
|
|
|
|
// Is this actually a function
|
|
|
|
expect(defaultConfig.ticks.callback).toEqual(jasmine.any(Function));
|
2015-09-26 22:52:14 +02:00
|
|
|
});
|
|
|
|
|
2016-07-09 17:22:25 +02:00
|
|
|
it('Should generate ticks from the data labels', function() {
|
2015-09-26 22:52:14 +02:00
|
|
|
var scaleID = 'myScale';
|
|
|
|
|
|
|
|
var mockData = {
|
|
|
|
datasets: [{
|
|
|
|
yAxisID: scaleID,
|
|
|
|
data: [10, 5, 0, 25, 78]
|
|
|
|
}],
|
|
|
|
labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']
|
|
|
|
};
|
|
|
|
|
|
|
|
var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
|
|
|
|
var Constructor = Chart.scaleService.getScaleConstructor('category');
|
|
|
|
var scale = new Constructor({
|
|
|
|
ctx: {},
|
|
|
|
options: config,
|
2015-11-13 15:38:35 +01:00
|
|
|
chart: {
|
|
|
|
data: mockData
|
|
|
|
},
|
2015-09-26 22:52:14 +02:00
|
|
|
id: scaleID
|
|
|
|
});
|
|
|
|
|
2016-04-17 16:33:38 +02:00
|
|
|
scale.determineDataLimits();
|
2015-09-26 22:52:14 +02:00
|
|
|
scale.buildTicks();
|
|
|
|
expect(scale.ticks).toEqual(mockData.labels);
|
|
|
|
});
|
|
|
|
|
2016-07-09 17:22:25 +02:00
|
|
|
it('Should generate ticks from the data xLabels', function() {
|
|
|
|
var scaleID = 'myScale';
|
|
|
|
|
|
|
|
var mockData = {
|
|
|
|
datasets: [{
|
|
|
|
yAxisID: scaleID,
|
|
|
|
data: [10, 5, 0, 25, 78]
|
|
|
|
}],
|
|
|
|
xLabels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']
|
|
|
|
};
|
|
|
|
|
|
|
|
var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
|
|
|
|
var Constructor = Chart.scaleService.getScaleConstructor('category');
|
|
|
|
var scale = new Constructor({
|
|
|
|
ctx: {},
|
|
|
|
options: config,
|
|
|
|
chart: {
|
|
|
|
data: mockData
|
|
|
|
},
|
|
|
|
id: scaleID
|
|
|
|
});
|
|
|
|
|
|
|
|
scale.determineDataLimits();
|
|
|
|
scale.buildTicks();
|
|
|
|
expect(scale.ticks).toEqual(mockData.xLabels);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Should generate ticks from the data xLabels', function() {
|
|
|
|
var scaleID = 'myScale';
|
|
|
|
|
|
|
|
var mockData = {
|
|
|
|
datasets: [{
|
|
|
|
yAxisID: scaleID,
|
|
|
|
data: [10, 5, 0, 25, 78]
|
|
|
|
}],
|
|
|
|
yLabels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']
|
|
|
|
};
|
|
|
|
|
|
|
|
var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
|
|
|
|
config.position = 'left'; // y axis
|
|
|
|
var Constructor = Chart.scaleService.getScaleConstructor('category');
|
|
|
|
var scale = new Constructor({
|
|
|
|
ctx: {},
|
|
|
|
options: config,
|
|
|
|
chart: {
|
|
|
|
data: mockData
|
|
|
|
},
|
|
|
|
id: scaleID
|
|
|
|
});
|
|
|
|
|
|
|
|
scale.determineDataLimits();
|
|
|
|
scale.buildTicks();
|
|
|
|
expect(scale.ticks).toEqual(mockData.yLabels);
|
|
|
|
});
|
|
|
|
|
2016-01-23 18:44:55 +01:00
|
|
|
it ('should get the correct label for the index', function() {
|
|
|
|
var scaleID = 'myScale';
|
|
|
|
|
|
|
|
var mockData = {
|
|
|
|
datasets: [{
|
|
|
|
yAxisID: scaleID,
|
|
|
|
data: [10, 5, 0, 25, 78]
|
|
|
|
}],
|
|
|
|
labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']
|
|
|
|
};
|
|
|
|
|
|
|
|
var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
|
|
|
|
var Constructor = Chart.scaleService.getScaleConstructor('category');
|
|
|
|
var scale = new Constructor({
|
|
|
|
ctx: {},
|
|
|
|
options: config,
|
|
|
|
chart: {
|
|
|
|
data: mockData
|
|
|
|
},
|
|
|
|
id: scaleID
|
|
|
|
});
|
|
|
|
|
2016-04-17 16:33:38 +02:00
|
|
|
scale.determineDataLimits();
|
2016-01-23 18:44:55 +01:00
|
|
|
scale.buildTicks();
|
2016-04-17 00:38:03 +02:00
|
|
|
|
2016-01-23 18:44:55 +01:00
|
|
|
expect(scale.getLabelForIndex(1)).toBe('tick2');
|
|
|
|
});
|
|
|
|
|
2015-09-26 22:52:14 +02:00
|
|
|
it ('Should get the correct pixel for a value when horizontal', function() {
|
2016-10-30 18:14:59 +01:00
|
|
|
var chart = window.acquireChart({
|
|
|
|
type: 'line',
|
|
|
|
data: {
|
|
|
|
datasets: [{
|
|
|
|
xAxisID: 'xScale0',
|
|
|
|
yAxisID: 'yScale0',
|
|
|
|
data: [10, 5, 0, 25, 78]
|
|
|
|
}],
|
|
|
|
labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick_last']
|
2015-11-13 15:38:35 +01:00
|
|
|
},
|
2016-10-30 18:14:59 +01:00
|
|
|
options: {
|
|
|
|
scales: {
|
|
|
|
xAxes: [{
|
|
|
|
id: 'xScale0',
|
|
|
|
type: 'category',
|
|
|
|
position: 'bottom'
|
|
|
|
}],
|
|
|
|
yAxes: [{
|
|
|
|
id: 'yScale0',
|
|
|
|
type: 'linear'
|
|
|
|
}]
|
|
|
|
}
|
|
|
|
}
|
2015-09-26 22:52:14 +02:00
|
|
|
});
|
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
var xScale = chart.scales.xScale0;
|
2016-11-05 01:41:54 +01:00
|
|
|
expect(xScale.getPixelForValue(0, 0, 0, false)).toBeCloseToPixel(23);
|
|
|
|
expect(xScale.getPixelForValue(0, 0, 0, true)).toBeCloseToPixel(23);
|
2016-10-30 18:14:59 +01:00
|
|
|
expect(xScale.getValueForPixel(33)).toBe(0);
|
2015-09-26 22:52:14 +02:00
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
expect(xScale.getPixelForValue(0, 4, 0, false)).toBeCloseToPixel(487);
|
|
|
|
expect(xScale.getPixelForValue(0, 4, 0, true)).toBeCloseToPixel(487);
|
|
|
|
expect(xScale.getValueForPixel(487)).toBe(4);
|
2015-09-26 22:52:14 +02:00
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
xScale.options.gridLines.offsetGridLines = true;
|
2015-09-26 22:52:14 +02:00
|
|
|
|
2016-11-05 01:41:54 +01:00
|
|
|
expect(xScale.getPixelForValue(0, 0, 0, false)).toBeCloseToPixel(23);
|
|
|
|
expect(xScale.getPixelForValue(0, 0, 0, true)).toBeCloseToPixel(69);
|
2016-10-30 18:14:59 +01:00
|
|
|
expect(xScale.getValueForPixel(33)).toBe(0);
|
|
|
|
expect(xScale.getValueForPixel(78)).toBe(0);
|
2015-09-26 22:52:14 +02:00
|
|
|
|
2016-11-05 01:41:54 +01:00
|
|
|
expect(xScale.getPixelForValue(0, 4, 0, false)).toBeCloseToPixel(395);
|
2016-10-30 18:14:59 +01:00
|
|
|
expect(xScale.getPixelForValue(0, 4, 0, true)).toBeCloseToPixel(441);
|
|
|
|
expect(xScale.getValueForPixel(397)).toBe(4);
|
|
|
|
expect(xScale.getValueForPixel(441)).toBe(4);
|
2015-09-26 22:52:14 +02:00
|
|
|
});
|
|
|
|
|
2016-08-23 00:03:56 +02:00
|
|
|
it ('Should get the correct pixel for a value when there are repeated labels', function() {
|
2016-10-30 18:14:59 +01:00
|
|
|
var chart = window.acquireChart({
|
|
|
|
type: 'line',
|
|
|
|
data: {
|
|
|
|
datasets: [{
|
|
|
|
xAxisID: 'xScale0',
|
|
|
|
yAxisID: 'yScale0',
|
|
|
|
data: [10, 5, 0, 25, 78]
|
|
|
|
}],
|
|
|
|
labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick_last']
|
2016-08-23 00:03:56 +02:00
|
|
|
},
|
2016-10-30 18:14:59 +01:00
|
|
|
options: {
|
|
|
|
scales: {
|
|
|
|
xAxes: [{
|
|
|
|
id: 'xScale0',
|
|
|
|
type: 'category',
|
|
|
|
position: 'bottom'
|
|
|
|
}],
|
|
|
|
yAxes: [{
|
|
|
|
id: 'yScale0',
|
|
|
|
type: 'linear'
|
|
|
|
}]
|
|
|
|
}
|
|
|
|
}
|
2016-08-23 00:03:56 +02:00
|
|
|
});
|
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
var xScale = chart.scales.xScale0;
|
2016-11-05 01:41:54 +01:00
|
|
|
expect(xScale.getPixelForValue('tick_1', 0, 0, false)).toBeCloseToPixel(23);
|
|
|
|
expect(xScale.getPixelForValue('tick_1', 1, 0, false)).toBeCloseToPixel(139);
|
2016-08-23 00:03:56 +02:00
|
|
|
});
|
|
|
|
|
2016-04-03 05:05:48 +02:00
|
|
|
it ('Should get the correct pixel for a value when horizontal and zoomed', function() {
|
2016-10-30 18:14:59 +01:00
|
|
|
var chart = window.acquireChart({
|
|
|
|
type: 'line',
|
|
|
|
data: {
|
|
|
|
datasets: [{
|
|
|
|
xAxisID: 'xScale0',
|
|
|
|
yAxisID: 'yScale0',
|
|
|
|
data: [10, 5, 0, 25, 78]
|
|
|
|
}],
|
|
|
|
labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick_last']
|
2016-04-03 05:05:48 +02:00
|
|
|
},
|
2016-10-30 18:14:59 +01:00
|
|
|
options: {
|
|
|
|
scales: {
|
|
|
|
xAxes: [{
|
|
|
|
id: 'xScale0',
|
|
|
|
type: 'category',
|
|
|
|
position: 'bottom',
|
|
|
|
ticks: {
|
|
|
|
min: 'tick2',
|
|
|
|
max: 'tick4'
|
|
|
|
}
|
|
|
|
}],
|
|
|
|
yAxes: [{
|
|
|
|
id: 'yScale0',
|
|
|
|
type: 'linear'
|
|
|
|
}]
|
|
|
|
}
|
|
|
|
}
|
2016-04-03 05:05:48 +02:00
|
|
|
});
|
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
var xScale = chart.scales.xScale0;
|
2016-11-05 01:41:54 +01:00
|
|
|
expect(xScale.getPixelForValue(0, 1, 0, false)).toBeCloseToPixel(23);
|
|
|
|
expect(xScale.getPixelForValue(0, 1, 0, true)).toBeCloseToPixel(23);
|
2016-04-03 05:05:48 +02:00
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
expect(xScale.getPixelForValue(0, 3, 0, false)).toBeCloseToPixel(496);
|
|
|
|
expect(xScale.getPixelForValue(0, 3, 0, true)).toBeCloseToPixel(496);
|
2016-04-03 05:05:48 +02:00
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
xScale.options.gridLines.offsetGridLines = true;
|
2016-04-03 05:05:48 +02:00
|
|
|
|
2016-11-05 01:41:54 +01:00
|
|
|
expect(xScale.getPixelForValue(0, 1, 0, false)).toBeCloseToPixel(23);
|
|
|
|
expect(xScale.getPixelForValue(0, 1, 0, true)).toBeCloseToPixel(102);
|
2016-04-03 05:05:48 +02:00
|
|
|
|
2016-11-05 01:41:54 +01:00
|
|
|
expect(xScale.getPixelForValue(0, 3, 0, false)).toBeCloseToPixel(338);
|
2016-10-30 18:14:59 +01:00
|
|
|
expect(xScale.getPixelForValue(0, 3, 0, true)).toBeCloseToPixel(419);
|
2016-04-03 05:05:48 +02:00
|
|
|
});
|
|
|
|
|
2015-09-26 22:52:14 +02:00
|
|
|
it ('should get the correct pixel for a value when vertical', function() {
|
2016-10-30 18:14:59 +01:00
|
|
|
var chart = window.acquireChart({
|
|
|
|
type: 'line',
|
|
|
|
data: {
|
|
|
|
datasets: [{
|
|
|
|
xAxisID: 'xScale0',
|
|
|
|
yAxisID: 'yScale0',
|
|
|
|
data: ['3', '5', '1', '4', '2']
|
|
|
|
}],
|
|
|
|
labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'],
|
|
|
|
yLabels: ['1', '2', '3', '4', '5']
|
2015-11-13 15:38:35 +01:00
|
|
|
},
|
2016-10-30 18:14:59 +01:00
|
|
|
options: {
|
|
|
|
scales: {
|
|
|
|
xAxes: [{
|
|
|
|
id: 'xScale0',
|
|
|
|
type: 'category',
|
|
|
|
position: 'bottom',
|
|
|
|
}],
|
|
|
|
yAxes: [{
|
|
|
|
id: 'yScale0',
|
|
|
|
type: 'category',
|
|
|
|
position: 'left'
|
|
|
|
}]
|
|
|
|
}
|
|
|
|
}
|
2015-09-26 22:52:14 +02:00
|
|
|
});
|
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
var yScale = chart.scales.yScale0;
|
|
|
|
expect(yScale.getPixelForValue(0, 0, 0, false)).toBe(32);
|
|
|
|
expect(yScale.getPixelForValue(0, 0, 0, true)).toBe(32);
|
|
|
|
expect(yScale.getValueForPixel(32)).toBe(0);
|
2015-09-26 22:52:14 +02:00
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
expect(yScale.getPixelForValue(0, 4, 0, false)).toBe(484);
|
|
|
|
expect(yScale.getPixelForValue(0, 4, 0, true)).toBe(484);
|
|
|
|
expect(yScale.getValueForPixel(484)).toBe(4);
|
2015-09-26 22:52:14 +02:00
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
yScale.options.gridLines.offsetGridLines = true;
|
2015-09-26 22:52:14 +02:00
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
expect(yScale.getPixelForValue(0, 0, 0, false)).toBe(32);
|
|
|
|
expect(yScale.getPixelForValue(0, 0, 0, true)).toBe(77);
|
|
|
|
expect(yScale.getValueForPixel(32)).toBe(0);
|
|
|
|
expect(yScale.getValueForPixel(77)).toBe(0);
|
2015-09-26 22:52:14 +02:00
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
expect(yScale.getPixelForValue(0, 4, 0, false)).toBe(394);
|
|
|
|
expect(yScale.getPixelForValue(0, 4, 0, true)).toBe(439);
|
|
|
|
expect(yScale.getValueForPixel(394)).toBe(4);
|
|
|
|
expect(yScale.getValueForPixel(439)).toBe(4);
|
2015-09-26 22:52:14 +02:00
|
|
|
});
|
2016-04-03 05:05:48 +02:00
|
|
|
|
|
|
|
it ('should get the correct pixel for a value when vertical and zoomed', function() {
|
2016-10-30 18:14:59 +01:00
|
|
|
var chart = window.acquireChart({
|
|
|
|
type: 'line',
|
|
|
|
data: {
|
|
|
|
datasets: [{
|
|
|
|
xAxisID: 'xScale0',
|
|
|
|
yAxisID: 'yScale0',
|
|
|
|
data: ['3', '5', '1', '4', '2']
|
|
|
|
}],
|
|
|
|
labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'],
|
|
|
|
yLabels: ['1', '2', '3', '4', '5']
|
2016-04-03 05:05:48 +02:00
|
|
|
},
|
2016-10-30 18:14:59 +01:00
|
|
|
options: {
|
|
|
|
scales: {
|
|
|
|
xAxes: [{
|
|
|
|
id: 'xScale0',
|
|
|
|
type: 'category',
|
|
|
|
position: 'bottom',
|
|
|
|
}],
|
|
|
|
yAxes: [{
|
|
|
|
id: 'yScale0',
|
|
|
|
type: 'category',
|
|
|
|
position: 'left',
|
|
|
|
ticks: {
|
|
|
|
min: '2',
|
|
|
|
max: '4'
|
|
|
|
}
|
|
|
|
}]
|
|
|
|
}
|
|
|
|
}
|
2016-04-03 05:05:48 +02:00
|
|
|
});
|
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
var yScale = chart.scales.yScale0;
|
2016-04-03 05:05:48 +02:00
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
expect(yScale.getPixelForValue(0, 1, 0, false)).toBe(32);
|
|
|
|
expect(yScale.getPixelForValue(0, 1, 0, true)).toBe(32);
|
2016-04-03 05:05:48 +02:00
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
expect(yScale.getPixelForValue(0, 3, 0, false)).toBe(484);
|
|
|
|
expect(yScale.getPixelForValue(0, 3, 0, true)).toBe(484);
|
2016-04-03 05:05:48 +02:00
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
yScale.options.gridLines.offsetGridLines = true;
|
2016-04-03 05:05:48 +02:00
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
expect(yScale.getPixelForValue(0, 1, 0, false)).toBe(32);
|
|
|
|
expect(yScale.getPixelForValue(0, 1, 0, true)).toBe(107);
|
2016-04-03 05:05:48 +02:00
|
|
|
|
2016-10-30 18:14:59 +01:00
|
|
|
expect(yScale.getPixelForValue(0, 3, 0, false)).toBe(333);
|
|
|
|
expect(yScale.getPixelForValue(0, 3, 0, true)).toBe(409);
|
2016-04-03 05:05:48 +02:00
|
|
|
});
|
2016-04-17 00:38:03 +02:00
|
|
|
});
|