Fix category scale tick placement with autoSkip (#7622)

diff --git a/src/scales/scale.category.js b/src/scales/scale.category.js
index 988bcc0cdca2657b78714a741ea292e1c0e9c7ab..e3347bd7c86299e3da5bc067f128bdec53e6a641 100644 (file)
--- 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 5c998dc4f590a103194cc37ef1ee3c46c71a974c..fe9c74c68c8df3e967b53c3f73066ea4f7274931 100644 (file)
--- 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: {