From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Mon, 29 Jun 2020 11:52:28 +0000 (-0700) Subject: Generate ticks from small to large (#7559) X-Git-Tag: v3.0.0-beta.2~66 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=919e50b9fcbcadfceac6e85d5b0d1347a2e6fbb7;p=thirdparty%2FChart.js.git 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 a5974aea2..b2be1b28b 100644 --- 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 de3ec340a..c7f8e88ec 100644 --- 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 c0f3def69..621482910 100644 --- 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 49d1637ba..ed3367675 100644 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 a7ef5a681..970bb28cf 100644 --- 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 1352ba860..d03f71ff5 100644 --- 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 1e1aa8c17..9f4d3a94a 100644 --- 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 ba364710e..0d1eec7cd 100644 --- 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() {