Merge pull request #4122 from plotly/subplotly

Subplotlyjs (a 🍼 first step)

Author: etpinard

image_server/test/mocks/empty.json

@@ -0,0 +1,4 @@
+{
+    "data": [],
+    "layout": {}
+}

image_server/test/test-images-baseline/empty.png

@@ -2356,7 +2356,7 @@ axes.listIds = function(td, axletter) {
 
 // get an axis object from its id 'x','x2' etc
 // optionally, id can be a subplot (ie 'x2y3') and type gets x or y from it
-axes.getFromId = function(td,id,type) {
+axes.getFromId = function(td, id, type) {
     var fullLayout = td._fullLayout;
 
     if(type==='x') id = id.replace(/y[0-9]*/,'');
@@ -2875,8 +2875,11 @@ axes.doTicks = function(td, axid, skipTitle) {
     }
     else {
         var alldone = axes.getSubplots(td,ax).map(function(subplot) {
-            var plotinfo = fullLayout._plots[subplot],
-                container = plotinfo[axletter+'axislayer'],
+            var plotinfo = fullLayout._plots[subplot];
+
+            if(!fullLayout._hasCartesian) return;
+
+            var container = plotinfo[axletter + 'axislayer'],
 
                 // [bottom or left, top or right, free, main]
                 linepositions = ax._linepositions[subplot]||[],

shelly/plotlyjs/static/plotlyjs/src/axes.js

@@ -90,8 +90,11 @@ fx.init = function(gd) {
         return fullLayout._plots[a].mainplot ? 1 : -1;
     });
     subplots.forEach(function(subplot) {
-        var plotinfo = fullLayout._plots[subplot],
-            xa = plotinfo.x(),
+        var plotinfo = fullLayout._plots[subplot];
+
+        if(!fullLayout._hasCartesian) return;
+
+        var xa = plotinfo.x(),
             ya = plotinfo.y(),
 
             // the y position of the main x axis line

shelly/plotlyjs/static/plotlyjs/src/graph_interact.js

@@ -148,7 +148,14 @@ plots.registerSubplot = function(subplotType, attr, idRoot, attributes) {
     };
 };
 
+// TODO separate the 'find subplot' step from the 'get subplot ids' step
 plots.getSubplotIds = function getSubplotIds(layout, type) {
+
+    // layout must be 'fullLayout' here
+    if(type === 'cartesian') {
+        return Object.keys(layout._plots);
+    }
+
     var idRegex = plots.subplotsRegistry[type].idRegex,
         layoutKeys = Object.keys(layout),
         subplotIds = [],
@@ -560,22 +567,23 @@ Plotly.plot = function(gd, data, layout, config) {
     }
 
     function positionAndAutorange() {
-        var i, j, subplots, subplotInfo, modules, module;
-
         if(!recalc) return;
 
+        var subplots = plots.getSubplotIds(fullLayout, 'cartesian'),
+            modules = gd._modules;
+
         // position and range calculations for traces that
         // depend on each other ie bars (stacked or grouped)
         // and boxes (grouped) push each other out of the way
-        subplots = Plotly.Axes.getSubplots(gd);
-        modules = gd._modules;
-        for (i = 0; i < subplots.length; i++) {
-            subplotInfo = gd._fullLayout._plots[subplots[i]];
-            for (j = 0; j < modules.length; j++) {
-                module = modules[j];
-                if (module.setPositions) {
-                    module.setPositions(gd, subplotInfo);
-                }
+
+        var subplotInfo, _module;
+
+        for(var i = 0; i < subplots.length; i++) {
+            subplotInfo = fullLayout._plots[subplots[i]];
+
+            for(var j = 0; j < modules.length; j++) {
+                _module = modules[j];
+                if(_module.setPositions) _module.setPositions(gd, subplotInfo);
             }
         }
 
@@ -607,10 +615,10 @@ Plotly.plot = function(gd, data, layout, config) {
         return Plotly.Axes.doTicks(gd, 'redraw');
     }
 
-    function drawData(){
+    function drawData() {
         // Now plot the data
         var calcdata = gd.calcdata,
-            subplots = Plotly.Axes.getSubplots(gd),
+            subplots = plots.getSubplotIds(fullLayout, 'cartesian'),
             modules = gd._modules;
 
         var i, j, cd, trace, uid, subplot, subplotInfo,
@@ -666,7 +674,7 @@ Plotly.plot = function(gd, data, layout, config) {
             // remove old traces, then redraw everything
             // TODO: use enter/exit appropriately in the plot functions
             // so we don't need this - should sometimes be a big speedup
-            subplotInfo.plot.selectAll('g.trace').remove();
+            if(subplotInfo.plot) subplotInfo.plot.selectAll('g.trace').remove();
 
             for(j = 0; j < modules.length; j++) {
                 module = modules[j];
@@ -684,7 +692,7 @@ Plotly.plot = function(gd, data, layout, config) {
             }
 
             // finally do all error bars at once
-            if(Plotly.ErrorBars) {
+            if(gd._fullLayout._hasCartesian && Plotly.ErrorBars) {
                 Plotly.ErrorBars.plot(gd, subplotInfo, cdError);
                 Plotly.Lib.markTime('done ErrorBars');
             }
@@ -3527,7 +3535,6 @@ function getGraphDiv(gd) {
 // -------------------------------------------------------
 function makePlotFramework(gd) {
     var gd3 = d3.select(gd),
-        subplots = Plotly.Axes.getSubplots(gd),
         fullLayout = gd._fullLayout;
 
     /*
@@ -3598,6 +3605,75 @@ function makePlotFramework(gd) {
     fullLayout._draggers = fullLayout._paper.append('g')
         .classed('draglayer', true);
 
+    var subplots = Plotly.Axes.getSubplots(gd);
+    makeSubplots(gd, subplots);
+
+    if(fullLayout._hasCartesian) makeCartesianPlotFramwork(gd, subplots);
+
+    // single shape and pie layers for the whole plot
+    fullLayout._shapelayer = fullLayout._paper.append('g').classed('shapelayer', true);
+    fullLayout._pielayer = fullLayout._paper.append('g').classed('pielayer', true);
+
+    // fill in image server scrape-svg
+    fullLayout._glimages = fullLayout._paper.append('g').classed('glimages', true);
+    fullLayout._geoimages = fullLayout._paper.append('g').classed('geoimages', true);
+
+    // lastly info (legend, annotations) and hover layers go on top
+    // these are in a different svg element normally, but get collapsed into a single
+    // svg when exporting (after inserting 3D)
+    fullLayout._infolayer = fullLayout._toppaper.append('g').classed('infolayer', true);
+    fullLayout._hoverlayer = fullLayout._toppaper.append('g').classed('hoverlayer', true);
+
+    $(gd).trigger('plotly_framework');
+
+    // position and style the containers, make main title
+    var frameWorkDone = Plotly.Lib.syncOrAsync([
+        layoutStyles,
+        function goAxes(){ return Plotly.Axes.doTicks(gd,'redraw'); },
+        Plotly.Fx.init
+    ], gd);
+
+    if(frameWorkDone && frameWorkDone.then) {
+        gd._promises.push(frameWorkDone);
+    }
+
+    return frameWorkDone;
+}
+
+// create '_plots' object grouping x/y axes into subplots
+// to be better manage subplots
+function makeSubplots(gd, subplots) {
+    var _plots = gd._fullLayout._plots = {};
+
+    var subplot, plotinfo;
+
+    function getAxisFunc(subplot, axLetter) {
+        return function() {
+            return Plotly.Axes.getFromId(gd, subplot, axLetter);
+        };
+    }
+
+    for(var i = 0; i < subplots.length; i++) {
+        subplot = subplots[i];
+        plotinfo = _plots[subplot] = {};
+
+        plotinfo.id = subplot;
+
+        // references to the axis objects controlling this subplot
+        plotinfo.x = getAxisFunc(subplot, 'x');
+        plotinfo.y = getAxisFunc(subplot, 'y');
+
+        // TODO investigate why replacing calls to .x and .y
+        // for .xaxis and .yaxis makes the `pseudo_html`
+        // test image fail
+        plotinfo.xaxis = plotinfo.x();
+        plotinfo.yaxis = plotinfo.y();
+    }
+}
+
+function makeCartesianPlotFramwork(gd, subplots) {
+    var fullLayout = gd._fullLayout;
+
     // Layers to keep plot types in the right order.
     // from back to front:
     // 1. heatmaps, 2D histos and contour maps
@@ -3615,23 +3691,16 @@ function makePlotFramework(gd) {
 
     // create all the layers in order, so we know they'll stay in order
     var overlays = [];
-    fullLayout._plots = {};
+
     fullLayout._paper.selectAll('g.subplot').data(subplots)
       .enter().append('g')
-        .classed('subplot',true)
-        .each(function(subplot){
-            var plotinfo = fullLayout._plots[subplot] = {},
-                plotgroup = d3.select(this).classed(subplot,true);
-            plotinfo.id = subplot;
-            // references to the axis objects controlling this subplot
-            plotinfo.x = function() {
-                return Plotly.Axes.getFromId(gd,subplot,'x');
-            };
-            plotinfo.y = function() {
-                return Plotly.Axes.getFromId(gd,subplot,'y');
-            };
-            var xa = plotinfo.x(),
-                ya = plotinfo.y();
+        .classed('subplot', true)
+        .each(function(subplot) {
+            var plotinfo = fullLayout._plots[subplot],
+                plotgroup = plotinfo.plotgroup = d3.select(this).classed(subplot, true),
+                xa = plotinfo.xaxis,
+                ya = plotinfo.yaxis;
+
             // references to any subplots overlaid on this one
             plotinfo.overlays = [];
 
@@ -3670,7 +3739,7 @@ function makePlotFramework(gd) {
                 // main subplot - make the components of
                 // the plot and containers for overlays
                 plotinfo.bg = plotgroup.append('rect')
-                    .style('stroke-width',0);
+                    .style('stroke-width', 0);
                 plotinfo.gridlayer = plotgroup.append('g');
                 plotinfo.overgrid = plotgroup.append('g');
                 plotinfo.zerolinelayer = plotgroup.append('g');
@@ -3691,6 +3760,7 @@ function makePlotFramework(gd) {
             plotinfo.draglayer = fullLayout._draggers.append('g');
         });
 
+
     // now make the components of overlaid subplots
     // overlays don't have backgrounds, and append all
     // their other components to the corresponding
@@ -3711,6 +3781,7 @@ function makePlotFramework(gd) {
     // common attributes for all subplots, overlays or not
     subplots.forEach(function(subplot) {
         var plotinfo = fullLayout._plots[subplot];
+
         plotinfo.plot
             .attr('preserveAspectRatio', 'none')
             .style('fill', 'none');
@@ -3721,35 +3792,6 @@ function makePlotFramework(gd) {
             .style('fill', 'none')
             .classed('crisp', true);
     });
-
-    // single shape and pie layers for the whole plot
-    fullLayout._shapelayer = fullLayout._paper.append('g').classed('shapelayer', true);
-    fullLayout._pielayer = fullLayout._paper.append('g').classed('pielayer', true);
-
-    // fill in image server scrape-svg
-    fullLayout._glimages = fullLayout._paper.append('g').classed('glimages', true);
-    fullLayout._geoimages = fullLayout._paper.append('g').classed('geoimages', true);
-
-    // lastly info (legend, annotations) and hover layers go on top
-    // these are in a different svg element normally, but get collapsed into a single
-    // svg when exporting (after inserting 3D)
-    fullLayout._infolayer = fullLayout._toppaper.append('g').classed('infolayer', true);
-    fullLayout._hoverlayer = fullLayout._toppaper.append('g').classed('hoverlayer', true);
-
-    $(gd).trigger('plotly_framework');
-
-    // position and style the containers, make main title
-    var frameWorkDone = Plotly.Lib.syncOrAsync([
-        layoutStyles,
-        function goAxes(){ return Plotly.Axes.doTicks(gd,'redraw'); },
-        Plotly.Fx.init
-    ], gd);
-
-    if(frameWorkDone && frameWorkDone.then) {
-        gd._promises.push(frameWorkDone);
-    }
-
-    return frameWorkDone;
 }
 
 // called by legend and colorbar routines to see if we need to