Add pattern fill for histogram, bar and barpolar traces

src/components/drawing/index.js

@@ -354,6 +354,139 @@ drawing.gradient = function(sel, gd, gradientID, type, colorscale, prop) {
     fullLayout._gradientUrlQueryParts[k] = 1;
 };
 
+/**
+ * pattern: create and apply a pattern fill
+ *
+ * @param {object} sel: d3 selection to apply this pattern to
+ *     You can use `selection.call(Drawing.pattern, ...)`
+ * @param {DOM element} gd: the graph div `sel` is part of
+ * @param {string} patternID: a unique (within this plot) identifier
+ *     for this pattern, so that we don't create unnecessary definitions
+ * @param {string} bgcolor: background color for this pattern
+ * @param {string} fgcolor: foreground color for this pattern
+ * @param {number} scale: scale of this pattern
+ * @param {number} solidity: how solid lines of this pattern are
+ * @param {string} prop: the property to apply to, 'fill' or 'stroke'
+ */
+drawing.pattern = function(sel, gd, patternID, shape, bgcolor, fgcolor, scale, solidity, prop) {
+    var fullLayout = gd._fullLayout;
+    var fullID = 'p' + fullLayout._uid + '-' + patternID;
+    var baseSize = 8 * scale;
+    var width, height;
+
+    var path = '';
+    switch(shape) {
+        case '/':
+            width = baseSize * Math.sqrt(2);
+            height = baseSize * Math.sqrt(2);
+            path = 'M-1,1l2,-2' +
+                   'M0,' + height + 'L' + width + ',0' +
+                   'M' + (width - 1) + ',' + (height + 1) + 'l2,-2';
+            break;
+        case '\\':
+            width = baseSize * Math.sqrt(2);
+            height = baseSize * Math.sqrt(2);
+            path = 'M' + (width - 1) + ',-1l2,2' +
+                   'M0,0L' + width + ',' + height +
+                   'M-1,' + (height - 1) + 'l2,2';
+            break;
+        case 'x':
+            width = baseSize * Math.sqrt(2);
+            height = baseSize * Math.sqrt(2);
+            path = 'M-1,1l2,-2' +
+                   'M0,' + height + 'L' + width + ',0' +
+                   'M' + (width - 1) + ',' + (height + 1) + 'l2,-2' +
+                   'M' + (width - 1) + ',-1l2,2' +
+                   'M0,0L' + width + ',' + height +
+                   'M-1,' + (height - 1) + 'l2,2';
+            break;
+        case '|':
+            width = baseSize;
+            height = baseSize;
+            path = 'M' + (width / 2) + ',0L' + (width / 2) + ',' + height;
+            break;
+        case '-':
+            width = baseSize;
+            height = baseSize;
+            path = 'M0,' + (height / 2) + 'L' + width + ',' + (height / 2);
+            break;
+        case '+':
+            width = baseSize;
+            height = baseSize;
+            path = 'M' + (width / 2) + ',0L' + (width / 2) + ',' + height +
+                   'M0,' + (height / 2) + 'L' + width + ',' + (height / 2);
+            break;
+        case '.':
+            width = baseSize;
+            height = baseSize;
+            break;
+    }
+
+    var pattern = fullLayout._defs.select('.patterns')
+        .selectAll('#' + fullID)
+        .data([0]);
+
+    pattern.exit().remove();
+
+    pattern.enter()
+        .append('pattern')
+        .each(function() {
+            var el = d3.select(this);
+
+            el.attr({
+                'id': fullID,
+                'width': width + 'px',
+                'height': height + 'px',
+                'patternUnits': 'userSpaceOnUse'
+            });
+
+            var rects = el.selectAll('rect').data([0]);
+            rects.exit().remove();
+            if(bgcolor) {
+                rects.enter()
+                    .append('rect')
+                    .attr({
+                        'width': width + 'px',
+                        'height': height + 'px',
+                        'fill': bgcolor
+                    });
+            }
+
+            if(shape === '.') {
+                var circles = el.selectAll('circle').data([0]);
+                circles.exit().remove();
+                circles.enter()
+                    .append('circle')
+                    .attr({
+                        'cx': width / 2,
+                        'cy': height / 2,
+                        'r': solidity,
+                        'fill': fgcolor
+                    });
+            } else {
+                var paths = el.selectAll('path').data([0]);
+                paths.exit().remove();
+                paths.enter()
+                    .append('path')
+                    .attr({
+                        'd': path,
+                        'stroke': fgcolor,
+                        'stroke-width': solidity + 'px'
+                    });
+            }
+        });
+
+    sel.style(prop, getFullUrl(fullID, gd))
+        .style(prop + '-opacity', null);
+
+    sel.classed('pattern_filled', true);
+    var className2query = function(s) {
+        return '.' + s.attr('class').replace(/\s/g, '.');
+    };
+    var k = className2query(d3.select(sel.node().parentNode)) + '>.pattern_filled';
+    fullLayout._patternUrlQueryParts[k] = 1;
+};
+
 /*
  * Make the gradients container and clear out any previous gradients.
  * We never collect all the gradients we need in one place,
@@ -372,6 +505,16 @@ drawing.initGradients = function(gd) {
     fullLayout._gradientUrlQueryParts = {};
 };
 
+drawing.initPatterns = function(gd) {
+    var fullLayout = gd._fullLayout;
+
+    var patternsGroup = Lib.ensureSingle(fullLayout._defs, 'g', 'patterns');
+    patternsGroup.selectAll('pattern').remove();
+
+    // initialize stash of query parts filled in Drawing.pattern,
+    // used to fix URL strings during image exports
+    fullLayout._patternUrlQueryParts = {};
+};
 
 drawing.pointStyle = function(s, trace, gd) {
     if(!s.size()) return;
@@ -482,6 +625,16 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
             if(!gradientInfo[gradientType]) gradientType = 0;
         }
 
+        var getPatternAttr = function(mp, i, dflt) {
+            if(mp && Array.isArray(mp)) {
+                if(i < mp.length) return mp[i];
+                else return dflt;
+            }
+            return mp;
+        };
+        var markerPattern = marker.patternfill;
+        var patternShape = markerPattern && getPatternAttr(markerPattern.shape, d.i, '');
+
         if(gradientType && gradientType !== 'none') {
             var gradientColor = d.mgc;
             if(gradientColor) perPointGradient = true;
@@ -492,6 +645,20 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
 
             drawing.gradient(sel, gd, gradientID, gradientType,
                 [[0, gradientColor], [1, fillColor]], 'fill');
+        } else if(patternShape) {
+            var patternBGColor = getPatternAttr(markerPattern.bgcolor, d.i, null);
+            var patternScale = getPatternAttr(markerPattern.scale, d.i, 1);
+            var patternSolidity = getPatternAttr(markerPattern.solidity, d.i, 1);
+            var perPointPattern = Array.isArray(markerPattern.shape) ||
+                                  Array.isArray(markerPattern.bgcolor) ||
+                                  Array.isArray(markerPattern.scale) ||
+                                  Array.isArray(markerPattern.solidity);
+
+            var patternID = trace.uid;
+            if(perPointPattern) patternID += '-' + d.i;
+
+            drawing.pattern(sel, gd, patternID, patternShape, patternBGColor, fillColor,
+                            patternScale, patternSolidity, 'fill');
         } else {
             Color.fill(sel, fillColor);
         }

src/components/legend/style.js

@@ -357,8 +357,30 @@ module.exports = function style(s, gd, legend) {
             var d0 = d[0];
             var w = boundLineWidth(d0.mlw, marker.line, MAX_MARKER_LINE_WIDTH, CST_MARKER_LINE_WIDTH);
 
-            p.style('stroke-width', w + 'px')
-                .call(Color.fill, d0.mc || marker.color);
+            p.style('stroke-width', w + 'px');
+
+            var fillColor = d0.mc || marker.color;
+
+            var getPatternAttr = function(mp, dflt) {
+                if(mp && Array.isArray(mp)) {
+                    if(mp.length > 0) return mp[0];
+                    else return dflt;
+                }
+                return mp;
+            };
+            var markerPattern = marker.patternfill;
+            var patternShape = markerPattern && getPatternAttr(markerPattern.shape, '');
+
+            if(patternShape) {
+                var patternBGColor = getPatternAttr(markerPattern.bgcolor, null);
+                var patternScale = getPatternAttr(markerPattern.scale, 1);
+                var patternSolidity = getPatternAttr(markerPattern.solidity, 1);
+                var patternID = trace.uid;
+                p.call(Drawing.pattern, gd, patternID, patternShape, patternBGColor,
+                       fillColor, patternScale, patternSolidity, 'fill');
+            } else {
+                p.call(Color.fill, fillColor);
+            }
 
             if(w) Color.stroke(p, d0.mlc || markerLine.color);
         });

src/plot_api/plot_api.js

@@ -144,8 +144,9 @@ function _doPlot(gd, data, layout, config) {
         }
     }
 
-    // clear gradient defs on each .plot call, because we know we'll loop through all traces
+    // clear gradient and pattern defs on each .plot call, because we know we'll loop through all traces
     Drawing.initGradients(gd);
+    Drawing.initPatterns(gd);
 
     // save initial show spikes once per graph
     if(graphWasEmpty) Axes.saveShowSpikeInitial(gd);

src/snapshot/tosvg.js

@@ -33,7 +33,7 @@ module.exports = function toSVG(gd, format, scale) {
     var toppaper = fullLayout._toppaper;
     var width = fullLayout.width;
     var height = fullLayout.height;
-    var i;
+    var i, k;
 
     // make background color a rect in the svg, then revert after scraping
     // all other alterations have been dealt with by properly preparing the svg
@@ -106,28 +106,31 @@ module.exports = function toSVG(gd, format, scale) {
             }
         });
 
-
+    var queryParts = [];
     if(fullLayout._gradientUrlQueryParts) {
-        var queryParts = [];
-        for(var k in fullLayout._gradientUrlQueryParts) queryParts.push(k);
-
-        if(queryParts.length) {
-            svg.selectAll(queryParts.join(',')).each(function() {
-                var pt = d3.select(this);
-
-                // similar to font family styles above,
-                // we must remove " after the SVG DOM has been serialized
-                var fill = this.style.fill;
-                if(fill && fill.indexOf('url(') !== -1) {
-                    pt.style('fill', fill.replace(DOUBLEQUOTE_REGEX, DUMMY_SUB));
-                }
-
-                var stroke = this.style.stroke;
-                if(stroke && stroke.indexOf('url(') !== -1) {
-                    pt.style('stroke', stroke.replace(DOUBLEQUOTE_REGEX, DUMMY_SUB));
-                }
-            });
-        }
+        for(k in fullLayout._gradientUrlQueryParts) queryParts.push(k);
+    }
+
+    if(fullLayout._patternUrlQueryParts) {
+        for(k in fullLayout._patternUrlQueryParts) queryParts.push(k);
+    }
+
+    if(queryParts.length) {
+        svg.selectAll(queryParts.join(',')).each(function() {
+            var pt = d3.select(this);
+
+            // similar to font family styles above,
+            // we must remove " after the SVG DOM has been serialized
+            var fill = this.style.fill;
+            if(fill && fill.indexOf('url(') !== -1) {
+                pt.style('fill', fill.replace(DOUBLEQUOTE_REGEX, DUMMY_SUB));
+            }
+
+            var stroke = this.style.stroke;
+            if(stroke && stroke.indexOf('url(') !== -1) {
+                pt.style('stroke', stroke.replace(DOUBLEQUOTE_REGEX, DUMMY_SUB));
+            }
+        });
     }
 
     if(format === 'pdf' || format === 'eps') {

src/traces/bar/attributes.js

@@ -39,6 +39,51 @@ var marker = extendFlat({
         max: 1,
         editType: 'style',
         description: 'Sets the opacity of the bars.'
+    },
+    patternfill: {
+        shape: {
+            valType: 'enumerated',
+            values: ['', '/', '\\', 'x', '-', '|', '+', '.'],
+            dflt: '',
+            arrayOk: true,
+            editType: 'style',
+            description: [
+                'Sets the shape of the pattern fill.',
+                'By default, no pattern is used for filling the area.',
+            ].join(' ')
+        },
+        bgcolor: {
+            valType: 'color',
+            arrayOk: true,
+            editType: 'style',
+            description: [
+                'Sets the background color of the pattern fill.',
+                'Defaults to a transparent background.',
+            ].join(' ')
+        },
+        scale: {
+            valType: 'number',
+            min: 0,
+            dflt: 1,
+            arrayOk: true,
+            editType: 'style',
+            description: [
+                'Sets the scale of the pattern fill.',
+                'Defaults to 1.',
+            ].join(' ')
+        },
+        solidity: {
+            valType: 'number',
+            min: 0,
+            dflt: 1,
+            arrayOk: true,
+            editType: 'style',
+            description: [
+                'Sets the solidity of the pattern fill.',
+                'Defaults to 1.',
+            ].join(' ')
+        },
+        editType: 'style'
     }
 });
 

src/traces/bar/style_defaults.js

@@ -23,6 +23,10 @@ module.exports = function handleStyleDefaults(traceIn, traceOut, coerce, default
 
     coerce('marker.line.width');
     coerce('marker.opacity');
+    coerce('marker.patternfill.shape');
+    coerce('marker.patternfill.bgcolor');
+    coerce('marker.patternfill.scale');
+    coerce('marker.patternfill.solidity');
     coerce('selected.marker.color');
     coerce('unselected.marker.color');
 };