resolve #1862 - add marker.opacity to bar (& histogram) traces

- by doing so, we can use Drawing.pointStyle straight-up!

Author: etpinard

src/components/drawing/index.js

@@ -249,8 +249,6 @@ drawing.symbolNumber = function(v) {
 };
 
 function singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine, gd) {
-    // only scatter & box plots get marker path and opacity
-    // bars, histograms don't
     if(Registry.traceIs(trace, 'symbols')) {
         var sizeFn = makeBubbleSizeFn(trace);
 
@@ -277,12 +275,13 @@ function singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerL
 
             return drawing.symbolFuncs[xBase](r) +
                 (x >= 200 ? DOTPATH : '');
-        })
-        .style('opacity', function(d) {
-            return (d.mo + 1 || marker.opacity + 1) - 1;
         });
     }
 
+    sel.style('opacity', function(d) {
+        return (d.mo + 1 || marker.opacity + 1) - 1;
+    });
+
     var perPointGradient = false;
 
     // 'so' is suspected outliers, for box plots
@@ -410,7 +409,6 @@ drawing.singlePointStyle = function(d, sel, trace, markerScale, lineScale, gd) {
     var marker = trace.marker;
 
     singlePointStyle(d, sel, trace, markerScale, lineScale, marker, marker.line, gd);
-
 };
 
 drawing.pointStyle = function(s, trace, gd) {

src/traces/bar/attributes.js

@@ -38,7 +38,17 @@ var marker = extendFlat({
     editType: 'calc'
 }, colorAttributes('marker'), {
     showscale: scatterMarkerAttrs.showscale,
-    colorbar: colorbarAttrs
+    colorbar: colorbarAttrs,
+    opacity: {
+        valType: 'number',
+        arrayOk: true,
+        dflt: 1,
+        min: 0,
+        max: 1,
+        role: 'style',
+        editType: 'style',
+        description: 'Sets the opacity of the bars.'
+    }
 });
 
 

src/traces/bar/style.js

@@ -10,16 +10,13 @@
 'use strict';
 
 var d3 = require('d3');
-
-var Color = require('../../components/color');
 var Drawing = require('../../components/drawing');
 var ErrorBars = require('../../components/errorbars');
 
-
-module.exports = function style(gd) {
-    var s = d3.select(gd).selectAll('g.trace.bars'),
-        barcount = s.size(),
-        fullLayout = gd._fullLayout;
+module.exports = function style(gd, cd) {
+    var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.trace.bars');
+    var barcount = s.size();
+    var fullLayout = gd._fullLayout;
 
     // trace styling
     s.style('opacity', function(d) { return d[0].trace.opacity; })
@@ -36,38 +33,13 @@ module.exports = function style(gd) {
         }
     });
 
-    // then style the individual bars
     s.selectAll('g.points').each(function(d) {
-        var trace = d[0].trace,
-            marker = trace.marker,
-            markerLine = marker.line,
-            markerScale = Drawing.tryColorscale(marker, ''),
-            lineScale = Drawing.tryColorscale(marker, 'line');
-
-        d3.select(this).selectAll('path').each(function(d) {
-            // allow all marker and marker line colors to be scaled
-            // by given max and min to colorscales
-            var fillColor,
-                lineColor,
-                lineWidth = (d.mlw + 1 || markerLine.width + 1) - 1,
-                p = d3.select(this);
-
-            if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
-            else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
-            else fillColor = marker.color;
-
-            p.style('stroke-width', lineWidth + 'px')
-                .call(Color.fill, fillColor);
-            if(lineWidth) {
-                if('mlc' in d) lineColor = d.mlcc = lineScale(d.mlc);
-                // weird case: array wasn't long enough to apply to every point
-                else if(Array.isArray(markerLine.color)) lineColor = Color.defaultLine;
-                else lineColor = markerLine.color;
+        var sel = d3.select(this);
+        var pts = sel.selectAll('.point');
+        var trace = d[0].trace;
 
-                p.call(Color.stroke, lineColor);
-            }
-        });
+        Drawing.pointStyle(pts, trace, gd);
     });
 
-    s.call(ErrorBars.style);
+    ErrorBars.style(s);
 };