Generate ticks from small to large (#7559)

* Generate ticks from small to large
* Add note to migration guide

diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md
index a5974aea2067236b18e44bba260a12ace874ee41..b2be1b28bcc510a48ea7ca5fb303997339f5baac 100644 (file)
--- a/docs/docs/getting-started/v3-migration.md
+++ b/docs/docs/getting-started/v3-migration.md
@@ -288,6 +288,7 @@ The following properties and methods were removed:
 
 #### Scales
 
+* `LinearScaleBase.handleDirectionalChanges`
 * `LogarithmicScale.minNotZero`
 * `Scale.getRightValue`
 * `Scale.longestLabelWidth`
@@ -410,6 +411,7 @@ The APIs listed in this section have changed in signature or behaviour from vers
 * `Scale.convertTicksToLabels` was renamed to `generateTickLabels`. It is now expected to set the label property on the ticks given as input
 * `Scale.ticks` now contains objects instead of strings
 * When the `autoSkip` option is enabled, `Scale.ticks` now contains only the non-skipped ticks instead of all ticks.
+* Ticks are now always generated in monotonically increasing order
 
 ##### Time Scale
 

diff --git a/src/scales/scale.linear.js b/src/scales/scale.linear.js
index de3ec340a1e69a46095d11d95089a7ca7d936ad8..c7f8e88ec7d6c5595f1ee892fe8086c81bbd0740 100644 (file)
--- a/src/scales/scale.linear.js
+++ b/src/scales/scale.linear.js
@@ -41,15 +41,6 @@ class LinearScale extends LinearScaleBase {
                return Math.ceil(me.height / tickFont.lineHeight);
        }
 
-       /**
-        * Called after the ticks are built
-        * @protected
-        */
-       handleDirectionalChanges(ticks) {
-               // If we are in a vertical orientation the top value is the highest so reverse the array
-               return this.isHorizontal() ? ticks : ticks.reverse();
-       }
-
        // Utils
        getPixelForValue(value) {
                const me = this;

diff --git a/src/scales/scale.linearbase.js b/src/scales/scale.linearbase.js
index c0f3def699cdc14ab9114ed995ba401596226635..621482910e52624eaf5c0c5af8c6f61d9468bc23 100644 (file)
--- a/src/scales/scale.linearbase.js
+++ b/src/scales/scale.linearbase.js
@@ -217,13 +217,6 @@ export default class LinearScaleBase extends Scale {
                return Number.POSITIVE_INFINITY;
        }
 
-       /**
-        * @protected
-        */
-       handleDirectionalChanges(ticks) {
-               return ticks;
-       }
-
        buildTicks() {
                const me = this;
                const opts = me.options;
@@ -243,9 +236,7 @@ export default class LinearScaleBase extends Scale {
                        precision: tickOpts.precision,
                        stepSize: valueOrDefault(tickOpts.fixedStepSize, tickOpts.stepSize)
                };
-               let ticks = generateTicks(numericGeneratorOptions, me);
-
-               ticks = me.handleDirectionalChanges(ticks);
+               const ticks = generateTicks(numericGeneratorOptions, me);
 
                // At this point, we need to update our max and min given the tick values since we have expanded the
                // range of the scale

diff --git a/test/fixtures/core.layouts/long-labels.png b/test/fixtures/core.layouts/long-labels.png
index 49d1637ba2ee454c178eef2872384c639ae2656b..ed33676753e1278d20fa5c518fd0b40f71245e3b 100644 (file)
Binary files a/test/fixtures/core.layouts/long-labels.png and b/test/fixtures/core.layouts/long-labels.png differ

diff --git a/test/specs/core.layouts.tests.js b/test/specs/core.layouts.tests.js
index a7ef5a681f97d68ebbc6b7d58ca28fd73546d00f..970bb28cfcec0a940d8ead7b6acd3631deba659e 100644 (file)
--- a/test/specs/core.layouts.tests.js
+++ b/test/specs/core.layouts.tests.js
@@ -570,7 +570,7 @@ describe('Chart.layouts', function() {
                        // issue #4441: y-axis labels partially hidden.
                        // minimum horizontal space required to fit labels
                        expect(yAxis.width).toBeCloseToPixel(33);
-                       expect(getLabels(yAxis)).toEqual(['2.5', '2.0', '1.5', '1.0', '0.5', '0']);
+                       expect(getLabels(yAxis)).toEqual(['0', '0.5', '1.0', '1.5', '2.0', '2.5']);
                });
        });
 });

