fix for box & candlestick together on one subplot

also an image test for #2004 category OHLC and candlestick using box layout attrs

Author: alexcjohnson

src/plots/cartesian/index.js

@@ -211,12 +211,16 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
         var _module = modules[j];
 
         // skip over non-cartesian trace modules
-        if(_module.basePlotModule.name !== 'cartesian') continue;
+        if(!_module.plot || _module.basePlotModule.name !== 'cartesian') continue;
 
         // plot all traces of this type on this subplot at once
-        var cdModule = getModuleCalcData(cdSubplot, _module);
+        var cdModuleAndOthers = getModuleCalcData(cdSubplot, _module);
+        var cdModule = cdModuleAndOthers[0];
+        // don't need to search the found traces again - in fact we need to NOT
+        // so that if two modules share the same plotter we don't double-plot
+        cdSubplot = cdModuleAndOthers[1];
 
-        if(_module.plot) _module.plot(gd, plotinfo, cdModule, transitionOpts, makeOnCompleteCallback);
+        _module.plot(gd, plotinfo, cdModule, transitionOpts, makeOnCompleteCallback);
     }
 }
 

src/plots/get_data.js

@@ -12,11 +12,11 @@ var Registry = require('../registry');
 var SUBPLOT_PATTERN = require('./cartesian/constants').SUBPLOT_PATTERN;
 
 /**
- * Get calcdata traces(s) associated with a given subplot
+ * Get calcdata trace(s) associated with a given subplot
  *
- * @param {array} calcData (as in gd.calcdata)
- * @param {string} type subplot type
- * @param {string} subplotId subplot id to look for
+ * @param {array} calcData: as in gd.calcdata
+ * @param {string} type: subplot type
+ * @param {string} subplotId: subplot id to look for
  *
  * @return {array} array of calcdata traces
  */
@@ -36,20 +36,40 @@ exports.getSubplotCalcData = function(calcData, type, subplotId) {
 
     return subplotCalcData;
 };
