From 6e3e4a156c14791644204e4da9f19bd037531c9a Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Thu, 27 Jun 2019 18:46:39 -0700 Subject: [PATCH] Improve autoSkip performance --- src/core/core.scale.js | 29 ++++++++++++----------------- src/scales/scale.category.js | 2 +- src/scales/scale.time.js | 1 + test/specs/core.scale.tests.js | 10 ++-------- 4 files changed, 16 insertions(+), 26 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 26f7b7e4c72..9fcec487ee3 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -304,11 +304,13 @@ var Scale = Element.extend({ ticks = []; for (i = 0, ilen = me.ticks.length; i < ilen; ++i) { ticks.push({ + index: i, value: me.ticks[i], major: false }); } } + me._numTicks = ticks.length; me.beforeTickToLabelConversion(); @@ -422,13 +424,13 @@ var Scale = Element.extend({ var me = this; var options = me.options; var tickOpts = options.ticks; - var ticks = me.getTicks(); var minRotation = tickOpts.minRotation || 0; var maxRotation = tickOpts.maxRotation; var labelRotation = minRotation; + var numTicks = me._numTicks; var labelSizes, maxLabelWidth, maxLabelHeight, maxWidth, tickWidth, maxHeight, maxLabelDiagonal; - if (!me._isVisible() || !tickOpts.display || minRotation >= maxRotation || ticks.length <= 1 || !me.isHorizontal()) { + if (!me._isVisible() || !tickOpts.display || minRotation >= maxRotation || numTicks <= 1 || !me.isHorizontal()) { me.labelRotation = minRotation; return; } @@ -440,11 +442,11 @@ var Scale = Element.extend({ // Estimate the width of each grid based on the canvas width, the maximum // label width and the number of tick intervals maxWidth = Math.min(me.maxWidth, me.chart.width - maxLabelWidth); - tickWidth = options.offset ? me.maxWidth / ticks.length : maxWidth / (ticks.length - 1); + tickWidth = options.offset ? me.maxWidth / numTicks : maxWidth / (numTicks - 1); // Allow 3 pixels x2 padding either side for label readability if (maxLabelWidth + 6 > tickWidth) { - tickWidth = maxWidth / (ticks.length - (options.offset ? 0.5 : 1)); + tickWidth = maxWidth / (numTicks - (options.offset ? 0.5 : 1)); maxHeight = me.maxHeight - getTickMarkLength(options.gridLines) - tickOpts.padding - getScaleLabelHeight(options.scaleLabel); maxLabelDiagonal = Math.sqrt(maxLabelWidth * maxLabelWidth + maxLabelHeight * maxLabelHeight); @@ -475,7 +477,6 @@ var Scale = Element.extend({ }; var chart = me.chart; - var ticks = me.getTicks(); var opts = me.options; var tickOpts = opts.ticks; var scaleLabelOpts = opts.scaleLabel; @@ -523,7 +524,7 @@ var Scale = Element.extend({ minSize.height = Math.min(me.maxHeight, minSize.height + labelHeight + tickPadding); var offsetLeft = me.getPixelForTick(0) - me.left; - var offsetRight = me.right - me.getPixelForTick(ticks.length - 1); + var offsetRight = me.right - me.getPixelForTick(me._numTicks - 1); var paddingLeft, paddingRight; // Ensure that our ticks are always inside the canvas. When rotated, ticks are right aligned @@ -704,7 +705,7 @@ var Scale = Element.extend({ getPixelForTick: function(index) { var me = this; var offset = me.options.offset; - var numTicks = me._ticks.length; + var numTicks = me._numTicks; if (index < 0 || index > numTicks - 1) { return null; } @@ -786,11 +787,9 @@ var Scale = Element.extend({ for (i = 0; i < tickCount; i++) { tick = ticks[i]; - if (skipRatio > 1 && i % skipRatio > 0) { - // leave tick in place but make sure it's not displayed (#4635) - delete tick.label; + if (skipRatio <= 1 || i % skipRatio === 0) { + result.push(tick); } - result.push(tick); } return result; }, @@ -895,12 +894,8 @@ var Scale = Element.extend({ tickEnd = me.left + tl; } - helpers.each(ticks, function(tick, index) { - // autoskipper skipped this tick (#4635) - if (helpers.isNullOrUndef(tick.label)) { - return; - } - + helpers.each(ticks, function(tick) { + var index = tick.index; var label = tick.label; var tickFont = tick.major ? tickFonts.major : tickFonts.minor; var lineHeight = tickFont.lineHeight; diff --git a/src/scales/scale.category.js b/src/scales/scale.category.js index 4cb9422230d..850b5b106d1 100644 --- a/src/scales/scale.category.js +++ b/src/scales/scale.category.js @@ -60,7 +60,7 @@ module.exports = Scale.extend({ return me.getRightValue(chart.data.datasets[datasetIndex].data[index]); } - return me.ticks[index - me.minIndex]; + return me._getLabels()[index]; }, // Used to get data value locations. Value can either be an index or a numerical value diff --git a/src/scales/scale.time.js b/src/scales/scale.time.js index 0f6348bc433..f9814a955cd 100644 --- a/src/scales/scale.time.js +++ b/src/scales/scale.time.js @@ -430,6 +430,7 @@ function ticksFromTimestamps(scale, values, majorUnit) { map[value] = i; ticks.push({ + index: i, value: value, major: false }); diff --git a/test/specs/core.scale.tests.js b/test/specs/core.scale.tests.js index f80b542ef7f..10f11b62316 100644 --- a/test/specs/core.scale.tests.js +++ b/test/specs/core.scale.tests.js @@ -34,12 +34,6 @@ describe('Core.scale', function() { }); } - function lastTick(chart) { - var xAxis = chart.scales['x-axis-0']; - var ticks = xAxis.getTicks(); - return ticks[ticks.length - 1]; - } - it('should display the last tick if it fits evenly with other ticks', function() { var chart = getChart({ labels: [ @@ -52,7 +46,7 @@ describe('Core.scale', function() { }] }); - expect(lastTick(chart).label).toEqual('September 2018'); + expect(chart.scales['x-axis-0']._ticks.length).toEqual(9); }); it('should not display the last tick if it does not fit evenly', function() { @@ -71,7 +65,7 @@ describe('Core.scale', function() { }] }); - expect(lastTick(chart).label).toBeUndefined(); + expect(chart.scales['x-axis-0']._ticks.length).toEqual(13); }); });