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 d7228c3063b1c23b27fd1f93a8d4494e058484b8..dcd3a7a64fbec22f9e0f00894d51acefb7ee5440 100644 (file)
--- 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 b49d7885bdcefdbb71b57eb6bab6b748bfb988e2..6ab797c310b01e0df89c553a82ba59f6e7d1e6dd 100644 (file)
--- 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 f45a406342acb7ede46fff37c0e551ecedbeb3b4..045f73b4c8ba3066c1b228eae587ae55013d57c5 100644 (file)
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 (file)
index 0000000..a678100
--- /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 (file)
index 0000000..78bf463
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 aec874240993d079f60772701e136f564eedb820..ac95ea0cde3b0f3b21b0f5f71f967bddf4ec1788 100644 (file)
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 aec874240993d079f60772701e136f564eedb820..ac95ea0cde3b0f3b21b0f5f71f967bddf4ec1788 100644 (file)
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 9fa48c7da4dbd2031b29e687ec7feac8bab82452..1daf5786a75fc052f75a11434fdec60ff8a8198f 100644 (file)
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 48d885fb1bf872119e18c1444908e56a3781e18e..0f337671b939b409971063bb030222bb16cfc3c4 100644 (file)
--- 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 40f790ff8a016ecde86dc9bfe89928f89c07823f..219e0fba664fc34401efe5fa954da6d4313c49e0 100644 (file)
--- 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) {