From: Jukka Kurkela Date: Sat, 13 Mar 2021 16:36:12 +0000 (+0200) Subject: Scale: autoSkip before fit (#8627) X-Git-Tag: v3.0.0-beta.14~21 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=9799dbd5a0987c8578abd6a6f574eecfb67ca673;p=thirdparty%2FChart.js.git Scale: autoSkip before fit (#8627) Scale: autoSkip now occurs before fit in the update process --- diff --git a/src/core/core.scale.js b/src/core/core.scale.js index d7228c306..dcd3a7a64 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -192,6 +192,14 @@ function getTitleHeight(options, fallback) { return (lines * font.lineHeight) + padding.height; } +function determineMaxTicks(scale) { + const offset = scale.options.offset; + const tickLength = scale._tickSize(); + const maxScale = scale._length / tickLength + (offset ? 0 : 1); + const maxChart = scale._maxLength / tickLength; + return Math.floor(Math.min(maxScale, maxChart)); +} + /** * @param {number[]} arr */ @@ -411,6 +419,7 @@ export default class Scale extends Element { /** @type {object|null} */ this._labelSizes = null; this._length = 0; + this._maxLength = 0; this._longestTextCache = {}; /** @type {number} */ this._startPixel = undefined; @@ -572,7 +581,7 @@ export default class Scale extends Element { // Absorb the master measurements me.maxWidth = maxWidth; me.maxHeight = maxHeight; - me._margins = Object.assign({ + me._margins = margins = Object.assign({ left: 0, right: 0, top: 0, @@ -589,6 +598,10 @@ export default class Scale extends Element { me.setDimensions(); me.afterSetDimensions(); + me._maxLength = me.isHorizontal() + ? me.width + margins.left + margins.right + : me.height + margins.top + margins.bottom; + // Data min/max if (!me._dataLimitsCached) { me.beforeDataLimits(); @@ -620,18 +633,21 @@ export default class Scale extends Element { me.calculateLabelRotation(); // Preconditions: number of ticks and sizes of largest labels must be calculated beforehand me.afterCalculateLabelRotation(); - me.beforeFit(); - me.fit(); // Preconditions: label rotation and label sizes must be calculated beforehand - me.afterFit(); - // Auto-skip - me.ticks = tickOpts.display && (tickOpts.autoSkip || tickOpts.source === 'auto') ? me._autoSkip(me.ticks) : me.ticks; + if (tickOpts.display && (tickOpts.autoSkip || tickOpts.source === 'auto')) { + me.ticks = me._autoSkip(me.ticks); + me._labelSizes = null; + } if (samplingEnabled) { // Generate labels using all non-skipped ticks me._convertTicksToLabels(me.ticks); } + me.beforeFit(); + me.fit(); // Preconditions: label rotation and label sizes must be calculated beforehand + me.afterFit(); + // IMPORTANT: after this point, we consider that `this.ticks` will NEVER change! me.afterUpdate(); @@ -1162,8 +1178,8 @@ export default class Scale extends Element { */ _autoSkip(ticks) { const me = this; - const {offset, ticks: tickOpts} = me.options; - const ticksLimit = tickOpts.maxTicksLimit || (me._length / me._tickSize() + (offset ? 0 : 1)); + const tickOpts = me.options.ticks; + const ticksLimit = tickOpts.maxTicksLimit || determineMaxTicks(me); const majorIndices = tickOpts.major.enabled ? getMajorIndices(ticks) : []; const numMajorIndices = majorIndices.length; const first = majorIndices[0]; diff --git a/test/fixtures/core.layouts/refit-vertical-boxes.js b/test/fixtures/core.layouts/refit-vertical-boxes.js index b49d7885b..6ab797c31 100644 --- a/test/fixtures/core.layouts/refit-vertical-boxes.js +++ b/test/fixtures/core.layouts/refit-vertical-boxes.js @@ -1,4 +1,5 @@ module.exports = { + tolerance: 0.002, config: { type: 'line', data: { diff --git a/test/fixtures/core.layouts/refit-vertical-boxes.png b/test/fixtures/core.layouts/refit-vertical-boxes.png index f45a40634..045f73b4c 100644 Binary files a/test/fixtures/core.layouts/refit-vertical-boxes.png and b/test/fixtures/core.layouts/refit-vertical-boxes.png differ diff --git a/test/fixtures/core.scale/autoSkip/fit-after.js b/test/fixtures/core.scale/autoSkip/fit-after.js new file mode 100644 index 000000000..a6781003e --- /dev/null +++ b/test/fixtures/core.scale/autoSkip/fit-after.js @@ -0,0 +1,51 @@ +module.exports = { + description: 'https://github.com/chartjs/Chart.js/issues/3694', + tolerance: 0.002, + config: { + type: 'line', + data: { + labels: [ + 'Aaron', + 'Adam', + 'Albert', + 'Alex', + 'Allan', + 'Aman', + 'Anthony', + 'Autoenrolment', + 'Avril', + 'Bernard' + ], + datasets: [{ + backgroundColor: 'rgba(252,233,79,0.5)', + borderColor: 'rgba(252,233,79,1)', + borderWidth: 1, + data: [101, + 185, + 24, + 311, + 17, + 21, + 462, + 340, + 140, + 24 + ] + }], + }, + options: { + scales: { + x: { + backgroundColor: '#eee' + } + } + } + }, + options: { + spriteText: true, + canvas: { + width: 185, + height: 185 + } + } +}; diff --git a/test/fixtures/core.scale/autoSkip/fit-after.png b/test/fixtures/core.scale/autoSkip/fit-after.png new file mode 100644 index 000000000..78bf463b7 Binary files /dev/null and b/test/fixtures/core.scale/autoSkip/fit-after.png differ diff --git a/test/fixtures/scale.time/labels-date.png b/test/fixtures/scale.time/labels-date.png index aec874240..ac95ea0cd 100644 Binary files a/test/fixtures/scale.time/labels-date.png and b/test/fixtures/scale.time/labels-date.png differ diff --git a/test/fixtures/scale.time/labels-strings.png b/test/fixtures/scale.time/labels-strings.png index aec874240..ac95ea0cd 100644 Binary files a/test/fixtures/scale.time/labels-strings.png and b/test/fixtures/scale.time/labels-strings.png differ diff --git a/test/fixtures/scale.timeseries/financial-daily.png b/test/fixtures/scale.timeseries/financial-daily.png index 9fa48c7da..1daf5786a 100644 Binary files a/test/fixtures/scale.timeseries/financial-daily.png and b/test/fixtures/scale.timeseries/financial-daily.png differ diff --git a/test/specs/core.scale.tests.js b/test/specs/core.scale.tests.js index 48d885fb1..0f337671b 100644 --- a/test/specs/core.scale.tests.js +++ b/test/specs/core.scale.tests.js @@ -64,14 +64,14 @@ describe('Core.scale', function() { 'January 2019', 'February 2019', 'March 2019', 'April 2019', 'May 2019', 'June 2019', 'July 2019', 'August 2019', 'September 2019', 'October 2019', 'November 2019', 'December 2019', - 'January 2020', 'February 2020' + 'January 2020', 'February 2020', 'March 2020', 'April 2020' ], datasets: [{ - data: [12, 19, 3, 5, 2, 3, 7, 8, 9, 10, 11, 12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14] + data: [1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6, 7, 7, 7, 7] }] }); - expect(lastTick(chart).label).toEqual('January 2020'); + expect(lastTick(chart).label).toEqual('March 2020'); }); }); diff --git a/test/specs/scale.time.tests.js b/test/specs/scale.time.tests.js index 40f790ff8..219e0fba6 100644 --- a/test/specs/scale.time.tests.js +++ b/test/specs/scale.time.tests.js @@ -1113,7 +1113,7 @@ describe('Time scale tests', function() { }); const scale = chart.scales.x; expect(scale.getPixelForDecimal(0)).toBeCloseToPixel(29); - expect(scale.getPixelForDecimal(1.0)).toBeCloseToPixel(494); + expect(scale.getPixelForDecimal(1.0)).toBeCloseToPixel(509); }); ['data', 'labels'].forEach(function(source) {