Further improve linear tick collision estimation (#9129)

* Further improve linear tick collision estimation

* More tolerance

* Re-create fixtures

* And more tolerance

src/core/core.scale.js

@@ -1665,6 +1665,6 @@ export default class Scale extends Element {
   _maxDigits() {
     const me = this;
     const fontSize = me._resolveTickFontOptions(0).lineHeight;
-    return me.isHorizontal() ? me.width / fontSize / 0.7 : me.height / fontSize;
+    return (me.isHorizontal() ? me.width : me.height) / fontSize;
   }
 }

src/scales/scale.linear.js

@@ -1,6 +1,7 @@
 import {isFinite} from '../helpers/helpers.core';
 import LinearScaleBase from './scale.linearbase';
 import Ticks from '../core/core.ticks';
+import {toRadians} from '../helpers';
 
 export default class LinearScale extends LinearScaleBase {
 
@@ -21,12 +22,12 @@ export default class LinearScale extends LinearScaleBase {
  	 */
   computeTickLimit() {
     const me = this;
-
-    if (me.isHorizontal()) {
-      return Math.ceil(me.width / 40);
-    }
+    const horizontal = me.isHorizontal();
+    const length = horizontal ? me.width : me.height;
+    const minRotation = toRadians(me.options.ticks.minRotation);
+    const ratio = (horizontal ? Math.sin(minRotation) : Math.cos(minRotation)) || 0.001;
     const tickFont = me._resolveTickFontOptions(0);
-    return Math.ceil(me.height / tickFont.lineHeight);
+    return Math.ceil(length / Math.min(40, tickFont.lineHeight / ratio));
   }
 
   // Utils

src/scales/scale.linearbase.js

@@ -36,7 +36,7 @@ function generateTicks(generationOptions, dataRange) {
   const minDefined = !isNullOrUndef(min);
   const maxDefined = !isNullOrUndef(max);
   const countDefined = !isNullOrUndef(count);
-  const minSpacing = (rmax - rmin) / maxDigits;
+  const minSpacing = (rmax - rmin) / (maxDigits + 1);
   let spacing = niceNum((rmax - rmin) / maxSpaces / unit) * unit;
   let factor, niceMin, niceMax, numSpaces;
 
@@ -135,12 +135,10 @@ function generateTicks(generationOptions, dataRange) {
 }
 
 function relativeLabelSize(value, minSpacing, {horizontal, minRotation}) {
-  const rot = toRadians(minRotation);
-  const useLength = (horizontal && minRotation <= 45) || (!horizontal && minRotation >= 45);
-  const l = useLength ? minSpacing * ('' + value).length : 0;
-  const sin = Math.sin(rot);
-  const cos = Math.cos(rot);
-  return horizontal ? cos * l + sin * minSpacing : sin * l + cos * minSpacing;
+  const rad = toRadians(minRotation);
+  const ratio = (horizontal ? Math.sin(rad) : Math.cos(rad)) || 0.001;
+  const length = 0.75 * minSpacing * ('' + value).length;
+  return Math.min(minSpacing / ratio, length);
 }
 
 export default class LinearScaleBase extends Scale {

test/fixtures/scale.linear/min-max-skip/edge-case-1.js

@@ -24,8 +24,8 @@ module.exports = {
   options: {
     spriteText: true,
     canvas: {
-      height: 211,
-      width: 408
+      height: 196,
+      width: 407
     }
   }
 };

test/fixtures/scale.linear/min-max-skip/edge-case-2.js

@@ -24,8 +24,8 @@ module.exports = {
   options: {
     spriteText: true,
     canvas: {
-      height: 212,
-      width: 409
+      height: 197,
+      width: 420
     }
   }
 };

test/fixtures/scale.linear/min-max-skip/edge-case-3.js

@@ -24,8 +24,8 @@ module.exports = {
   options: {
     spriteText: true,
     canvas: {
-      height: 213,
-      width: 536
+      height: 199,
+      width: 556
     }
   }
 };

test/fixtures/scale.linear/min-max-skip/edge-case-4.js

@@ -24,8 +24,8 @@ module.exports = {
   options: {
     spriteText: true,
     canvas: {
-      height: 214,
-      width: 537
+      height: 200,
+      width: 557
     }
   }
 };

test/fixtures/scale.linear/min-max-skip/rotated-case-1.js

@@ -1,6 +1,6 @@
 module.exports = {
   description: 'https://github.com/chartjs/Chart.js/issues/9025',
-  threshold: 0.15,
+  threshold: 0.2,
   config: {
     type: 'scatter',
     options: {
@@ -18,7 +18,7 @@ module.exports = {
           min: 230,
           ticks: {
             autoSkip: false,
-            minRotation: 35
+            minRotation: 67.5
           }
         }
       }
@@ -27,8 +27,8 @@ module.exports = {
   options: {
     spriteText: true,
     canvas: {
-      height: 211,
-      width: 415
+      height: 231,
+      width: 221
     }
   }
 };

test/fixtures/scale.linear/min-max-skip/rotated-case-2.js

@@ -1,6 +1,6 @@
 module.exports = {
   description: 'https://github.com/chartjs/Chart.js/issues/9025',
-  threshold: 0.15,
+  threshold: 0.2,
   config: {
     type: 'scatter',
     options: {
@@ -18,7 +18,7 @@ module.exports = {
           min: 230,
           ticks: {
             autoSkip: false,
-            minRotation: 35
+            minRotation: 67.5
           }
         }
       }
@@ -27,8 +27,8 @@ module.exports = {
   options: {
     spriteText: true,
     canvas: {
-      height: 214,
-      width: 416
+      height: 232,
+      width: 222
     }
   }
 };

test/fixtures/scale.linear/min-max-skip/rotated-case-3.js

@@ -1,6 +1,6 @@
 module.exports = {
   description: 'https://github.com/chartjs/Chart.js/issues/9025',
-  threshold: 0.15,
+  threshold: 0.2,
   config: {
     type: 'scatter',
     options: {
@@ -18,7 +18,7 @@ module.exports = {
           min: 230,
           ticks: {
             autoSkip: false,
-            minRotation: 35
+            minRotation: 67.5
           }
         }
       }
@@ -27,8 +27,8 @@ module.exports = {
   options: {
     spriteText: true,
     canvas: {
-      height: 216,
-      width: 520
+      height: 234,
+      width: 224
     }
   }
 };

test/fixtures/scale.linear/min-max-skip/rotated-case-4.js

@@ -1,6 +1,6 @@
 module.exports = {
   description: 'https://github.com/chartjs/Chart.js/issues/9025',
-  threshold: 0.15,
+  threshold: 0.2,
   config: {
     type: 'scatter',
     options: {
@@ -18,7 +18,7 @@ module.exports = {
           min: 230,
           ticks: {
             autoSkip: false,
-            minRotation: 35
+            minRotation: 67.5
           }
         }
       }
@@ -27,8 +27,8 @@ module.exports = {
   options: {
     spriteText: true,
     canvas: {
-      height: 217,
-      width: 521
+      height: 235,
+      width: 225
     }
   }
 };

test/fixtures/scale.linear/rotated-45.js

@@ -0,0 +1,38 @@
+module.exports = {
+  description: 'https://github.com/chartjs/Chart.js/issues/9025',
+  threshold: 0.2,
+  config: {
+    type: 'scatter',
+    options: {
+      scales: {
+        y: {
+          min: 1612781975085.5466,
+          max: 1620287255085.5466,
+          ticks: {
+            autoSkip: false,
+            minRotation: 45,
+            maxRotation: 45,
+            count: 13
+          }
+        },
+        x: {
+          min: 1612781975085.5466,
+          max: 1620287255085.5466,
+          ticks: {
+            autoSkip: false,
+            minRotation: 45,
+            maxRotation: 45,
+            count: 13
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 350,
+      width: 350
+    }
+  }
+};

test/fixtures/scale.linear/rotated-5.js

@@ -0,0 +1,34 @@
+module.exports = {
+  description: 'https://github.com/chartjs/Chart.js/issues/9025',
+  threshold: 0.2,
+  config: {
+    type: 'scatter',
+    options: {
+      scales: {
+        y: {
+          min: 0,
+          max: 500000,
+          ticks: {
+            minRotation: 5,
+            maxRotation: 5,
+          }
+        },
+        x: {
+          min: 0,
+          max: 500000,
+          ticks: {
+            minRotation: 5,
+            maxRotation: 5,
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 350,
+      width: 350
+    }
+  }
+};

test/fixtures/scale.linear/rotated-85.js

@@ -0,0 +1,34 @@
+module.exports = {
+  description: 'https://github.com/chartjs/Chart.js/issues/9025',
+  threshold: 0.2,
+  config: {
+    type: 'scatter',
+    options: {
+      scales: {
+        y: {
+          min: 0,
+          max: 500000,
+          ticks: {
+            minRotation: 85,
+            maxRotation: 85,
+          }
+        },
+        x: {
+          min: 0,
+          max: 500000,
+          ticks: {
+            minRotation: 85,
+            maxRotation: 85,
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 350,
+      width: 350
+    }
+  }
+};