revamp waterfall marker style logic

- use (increasing|decreasing|totals).marker containers
- use calcdata[i][j].dir (like ohlc/candlestick) to determine cont
- 🔪 arraysToCalcdata, *.marker* attrs are editType:'style'
- adapt Bar.plot and Bar textPointStyle for waterfall use
- split out reusable Bar.hoverPoints logic for waterfall use
- bring some Bar methods back to `master`

Author: etpinard

src/components/drawing/index.js

@@ -362,21 +362,8 @@ drawing.pointStyle = function(s, trace, gd) {
     });
 };
 
-drawing.waterfallStyle = function(d, trace) {
-    var marker = trace.marker;
-    if(marker) return marker;
-    if(!d.isSum) {
-        if(d.rawS > 0) return trace.increasing;
-        return trace.decreasing; // Note here by default we return RED for zero and null
-    }
-    return trace.totals;
-};
-
 drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
     var marker = trace.marker;
-    if(trace.type === 'waterfall') {
-        marker = this.waterfallStyle(d, trace);
-    }
     var markerLine = marker.line;
 
     sel.style('opacity',
@@ -512,6 +499,7 @@ drawing.makePointStyleFns = function(trace) {
     if(trace.selectedpoints) {
         Lib.extendFlat(out, drawing.makeSelectedPointStyleFns(trace));
     }
+
     return out;
 };
 

src/traces/bar/hover.js

@@ -15,6 +15,21 @@ var Color = require('../../components/color');
 var fillHoverText = require('../scatter/fill_hover_text');
 
 function hoverPoints(pointData, xval, yval, hovermode) {
+    var barPointData = hoverOnBars(pointData, xval, yval, hovermode);
+
+    if(barPointData) {
+        var cd = barPointData.cd;
+        var trace = cd[0].trace;
+        var di = cd[barPointData.index];
+
+        barPointData.color = getTraceColor(trace, di);
+        Registry.getComponentMethod('errorbars', 'hoverInfo')(di, trace, barPointData);
+
+        return [barPointData];
+    }
+}
+
+function hoverOnBars(pointData, xval, yval, hovermode) {
     var cd = pointData.cd;
     var trace = cd[0].trace;
     var t = cd[0].t;
@@ -133,24 +148,23 @@ function hoverPoints(pointData, xval, yval, hovermode) {
     // in case of bars shifted within groups
     pointData[posLetter + 'Spike'] = pa.c2p(di.p, true);
 
-    pointData.color = getTraceColor(trace, di);
     fillHoverText(di, trace, pointData);
-    Registry.getComponentMethod('errorbars', 'hoverInfo')(di, trace, pointData);
-
     pointData.hovertemplate = trace.hovertemplate;
-    return [pointData];
+
+    return pointData;
 }
 
 function getTraceColor(trace, di) {
-    var mc = (di.mc !== undefined) ? di.mc : trace.marker.color;
-    var mlc = (di.mlc !== undefined) ? di.mlc : trace.marker.line.color;
-    var mlw = (di.mlw !== undefined) ? di.mlw : trace.marker.line.width;
+    var mc = di.mcc || trace.marker.color;
+    var mlc = di.mlcc || trace.marker.line.color;
+    var mlw = di.mlw || trace.marker.line.width;
 
     if(Color.opacity(mc)) return mc;
     else if(Color.opacity(mlc) && mlw) return mlc;
 }
 
 module.exports = {
     hoverPoints: hoverPoints,
+    hoverOnBars: hoverOnBars,
     getTraceColor: getTraceColor
 };

src/traces/bar/plot.js

@@ -103,18 +103,29 @@ module.exports = function plot(gd, plotinfo, cdModule, traceLayer) {
                 }
             }
 
-            var lw = (di.mlw + 1 ||
-                    (((trace.marker || {}).line) || {}).width + 1 ||
-                    (di.trace ? ((di.trace.marker || {}).line || {}).width : 0) + 1) - 1;
+            var lw;
+            var mc;
+            var prefix;
+
+            if(trace.type === 'waterfall') {
+                var cont = trace[di.dir].marker;
+                lw = cont.line.width;
+                mc = cont.color;
+                prefix = 'waterfall';
+            } else {
+                lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
+                    (di.trace ? di.trace.marker.line.width : 0) + 1) - 1;
+                mc = di.mc || trace.marker.color;
+                prefix = 'bar';
+            }
+
             var offset = d3.round((lw / 2) % 1, 2);
