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

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,

src/traces/indicator/attributes.js

@@ -307,7 +307,7 @@ module.exports = {
  dflt: true
  }),
  // 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,

test/image/mocks/z-new_tickmode_sync.json

@@ -0,0 +1,99 @@
+{
+ "data": [
+ {
+ "name": "Apples",
+ "type": "bar",
+ "x": [
+ "2000-01",
+ "2000-02",
+ "2000-03",
+ "2000-04",
+ "2000-05"
+ ],
+ "y": [
+ 232,
+ 2506,
+ 470,
+ 1864,
+ -190
+ ]
+ },
+ {
+ "name": "Oranges",
+ "type": "scatter",
+ "x": [
+ "A",
+ "B",
+ "C",
+ "D",
+ "E"
+ ],
+ "y": [
+ 0,
+ 0.4,
+ 0.1,
+ 0.3,
+ 0.2
+ ],
+ "yaxis": "y2",
+ "xaxis": "x2"
+ }
+ ],
+ "layout": {
+ "margin": {
+ "t": 40,
+ "r": 70,
+ "b": 40,
+ "l": 70
+ },
+ "width": 700,
+ "showlegend": false,
+ "xaxis": {
+ "showgrid": true,
+ "ticklen": 10,
+ "tickwidth": 3,
+ "ticklabelmode": "period"
+ },
+ "xaxis2": {
+ "anchor": "y2",
+ "side": "top",
+ "overlaying": "x",
+ "tickmode": "sync",
+ "ticklen": 10,
+ "tickwidth": 3
+ },
+ "yaxis": {
+ "title": {
+ "text": "Apples"
+ },
+ "side": "left",
+ "range": [
+ 0,
+ 2500
+ ],
+ "ticklen": 10,
+ "tickwidth": 3,
+ "minor": {
+ "showgrid": true
+ }
+ },
+ "yaxis2": {
+ "title": {
+ "text": "Oranges"
+ },
+ "side": "right",
+ "range": [
+ 0,
+ 0.5
+ ],
+ "ticklen": 10,
+ "tickwidth": 3,
+ "overlaying": "y",
+ "tickmode": "sync",
+ "minor": {
+ "showgrid": true
+ },
+ "zeroline": false
+ }
+ }
+}

test/plot-schema.json

@@ -11005,14 +11005,15 @@
  "valType": "number"
  },
  "tickmode": {
- "description": "Sets the tick mode for this axis. If *auto*, the number of ticks is set via `nticks`. If *linear*, the placement of the ticks is determined by a starting position `tick0` and a tick step `dtick` (*linear* is the default value if `tick0` and `dtick` are provided). If *array*, the placement of the ticks is set via `tickvals` and the tick text is `ticktext`. (*array* is the default value if `tickvals` is provided).",
+ "description": "Sets the tick mode for this axis. If *auto*, the number of ticks is set via `nticks`. If *linear*, the placement of the ticks is determined by a starting position `tick0` and a tick step `dtick` (*linear* is the default value if `tick0` and `dtick` are provided). If *array*, the placement of the ticks is set via `tickvals` and the tick text is `ticktext`. (*array* is the default value if `tickvals` is provided). If *sync*, the number of ticks will sync with the overlayed axis set by `overlaying` property.",
  "editType": "ticks",
  "impliedEdits": {},
  "valType": "enumerated",
  "values": [
  "auto",
  "linear",
- "array"
+ "array",
+ "sync"
  ]
  },
  "tickprefix": {
@@ -12013,14 +12014,15 @@
  "valType": "number"
  },
  "tickmode": {
- "description": "Sets the tick mode for this axis. If *auto*, the number of ticks is set via `nticks`. If *linear*, the placement of the ticks is determined by a starting position `tick0` and a tick step `dtick` (*linear* is the default value if `tick0` and `dtick` are provided). If *array*, the placement of the ticks is set via `tickvals` and the tick text is `ticktext`. (*array* is the default value if `tickvals` is provided).",
+ "description": "Sets the tick mode for this axis. If *auto*, the number of ticks is set via `nticks`. If *linear*, the placement of the ticks is determined by a starting position `tick0` and a tick step `dtick` (*linear* is the default value if `tick0` and `dtick` are provided). If *array*, the placement of the ticks is set via `tickvals` and the tick text is `ticktext`. (*array* is the default value if `tickvals` is provided). If *sync*, the number of ticks will sync with the overlayed axis set by `overlaying` property.",
  "editType": "ticks",
  "impliedEdits": {},
  "valType": "enumerated",
  "values": [
  "auto",
  "linear",
- "array"
+ "array",
+ "sync"
  ]
  },
  "tickprefix": {