Work-in-progress for new cartesian attribute: gridsync

src/plots/cartesian/axes.js

@@ -65,6 +65,9 @@ var autorange = require('./autorange');
 axes.getAutoRange = autorange.getAutoRange;
 axes.findExtremes = autorange.findExtremes;
 
+var gridsync = require('./gridsync');
+axes.gridsync = gridsync.gridsync;
+
 var epsilon = 0.0001;
 function expandRange(range) {
  var delta = (range[1] - range[0]) * epsilon;

src/plots/cartesian/gridsync.js

@@ -0,0 +1,165 @@
+'use strict';
+
+module.exports = {
+ gridsync: gridsync
+};
+
+/**
+ * Synchronize muli-axis gridlines
+ *
+ * @param {array} y1_values:
+ * array of values for y1-axis
+ * @param {array} y2_values:
+ * array of values for y2-axis 
+ * @param {integer} gridlines:
+ * amount of gridlines we want to span our grid
+ * @return {array of objects}
+ * 
+ */
+function gridsync(y1_values, y2_values, gridlines) {
+ var y1 = {}
+ var y2 = {}
+
+ // add .min, .max, .range to obj
+ _getMinMaxRange(y1, y1_values);
+ _getMinMaxRange(y2, y2_values);
+
+ // add .dtick, .dtick_ratio to obj
+ _calcDtick(y1, gridlines);
+ _calcDtick(y2, gridlines);
+
+ var global_dtick_ratio = Math.max(y1.dtick_ratio, y2.dtick_ratio);
+
+ // add .range_min to obj
+ _calcRangeMin(y1, y2, global_dtick_ratio);
+ // add .range_max to obj
+ _calcRangeMax(y1, y2, global_dtick_ratio);
+
+ return [y1, y2];
+}
+
+
+/**
+ * Add minimum value, maximum value, and range of the values to the y-axis object.
+ * 
+ * @param {obj} y:
+ * object representing provided y-axis
+ * @param {array} y_values:
+ * array of values for provided y-axis
+ * @return {object}
+ * 
+ */
+function _getMinMaxRange(y, y_values) {
+ y.min = Math.min(...y_values)
+ y.max = Math.max(...y_values)
+
+ if (y.min < 0) {
+ y.range = y.max - y.min
+ } else {
+ y.range = y.max
+ }
+
+ return y;
+}
+
+
+/**
+ * Add dtick and dtick ratio to the y-axis object.
+ *
+ * @param {object} y:
+ * object representing provided y-axis
+ * @param {integer} gridlines:
+ * amount of gridlines we want to span our grid
+ * @return {object}
+ */
+function _calcDtick(y, gridlines) {
+ var range = y.range * 1000; // mult by 1000 to account for ranges < 1
+ var len = Math.floor(range).toString().length;
+
+ var pow10_divisor = Math.pow(10, len - 1);
+ var firstdigit = Math.floor(range / pow10_divisor);
+ var max_base = pow10_divisor * firstdigit / 1000; // div by 1000 to account for ranges < 1
+
+ y.dtick = max_base / gridlines;
+
+ y.dtick_ratio = y.range / dtick;
+
+ return y;
+}
+
+
+/**
+ * Adjust all y-axes so that their range minimums are proportional to the global minimum ratio.
+ * Add range_min to the y-axis objects.
+ *
+ * @param {object} y1:
+ * object representing the y1-axis
+ * @param {object} y2:
+ * object representing the y2-axis
+ * @param {number} global_dtick_ratio:
+ * the largest dtick ratio of all y-axes. used to scale all other axes
+ * @return {array of objects}
+ */
+function _calcRangeMin(y1, y2, global_dtick_ratio) {
+ var negative_ratios = {};
+ var negative = false; // Are there any negative values present
+
+ if (y1.min < 0) {
+ negative = true;
+ negative_ratios.y1 = Math.abs(y1.min / y1.range) * global_dtick_ratio;
+ } else {
+ negative_ratios.y1 = 0;
+ }
+
+ if (y2.min < 0) {
+ negative = true;
+ negative_ratios.y2 = Math.abs(y2.min / y2.range) * global_dtick_ratio;
+ } else {
+ negative_ratios.y2 = 0;
+ }
+
+ // Increase the ratio by 0.1 so that your range minimums are extended just
+ // far enough to not cut off any part of your lowest value
+ var global_negative_ratio = Math.max(negative_ratios.y1, negative_ratios.y2) + 0.1;
+
+ // If any negative value is present, you must proportionally extend the
+ // range minimum of all axes
+ if (negative) {
+ y1.range_min = (global_negative_ratio) * y1.dtick * -1;
+ y2.range_min = (global_negative_ratio) * y2.dtick * -1;
+ } else { // If no negatives, baseline is set to zero
+ y1.range_min = 0;
+ y2.range_min = 0;
+ }
+
+ return [y1, y2];
+}
+
+
+/**
+ * Adjust all y-axes so that their range maximums are proportional to the global maximum ratio.
+ * Add range_max to the y-axis objects.
+ * 
+ * @param {object} y1:
+ * object representing the y1-axis
+ * @param {object} y2:
+ * object representing the y2-axis
+ * @param {number} global_dtick_ratio:
+ * the largest dtick ratio of all y-axes. used to scale all other axes
+ * @return {array of objects}
+ * 
+ */
+function _calcRangeMax(y1, y2, global_dtick_ratio) {
+ var positive_ratios = {}
+ positive_ratios.y1 = Math.abs(y1.max / y1.range) * global_dtick_ratio;
+ positive_ratios.y2 = Math.abs(y2.max / y2.range) * global_dtick_ratio;
+
+ // Increase the ratio by 0.1 so that your range maximums are extended just
+ // far enough to not cut off any part of your highest value
+ var global_positive_ratio = Math.max(positive_ratios.y1, positive_ratios.y2) + 0.1;
+
+ y1.range_max = (global_positive_ratio) * y1.dtick;
+ y2.range_max = (global_positive_ratio) * y2.dtick;
+
+ return [y1, y2];
+}

src/plots/cartesian/layout_attributes.js

@@ -116,6 +116,16 @@ module.exports = {
  'If `range` is provided, then `autorange` is set to *false*.'
  ].join(' ')
  },
