improve axis tick increment to reduce precision errors

Author: archmoj

src/lib/increment.js

@@ -0,0 +1,38 @@
+/**
+* Copyright 2012-2020, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+module.exports = function incrementNumeric(x, delta) {
+    if(!delta) return x;
+
+    // Note 1:
+    // 0.3 != 0.1 + 0.2 == 0.30000000000000004
+    // but 0.3 == (10 * 0.1 + 10 * 0.2) / 10
+    // Attempt to use integer steps to increment
+    var scale = 1 / Math.abs(delta);
+    if(scale < 1) scale = 1;
+    var newX = (
+        scale * x +
+        scale * delta
+    ) / scale;
+
+    // Note 2:
+    // now we may also consider rounding to cover few more edge cases
+    // e.g. 0.3 * 3 = 0.8999999999999999
+    var lenDt = ('' + delta).length;
+    var lenX0 = ('' + x).length;
+    var lenX1 = ('' + newX).length;
+
+    if(lenX1 >= lenX0 + lenDt) { // likely a rounding error!
+        newX = +parseFloat(newX).toPrecision(12);
+    }
+
+    return newX;
+};

src/lib/index.js

@@ -158,6 +158,8 @@ lib.filterUnique = require('./filter_unique');
 lib.filterVisible = require('./filter_visible');
 lib.pushUnique = require('./push_unique');
 
+lib.increment = require('./increment');
+
 lib.cleanNumber = require('./clean_number');
 
 lib.ensureNumber = function ensureNumber(v) {

src/plots/cartesian/axes.js

@@ -1063,7 +1063,7 @@ axes.tickIncrement = function(x, dtick, axrev, calendar) {
     var axSign = axrev ? -1 : 1;
 
     // includes linear, all dates smaller than month, and pure 10^n in log
-    if(isNumeric(dtick)) return x + axSign * dtick;
+    if(isNumeric(dtick)) return Lib.increment(x, axSign * dtick);
 
     // everything else is a string, one character plus a number
     var tType = dtick.charAt(0);