-
+/**
+ * Get calcdata trace(s) that can be plotted with a given module
+ * NOTE: this isn't necessarily just exactly matching trace type,
+ * if multiple trace types use the same plotting routine, they will be
+ * collected here.
+ * In order to not plot the same thing multiple times, we return two arrays,
+ * the calcdata we *will* plot with this module, and the ones we *won't*
+ *
+ * @param {array} calcdata: as in gd.calcdata
+ * @param {object|string} typeOrModule: the plotting module, or its name
+ *
+ * @return {array[array]} [foundCalcdata, remainingCalcdata]
+ */
 exports.getModuleCalcData = function(calcdata, typeOrModule) {
     var moduleCalcData = [];
+    var remainingCalcData = [];
     var _module = typeof typeOrModule === 'string' ? Registry.getModule(typeOrModule) : typeOrModule;
-    if(!_module) return moduleCalcData;
+    if(!_module) return [moduleCalcData, calcdata];
 
     for(var i = 0; i < calcdata.length; i++) {
         var cd = calcdata[i];
         var trace = cd[0].trace;
+        if(trace.visible !== true) continue;
 
-        if((trace._module === _module) && (trace.visible === true)) moduleCalcData.push(cd);
+        // we use this to find data to plot - so if there's a .plot
+        if(trace._module.plot === _module.plot) {
+            moduleCalcData.push(cd);
+        }
+        else {
+            remainingCalcData.push(cd);
+        }
     }
 
-    return moduleCalcData;
+    return [moduleCalcData, remainingCalcData];
 };
 
 /**

src/traces/parcoords/base_plot.js

@@ -18,7 +18,7 @@ var PARCOORDS = 'parcoords';
 exports.name = PARCOORDS;
 
 exports.plot = function(gd) {
-    var calcData = getModuleCalcData(gd.calcdata, PARCOORDS);
+    var calcData = getModuleCalcData(gd.calcdata, PARCOORDS)[0];
     if(calcData.length) parcoordsPlot(gd, calcData);
 };
 

src/traces/sankey/base_plot.js

@@ -22,7 +22,7 @@ exports.baseLayoutAttrOverrides = overrideAll({
 }, 'plot', 'nested');
 
 exports.plot = function(gd) {
-    var calcData = getModuleCalcData(gd.calcdata, SANKEY);
+    var calcData = getModuleCalcData(gd.calcdata, SANKEY)[0];
     plot(gd, calcData);
 };
 

src/traces/table/base_plot.js

@@ -16,7 +16,7 @@ var TABLE = 'table';
 exports.name = TABLE;
 
 exports.plot = function(gd) {
-    var calcData = getModuleCalcData(gd.calcdata, TABLE);
+    var calcData = getModuleCalcData(gd.calcdata, TABLE)[0];
     if(calcData.length) tablePlot(gd, calcData);
 };
 

test/image/baselines/finance_subplots_categories.png

@@ -0,0 +1,73 @@
+{
+    "data": [{
+        "type": "ohlc",
+        "x": [
+            "2018-04-17", "2018-04-18", "2018-04-19", "2018-04-20",
+            "2018-04-23", "2018-04-24", "2018-04-25", "2018-04-26", "2018-04-27"
+        ],
+        "open": [10, 11, 12, 13, 12, 13, 14, 15, 16],
+        "high": [15, 16, 17, 18, 17, 18, 19, 20, 21],
+        "low": [7, 8, 9, 10, 9, 10, 11, 12, 13],
+        "close": [9, 10, 12, 13, 13, 12, 14, 14, 17],
+        "name": "Date OHLC"
+    }, {
+        "type": "candlestick",
+        "x": [
+            "2018-04-17", "2018-04-18", "2018-04-19", "2018-04-20",
+            "2018-04-23", "2018-04-24", "2018-04-25", "2018-04-26", "2018-04-27"
+        ],
+        "open": [20, 21, 22, 23, 22, 23, 24, 25, 26],
+        "high": [25, 26, 27, 28, 27, 28, 29, 30, 31],
+        "low": [17, 18, 19, 20, 19, 20, 21, 22, 23],
+        "close": [19, 20, 22, 23, 23, 22, 24, 24, 27],
+        "name": "Date Candlestick"
+    }, {
+        "type": "ohlc",
+        "xaxis": "x2",
+        "x": [
+            "2018-04-17", "2018-04-18", "2018-04-19", "2018-04-20",
+            "2018-04-23", "2018-04-24", "2018-04-25", "2018-04-26", "2018-04-27"
+        ],
+        "open": [10, 11, 12, 13, 12, 13, 14, 15, 16],
+        "high": [15, 16, 17, 18, 17, 18, 19, 20, 21],
+        "low": [7, 8, 9, 10, 9, 10, 11, 12, 13],
+        "close": [9, 10, 12, 13, 13, 12, 14, 14, 17],
+        "increasing": {"line": {"color": "orange"}},
+        "decreasing": {"line": {"color": "blue"}},
+        "name": "Category OHLC"
+    }, {
+        "type": "candlestick",
+        "xaxis": "x2",
+        "x": [
+            "2018-04-17", "2018-04-18", "2018-04-19", "2018-04-20",
+            "2018-04-23", "2018-04-24", "2018-04-25", "2018-04-26", "2018-04-27"
+        ],
+        "open": [20, 21, 22, 23, 22, 23, 24, 25, 26],
+        "high": [25, 26, 27, 28, 27, 28, 29, 30, 31],
+        "low": [17, 18, 19, 20, 19, 20, 21, 22, 23],
+        "close": [19, 20, 22, 23, 23, 22, 24, 24, 27],
+        "increasing": {"line": {"color": "orange"}},
+        "decreasing": {"line": {"color": "blue"}},
+        "name": "Category Candlestick"
+    }, {
+        "type": "box",
+        "x": [
+            "2018-04-23", "2018-04-23", "2018-04-23", "2018-04-23", "2018-04-23",
+            "2018-04-23", "2018-04-23", "2018-04-23", "2018-04-23", "2018-04-23",
+            "2018-04-24", "2018-04-24", "2018-04-24", "2018-04-24", "2018-04-24",
+            "2018-04-24", "2018-04-24", "2018-04-24", "2018-04-24", "2018-04-24"
+        ],
+        "y": [
+            10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
+            20, 21, 22, 23, 24, 25, 26, 27, 28, 29
+        ],
+        "name": "Box"
+    }],
+    "layout": {
+        "xaxis": {"domain": [0, 0.45], "title": "Date"},
+        "xaxis2": {"domain": [0.55, 1], "title": "Category", "type": "category"},
+        "width": 800,
+        "height": 500,
+        "boxgroupgap": 0
+    }
+}