-            var prefix = trace.type === 'waterfall' ? 'waterfall' : 'bar';
             var bargap = fullLayout[prefix + 'gap'];
             var bargroupgap = fullLayout[prefix + 'groupgap'];
 
             function roundWithLine(v) {
                 // if there are explicit gaps, don't round,
                 // it can make the gaps look crappy
-
                 return (bargap === 0 && bargroupgap === 0) ?
                     d3.round(Math.round(v) - offset, 2) : v;
             }
@@ -137,7 +148,7 @@ module.exports = function plot(gd, plotinfo, cdModule, traceLayer) {
                 // no line, expand to a full pixel to make sure we
                 // can see them
 
-                var op = Color.opacity(di.mc || trace.marker.color);
+                var op = Color.opacity(mc);
                 var fixpx = (op < 1 || lw > 0.01) ? roundWithLine : expandToVisible;
                 x0 = fixpx(x0, x1);
                 x1 = fixpx(x1, x0);
@@ -146,9 +157,9 @@ module.exports = function plot(gd, plotinfo, cdModule, traceLayer) {
             }
 
             Lib.ensureSingle(bar, 'path')
-            .style('vector-effect', 'non-scaling-stroke')
-            .attr('d', 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z')
-            .call(Drawing.setClipUrl, plotinfo.layerClipId, gd);
+                .style('vector-effect', 'non-scaling-stroke')
+                .attr('d', 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z')
+                .call(Drawing.setClipUrl, plotinfo.layerClipId, gd);
 
             appendBarText(gd, bar, cd, i, x0, x1, y0, y1);
 

src/traces/bar/style.js

@@ -6,7 +6,6 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
 var d3 = require('d3');
@@ -33,14 +32,10 @@ function style(gd, cd) {
     // crispEdges to turn off antialiasing so an artificial gap
     // isn't introduced.
     .each(function(d) {
-        var trace = d[0].trace;
-        var prefix = trace.type === 'waterfall' ? 'waterfall' : 'bar';
-
-        if((fullLayout.barmode === 'stack' && barcount > 1) || (
-            fullLayout[prefix + 'gap'] === 0 &&
-            fullLayout[prefix + 'groupgap'] === 0 &&
-            !((d[0].trace.marker || {}).line || {}).width)
-        ) {
+        if((fullLayout.barmode === 'stack' && barcount > 1) ||
+                (fullLayout.bargap === 0 &&
+                 fullLayout.bargroupgap === 0 &&
+                 !d[0].trace.marker.line.width)) {
             d3.select(this).attr('shape-rendering', 'crispEdges');
         }
     });
@@ -55,12 +50,12 @@ function style(gd, cd) {
 }
 
 function stylePoints(sel, trace, gd) {
-    var pts = sel.selectAll('path');
-    var txs = sel.selectAll('text');
-
-    Drawing.pointStyle(pts, trace, gd);
+    Drawing.pointStyle(sel.selectAll('path'), trace, gd);
+    styleTextPoints(sel, trace, gd);
+}
 
-    txs.each(function(d) {
+function styleTextPoints(sel, trace, gd) {
+    sel.selectAll('text').each(function(d) {
         var tx = d3.select(this);
         var font = determineFont(tx, d, trace, gd);
         Drawing.font(tx, font);
@@ -164,11 +159,15 @@ function getFontValue(attributeDefinition, attributeValue, index, defaultValue)
 }
 
 function getBarColor(cd, trace) {
+    if(trace.type === 'waterfall') {
+        return trace[cd.dir].marker.color;
+    }
     return cd.mc || trace.marker.color;
 }
 
 module.exports = {
     style: style,
+    styleTextPoints: styleTextPoints,
     styleOnSelect: styleOnSelect,
     getInsideTextFont: getInsideTextFont,
     getOutsideTextFont: getOutsideTextFont,

src/traces/waterfall/arrays_to_calcdata.js

@@ -10,22 +10,36 @@
 
 var barAttrs = require('../bar/attributes');
 var lineAttrs = require('../scatter/attributes').line;
+var extendFlat = require('../../lib/extend').extendFlat;
 
 function directionAttrs() {
     return {
-        editType: 'style',
-        color: barAttrs.marker.color,
-        opacity: barAttrs.marker.opacity,
-        line: {
-            editType: 'style',
-            color: barAttrs.marker.line.color,
-            width: barAttrs.marker.line.width
-        }
+        marker: {
+            color: extendFlat({}, barAttrs.marker.color, {
+                arrayOk: false,
+                editType: 'style',
+                description: ''
+            }),
+            line: {
+                color: extendFlat({}, barAttrs.marker.line.color, {
+                    arrayOk: false,
+                    editType: 'style',
+                    description: ''
+                }),
+                width: extendFlat({}, barAttrs.marker.line.width, {
+                    arrayOk: false,
+                    editType: 'style',
+                    description: ''
+                }),
+                editType: 'style',
+            },
+            editType: 'style'
+        },
+        editType: 'style'
     };
 }
 
 module.exports = {
-
     measure: {
         valType: 'data_array',
         dflt: [],
@@ -58,35 +72,25 @@ module.exports = {
     y0: barAttrs.y0,
     dy: barAttrs.dy,
 
-    r: barAttrs.r,
-    t: barAttrs.t,
-
-    text: barAttrs.text,
     hovertext: barAttrs.hovertext,
     hovertemplate: barAttrs.hovertemplate,
 
+    text: barAttrs.text,
     textposition: barAttrs.textposition,
-
     textfont: barAttrs.textfont,
-
     insidetextfont: barAttrs.insidetextfont,
-
     outsidetextfont: barAttrs.outsidetextfont,
-
     constraintext: barAttrs.constraintext,
 
     cliponaxis: barAttrs.cliponaxis,
-
     orientation: barAttrs.orientation,
 
     offset: barAttrs.offset,
-
     width: barAttrs.width,
 
-    marker: directionAttrs(),
-    totals: directionAttrs(),
     increasing: directionAttrs(),
     decreasing: directionAttrs(),
+    totals: directionAttrs(),
 
     connector: {
         line: {

src/traces/waterfall/attributes.js

@@ -9,7 +9,7 @@
 'use strict';
 
 var Axes = require('../../plots/cartesian/axes');
-var arraysToCalcdata = require('./arrays_to_calcdata');
+var mergeArray = require('../../lib').mergeArray;
 var calcSelection = require('../scatter/calc_selection');
 
 function isAbsolute(a) {
@@ -40,37 +40,44 @@ module.exports = function calc(gd, trace) {
     // set position and size (as well as for waterfall total size)
     var previousSum = 0;
     var newSize;
-    var i;
 
-    for(i = 0; i < serieslen; i++) {
+    for(var i = 0; i < serieslen; i++) {
         var amount = size[i] || 0;
-        cd[i] = {
+
+        var cdi = cd[i] = {
+            i: i,
             p: pos[i],
             s: amount,
             rawS: amount
         };
 
         if(isAbsolute(trace.measure[i])) {
-            previousSum = cd[i].s;
+            previousSum = cdi.s;
 
-            cd[i].isSum = true;
-            cd[i].s = previousSum;
+            cdi.isSum = true;
+            cdi.dir = 'totals';
+            cdi.s = previousSum;
         } else if(isTotal(trace.measure[i])) {
-            cd[i].isSum = true;
-            cd[i].s = previousSum;
-        } else { // default: relative
-            cd[i].isSum = false;
-            newSize = cd[i].s;
-            cd[i].s = previousSum + newSize;
+            cdi.isSum = true;
+            cdi.dir = 'totals';
+            cdi.s = previousSum;
+        } else {
+            // default: relative
+            cdi.isSum = false;
+            cdi.dir = cdi.rawS < 0 ? 'decreasing' : 'increasing';
+            newSize = cdi.s;
+            cdi.s = previousSum + newSize;
             previousSum += newSize;
         }
 
         if(trace.ids) {
-            cd[i].id = String(trace.ids[i]);
+            cdi.id = String(trace.ids[i]);
         }
     }
 
-    arraysToCalcdata(cd, trace);
+
+    mergeArray(trace.text, cd, 'tx');
+    mergeArray(trace.hovertext, cd, 'htx');
     calcSelection(cd, trace);
 
     return cd;