Merge pull request #6356 from VictorBezak/first_poc_tickmode_sync

Add sync option to `tickmode` of cartesian axes to sync ticks with `overlaying` axis

Author: archmoj

draftlogs/6356_add.md

@@ -0,0 +1 @@
+- Add `sync` tickmode option [[#6356](https://github.com/plotly/plotly.js/pull/6356)]

src/components/colorbar/attributes.js

@@ -129,7 +129,7 @@ module.exports = overrideAll({
         description: 'Sets the color of padded area.'
     },
     // tick and title properties named and function exactly as in axes
-    tickmode: axesAttrs.tickmode,
+    tickmode: axesAttrs.minor.tickmode,
     nticks: axesAttrs.nticks,
     tick0: axesAttrs.tick0,
     dtick: axesAttrs.dtick,

src/plots/cartesian/axes.js

@@ -951,6 +951,13 @@ axes.calcTicks = function calcTicks(ax, opts) {
             continue;
         }
 
+        // fill tickVals based on overlaying axis
+        if(mockAx.tickmode === 'sync') {
+            tickVals = [];
+            ticksOut = syncTicks(ax);
+            continue;
+        }
+
         // add a tiny bit so we get ticks which may have rounded out
         var exRng = expandRange(rng);
         var startTick = exRng[0];
@@ -1203,6 +1210,51 @@ axes.calcTicks = function calcTicks(ax, opts) {
     return ticksOut;
 };
 
+function filterRangeBreaks(ax, ticksOut) {
+    if(ax.rangebreaks) {
+        // remove ticks falling inside rangebreaks
+        ticksOut = ticksOut.filter(function(d) {
+            return ax.maskBreaks(d.x) !== BADNUM;
+        });
+    }
+
+    return ticksOut;
+}
+
+function syncTicks(ax) {
+    // get the overlaying axis
+    var baseAxis = ax._mainAxis;
+
+    var ticksOut = [];
+    if(baseAxis._vals) {
+        for(var i = 0; i < baseAxis._vals.length; i++) {
+            // filter vals with noTick flag
+            if(baseAxis._vals[i].noTick) {
+                continue;
+            }
+
+            // get the position of the every tick
+            var pos = baseAxis.l2p(baseAxis._vals[i].x);
+
+            // get the tick for the current axis based on position
+            var vali = ax.p2l(pos);
+            var obj = axes.tickText(ax, vali);
+
+            // assign minor ticks
+            if(baseAxis._vals[i].minor) {
+                obj.minor = true;
+                obj.text = '';
+            }
+
+            ticksOut.push(obj);
+        }
+    }
+
+    ticksOut = filterRangeBreaks(ax, ticksOut);
+
+    return ticksOut;
+}
+
 function arrayTicks(ax) {
     var rng = Lib.simpleMap(ax.range, ax.r2l);
     var exRng = expandRange(rng);
@@ -1249,12 +1301,7 @@ function arrayTicks(ax) {
         }
     }
 
-    if(ax.rangebreaks) {
-        // remove ticks falling inside rangebreaks
-        ticksOut = ticksOut.filter(function(d) {
-            return ax.maskBreaks(d.x) !== BADNUM;
-        });
-    }
+    ticksOut = filterRangeBreaks(ax, ticksOut);
 
     return ticksOut;
 }
@@ -2256,6 +2303,18 @@ axes.draw = function(gd, arg, opts) {
         return ax.overlaying;
     });
 
+    // order axes that have dependency to other axes
+    axList.map(function(axId) {
+        var ax = axes.getFromId(gd, axId);
+
+        if(ax.tickmode === 'sync' && ax.overlaying) {
+            var overlayingIndex = axList.findIndex(function(axis) {return axis === ax.overlaying;});
+
+            if(overlayingIndex >= 0) {
+                axList.unshift(axList.splice(overlayingIndex, 1).shift());
+            }
+        }
+    });
 
     var axShifts = {'false': {'left': 0, 'right': 0}};
 
@@ -3247,6 +3306,11 @@ axes.drawTicks = function(gd, ax, opts) {
 axes.drawGrid = function(gd, ax, opts) {
     opts = opts || {};
 
+    if(ax.tickmode === 'sync') {
+        // for tickmode sync we use the overlaying axis grid
+        return;
+    }
+
     var cls = ax._id + 'grid';
 
     var hasMinor = ax.minor && ax.minor.showgrid;

src/plots/cartesian/dragbox.js

@@ -727,15 +727,23 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
             }
         }
 
+        function pushActiveAxIdsSynced(axList, axisType) {
+            for(i = 0; i < axList.length; i++) {
+                if(!axList[i].fixedrange && axList[i][axisType]) {activeAxIds.push(axList[i][axisType]._id);}
+            }
+        }
+
         if(editX) {
             pushActiveAxIds(xaxes);
             pushActiveAxIds(links.xaxes);
             pushActiveAxIds(matches.xaxes);
+            pushActiveAxIdsSynced(plotinfo.overlays, 'xaxis');
         }
         if(editY) {
             pushActiveAxIds(yaxes);
             pushActiveAxIds(links.yaxes);
             pushActiveAxIds(matches.yaxes);
+            pushActiveAxIdsSynced(plotinfo.overlays, 'yaxis');
         }
 
         updates = {};

src/plots/cartesian/layout_attributes.js

@@ -12,7 +12,7 @@ var constants = require('./constants');
 var HOUR = constants.HOUR_PATTERN;
 var DAY_OF_WEEK = constants.WEEKDAY_PATTERN;
 
-var tickmode = {
+var minorTickmode = {
     valType: 'enumerated',
     values: ['auto', 'linear', 'array'],
     editType: 'ticks',
@@ -29,6 +29,15 @@ var tickmode = {
     ].join(' ')
 };
 
+var tickmode = extendFlat({}, minorTickmode, {
+    values: minorTickmode.values.slice().concat(['sync']),
+    description: [
+        minorTickmode.description,
+        'If *sync*, the number of ticks will sync with the overlayed axis',
+        'set by `overlaying` property.'
+    ].join(' ')
+});
+
 function makeNticks(minor) {
     return {
         valType: 'integer',
@@ -947,7 +956,7 @@ module.exports = {
     },
 
     minor: {
-        tickmode: tickmode,
+        tickmode: minorTickmode,
         nticks: makeNticks('minor'),
         tick0: tick0,
         dtick: dtick,

src/plots/cartesian/position_defaults.js

@@ -83,6 +83,12 @@ module.exports = function handlePositionDefaults(containerIn, containerOut, coer
         // which applied in the calculation below:
         if(domain[0] > domain[1] - 1 / 4096) containerOut.domain = dfltDomain;
         Lib.noneOrAll(containerIn.domain, containerOut.domain, dfltDomain);
+
+        // tickmode sync needs an overlaying axis, otherwise
+        // we should default it to 'auto'
+        if(containerOut.tickmode === 'sync') {
+            containerOut.tickmode = 'auto';
+        }
     }
 
     coerce('layer');

src/plots/cartesian/tick_value_defaults.js

@@ -26,7 +26,7 @@ module.exports = function handleTickValueDefaults(containerIn, containerOut, coe
         'auto';
     var tickmode = coerce(prefix + 'tickmode', tickmodeDefault);
 
-    if(tickmode === 'auto') {
+    if(tickmode === 'auto' || tickmode === 'sync') {
         coerce(prefix + 'nticks');
     } else if(tickmode === 'linear') {
         // dtick is usually a positive number, but there are some

src/plots/gl3d/layout/axis_attributes.js

@@ -74,7 +74,7 @@ module.exports = overrideAll({
         anim: false
     }),
     // ticks
-    tickmode: axesAttrs.tickmode,
+    tickmode: axesAttrs.minor.tickmode,
     nticks: axesAttrs.nticks,
     tick0: axesAttrs.tick0,
     dtick: axesAttrs.dtick,

src/plots/polar/layout_attributes.js

@@ -23,7 +23,7 @@ var axisLineGridAttr = overrideAll({
 }, 'plot', 'from-root');
 
 var axisTickAttrs = overrideAll({
-    tickmode: axesAttrs.tickmode,
+    tickmode: axesAttrs.minor.tickmode,
     nticks: axesAttrs.nticks,
     tick0: axesAttrs.tick0,
     dtick: axesAttrs.dtick,

src/plots/ternary/layout_attributes.js

@@ -15,7 +15,7 @@ var ternaryAxesAttrs = {
     },
     color: axesAttrs.color,
     // ticks
-    tickmode: axesAttrs.tickmode,
+    tickmode: axesAttrs.minor.tickmode,
     nticks: extendFlat({}, axesAttrs.nticks, {dflt: 6, min: 1}),
     tick0: axesAttrs.tick0,
     dtick: axesAttrs.dtick,