persistent selection for 'bar' & 'histogram' traces

- note that Drawing.font needs to be called in Bar.plot to
  find out if the text label fit inside the bars.

Author: etpinard

src/traces/bar/arrays_to_calcdata.js

@@ -14,6 +14,8 @@ var mergeArray = require('../../lib').mergeArray;
 
 // arrayOk attributes, merge them into calcdata array
 module.exports = function arraysToCalcdata(cd, trace) {
+    for(var i = 0; i < cd.length; i++) cd[i].i = i;
+
     mergeArray(trace.text, cd, 'tx');
     mergeArray(trace.hovertext, cd, 'htx');
 

src/traces/bar/attributes.js

@@ -51,7 +51,6 @@ var marker = extendFlat({
     }
 });
 
-
 module.exports = {
     x: scatterAttrs.x,
     x0: scatterAttrs.x0,
@@ -160,6 +159,9 @@ module.exports = {
 
     marker: marker,
 
+    selected: scatterAttrs.selected,
+    unselected: scatterAttrs.unselected,
+
     r: scatterAttrs.r,
     t: scatterAttrs.t,
 

src/traces/bar/calc.js

@@ -14,9 +14,8 @@ var isNumeric = require('fast-isnumeric');
 var Axes = require('../../plots/cartesian/axes');
 var hasColorscale = require('../../components/colorscale/has_colorscale');
 var colorscaleCalc = require('../../components/colorscale/calc');
-
 var arraysToCalcdata = require('./arrays_to_calcdata');
-
+var calcSelection = require('../scatter/calc_selection');
 
 module.exports = function calc(gd, trace) {
     // depending on bar direction, set position and size axes
@@ -92,6 +91,7 @@ module.exports = function calc(gd, trace) {
     }
 
     arraysToCalcdata(cd, trace);
+    calcSelection(cd, trace);
 
     return cd;
 };

src/traces/bar/defaults.js

@@ -17,7 +17,6 @@ var handleStyleDefaults = require('../bar/style_defaults');
 var errorBarsSupplyDefaults = require('../../components/errorbars/defaults');
 var attributes = require('./attributes');
 
-
 module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     function coerce(attr, dflt) {
         return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
@@ -44,11 +43,14 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     var hasBoth = Array.isArray(textPosition) || textPosition === 'auto',
         hasInside = hasBoth || textPosition === 'inside',
         hasOutside = hasBoth || textPosition === 'outside';
+
     if(hasInside || hasOutside) {
         var textFont = coerceFont(coerce, 'textfont', layout.font);
         if(hasInside) coerceFont(coerce, 'insidetextfont', textFont);
         if(hasOutside) coerceFont(coerce, 'outsidetextfont', textFont);
         coerce('constraintext');
+        coerce('selected.textfont.color');
+        coerce('unselected.textfont.color');
     }
 
     handleStyleDefaults(traceIn, traceOut, coerce, defaultColor, layout);

src/traces/bar/plot.js

@@ -42,10 +42,14 @@ module.exports = function plot(gd, plotinfo, cdbar) {
     bartraces.enter().append('g')
         .attr('class', 'trace bars');
 
+    bartraces.each(function(d) {
+        d[0].node3 = d3.select(this);
+    });
+
     bartraces.append('g')
         .attr('class', 'points')
         .each(function(d) {
-            var sel = d[0].node3 = d3.select(this);
+            var sel = d3.select(this);
             var t = d[0].t;
             var trace = d[0].trace;
             var poffset = t.poffset;
@@ -146,6 +150,8 @@ module.exports = function plot(gd, plotinfo, cdbar) {
 };
 
 function appendBarText(gd, bar, calcTrace, i, x0, x1, y0, y1) {
+    var textPosition;
+
     function appendTextNode(bar, text, textFont) {
         var textSelection = bar.append('text')
             .text(text)
@@ -157,6 +163,7 @@ function appendBarText(gd, bar, calcTrace, i, x0, x1, y0, y1) {
                 // tex and regular text together
                 'data-notex': 1
             })
+            .classed('bartext-' + textPosition, true)
             .call(Drawing.font, textFont)
             .call(svgTextUtils.convertToTspans, gd);
 
@@ -170,7 +177,7 @@ function appendBarText(gd, bar, calcTrace, i, x0, x1, y0, y1) {
     var text = getText(trace, i);
     if(!text) return;
 
-    var textPosition = getTextPosition(trace, i);
+    textPosition = getTextPosition(trace, i);
     if(textPosition === 'none') return;
 
     var textFont = getTextFont(trace, i, gd._fullLayout.font),

src/traces/bar/select.js

@@ -8,20 +8,17 @@
 
 'use strict';
 
-var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
-
 module.exports = function selectPoints(searchInfo, polygon) {
     var cd = searchInfo.cd;
     var xa = searchInfo.xaxis;
     var ya = searchInfo.yaxis;
     var selection = [];
-    var node3 = cd[0].node3;
     var i;
 
     if(polygon === false) {
         // clear selection
         for(i = 0; i < cd.length; i++) {
-            cd[i].dim = 0;
+            cd[i].selected = 0;
         }
     } else {
         for(i = 0; i < cd.length; i++) {
@@ -33,19 +30,12 @@ module.exports = function selectPoints(searchInfo, polygon) {
                     x: xa.c2d(di.x),
                     y: ya.c2d(di.y)
                 });
-                di.dim = 0;
+                di.selected = 1;
             } else {
-                di.dim = 1;
+                di.selected = 0;
             }
         }
     }
 
-    node3.selectAll('.point').style('opacity', function(d) {
-        return d.dim ? DESELECTDIM : 1;
-    });
-    node3.selectAll('text').style('opacity', function(d) {
-        return d.dim ? DESELECTDIM : 1;
-    });
-
     return selection;
 };

src/traces/bar/style.js

@@ -36,9 +36,32 @@ module.exports = function style(gd, cd) {
     s.selectAll('g.points').each(function(d) {
         var sel = d3.select(this);
         var pts = sel.selectAll('.point');
+        var txs = sel.selectAll('text');
         var trace = d[0].trace;
 
         Drawing.pointStyle(pts, trace, gd);
+        Drawing.selectedPointStyle(pts, trace);
+
+        txs.each(function(d) {
+            var tx = d3.select(this);
+            var textFont;
+
+            if(tx.classed('bartext-inside')) {
+                textFont = trace.insidetextfont;
+            } else if(tx.classed('bartext-outside')) {
+                textFont = trace.outsidetextfont;
+            }
+            if(!textFont) textFont = trace.textfont;
+
+            function cast(k) {
+                var cont = textFont[k];
+                return Array.isArray(cont) ? cont[d.i] : cont;
+            }
+
+            Drawing.font(tx, cast('family'), cast('size'), cast('color'));
+        });
+
+        Drawing.selectedTextStyle(txs, trace);
     });
 
     ErrorBars.style(s);

src/traces/bar/style_defaults.js

@@ -12,7 +12,7 @@
 var Color = require('../../components/color');
 var hasColorscale = require('../../components/colorscale/has_colorscale');
 var colorscaleDefaults = require('../../components/colorscale/defaults');
-
+var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
 
 module.exports = function handleStyleDefaults(traceIn, traceOut, coerce, defaultColor, layout) {
     coerce('marker.color', defaultColor);
@@ -32,4 +32,13 @@ module.exports = function handleStyleDefaults(traceIn, traceOut, coerce, default
     }
 
     coerce('marker.line.width');
+
+    var mo = coerce('marker.opacity');
+    var moEffective = Array.isArray(mo) ? 1 : mo;
+
+    coerce('selected.marker.opacity', moEffective);
+    coerce('unselected.marker.opacity', DESELECTDIM * moEffective);
+
+    coerce('selected.marker.color');
+    coerce('unselected.marker.color');
 };

src/traces/histogram/attributes.js

@@ -191,6 +191,9 @@ module.exports = {
 
     marker: barAttrs.marker,
 
+    selected: barAttrs.selected,
+    unselected: barAttrs.unselected,
+
     error_y: barAttrs.error_y,
     error_x: barAttrs.error_x,
 

src/traces/histogram/calc.js

@@ -15,6 +15,7 @@ var Lib = require('../../lib');
 var Axes = require('../../plots/cartesian/axes');
 
 var arraysToCalcdata = require('../bar/arrays_to_calcdata');
+var calcSelection = require('../scatter/calc_selection');
 var binFunctions = require('./bin_functions');
 var normFunctions = require('./norm_functions');
 var doAvg = require('./average');
@@ -196,6 +197,7 @@ module.exports = function calc(gd, trace) {
     }
 
     arraysToCalcdata(cd, trace);
+    calcSelection(cd, trace);
 
     return cd;
 };