From: Jukka Kurkela Date: Wed, 15 Jul 2020 22:12:32 +0000 (+0300) Subject: Fix category scale tick placement with autoSkip (#7622) X-Git-Tag: v3.0.0-beta.2~41 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=c51af9f13e8bacaa8251a407fd837e29ec25cd11;p=thirdparty%2FChart.js.git Fix category scale tick placement with autoSkip (#7622) --- diff --git a/src/scales/scale.category.js b/src/scales/scale.category.js index 988bcc0cd..e3347bd7c 100644 --- a/src/scales/scale.category.js +++ b/src/scales/scale.category.js @@ -5,7 +5,6 @@ export default class CategoryScale extends Scale { constructor(cfg) { super(cfg); - this._numLabels = 0; /** @type {number} */ this._startValue = undefined; this._valueRange = 0; @@ -34,16 +33,19 @@ export default class CategoryScale extends Scale { const min = me.min; const max = me.max; const offset = me.options.offset; + const ticks = []; let labels = me.getLabels(); // If we are viewing some subset of labels, slice the original array labels = (min === 0 && max === labels.length - 1) ? labels : labels.slice(min, max + 1); - me._numLabels = labels.length; me._valueRange = Math.max(labels.length - (offset ? 0 : 1), 1); me._startValue = me.min - (offset ? 0.5 : 0); - return labels.map((l) => ({value: l})); + for (let value = min; value <= max; value++) { + ticks.push({value}); + } + return ticks; } getLabelForValue(value) { @@ -89,7 +91,7 @@ export default class CategoryScale extends Scale { if (index < 0 || index > ticks.length - 1) { return null; } - return me.getPixelForValue(index * me._numLabels / ticks.length + me.min); + return me.getPixelForValue(ticks[index].value); } getValueForPixel(pixel) { @@ -108,4 +110,8 @@ CategoryScale.id = 'category'; /** * @type {any} */ -CategoryScale.defaults = {}; +CategoryScale.defaults = { + ticks: { + callback: CategoryScale.prototype.getLabelForValue + } +}; diff --git a/test/specs/scale.category.tests.js b/test/specs/scale.category.tests.js index 5c998dc4f..fe9c74c68 100644 --- a/test/specs/scale.category.tests.js +++ b/test/specs/scale.category.tests.js @@ -1,13 +1,7 @@ -// Test the category scale - function getLabels(scale) { return scale.ticks.map(t => t.label); } -function getValues(scale) { - return scale.ticks.map(t => t.value); -} - describe('Category scale tests', function() { describe('auto', jasmine.fixture.specs('scale.category')); @@ -19,64 +13,58 @@ describe('Category scale tests', function() { it('Should have the correct default config', function() { var defaultConfig = Chart.defaults.scales.category; - expect(defaultConfig).toEqual({}); + expect(defaultConfig).toEqual({ + ticks: { + callback: Chart.registry.getScale('category').prototype.getLabelForValue + } + }); }); 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.defaults.scales.category); - config.position = 'bottom'; - var Constructor = Chart.registry.getScale('category'); - var scale = new Constructor({ - ctx: {}, - chart: { - data: mockData + var labels = ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']; + var chart = window.acquireChart({ + type: 'line', + data: { + xLabels: labels, + datasets: [{ + data: [10, 5, 0, 25, 78] + }] }, - id: scaleID + options: { + scales: { + x: { + type: 'category', + } + } + } }); - scale.init(config); - scale.determineDataLimits(); - scale.ticks = scale.buildTicks(); - expect(getValues(scale)).toEqual(mockData.xLabels); + var scale = chart.scales.x; + expect(getLabels(scale)).toEqual(labels); }); it('Should generate ticks from the data yLabels', 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.defaults.scales.category); - config.position = 'left'; // y axis - var Constructor = Chart.registry.getScale('category'); - var scale = new Constructor({ - ctx: {}, - chart: { - data: mockData + var labels = ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']; + var chart = window.acquireChart({ + type: 'line', + data: { + yLabels: labels, + datasets: [{ + data: [10, 5, 0, 25, 78] + }] }, - id: scaleID + options: { + scales: { + y: { + type: 'category' + } + } + } }); - scale.init(config); - scale.determineDataLimits(); - scale.ticks = scale.buildTicks(); - expect(getValues(scale)).toEqual(mockData.yLabels); + var scale = chart.scales.y; + expect(getLabels(scale)).toEqual(labels); }); it('Should generate ticks from the axis labels', function() { @@ -84,7 +72,9 @@ describe('Category scale tests', function() { var chart = window.acquireChart({ type: 'line', data: { - data: [10, 5, 0, 25, 78] + datasets: [{ + data: [10, 5, 0, 25, 78] + }] }, options: { scales: {