+ gridsync: {
+ valType: 'boolean',
+ dflt: false,
+ role: 'info',
+ editType: 'plot',
+ description: [
+ 'If set to true, your overlayed yaxis gridlines will synchronize with those of the primary yaxis.',
+ 'Dtick values will automatically be adjusted to scale your overlayed yaxis accordingly.'
+ ].join(' ')
+ },
  rangemode: {
  valType: 'enumerated',
  values: ['normal', 'tozero', 'nonnegative'],

test/image/mocks/gridsync_negative.json

@@ -0,0 +1,47 @@
+{
+ "data": [
+ {
+ "name": "Apples",
+ "type": "bar",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [232, 2506, 470, 1864, -190]
+ },
+ {
+ "name": "Oranges",
+ "type": "line",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [-241.21, 365.24, 265.21, 204.34, 1129],
+ "yaxis": "y2"
+ }
+ ],
+ "layout": {
+ "margin": {
+ "t": 40, "r": 70, "b": 40, "l": 70
+ },
+ "legend": {
+ "orientation": "h",
+ "x": 0.6,
+ "y": 1.1
+ },
+ "yaxis": {
+ "title": "Apples",
+ "side": "left",
+ "range": [0, 2206]
+ },
+ "yaxis2": {
+ "title": "Oranges",
+ "side": "right",
+ "range": [0, 365.24],
+ "overlaying": "y"
+ },
+ "grid": {
+ "yaxis": {
+
+ }
+ }
+ },
+ "config": {
+ "displaylogo": false,
+ "displayModeBar": false
+ }
+}

test/image/mocks/gridsync_positive.json

@@ -0,0 +1,42 @@
+{
+ "data": [
+ {
+ "name": "Apples",
+ "type": "bar",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [232, 2206, 37, 1629, 190]
+ },
+ {
+ "name": "Oranges",
+ "type": "line",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [141.21, 365.24, 265.21, 204.34, 129],
+ "yaxis": "y2"
+ }
+ ],
+ "layout": {
+ "margin": {
+ "t": 40, "r": 70, "b": 40, "l": 70
+ },
+ "legend": {
+ "orientation": "h",
+ "x": 0.6,
+ "y": 1.1
+ },
+ "yaxis": {
+ "title": "Apples",
+ "side": "left",
+ "range": [0, 2206]
+ },
+ "yaxis2": {
+ "title": "Oranges",
+ "side": "right",
+ "range": [0, 365.24],
+ "overlaying": "y"
+ }
+ },
+ "config": {
+ "displaylogo": false,
+ "displayModeBar": false
+ }
+}

src/plots/cartesian/axes.js

@@ -65,6 +65,9 @@ var autorange = require('./autorange');
 axes.getAutoRange = autorange.getAutoRange;
 axes.findExtremes = autorange.findExtremes;
 
+var gridsync = require('./gridsync');
+axes.gridsync = gridsync.gridsync;
+
 var epsilon = 0.0001;
 function expandRange(range) {
  var delta = (range[1] - range[0]) * epsilon;

src/plots/cartesian/gridsync.js

@@ -0,0 +1,165 @@
+'use strict';
+
+module.exports = {
+ gridsync: gridsync
+};
+
+/**
+ * Synchronize muli-axis gridlines
+ *
+ * @param {array} y1_values:
+ * array of values for y1-axis
+ * @param {array} y2_values:
+ * array of values for y2-axis 
+ * @param {integer} gridlines:
+ * amount of gridlines we want to span our grid
+ * @return {array of objects}
+ * 
+ */
+function gridsync(y1_values, y2_values, gridlines) {
+ var y1 = {}
+ var y2 = {}
+
+ // add .min, .max, .range to obj
+ _getMinMaxRange(y1, y1_values);
+ _getMinMaxRange(y2, y2_values);
+
+ // add .dtick, .dtick_ratio to obj
+ _calcDtick(y1, gridlines);
+ _calcDtick(y2, gridlines);
+
+ var global_dtick_ratio = Math.max(y1.dtick_ratio, y2.dtick_ratio);
+
+ // add .range_min to obj
+ _calcRangeMin(y1, y2, global_dtick_ratio);
+ // add .range_max to obj
+ _calcRangeMax(y1, y2, global_dtick_ratio);
+
+ return [y1, y2];
+}
+
+
+/**
+ * Add minimum value, maximum value, and range of the values to the y-axis object.
+ * 
+ * @param {obj} y:
+ * object representing provided y-axis
+ * @param {array} y_values:
+ * array of values for provided y-axis
+ * @return {object}
+ * 
+ */
+function _getMinMaxRange(y, y_values) {
+ y.min = Math.min(...y_values)
+ y.max = Math.max(...y_values)
+
+ if (y.min < 0) {
+ y.range = y.max - y.min
+ } else {
+ y.range = y.max
+ }
+
+ return y;
+}
+
+
+/**
+ * Add dtick and dtick ratio to the y-axis object.
+ *
+ * @param {object} y:
+ * object representing provided y-axis
+ * @param {integer} gridlines:
+ * amount of gridlines we want to span our grid
+ * @return {object}
+ */
+function _calcDtick(y, gridlines) {
+ var range = y.range * 1000; // mult by 1000 to account for ranges < 1
+ var len = Math.floor(range).toString().length;
+
+ var pow10_divisor = Math.pow(10, len - 1);
+ var firstdigit = Math.floor(range / pow10_divisor);
+ var max_base = pow10_divisor * firstdigit / 1000; // div by 1000 to account for ranges < 1
+
+ y.dtick = max_base / gridlines;
+
+ y.dtick_ratio = y.range / dtick;
+
+ return y;
+}
+
+
+/**
+ * Adjust all y-axes so that their range minimums are proportional to the global minimum ratio.
+ * Add range_min to the y-axis objects.
+ *
+ * @param {object} y1:
+ * object representing the y1-axis
+ * @param {object} y2:
+ * object representing the y2-axis
+ * @param {number} global_dtick_ratio:
+ * the largest dtick ratio of all y-axes. used to scale all other axes
+ * @return {array of objects}
+ */
+function _calcRangeMin(y1, y2, global_dtick_ratio) {
+ var negative_ratios = {};
+ var negative = false; // Are there any negative values present
+
+ if (y1.min < 0) {
+ negative = true;
+ negative_ratios.y1 = Math.abs(y1.min / y1.range) * global_dtick_ratio;
+ } else {
+ negative_ratios.y1 = 0;
+ }
+
+ if (y2.min < 0) {
+ negative = true;
+ negative_ratios.y2 = Math.abs(y2.min / y2.range) * global_dtick_ratio;
+ } else {
+ negative_ratios.y2 = 0;
+ }
+
+ // Increase the ratio by 0.1 so that your range minimums are extended just
+ // far enough to not cut off any part of your lowest value
+ var global_negative_ratio = Math.max(negative_ratios.y1, negative_ratios.y2) + 0.1;
+
+ // If any negative value is present, you must proportionally extend the
+ // range minimum of all axes
+ if (negative) {
+ y1.range_min = (global_negative_ratio) * y1.dtick * -1;
+ y2.range_min = (global_negative_ratio) * y2.dtick * -1;
+ } else { // If no negatives, baseline is set to zero
+ y1.range_min = 0;
+ y2.range_min = 0;
+ }
+
+ return [y1, y2];
+}
+
+
+/**
+ * Adjust all y-axes so that their range maximums are proportional to the global maximum ratio.
+ * Add range_max to the y-axis objects.
+ * 
+ * @param {object} y1:
+ * object representing the y1-axis
+ * @param {object} y2:
+ * object representing the y2-axis
+ * @param {number} global_dtick_ratio:
+ * the largest dtick ratio of all y-axes. used to scale all other axes
+ * @return {array of objects}
+ * 
+ */
+function _calcRangeMax(y1, y2, global_dtick_ratio) {
+ var positive_ratios = {}
+ positive_ratios.y1 = Math.abs(y1.max / y1.range) * global_dtick_ratio;
+ positive_ratios.y2 = Math.abs(y2.max / y2.range) * global_dtick_ratio;
+
+ // Increase the ratio by 0.1 so that your range maximums are extended just
+ // far enough to not cut off any part of your highest value
+ var global_positive_ratio = Math.max(positive_ratios.y1, positive_ratios.y2) + 0.1;
+
+ y1.range_max = (global_positive_ratio) * y1.dtick;
+ y2.range_max = (global_positive_ratio) * y2.dtick;
+
+ return [y1, y2];
+}

src/plots/cartesian/layout_attributes.js

@@ -116,6 +116,16 @@ module.exports = {
  'If `range` is provided, then `autorange` is set to *false*.'
  ].join(' ')
  },
+ gridsync: {
+ valType: 'boolean',
+ dflt: false,
+ role: 'info',
+ editType: 'plot',
+ description: [
+ 'If set to true, your overlayed yaxis gridlines will synchronize with those of the primary yaxis.',
+ 'Dtick values will automatically be adjusted to scale your overlayed yaxis accordingly.'
+ ].join(' ')
+ },
  rangemode: {
  valType: 'enumerated',
  values: ['normal', 'tozero', 'nonnegative'],

test/image/mocks/gridsync_negative.json

@@ -0,0 +1,47 @@
+{
+ "data": [
+ {
+ "name": "Apples",
+ "type": "bar",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [232, 2506, 470, 1864, -190]
+ },
+ {
+ "name": "Oranges",
+ "type": "line",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [-241.21, 365.24, 265.21, 204.34, 1129],
+ "yaxis": "y2"
+ }
+ ],
+ "layout": {
+ "margin": {
+ "t": 40, "r": 70, "b": 40, "l": 70
+ },
+ "legend": {
+ "orientation": "h",
+ "x": 0.6,
+ "y": 1.1
+ },
+ "yaxis": {
+ "title": "Apples",
+ "side": "left",
+ "range": [0, 2206]
+ },
+ "yaxis2": {
+ "title": "Oranges",
+ "side": "right",
+ "range": [0, 365.24],
+ "overlaying": "y"
+ },
+ "grid": {
+ "yaxis": {
+
+ }
+ }
+ },
+ "config": {
+ "displaylogo": false,
+ "displayModeBar": false
+ }
+}

test/image/mocks/gridsync_positive.json

@@ -0,0 +1,42 @@
+{
+ "data": [
+ {
+ "name": "Apples",
+ "type": "bar",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [232, 2206, 37, 1629, 190]
+ },
+ {
+ "name": "Oranges",
+ "type": "line",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [141.21, 365.24, 265.21, 204.34, 129],
+ "yaxis": "y2"
+ }
+ ],
+ "layout": {
+ "margin": {
+ "t": 40, "r": 70, "b": 40, "l": 70
+ },
+ "legend": {
+ "orientation": "h",
+ "x": 0.6,
+ "y": 1.1
+ },
+ "yaxis": {
+ "title": "Apples",
+ "side": "left",
+ "range": [0, 2206]
+ },
+ "yaxis2": {
+ "title": "Oranges",
+ "side": "right",
+ "range": [0, 365.24],
+ "overlaying": "y"
+ }
+ },
+ "config": {
+ "displaylogo": false,
+ "displayModeBar": false
+ }
+}

src/plots/cartesian/axes.js

@@ -65,6 +65,9 @@ var autorange = require('./autorange');
 axes.getAutoRange = autorange.getAutoRange;
 axes.findExtremes = autorange.findExtremes;
 
+var gridsync = require('./gridsync');
+axes.gridsync = gridsync.gridsync;
+
 var epsilon = 0.0001;
 function expandRange(range) {
  var delta = (range[1] - range[0]) * epsilon;

src/plots/cartesian/gridsync.js

@@ -0,0 +1,165 @@
+'use strict';
+
+module.exports = {
+ gridsync: gridsync
+};
+
+/**
+ * Synchronize muli-axis gridlines
+ *
+ * @param {array} y1_values:
+ * array of values for y1-axis
+ * @param {array} y2_values:
+ * array of values for y2-axis 
+ * @param {integer} gridlines:
+ * amount of gridlines we want to span our grid
+ * @return {array of objects}
+ * 
+ */
+function gridsync(y1_values, y2_values, gridlines) {
+ var y1 = {}
+ var y2 = {}
+
+ // add .min, .max, .range to obj
+ _getMinMaxRange(y1, y1_values);
+ _getMinMaxRange(y2, y2_values);
+
+ // add .dtick, .dtick_ratio to obj
+ _calcDtick(y1, gridlines);
+ _calcDtick(y2, gridlines);
+
+ var global_dtick_ratio = Math.max(y1.dtick_ratio, y2.dtick_ratio);
+
+ // add .range_min to obj
+ _calcRangeMin(y1, y2, global_dtick_ratio);
+ // add .range_max to obj
+ _calcRangeMax(y1, y2, global_dtick_ratio);
+
+ return [y1, y2];
+}
+
+
+/**
+ * Add minimum value, maximum value, and range of the values to the y-axis object.
+ * 
+ * @param {obj} y:
+ * object representing provided y-axis
+ * @param {array} y_values:
+ * array of values for provided y-axis
+ * @return {object}
+ * 
+ */
+function _getMinMaxRange(y, y_values) {
+ y.min = Math.min(...y_values)
+ y.max = Math.max(...y_values)
+
+ if (y.min < 0) {
+ y.range = y.max - y.min
+ } else {
+ y.range = y.max
+ }
+
+ return y;
+}
+
+
+/**
+ * Add dtick and dtick ratio to the y-axis object.
+ *
+ * @param {object} y:
+ * object representing provided y-axis
+ * @param {integer} gridlines:
+ * amount of gridlines we want to span our grid
+ * @return {object}
+ */
+function _calcDtick(y, gridlines) {
+ var range = y.range * 1000; // mult by 1000 to account for ranges < 1
+ var len = Math.floor(range).toString().length;
+
+ var pow10_divisor = Math.pow(10, len - 1);
+ var firstdigit = Math.floor(range / pow10_divisor);
+ var max_base = pow10_divisor * firstdigit / 1000; // div by 1000 to account for ranges < 1
+
+ y.dtick = max_base / gridlines;
+
+ y.dtick_ratio = y.range / dtick;
+
+ return y;
+}
+
+
+/**
+ * Adjust all y-axes so that their range minimums are proportional to the global minimum ratio.
+ * Add range_min to the y-axis objects.
+ *
+ * @param {object} y1:
+ * object representing the y1-axis
+ * @param {object} y2:
+ * object representing the y2-axis
+ * @param {number} global_dtick_ratio:
+ * the largest dtick ratio of all y-axes. used to scale all other axes
+ * @return {array of objects}
+ */
+function _calcRangeMin(y1, y2, global_dtick_ratio) {
+ var negative_ratios = {};
+ var negative = false; // Are there any negative values present
+
+ if (y1.min < 0) {
+ negative = true;
+ negative_ratios.y1 = Math.abs(y1.min / y1.range) * global_dtick_ratio;
+ } else {
+ negative_ratios.y1 = 0;
+ }
+
+ if (y2.min < 0) {
+ negative = true;
+ negative_ratios.y2 = Math.abs(y2.min / y2.range) * global_dtick_ratio;
+ } else {
+ negative_ratios.y2 = 0;
+ }
+
+ // Increase the ratio by 0.1 so that your range minimums are extended just
+ // far enough to not cut off any part of your lowest value
+ var global_negative_ratio = Math.max(negative_ratios.y1, negative_ratios.y2) + 0.1;
+
+ // If any negative value is present, you must proportionally extend the
+ // range minimum of all axes
+ if (negative) {
+ y1.range_min = (global_negative_ratio) * y1.dtick * -1;
+ y2.range_min = (global_negative_ratio) * y2.dtick * -1;
+ } else { // If no negatives, baseline is set to zero
+ y1.range_min = 0;
+ y2.range_min = 0;
+ }
+
+ return [y1, y2];
+}
+
+
+/**
+ * Adjust all y-axes so that their range maximums are proportional to the global maximum ratio.
+ * Add range_max to the y-axis objects.
+ * 
+ * @param {object} y1:
+ * object representing the y1-axis
+ * @param {object} y2:
+ * object representing the y2-axis
+ * @param {number} global_dtick_ratio:
+ * the largest dtick ratio of all y-axes. used to scale all other axes
+ * @return {array of objects}
+ * 
+ */
+function _calcRangeMax(y1, y2, global_dtick_ratio) {
+ var positive_ratios = {}
+ positive_ratios.y1 = Math.abs(y1.max / y1.range) * global_dtick_ratio;
+ positive_ratios.y2 = Math.abs(y2.max / y2.range) * global_dtick_ratio;
+
+ // Increase the ratio by 0.1 so that your range maximums are extended just
+ // far enough to not cut off any part of your highest value
+ var global_positive_ratio = Math.max(positive_ratios.y1, positive_ratios.y2) + 0.1;
+
+ y1.range_max = (global_positive_ratio) * y1.dtick;
+ y2.range_max = (global_positive_ratio) * y2.dtick;
+
+ return [y1, y2];
+}

src/plots/cartesian/layout_attributes.js

@@ -116,6 +116,16 @@ module.exports = {
  'If `range` is provided, then `autorange` is set to *false*.'
  ].join(' ')
  },
+ gridsync: {
+ valType: 'boolean',
+ dflt: false,
+ role: 'info',
+ editType: 'plot',
+ description: [
+ 'If set to true, your overlayed yaxis gridlines will synchronize with those of the primary yaxis.',
+ 'Dtick values will automatically be adjusted to scale your overlayed yaxis accordingly.'
+ ].join(' ')
+ },
  rangemode: {
  valType: 'enumerated',
  values: ['normal', 'tozero', 'nonnegative'],

test/image/mocks/gridsync_negative.json

@@ -0,0 +1,47 @@
+{
+ "data": [
+ {
+ "name": "Apples",
+ "type": "bar",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [232, 2506, 470, 1864, -190]
+ },
+ {
+ "name": "Oranges",
+ "type": "line",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [-241.21, 365.24, 265.21, 204.34, 1129],
+ "yaxis": "y2"
+ }
+ ],
+ "layout": {
+ "margin": {
+ "t": 40, "r": 70, "b": 40, "l": 70
+ },
+ "legend": {
+ "orientation": "h",
+ "x": 0.6,
+ "y": 1.1
+ },
+ "yaxis": {
+ "title": "Apples",
+ "side": "left",
+ "range": [0, 2206]
+ },
+ "yaxis2": {
+ "title": "Oranges",
+ "side": "right",
+ "range": [0, 365.24],
+ "overlaying": "y"
+ },
+ "grid": {
+ "yaxis": {
+
+ }
+ }
+ },
+ "config": {
+ "displaylogo": false,
+ "displayModeBar": false
+ }
+}

test/image/mocks/gridsync_positive.json

@@ -0,0 +1,42 @@
+{
+ "data": [
+ {
+ "name": "Apples",
+ "type": "bar",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [232, 2206, 37, 1629, 190]
+ },
+ {
+ "name": "Oranges",
+ "type": "line",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [141.21, 365.24, 265.21, 204.34, 129],
+ "yaxis": "y2"
+ }
+ ],
+ "layout": {
+ "margin": {
+ "t": 40, "r": 70, "b": 40, "l": 70
+ },
+ "legend": {
+ "orientation": "h",
+ "x": 0.6,
+ "y": 1.1
+ },
+ "yaxis": {
+ "title": "Apples",
+ "side": "left",
+ "range": [0, 2206]
+ },
+ "yaxis2": {
+ "title": "Oranges",
+ "side": "right",
+ "range": [0, 365.24],
+ "overlaying": "y"
+ }
+ },
+ "config": {
+ "displaylogo": false,
+ "displayModeBar": false
+ }
+}

src/plots/cartesian/axes.js

@@ -65,6 +65,9 @@ var autorange = require('./autorange');
 axes.getAutoRange = autorange.getAutoRange;
 axes.findExtremes = autorange.findExtremes;
 
+var gridsync = require('./gridsync');
+axes.gridsync = gridsync.gridsync;
+
 var epsilon = 0.0001;
 function expandRange(range) {
  var delta = (range[1] - range[0]) * epsilon;

src/plots/cartesian/gridsync.js

@@ -0,0 +1,165 @@
+'use strict';
+
+module.exports = {
+ gridsync: gridsync
+};
+
+/**
+ * Synchronize muli-axis gridlines
+ *
+ * @param {array} y1_values:
+ * array of values for y1-axis
+ * @param {array} y2_values:
+ * array of values for y2-axis 
+ * @param {integer} gridlines:
+ * amount of gridlines we want to span our grid
+ * @return {array of objects}
+ * 
+ */
+function gridsync(y1_values, y2_values, gridlines) {
+ var y1 = {}
+ var y2 = {}
+
+ // add .min, .max, .range to obj
+ _getMinMaxRange(y1, y1_values);
+ _getMinMaxRange(y2, y2_values);
+
+ // add .dtick, .dtick_ratio to obj
+ _calcDtick(y1, gridlines);
+ _calcDtick(y2, gridlines);
+
+ var global_dtick_ratio = Math.max(y1.dtick_ratio, y2.dtick_ratio);
+
+ // add .range_min to obj
+ _calcRangeMin(y1, y2, global_dtick_ratio);
+ // add .range_max to obj
+ _calcRangeMax(y1, y2, global_dtick_ratio);
+
+ return [y1, y2];
+}
+
+
+/**
+ * Add minimum value, maximum value, and range of the values to the y-axis object.
+ * 
+ * @param {obj} y:
+ * object representing provided y-axis
+ * @param {array} y_values:
+ * array of values for provided y-axis
+ * @return {object}
+ * 
+ */
+function _getMinMaxRange(y, y_values) {
+ y.min = Math.min(...y_values)
+ y.max = Math.max(...y_values)
+
+ if (y.min < 0) {
+ y.range = y.max - y.min
+ } else {
+ y.range = y.max
+ }
+
+ return y;
+}
+
+
+/**
+ * Add dtick and dtick ratio to the y-axis object.
+ *
+ * @param {object} y:
+ * object representing provided y-axis
+ * @param {integer} gridlines:
+ * amount of gridlines we want to span our grid
+ * @return {object}
+ */
+function _calcDtick(y, gridlines) {
+ var range = y.range * 1000; // mult by 1000 to account for ranges < 1
+ var len = Math.floor(range).toString().length;
+
+ var pow10_divisor = Math.pow(10, len - 1);
+ var firstdigit = Math.floor(range / pow10_divisor);
+ var max_base = pow10_divisor * firstdigit / 1000; // div by 1000 to account for ranges < 1
+
+ y.dtick = max_base / gridlines;
+
+ y.dtick_ratio = y.range / dtick;
+
+ return y;
+}
+
+
+/**
+ * Adjust all y-axes so that their range minimums are proportional to the global minimum ratio.
+ * Add range_min to the y-axis objects.
+ *
+ * @param {object} y1:
+ * object representing the y1-axis
+ * @param {object} y2:
+ * object representing the y2-axis
+ * @param {number} global_dtick_ratio:
+ * the largest dtick ratio of all y-axes. used to scale all other axes
+ * @return {array of objects}
+ */
+function _calcRangeMin(y1, y2, global_dtick_ratio) {
+ var negative_ratios = {};
+ var negative = false; // Are there any negative values present
+
+ if (y1.min < 0) {
+ negative = true;
+ negative_ratios.y1 = Math.abs(y1.min / y1.range) * global_dtick_ratio;
+ } else {
+ negative_ratios.y1 = 0;
+ }
+
+ if (y2.min < 0) {
+ negative = true;
+ negative_ratios.y2 = Math.abs(y2.min / y2.range) * global_dtick_ratio;
+ } else {
+ negative_ratios.y2 = 0;
+ }
+
+ // Increase the ratio by 0.1 so that your range minimums are extended just
+ // far enough to not cut off any part of your lowest value
+ var global_negative_ratio = Math.max(negative_ratios.y1, negative_ratios.y2) + 0.1;
+
+ // If any negative value is present, you must proportionally extend the
+ // range minimum of all axes
+ if (negative) {
+ y1.range_min = (global_negative_ratio) * y1.dtick * -1;
+ y2.range_min = (global_negative_ratio) * y2.dtick * -1;
+ } else { // If no negatives, baseline is set to zero
+ y1.range_min = 0;
+ y2.range_min = 0;
+ }
+
+ return [y1, y2];
+}
+
+
+/**
+ * Adjust all y-axes so that their range maximums are proportional to the global maximum ratio.
+ * Add range_max to the y-axis objects.
+ * 
+ * @param {object} y1:
+ * object representing the y1-axis
+ * @param {object} y2:
+ * object representing the y2-axis
+ * @param {number} global_dtick_ratio:
+ * the largest dtick ratio of all y-axes. used to scale all other axes
+ * @return {array of objects}
+ * 
+ */
+function _calcRangeMax(y1, y2, global_dtick_ratio) {
+ var positive_ratios = {}
+ positive_ratios.y1 = Math.abs(y1.max / y1.range) * global_dtick_ratio;
+ positive_ratios.y2 = Math.abs(y2.max / y2.range) * global_dtick_ratio;
+
+ // Increase the ratio by 0.1 so that your range maximums are extended just
+ // far enough to not cut off any part of your highest value
+ var global_positive_ratio = Math.max(positive_ratios.y1, positive_ratios.y2) + 0.1;
+
+ y1.range_max = (global_positive_ratio) * y1.dtick;
+ y2.range_max = (global_positive_ratio) * y2.dtick;
+
+ return [y1, y2];
+}

src/plots/cartesian/layout_attributes.js

@@ -116,6 +116,16 @@ module.exports = {
  'If `range` is provided, then `autorange` is set to *false*.'
  ].join(' ')
  },
+ gridsync: {
+ valType: 'boolean',
+ dflt: false,
+ role: 'info',
+ editType: 'plot',
+ description: [
+ 'If set to true, your overlayed yaxis gridlines will synchronize with those of the primary yaxis.',
+ 'Dtick values will automatically be adjusted to scale your overlayed yaxis accordingly.'
+ ].join(' ')
+ },
  rangemode: {
  valType: 'enumerated',
  values: ['normal', 'tozero', 'nonnegative'],

test/image/mocks/gridsync_negative.json

@@ -0,0 +1,47 @@
+{
+ "data": [
+ {
+ "name": "Apples",
+ "type": "bar",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [232, 2506, 470, 1864, -190]
+ },
+ {
+ "name": "Oranges",
+ "type": "line",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [-241.21, 365.24, 265.21, 204.34, 1129],
+ "yaxis": "y2"
+ }
+ ],
+ "layout": {
+ "margin": {
+ "t": 40, "r": 70, "b": 40, "l": 70
+ },
+ "legend": {
+ "orientation": "h",
+ "x": 0.6,
+ "y": 1.1
+ },
+ "yaxis": {
+ "title": "Apples",
+ "side": "left",
+ "range": [0, 2206]
+ },
+ "yaxis2": {
+ "title": "Oranges",
+ "side": "right",
+ "range": [0, 365.24],
+ "overlaying": "y"
+ },
+ "grid": {
+ "yaxis": {
+
+ }
+ }
+ },
+ "config": {
+ "displaylogo": false,
+ "displayModeBar": false
+ }
+}

test/image/mocks/gridsync_positive.json

@@ -0,0 +1,42 @@
+{
+ "data": [
+ {
+ "name": "Apples",
+ "type": "bar",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [232, 2206, 37, 1629, 190]
+ },
+ {
+ "name": "Oranges",
+ "type": "line",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [141.21, 365.24, 265.21, 204.34, 129],
+ "yaxis": "y2"
+ }
+ ],
+ "layout": {
+ "margin": {
+ "t": 40, "r": 70, "b": 40, "l": 70
+ },
+ "legend": {
+ "orientation": "h",
+ "x": 0.6,
+ "y": 1.1
+ },
+ "yaxis": {
+ "title": "Apples",
+ "side": "left",
+ "range": [0, 2206]
+ },
+ "yaxis2": {
+ "title": "Oranges",
+ "side": "right",
+ "range": [0, 365.24],
+ "overlaying": "y"
+ }
+ },
+ "config": {
+ "displaylogo": false,
+ "displayModeBar": false
+ }
+}

src/plots/cartesian/axes.js

@@ -65,6 +65,9 @@ var autorange = require('./autorange');
 axes.getAutoRange = autorange.getAutoRange;
 axes.findExtremes = autorange.findExtremes;
 
+var gridsync = require('./gridsync');
+axes.gridsync = gridsync.gridsync;
+
 var epsilon = 0.0001;
 function expandRange(range) {
  var delta = (range[1] - range[0]) * epsilon;

src/plots/cartesian/gridsync.js

@@ -0,0 +1,165 @@
+'use strict';
+
+module.exports = {
+ gridsync: gridsync
+};
+
+/**
+ * Synchronize muli-axis gridlines
+ *
+ * @param {array} y1_values:
+ * array of values for y1-axis
+ * @param {array} y2_values:
+ * array of values for y2-axis 
+ * @param {integer} gridlines:
+ * amount of gridlines we want to span our grid
+ * @return {array of objects}
+ * 
+ */
+function gridsync(y1_values, y2_values, gridlines) {
+ var y1 = {}
+ var y2 = {}
+
+ // add .min, .max, .range to obj
+ _getMinMaxRange(y1, y1_values);
+ _getMinMaxRange(y2, y2_values);
+
+ // add .dtick, .dtick_ratio to obj
+ _calcDtick(y1, gridlines);
+ _calcDtick(y2, gridlines);
+
+ var global_dtick_ratio = Math.max(y1.dtick_ratio, y2.dtick_ratio);
+
+ // add .range_min to obj
+ _calcRangeMin(y1, y2, global_dtick_ratio);
+ // add .range_max to obj
+ _calcRangeMax(y1, y2, global_dtick_ratio);
+
+ return [y1, y2];
+}
+
+
+/**
+ * Add minimum value, maximum value, and range of the values to the y-axis object.
+ * 
+ * @param {obj} y:
+ * object representing provided y-axis
+ * @param {array} y_values:
+ * array of values for provided y-axis
+ * @return {object}
+ * 
+ */
+function _getMinMaxRange(y, y_values) {
+ y.min = Math.min(...y_values)
+ y.max = Math.max(...y_values)
+
+ if (y.min < 0) {
+ y.range = y.max - y.min
+ } else {
+ y.range = y.max
+ }
+
+ return y;
+}
+
+
+/**
+ * Add dtick and dtick ratio to the y-axis object.
+ *
+ * @param {object} y:
+ * object representing provided y-axis
+ * @param {integer} gridlines:
+ * amount of gridlines we want to span our grid
+ * @return {object}
+ */
+function _calcDtick(y, gridlines) {
+ var range = y.range * 1000; // mult by 1000 to account for ranges < 1
+ var len = Math.floor(range).toString().length;
+
+ var pow10_divisor = Math.pow(10, len - 1);
+ var firstdigit = Math.floor(range / pow10_divisor);
+ var max_base = pow10_divisor * firstdigit / 1000; // div by 1000 to account for ranges < 1
+
+ y.dtick = max_base / gridlines;
+
+ y.dtick_ratio = y.range / dtick;
+
+ return y;
+}
+
+
+/**
+ * Adjust all y-axes so that their range minimums are proportional to the global minimum ratio.
+ * Add range_min to the y-axis objects.
+ *
+ * @param {object} y1:
+ * object representing the y1-axis
+ * @param {object} y2:
+ * object representing the y2-axis
+ * @param {number} global_dtick_ratio:
+ * the largest dtick ratio of all y-axes. used to scale all other axes
+ * @return {array of objects}
+ */
+function _calcRangeMin(y1, y2, global_dtick_ratio) {
+ var negative_ratios = {};
+ var negative = false; // Are there any negative values present
+
+ if (y1.min < 0) {
+ negative = true;
+ negative_ratios.y1 = Math.abs(y1.min / y1.range) * global_dtick_ratio;
+ } else {
+ negative_ratios.y1 = 0;
+ }
+
+ if (y2.min < 0) {
+ negative = true;
+ negative_ratios.y2 = Math.abs(y2.min / y2.range) * global_dtick_ratio;
+ } else {
+ negative_ratios.y2 = 0;
+ }
+
+ // Increase the ratio by 0.1 so that your range minimums are extended just
+ // far enough to not cut off any part of your lowest value
+ var global_negative_ratio = Math.max(negative_ratios.y1, negative_ratios.y2) + 0.1;
+
+ // If any negative value is present, you must proportionally extend the
+ // range minimum of all axes
+ if (negative) {
+ y1.range_min = (global_negative_ratio) * y1.dtick * -1;
+ y2.range_min = (global_negative_ratio) * y2.dtick * -1;
+ } else { // If no negatives, baseline is set to zero
+ y1.range_min = 0;
+ y2.range_min = 0;
+ }
+
+ return [y1, y2];
+}
+
+
+/**
+ * Adjust all y-axes so that their range maximums are proportional to the global maximum ratio.
+ * Add range_max to the y-axis objects.
+ * 
+ * @param {object} y1:
+ * object representing the y1-axis
+ * @param {object} y2:
+ * object representing the y2-axis
+ * @param {number} global_dtick_ratio:
+ * the largest dtick ratio of all y-axes. used to scale all other axes
+ * @return {array of objects}
+ * 
+ */
+function _calcRangeMax(y1, y2, global_dtick_ratio) {
+ var positive_ratios = {}
+ positive_ratios.y1 = Math.abs(y1.max / y1.range) * global_dtick_ratio;
+ positive_ratios.y2 = Math.abs(y2.max / y2.range) * global_dtick_ratio;
+
+ // Increase the ratio by 0.1 so that your range maximums are extended just
+ // far enough to not cut off any part of your highest value
+ var global_positive_ratio = Math.max(positive_ratios.y1, positive_ratios.y2) + 0.1;
+
+ y1.range_max = (global_positive_ratio) * y1.dtick;
+ y2.range_max = (global_positive_ratio) * y2.dtick;
+
+ return [y1, y2];
+}

src/plots/cartesian/layout_attributes.js

@@ -116,6 +116,16 @@ module.exports = {
  'If `range` is provided, then `autorange` is set to *false*.'
  ].join(' ')
  },
+ gridsync: {
+ valType: 'boolean',
+ dflt: false,
+ role: 'info',
+ editType: 'plot',
+ description: [
+ 'If set to true, your overlayed yaxis gridlines will synchronize with those of the primary yaxis.',
+ 'Dtick values will automatically be adjusted to scale your overlayed yaxis accordingly.'
+ ].join(' ')
+ },
  rangemode: {
  valType: 'enumerated',
  values: ['normal', 'tozero', 'nonnegative'],

test/image/mocks/gridsync_negative.json

@@ -0,0 +1,47 @@
+{
+ "data": [
+ {
+ "name": "Apples",
+ "type": "bar",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [232, 2506, 470, 1864, -190]
+ },
+ {
+ "name": "Oranges",
+ "type": "line",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [-241.21, 365.24, 265.21, 204.34, 1129],
+ "yaxis": "y2"
+ }
+ ],
+ "layout": {
+ "margin": {
+ "t": 40, "r": 70, "b": 40, "l": 70
+ },
+ "legend": {
+ "orientation": "h",
+ "x": 0.6,
+ "y": 1.1
+ },
+ "yaxis": {
+ "title": "Apples",
+ "side": "left",
+ "range": [0, 2206]
+ },
+ "yaxis2": {
+ "title": "Oranges",
+ "side": "right",
+ "range": [0, 365.24],
+ "overlaying": "y"
+ },
+ "grid": {
+ "yaxis": {
+
+ }
+ }
+ },
+ "config": {
+ "displaylogo": false,
+ "displayModeBar": false
+ }
+}

test/image/mocks/gridsync_positive.json

@@ -0,0 +1,42 @@
+{
+ "data": [
+ {
+ "name": "Apples",
+ "type": "bar",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [232, 2206, 37, 1629, 190]
+ },
+ {
+ "name": "Oranges",
+ "type": "line",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [141.21, 365.24, 265.21, 204.34, 129],
+ "yaxis": "y2"
+ }
+ ],
+ "layout": {
+ "margin": {
+ "t": 40, "r": 70, "b": 40, "l": 70
+ },
+ "legend": {
+ "orientation": "h",
+ "x": 0.6,
+ "y": 1.1
+ },
+ "yaxis": {
+ "title": "Apples",
+ "side": "left",
+ "range": [0, 2206]
+ },
+ "yaxis2": {
+ "title": "Oranges",
+ "side": "right",
+ "range": [0, 365.24],
+ "overlaying": "y"
+ }
+ },
+ "config": {
+ "displaylogo": false,
+ "displayModeBar": false
+ }
+}

src/plots/cartesian/axes.js

@@ -65,6 +65,9 @@ var autorange = require('./autorange');
 axes.getAutoRange = autorange.getAutoRange;
 axes.findExtremes = autorange.findExtremes;
 
+var gridsync = require('./gridsync');
+axes.gridsync = gridsync.gridsync;
+
 var epsilon = 0.0001;
 function expandRange(range) {
  var delta = (range[1] - range[0]) * epsilon;

src/plots/cartesian/gridsync.js

@@ -0,0 +1,165 @@
+'use strict';
+
+module.exports = {
+ gridsync: gridsync
+};
+
+/**
+ * Synchronize muli-axis gridlines
+ *
+ * @param {array} y1_values:
+ * array of values for y1-axis
+ * @param {array} y2_values:
+ * array of values for y2-axis 
+ * @param {integer} gridlines:
+ * amount of gridlines we want to span our grid
+ * @return {array of objects}
+ * 
+ */
+function gridsync(y1_values, y2_values, gridlines) {
+ var y1 = {}
+ var y2 = {}
+
+ // add .min, .max, .range to obj
+ _getMinMaxRange(y1, y1_values);
+ _getMinMaxRange(y2, y2_values);
+
+ // add .dtick, .dtick_ratio to obj
+ _calcDtick(y1, gridlines);
+ _calcDtick(y2, gridlines);
+
+ var global_dtick_ratio = Math.max(y1.dtick_ratio, y2.dtick_ratio);
+
+ // add .range_min to obj
+ _calcRangeMin(y1, y2, global_dtick_ratio);
+ // add .range_max to obj
+ _calcRangeMax(y1, y2, global_dtick_ratio);
+
+ return [y1, y2];
+}
+
+
+/**
+ * Add minimum value, maximum value, and range of the values to the y-axis object.
+ * 
+ * @param {obj} y:
+ * object representing provided y-axis
+ * @param {array} y_values:
+ * array of values for provided y-axis
+ * @return {object}
+ * 
+ */
+function _getMinMaxRange(y, y_values) {
+ y.min = Math.min(...y_values)
+ y.max = Math.max(...y_values)
+
+ if (y.min < 0) {
+ y.range = y.max - y.min
+ } else {
+ y.range = y.max
+ }
+
+ return y;
+}
+
+
+/**
+ * Add dtick and dtick ratio to the y-axis object.
+ *
+ * @param {object} y:
+ * object representing provided y-axis
+ * @param {integer} gridlines:
+ * amount of gridlines we want to span our grid
+ * @return {object}
+ */
+function _calcDtick(y, gridlines) {
+ var range = y.range * 1000; // mult by 1000 to account for ranges < 1
+ var len = Math.floor(range).toString().length;
+
+ var pow10_divisor = Math.pow(10, len - 1);
+ var firstdigit = Math.floor(range / pow10_divisor);
+ var max_base = pow10_divisor * firstdigit / 1000; // div by 1000 to account for ranges < 1
+
+ y.dtick = max_base / gridlines;
+
+ y.dtick_ratio = y.range / dtick;
+
+ return y;
+}
+
+
+/**
+ * Adjust all y-axes so that their range minimums are proportional to the global minimum ratio.
+ * Add range_min to the y-axis objects.
+ *
+ * @param {object} y1:
+ * object representing the y1-axis
+ * @param {object} y2:
+ * object representing the y2-axis
+ * @param {number} global_dtick_ratio:
+ * the largest dtick ratio of all y-axes. used to scale all other axes
+ * @return {array of objects}
+ */
+function _calcRangeMin(y1, y2, global_dtick_ratio) {
+ var negative_ratios = {};
+ var negative = false; // Are there any negative values present
+
+ if (y1.min < 0) {
+ negative = true;
+ negative_ratios.y1 = Math.abs(y1.min / y1.range) * global_dtick_ratio;
+ } else {
+ negative_ratios.y1 = 0;
+ }
+
+ if (y2.min < 0) {
+ negative = true;
+ negative_ratios.y2 = Math.abs(y2.min / y2.range) * global_dtick_ratio;
+ } else {
+ negative_ratios.y2 = 0;
+ }
+
+ // Increase the ratio by 0.1 so that your range minimums are extended just
+ // far enough to not cut off any part of your lowest value
+ var global_negative_ratio = Math.max(negative_ratios.y1, negative_ratios.y2) + 0.1;
+
+ // If any negative value is present, you must proportionally extend the
+ // range minimum of all axes
+ if (negative) {
+ y1.range_min = (global_negative_ratio) * y1.dtick * -1;
+ y2.range_min = (global_negative_ratio) * y2.dtick * -1;
+ } else { // If no negatives, baseline is set to zero
+ y1.range_min = 0;
+ y2.range_min = 0;
+ }
+
+ return [y1, y2];
+}
+
+
+/**
+ * Adjust all y-axes so that their range maximums are proportional to the global maximum ratio.
+ * Add range_max to the y-axis objects.
+ * 
+ * @param {object} y1:
+ * object representing the y1-axis
+ * @param {object} y2:
+ * object representing the y2-axis
+ * @param {number} global_dtick_ratio:
+ * the largest dtick ratio of all y-axes. used to scale all other axes
+ * @return {array of objects}
+ * 
+ */
+function _calcRangeMax(y1, y2, global_dtick_ratio) {
+ var positive_ratios = {}
+ positive_ratios.y1 = Math.abs(y1.max / y1.range) * global_dtick_ratio;
+ positive_ratios.y2 = Math.abs(y2.max / y2.range) * global_dtick_ratio;
+
+ // Increase the ratio by 0.1 so that your range maximums are extended just
+ // far enough to not cut off any part of your highest value
+ var global_positive_ratio = Math.max(positive_ratios.y1, positive_ratios.y2) + 0.1;
+
+ y1.range_max = (global_positive_ratio) * y1.dtick;
+ y2.range_max = (global_positive_ratio) * y2.dtick;
+
+ return [y1, y2];
+}

src/plots/cartesian/layout_attributes.js

@@ -116,6 +116,16 @@ module.exports = {
  'If `range` is provided, then `autorange` is set to *false*.'
  ].join(' ')
  },
+ gridsync: {
+ valType: 'boolean',
+ dflt: false,
+ role: 'info',
+ editType: 'plot',
+ description: [
+ 'If set to true, your overlayed yaxis gridlines will synchronize with those of the primary yaxis.',
+ 'Dtick values will automatically be adjusted to scale your overlayed yaxis accordingly.'
+ ].join(' ')
+ },
  rangemode: {
  valType: 'enumerated',
  values: ['normal', 'tozero', 'nonnegative'],

test/image/mocks/gridsync_negative.json

@@ -0,0 +1,47 @@
+{
+ "data": [
+ {
+ "name": "Apples",
+ "type": "bar",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [232, 2506, 470, 1864, -190]
+ },
+ {
+ "name": "Oranges",
+ "type": "line",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [-241.21, 365.24, 265.21, 204.34, 1129],
+ "yaxis": "y2"
+ }
+ ],
+ "layout": {
+ "margin": {
+ "t": 40, "r": 70, "b": 40, "l": 70
+ },
+ "legend": {
+ "orientation": "h",
+ "x": 0.6,
+ "y": 1.1
+ },
+ "yaxis": {
+ "title": "Apples",
+ "side": "left",
+ "range": [0, 2206]
+ },
+ "yaxis2": {
+ "title": "Oranges",
+ "side": "right",
+ "range": [0, 365.24],
+ "overlaying": "y"
+ },
+ "grid": {
+ "yaxis": {
+
+ }
+ }
+ },
+ "config": {
+ "displaylogo": false,
+ "displayModeBar": false
+ }
+}

test/image/mocks/gridsync_positive.json

@@ -0,0 +1,42 @@
+{
+ "data": [
+ {
+ "name": "Apples",
+ "type": "bar",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [232, 2206, 37, 1629, 190]
+ },
+ {
+ "name": "Oranges",
+ "type": "line",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [141.21, 365.24, 265.21, 204.34, 129],
+ "yaxis": "y2"
+ }
+ ],
+ "layout": {
+ "margin": {
+ "t": 40, "r": 70, "b": 40, "l": 70
+ },
+ "legend": {
+ "orientation": "h",
+ "x": 0.6,
+ "y": 1.1
+ },
+ "yaxis": {
+ "title": "Apples",
+ "side": "left",
+ "range": [0, 2206]
+ },
+ "yaxis2": {
+ "title": "Oranges",
+ "side": "right",
+ "range": [0, 365.24],
+ "overlaying": "y"
+ }
+ },
+ "config": {
+ "displaylogo": false,
+ "displayModeBar": false
+ }
+}

src/plots/cartesian/axes.js

@@ -65,6 +65,9 @@ var autorange = require('./autorange');
 axes.getAutoRange = autorange.getAutoRange;
 axes.findExtremes = autorange.findExtremes;
 
+var gridsync = require('./gridsync');
+axes.gridsync = gridsync.gridsync;
+
 var epsilon = 0.0001;
 function expandRange(range) {
  var delta = (range[1] - range[0]) * epsilon;

src/plots/cartesian/gridsync.js

@@ -0,0 +1,165 @@
+'use strict';
+
+module.exports = {
+ gridsync: gridsync
+};
+
+/**
+ * Synchronize muli-axis gridlines
+ *
+ * @param {array} y1_values:
+ * array of values for y1-axis
+ * @param {array} y2_values:
+ * array of values for y2-axis 
+ * @param {integer} gridlines:
+ * amount of gridlines we want to span our grid
+ * @return {array of objects}
+ * 
+ */
+function gridsync(y1_values, y2_values, gridlines) {
+ var y1 = {}
+ var y2 = {}
+
+ // add .min, .max, .range to obj
+ _getMinMaxRange(y1, y1_values);
+ _getMinMaxRange(y2, y2_values);
+
+ // add .dtick, .dtick_ratio to obj
+ _calcDtick(y1, gridlines);
+ _calcDtick(y2, gridlines);
+
+ var global_dtick_ratio = Math.max(y1.dtick_ratio, y2.dtick_ratio);
+
+ // add .range_min to obj
+ _calcRangeMin(y1, y2, global_dtick_ratio);
+ // add .range_max to obj
+ _calcRangeMax(y1, y2, global_dtick_ratio);
+
+ return [y1, y2];
+}
+
+
+/**
+ * Add minimum value, maximum value, and range of the values to the y-axis object.
+ * 
+ * @param {obj} y:
+ * object representing provided y-axis
+ * @param {array} y_values:
+ * array of values for provided y-axis
+ * @return {object}
+ * 
+ */
+function _getMinMaxRange(y, y_values) {
+ y.min = Math.min(...y_values)
+ y.max = Math.max(...y_values)
+
+ if (y.min < 0) {
+ y.range = y.max - y.min
+ } else {
+ y.range = y.max
+ }
+
+ return y;
+}
+
+
+/**
+ * Add dtick and dtick ratio to the y-axis object.
+ *
+ * @param {object} y:
+ * object representing provided y-axis
+ * @param {integer} gridlines:
+ * amount of gridlines we want to span our grid
+ * @return {object}
+ */
+function _calcDtick(y, gridlines) {
+ var range = y.range * 1000; // mult by 1000 to account for ranges < 1
+ var len = Math.floor(range).toString().length;
+
+ var pow10_divisor = Math.pow(10, len - 1);
+ var firstdigit = Math.floor(range / pow10_divisor);
+ var max_base = pow10_divisor * firstdigit / 1000; // div by 1000 to account for ranges < 1
+
+ y.dtick = max_base / gridlines;
+
+ y.dtick_ratio = y.range / dtick;
+
+ return y;
+}
+
+
+/**
+ * Adjust all y-axes so that their range minimums are proportional to the global minimum ratio.
+ * Add range_min to the y-axis objects.
+ *
+ * @param {object} y1:
+ * object representing the y1-axis
+ * @param {object} y2:
+ * object representing the y2-axis
+ * @param {number} global_dtick_ratio:
+ * the largest dtick ratio of all y-axes. used to scale all other axes
+ * @return {array of objects}
+ */
+function _calcRangeMin(y1, y2, global_dtick_ratio) {
+ var negative_ratios = {};
+ var negative = false; // Are there any negative values present
+
+ if (y1.min < 0) {
+ negative = true;
+ negative_ratios.y1 = Math.abs(y1.min / y1.range) * global_dtick_ratio;
+ } else {
+ negative_ratios.y1 = 0;
+ }
+
+ if (y2.min < 0) {
+ negative = true;
+ negative_ratios.y2 = Math.abs(y2.min / y2.range) * global_dtick_ratio;
+ } else {
+ negative_ratios.y2 = 0;
+ }
+
+ // Increase the ratio by 0.1 so that your range minimums are extended just
+ // far enough to not cut off any part of your lowest value
+ var global_negative_ratio = Math.max(negative_ratios.y1, negative_ratios.y2) + 0.1;
+
+ // If any negative value is present, you must proportionally extend the
+ // range minimum of all axes
+ if (negative) {
+ y1.range_min = (global_negative_ratio) * y1.dtick * -1;
+ y2.range_min = (global_negative_ratio) * y2.dtick * -1;
+ } else { // If no negatives, baseline is set to zero
+ y1.range_min = 0;
+ y2.range_min = 0;
+ }
+
+ return [y1, y2];
+}
+
+
+/**
+ * Adjust all y-axes so that their range maximums are proportional to the global maximum ratio.
+ * Add range_max to the y-axis objects.
+ * 
+ * @param {object} y1:
+ * object representing the y1-axis
+ * @param {object} y2:
+ * object representing the y2-axis
+ * @param {number} global_dtick_ratio:
+ * the largest dtick ratio of all y-axes. used to scale all other axes
+ * @return {array of objects}
+ * 
+ */
+function _calcRangeMax(y1, y2, global_dtick_ratio) {
+ var positive_ratios = {}
+ positive_ratios.y1 = Math.abs(y1.max / y1.range) * global_dtick_ratio;
+ positive_ratios.y2 = Math.abs(y2.max / y2.range) * global_dtick_ratio;
+
+ // Increase the ratio by 0.1 so that your range maximums are extended just
+ // far enough to not cut off any part of your highest value
+ var global_positive_ratio = Math.max(positive_ratios.y1, positive_ratios.y2) + 0.1;
+
+ y1.range_max = (global_positive_ratio) * y1.dtick;
+ y2.range_max = (global_positive_ratio) * y2.dtick;
+
+ return [y1, y2];
+}

src/plots/cartesian/layout_attributes.js

@@ -116,6 +116,16 @@ module.exports = {
  'If `range` is provided, then `autorange` is set to *false*.'
  ].join(' ')
  },
+ gridsync: {
+ valType: 'boolean',
+ dflt: false,
+ role: 'info',
+ editType: 'plot',
+ description: [
+ 'If set to true, your overlayed yaxis gridlines will synchronize with those of the primary yaxis.',
+ 'Dtick values will automatically be adjusted to scale your overlayed yaxis accordingly.'
+ ].join(' ')
+ },
  rangemode: {
  valType: 'enumerated',
  values: ['normal', 'tozero', 'nonnegative'],

test/image/mocks/gridsync_negative.json

@@ -0,0 +1,47 @@
+{
+ "data": [
+ {
+ "name": "Apples",
+ "type": "bar",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [232, 2506, 470, 1864, -190]
+ },
+ {
+ "name": "Oranges",
+ "type": "line",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [-241.21, 365.24, 265.21, 204.34, 1129],
+ "yaxis": "y2"
+ }
+ ],
+ "layout": {
+ "margin": {
+ "t": 40, "r": 70, "b": 40, "l": 70
+ },
+ "legend": {
+ "orientation": "h",
+ "x": 0.6,
+ "y": 1.1
+ },
+ "yaxis": {
+ "title": "Apples",
+ "side": "left",
+ "range": [0, 2206]
+ },
+ "yaxis2": {
+ "title": "Oranges",
+ "side": "right",
+ "range": [0, 365.24],
+ "overlaying": "y"
+ },
+ "grid": {
+ "yaxis": {
+
+ }
+ }
+ },
+ "config": {
+ "displaylogo": false,
+ "displayModeBar": false
+ }
+}

test/image/mocks/gridsync_positive.json

@@ -0,0 +1,42 @@
+{
+ "data": [
+ {
+ "name": "Apples",
+ "type": "bar",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [232, 2206, 37, 1629, 190]
+ },
+ {
+ "name": "Oranges",
+ "type": "line",
+ "x": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "y": [141.21, 365.24, 265.21, 204.34, 129],
+ "yaxis": "y2"
+ }
+ ],
+ "layout": {
+ "margin": {
+ "t": 40, "r": 70, "b": 40, "l": 70
+ },
+ "legend": {
+ "orientation": "h",
+ "x": 0.6,
+ "y": 1.1
+ },
+ "yaxis": {
+ "title": "Apples",
+ "side": "left",
+ "range": [0, 2206]
+ },
+ "yaxis2": {
+ "title": "Oranges",
+ "side": "right",
+ "range": [0, 365.24],
+ "overlaying": "y"
+ }
+ },
+ "config": {
+ "displaylogo": false,
+ "displayModeBar": false
+ }
+}