Merge branch 'master' of github.com:jackparmer/streambed

Author: jackparmer

shelly/shelly/templates/static/js/axes.js

@@ -40,7 +40,7 @@ function setType(gd,axletter){
     delete ax.isdate;
 
     // delete category list, if there is one, so we start over
-    // to be filled in later by convertToAxis
+    // to be filled in later by convertToNums
     ax.categories = [];
 
     // guess at axis type with the new property format
@@ -194,7 +194,7 @@ axes.convertToNums = function(o,ax){
 }
 
 // setConvert: define the conversion functions for an axis
-// after convertToAxis turns all data to numbers, it's used in 3 ways:
+// after convertToNums turns all data to numbers, it's used in 3 ways:
 //  c: calcdata numbers, not linearized
 //  l: linearized - same as c except for log axes (and other mappings later?)
 //      this is used by ranges, and when we need to know if it's *possible* to

shelly/shelly/templates/static/js/graph_obj.js

@@ -1260,19 +1260,19 @@ function plotDo(gd,aobj,traces) {
 }
 
 function plotAutoSize(gd,aobj) {
-    var plotBB = gd.paper.node().getBoundingClientRect();
+    var plotBB = gd.paperdiv.node().getBoundingClientRect();
     var gdBB = gd.getBoundingClientRect();
-    var ftBB = $('#filetab')[0].getBoundingClientRect();
+    var ftBB = $('#filetab').length ? $('#filetab')[0].getBoundingClientRect() : {width:0};
     var newheight = Math.round(gdBB.bottom-plotBB.top);
     var newwidth = Math.round((ftBB.width ? ftBB.left : gdBB.right) - plotBB.left);
     if(Math.abs(gd.layout.width-newwidth)>1 || Math.abs(gd.layout.height-newheight)>1) {
         gd.layout.height = newheight;
         gd.layout.width = newwidth;
     }
-    else { // if there's no size change, update layout but don't need to redraw
+    else { // if there's no size change, update layout but only restyle (different element may get margin color)
         delete(aobj.autosize);
         gd.layout.autosize = true;
-        newModeBar(gd);
+        layoutStyles(gd);
     }
     return aobj
 }
@@ -1281,15 +1281,13 @@ function plotAutoSize(gd,aobj) {
 function plotResize(gd) {
     killPopovers();
     if(gd && gd.tabtype=='plot' && $(gd).css('display')!='none') {
-        $(gd).find('.modebar').remove();
         if(gd.redrawTimer) { clearTimeout(gd.redrawTimer) }
         gd.redrawTimer = setTimeout(function(){
             if($(gd).css('display')=='none') { return }
             if(gd.layout && gd.layout.autosize) {
                 gd.autoplay = true; // don't include this relayout in the undo queue
                 relayout(gd, {autosize:true});
             }
-            else { newModeBar(gd) }
 
             if(LIT) {
                 hidebox();
@@ -1308,28 +1306,33 @@ function newPlot(divid, layout) {
     // (for extension to multiple graphs per page)
     // some callers send this in already by dom element
 
-    var gd=(typeof divid == 'string') ? document.getElementById(divid) : divid;
+    var gd=(typeof divid == 'string') ? document.getElementById(divid) : divid,
+        gd3=d3.select(gd);
     if(!layout) layout={};
 	// test if this is on the main site or embedded
 	gd.mainsite=Boolean($('#plotlyMainMarker').length);
 
     // destroy any plot that already exists in this div
     // first check if we can save the toolbars
-    if(gd.mainsite ? ($(gd).children('.graphbar').length==1 &&
-            $(gd).children('.demobar').length==1 &&
-            $(gd).children('svg').length==1 &&
-            $(gd).children().length>=3) : /* 4th child is graph tips alert div, then modebar... */
-        ($(gd).children('svg').length==1)
-        ) { $(gd).children('svg').remove() }
+    if(($(gd).children('.svgcontainer').length==1) && (!gd.mainsite ||
+        ($(gd).children('.graphbar').length==1 && $(gd).children('.demobar').length==1))) {
+            $(gd).children('.svgcontainer').children('svg').remove()
+    }
     else { // not the right children (probably none, but in case something goes wrong redraw all)
+        // TODO - remove tooltips here
+        $(gd).find('[rel="tooltip"]').tooltip('destroy');
         gd.innerHTML='';
-        if(gd.mainsite) graphbar(gd);
+        if(gd.mainsite) { graphbar(gd) }
+        // Make the outer graph container
+        gd.paperdiv = gd3.append('div')
+            .classed('svgcontainer',true)
+            .style('position','relative');
     }
 
     // Get the layout info - take the default and update it with layout arg
     gd.layout=updateObject(defaultLayout(),layout);
 
-    var gl=gd.layout, gd3=d3.select(gd), xa=gl.xaxis, ya=gl.yaxis;
+    var gl=gd.layout, xa=gl.xaxis, ya=gl.yaxis;
     Axes.setTypes(gd);
 
     // initial autosize
@@ -1341,11 +1344,8 @@ function newPlot(divid, layout) {
         gd.paper.remove();
         gl.autosize=true;
     }
-
     // Make the graph containers
-    gd.paper = gd3.append('svg')
-    gd.paperbg = gd.paper.append('rect')
-        .style('fill','none')
+    gd.paper = gd.paperdiv.append('svg');
     gd.plotbg = gd.paper.append('rect')
         .attr('stroke-width',0);
     gd.axlines = {
@@ -1399,8 +1399,6 @@ function newPlot(divid, layout) {
     dragBox(gd, x2, y2+y1-y0, x1-x0, y0-y1,'n','e');
     dragBox(gd, x0, y1, x1-x0, y0-y1,'s','w');
     dragBox(gd, x2, y1, x1-x0, y0-y1,'s','e');
-
-    newModeBar(gd);
 }
 
 // layoutStyles: styling for plot layout elements
@@ -1423,20 +1421,19 @@ function layoutStyles(gd) {
     gd.plotwidth=gl.width-gm.l-gm.r;
     gd.plotheight=gl.height-gm.t-gm.b;
 
-    gd.paper
-        .call(setSize, gl.width, gl.height);
-    gd.paperbg
-        .call(setRect, 0, 0, gl.width, gl.height);
+    gd.paperdiv.style({width:gl.width+'px', height:gl.height+'px'});
+    gd.paper.call(setSize, gl.width, gl.height);
+
     // plot background: color the whole div if it's autosized in the main site,
     // so we don't always have a weird white strip with the "My Data" tab
-    // otherwise color the paperbg rect, so you see the plot the size it's meant to be.
+    // otherwise color the paperdiv, so you see the plot the size it's meant to be.
     if(gl.autosize && gd.mainsite) {
         d3.select(gd).style('background', gl.paper_bgcolor);
-        gd.paperbg.style('fill','none');
+        gd.paperdiv.style('background','transparent');
     }
     else {
         d3.select(gd).style('background', '#fff');
-        gd.paperbg.call(fillColor, gl.paper_bgcolor);
+        gd.paperdiv.style('background', gl.paper_bgcolor);
     }
     gd.plotbg
         .call(setRect, gm.l-gm.p, gm.t-gm.p, gd.plotwidth+2*gm.p, gd.plotheight+2*gm.p)
@@ -1460,6 +1457,8 @@ function layoutStyles(gd) {
         .attr('stroke-width',ylw)
         .call(strokeColor,ya.linecolor);
     makeTitles(gd,'gtitle');
+
+    newModeBar(gd);
 }
 
 // ----------------------------------------------------
@@ -1544,7 +1543,7 @@ function makeTitles(gd,title) {
             else { el.remove() }
 
             // move labels out of the way, if possible, when tick labels interfere
-            var titlebb=el[0][0].getBoundingClientRect(), gdbb=gd.paper.node().getBoundingClientRect();
+            var titlebb=el[0][0].getBoundingClientRect(), gdbb=gd.paperdiv.node().getBoundingClientRect();
             if(k=='xtitle'){
                 var labels=gd.paper.selectAll('text.xtick')[0], ticky=0;
                 for(var i=0;i<labels.length;i++){
@@ -1754,7 +1753,7 @@ function legend(gd) {
             if(Math.abs(dy)<MINDRAG) { dy=0 }
             if(dx||dy) { gd.dragged = true }
             el3.call(setPosition, x0+dx, y0+dy);
-            var pbb = gd.paper.node().getBoundingClientRect();
+            var pbb = gd.paperdiv.node().getBoundingClientRect();
 
             // drag to within a couple px of edge to take the legend outside the plot
             if(e2.clientX>pbb.right-3*MINDRAG || (gd.lw>0 && dx>-MINDRAG)) { xf=100 }
@@ -1857,7 +1856,7 @@ function annotation(gd,index,opt,value) {
 
     // get the paper and plot bounding boxes before adding pieces that go off screen
     // firefox will include things that extend outside the original... can we avoid that?
-    var paperbb = gd.paper.node().getBoundingClientRect(),
+    var paperbb = gd.paperdiv.node().getBoundingClientRect(),
         plotbb = d3.select(gd).select('.nsewdrag').node().getBoundingClientRect(),
         x = plotbb.left-paperbb.left,
         y = plotbb.top-paperbb.top;

shelly/shelly/templates/static/js/heatmap.js

@@ -262,31 +262,37 @@ heatmap.margin = function(gd){
 function get_xy(gd,gdc){
     // Set any missing keys to defaults
     setDefaults(gdc,true);
-    var y = gdc.y,
-        m = gdc.z.length, // num rows
-        ya = gd.layout.yaxis;
-    if($.isArray(y) && (y.length==m+1) && (gdc.type!='histogram2d') && (ya.type!='category')) {
-        y = convertToAxis(y,ya);
-    }
-    else {
-        y=[];
-        var y0 = (typeof(gdc.y0)=='number') ?
-            gdc.y0 : convertToAxis(gdc.y0,ya);
-        for(var i=0; i<=m; i++) { y.push(y0+gdc.dy*(i-0.5)) }
-    }
-    var x = gdc.x,
-        n = gdc.z[0].length, // num cols
-        xa = gd.layout.xaxis;
-    if($.isArray(x) && (x.length!=n+1) && (gdc.type!='histogram2d') && (xa.type!='category')) {
-        x = convertToAxis(x,xa);
-    }
-    else {
-        x=[];
-        var x0 = (typeof(gdc.x0)=='number') ?
-            gdc.x0 : convertToAxis(gdc.x0,xa);
-        for(var i=0; i<=n; i++) { x.push(x0+gdc.dx*(i-0.5)) }
+
+    function makeBoundArray(array_in,v0_in,dv_in,numbricks,ax) {
+        if($.isArray(array_in) && (gdc.type!='histogram2d') && (ax.type!='category')) {
+            array_in = Axes.convertToNums(array_in,ax);
+            var len = array_in.length;
+            if(len==numbricks) { // given vals are brick centers
+                if(numbricks==1) { return [array_in[0]-.5,array_in[0]+.5] }
+                else {
+                    var array_out = [1.5*array_in[0]-.5*array_in[1]];
+                    for(var i=1; i<len; i++) {
+                        array_out.push((array_in[i-1]+array_in[i])*.5)
+                    }
+                    array_out.push(1.5*array_in[len-1]-.5*array_in[len-2]);
+                }
+            }
+            else {  // hopefully length==numbricks+1, but do something regardless:
+                    // given vals are brick boundaries
+                return array_in.slice(0,numbricks+1);
+            }
+        }
+        else {
+            var array_out = [],
+                v0 = v0_in ? Axes.convertToNums(v0_in,ax) : 0,
+                dv = dv_in || 1;
+            for(var i=0; i<=numbricks; i++) { array_out.push(v0+dv*(i-0.5)) }
+        }
+        return array_out;
     }
-    return {x:x,y:y};
+
+    return {x:makeBoundArray(gdc.x,gdc.x0,gdc.dx,gdc.z[0].length,gd.layout.xaxis),
+            y:makeBoundArray(gdc.y,gdc.y0,gdc.dy,gdc.z.length,gd.layout.yaxis)};
 }
 
 // if the heatmap data object is missing any keys, fill them in