diff --git a/test/specs/core.ticks.tests.js b/test/specs/core.ticks.tests.js
index 1352ba860920637ea238f7b0908df38ff8a4dce5..d03f71ff5ccd80a15a38182252988669159c672f 100644 (file)
--- a/test/specs/core.ticks.tests.js
+++ b/test/specs/core.ticks.tests.js
@@ -49,7 +49,7 @@ describe('Test tick generators', function() {
                var yLabels = getLabels(chart.scales.y);
 
                expect(xLabels).toEqual(['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1']);
-               expect(yLabels).toEqual(['1', '0.9', '0.8', '0.7', '0.6', '0.5', '0.4', '0.3', '0.2', '0.1', '0']);
+               expect(yLabels).toEqual(['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1']);
        });
 
        it('Should generate logarithmic spaced ticks with correct precision', function() {

diff --git a/test/specs/plugin.tooltip.tests.js b/test/specs/plugin.tooltip.tests.js
index 1e1aa8c172651cd9f74bd1e5e96a7421579a3ee7..9f4d3a94ab9d554d46bc3643e9f8622ee1c31bc9 100644 (file)
--- a/test/specs/plugin.tooltip.tests.js
+++ b/test/specs/plugin.tooltip.tests.js
@@ -2,7 +2,7 @@
 const tooltipPlugin = Chart.plugins.getAll().find(p => p.id === 'tooltip');
 const Tooltip = tooltipPlugin._element;
 
-describe('Core.Tooltip', function() {
+describe('Plugin.Tooltip', function() {
        describe('auto', jasmine.fixture.specs('core.tooltip'));
 
        describe('config', function() {

diff --git a/test/specs/scale.linear.tests.js b/test/specs/scale.linear.tests.js
index ba364710eb3e8896c534359e344acba7880531fd..0d1eec7cd208ca1a2b2f484f83630d9cd8f93e13 100644 (file)
--- a/test/specs/scale.linear.tests.js
+++ b/test/specs/scale.linear.tests.js
@@ -543,8 +543,8 @@ describe('Linear Scale', function() {
                expect(chart.scales.y.min).toBe(-1010);
                expect(chart.scales.y.max).toBe(1010);
                var labels = getLabels(chart.scales.y);
-               expect(labels[0]).toBe('1,010');
-               expect(labels[labels.length - 1]).toBe('-1,010');
+               expect(labels[0]).toBe('-1,010');
+               expect(labels[labels.length - 1]).toBe('1,010');
        });
 
        it('Should use min, max and stepSize to create fixed spaced ticks', function() {
@@ -574,7 +574,7 @@ describe('Linear Scale', function() {
                expect(chart.scales.y).not.toEqual(undefined); // must construct
                expect(chart.scales.y.min).toBe(1);
                expect(chart.scales.y.max).toBe(11);
-               expect(getLabels(chart.scales.y)).toEqual(['11', '9', '7', '5', '3', '1']);
+               expect(getLabels(chart.scales.y)).toEqual(['1', '3', '5', '7', '9', '11']);
        });
 
        it('Should create decimal steps if stepSize is a decimal number', function() {
@@ -602,7 +602,7 @@ describe('Linear Scale', function() {
                expect(chart.scales.y).not.toEqual(undefined); // must construct
                expect(chart.scales.y.min).toBe(0);
                expect(chart.scales.y.max).toBe(10);
-               expect(getLabels(chart.scales.y)).toEqual(['10', '7.5', '5', '2.5', '0']);
+               expect(getLabels(chart.scales.y)).toEqual(['0', '2.5', '5', '7.5', '10']);
        });
 
        describe('precision', function() {
@@ -631,7 +631,7 @@ describe('Linear Scale', function() {
                        expect(chart.scales.y).not.toEqual(undefined); // must construct
                        expect(chart.scales.y.min).toBe(0);
                        expect(chart.scales.y.max).toBe(2);
-                       expect(getLabels(chart.scales.y)).toEqual(['2', '1', '0']);
+                       expect(getLabels(chart.scales.y)).toEqual(['0', '1', '2']);
                });
 
                it('Should round the step size to the given number of decimal places', function() {
@@ -659,7 +659,7 @@ describe('Linear Scale', function() {
                        expect(chart.scales.y).not.toEqual(undefined); // must construct
                        expect(chart.scales.y.min).toBe(0);
                        expect(chart.scales.y.max).toBe(0.01);
-                       expect(getLabels(chart.scales.y)).toEqual(['0.01', '0']);
+                       expect(getLabels(chart.scales.y)).toEqual(['0', '0.01']);
                });
        });
 
@@ -685,19 +685,19 @@ describe('Linear Scale', function() {
                });
 
                expect(chart.scales.y).not.toEqual(undefined); // must construct
-               expect(getLabels(chart.scales.y)).toEqual(['50', '45', '40', '35', '30', '25', '20']);
+               expect(getLabels(chart.scales.y)).toEqual(['20', '25', '30', '35', '40', '45', '50']);
 
                chart.scales.y.options.beginAtZero = true;
                chart.update();
-               expect(getLabels(chart.scales.y)).toEqual(['50', '45', '40', '35', '30', '25', '20', '15', '10', '5', '0']);
+               expect(getLabels(chart.scales.y)).toEqual(['0', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50']);
 
                chart.data.datasets[0].data = [-20, -30, -40, -50];
                chart.update();
-               expect(getLabels(chart.scales.y)).toEqual(['0', '-5', '-10', '-15', '-20', '-25', '-30', '-35', '-40', '-45', '-50']);
+               expect(getLabels(chart.scales.y)).toEqual(['-50', '-45', '-40', '-35', '-30', '-25', '-20', '-15', '-10', '-5', '0']);
 
                chart.scales.y.options.beginAtZero = false;
                chart.update();
-               expect(getLabels(chart.scales.y)).toEqual(['-20', '-25', '-30', '-35', '-40', '-45', '-50']);
+               expect(getLabels(chart.scales.y)).toEqual(['-50', '-45', '-40', '-35', '-30', '-25', '-20']);
        });
 
        it('Should generate tick marks in the correct order in reversed mode', function() {
@@ -720,7 +720,7 @@ describe('Linear Scale', function() {
                        }
                });
 
-               expect(getLabels(chart.scales.y)).toEqual(['0', '10', '20', '30', '40', '50', '60', '70', '80']);
+               expect(getLabels(chart.scales.y)).toEqual(['80', '70', '60', '50', '40', '30', '20', '10', '0']);
                expect(chart.scales.y.start).toBe(80);
                expect(chart.scales.y.end).toBe(0);
        });
@@ -743,7 +743,7 @@ describe('Linear Scale', function() {
                                }
                        }
                });
-               expect(getLabels(chart.scales.y)).toEqual(['0.06', '0.05', '0.04', '0.03', '0.02', '0.01', '0']);
+               expect(getLabels(chart.scales.y)).toEqual(['0', '0.01', '0.02', '0.03', '0.04', '0.05', '0.06']);
        });
 
        it('Should correctly limit the maximum number of ticks', function() {
@@ -764,33 +764,33 @@ describe('Linear Scale', function() {
                        }
                });
 
-               expect(getLabels(chart.scales.y)).toEqual(['2.5', '2.0', '1.5', '1.0', '0.5']);
+               expect(getLabels(chart.scales.y)).toEqual(['0.5', '1.0', '1.5', '2.0', '2.5']);
 
                chart.options.scales.y.ticks.maxTicksLimit = 11;
                chart.update();
 
-               expect(getLabels(chart.scales.y)).toEqual(['2.5', '2.0', '1.5', '1.0', '0.5']);
+               expect(getLabels(chart.scales.y)).toEqual(['0.5', '1.0', '1.5', '2.0', '2.5']);
 
                chart.options.scales.y.ticks.maxTicksLimit = 21;
                chart.update();
 
                expect(getLabels(chart.scales.y)).toEqual([
-                       '2.5', '2.4', '2.3', '2.2', '2.1', '2.0', '1.9', '1.8', '1.7', '1.6',
-                       '1.5', '1.4', '1.3', '1.2', '1.1', '1.0', '0.9', '0.8', '0.7', '0.6',
-                       '0.5'
+                       '0.5',
+                       '0.6', '0.7', '0.8', '0.9', '1.0', '1.1', '1.2', '1.3', '1.4', '1.5',
+                       '1.6', '1.7', '1.8', '1.9', '2.0', '2.1', '2.2', '2.3', '2.4', '2.5'
                ]);
 
                chart.options.scales.y.ticks.maxTicksLimit = 11;
                chart.options.scales.y.ticks.stepSize = 0.01;
                chart.update();
 
-               expect(getLabels(chart.scales.y)).toEqual(['2.5', '2.0', '1.5', '1.0', '0.5']);
+               expect(getLabels(chart.scales.y)).toEqual(['0.5', '1.0', '1.5', '2.0', '2.5']);
 
                chart.options.scales.y.min = 0.3;
                chart.options.scales.y.max = 2.8;
                chart.update();
 
-               expect(getLabels(chart.scales.y)).toEqual(['2.8', '2.3', '1.8', '1.3', '0.8', '0.3']);
+               expect(getLabels(chart.scales.y)).toEqual(['0.3', '0.8', '1.3', '1.8', '2.3', '2.8']);
        });
 
        it('Should build labels using the user supplied callback', function() {