Merge pull request #6761 from plotly/rounded-bars

Add option for rounded corners on bar charts

Author: emilykl

draftlogs/6761_add.md

@@ -0,0 +1 @@
+ - Add `layout.barcornerradius` and `trace.marker.cornerradius` properties to support rounding the corners of bar traces [[#6761](https://github.com/plotly/plotly.js/pull/6761)], with thanks to [Displayr](https://www.displayr.com) for sponsoring development!

src/components/legend/style.js

@@ -334,14 +334,19 @@ module.exports = function style(s, gd, legend) {
         var marker = trace.marker || {};
         var markerLine = marker.line || {};
 
+        // If bar has rounded corners, round corners of legend icon
+        var pathStr = marker.cornerradius ?
+            'M6,3a3,3,0,0,1-3,3H-3a3,3,0,0,1-3-3V-3a3,3,0,0,1,3-3H3a3,3,0,0,1,3,3Z' : // Square with rounded corners
+            'M6,6H-6V-6H6Z'; // Normal square
+
         var isVisible = (!desiredType) ? Registry.traceIs(trace, 'bar') :
             (trace.visible && trace.type === desiredType);
 
         var barpath = d3.select(lThis).select('g.legendpoints')
             .selectAll('path.legend' + desiredType)
             .data(isVisible ? [d] : []);
         barpath.enter().append('path').classed('legend' + desiredType, true)
-            .attr('d', 'M6,6H-6V-6H6Z')
+            .attr('d', pathStr)
             .attr('transform', centerTransform);
         barpath.exit().remove();
 

src/traces/bar/attributes.js

@@ -42,7 +42,16 @@ var marker = extendFlat({
         editType: 'style',
         description: 'Sets the opacity of the bars.'
     },
-    pattern: pattern
+    pattern: pattern,
+    cornerradius: {
+        valType: 'any',
+        editType: 'calc',
+        description: [
+            'Sets the rounding of corners. May be an integer number of pixels,',
+            'or a percentage of bar width (as a string ending in %). Defaults to `layout.barcornerradius`.',
+            'In stack or relative barmode, the first trace to set cornerradius is used for the whole stack.'
+        ].join(' ')
+    },
 });
 
 module.exports = {

src/traces/bar/cross_trace_calc.js

@@ -111,6 +111,10 @@ function setGroupPositions(gd, pa, sa, calcTraces, opts) {
                 else excluded.push(calcTrace);
             }
 
+            // If any trace in `included` has a cornerradius, set cornerradius of all bars
+            // in `included` to match the first trace which has a cornerradius
+            standardizeCornerradius(included);
+
             if(included.length) {
                 setGroupPositionsInStackOrRelativeMode(gd, pa, sa, included, opts);
             }
@@ -119,10 +123,57 @@ function setGroupPositions(gd, pa, sa, calcTraces, opts) {
             }
             break;
     }
-
+    setCornerradius(calcTraces);
     collectExtents(calcTraces, pa);
 }
 
+// Set cornerradiusvalue and cornerradiusform in calcTraces[0].t
+function setCornerradius(calcTraces) {
+    var i, calcTrace, fullTrace, t, cr, crValue, crForm;
+
+    for(i = 0; i < calcTraces.length; i++) {
+        calcTrace = calcTraces[i];
+        fullTrace = calcTrace[0].trace;
+        t = calcTrace[0].t;
+
+        if(t.cornerradiusvalue === undefined) {
+            cr = fullTrace.marker ? fullTrace.marker.cornerradius : undefined;
+            if(cr !== undefined) {
+                crValue = isNumeric(cr) ? +cr : +cr.slice(0, -1);
+                crForm = isNumeric(cr) ? 'px' : '%';
+                t.cornerradiusvalue = crValue;
+                t.cornerradiusform = crForm;
+            }
+        }
+    }
+}
+
+// Make sure all traces in a stack use the same cornerradius
+function standardizeCornerradius(calcTraces) {
+    if(calcTraces.length < 2) return;
+    var i, calcTrace, fullTrace, t;
+    var cr, crValue, crForm;
+    for(i = 0; i < calcTraces.length; i++) {
+        calcTrace = calcTraces[i];
+        fullTrace = calcTrace[0].trace;
+        cr = fullTrace.marker ? fullTrace.marker.cornerradius : undefined;
+        if(cr !== undefined) break;
+    }
+    // If any trace has cornerradius, store first cornerradius
+    // in calcTrace[0].t so that all traces in stack use same cornerradius
+    if(cr !== undefined) {
+        crValue = isNumeric(cr) ? +cr : +cr.slice(0, -1);
+        crForm = isNumeric(cr) ? 'px' : '%';
+        for(i = 0; i < calcTraces.length; i++) {
+            calcTrace = calcTraces[i];
+            t = calcTrace[0].t;
+
+            t.cornerradiusvalue = crValue;
+            t.cornerradiusform = crForm;
+        }
+    }
+}
+
 function initBase(sa, calcTraces) {
     var i, j;
 
@@ -713,6 +764,23 @@ function normalizeBars(sa, sieve, opts) {
     }
 }
 
+// Add an `_sMin` and `_sMax` value for each bar representing the min and max size value
+// across all bars sharing the same position as that bar. These values are used for rounded
+// bar corners, to carry rounding down to lower bars in the stack as needed.
+function setHelperValuesForRoundedCorners(calcTraces, sMinByPos, sMaxByPos, pa) {
+    var pLetter = getAxisLetter(pa);
+    // Set `_sMin` and `_sMax` value for each bar
+    for(var i = 0; i < calcTraces.length; i++) {
+        var calcTrace = calcTraces[i];
+        for(var j = 0; j < calcTrace.length; j++) {
+            var bar = calcTrace[j];
+            var pos = bar[pLetter];
+            bar._sMin = sMinByPos[pos];
+            bar._sMax = sMaxByPos[pos];
+        }
+    }
+}
+
 // find the full position span of bars at each position
 // for use by hover, to ensure labels move in if bars are
 // narrower than the space they're in.
@@ -745,6 +813,18 @@ function collectExtents(calcTraces, pa) {
         return String(Math.round(roundFactor * (p - pMin)));
     };
 
+    // Find min and max size axis extent for each position
+    // This is used for rounded bar corners, to carry rounding
+    // down to lower bars in the case of stacked bars
+    var sMinByPos = {};
+    var sMaxByPos = {};
+
+    // Check whether any trace has rounded corners
+    var anyTraceHasCornerradius = calcTraces.some(function(x) {
+        var trace = x[0].trace;
+        return 'marker' in trace && trace.marker.cornerradius;
+    });
+
     for(i = 0; i < calcTraces.length; i++) {
         cd = calcTraces[i];
         cd[0].t.extents = extents;
@@ -770,8 +850,19 @@ function collectExtents(calcTraces, pa) {
             di.p1 = di.p0 + di.w;
             di.s0 = di.b;
             di.s1 = di.s0 + di.s;
+
+            if(anyTraceHasCornerradius) {
+                var sMin = Math.min(di.s0, di.s1) || 0;
+                var sMax = Math.max(di.s0, di.s1) || 0;
+                var pos = di[pLetter];
+                sMinByPos[pos] = (pos in sMinByPos) ? Math.min(sMinByPos[pos], sMin) : sMin;
+                sMaxByPos[pos] = (pos in sMaxByPos) ? Math.max(sMaxByPos[pos], sMax) : sMax;
+            }
         }
     }
+    if(anyTraceHasCornerradius) {
+        setHelperValuesForRoundedCorners(calcTraces, sMinByPos, sMaxByPos, pa);
+    }
 }
 
 function getAxisLetter(ax) {

src/traces/bar/defaults.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var isNumeric = require('fast-isnumeric');
+
 var Lib = require('../../lib');
 var Color = require('../../components/color');
 var Registry = require('../../registry');
@@ -47,7 +49,6 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     });
 
     handleStyleDefaults(traceIn, traceOut, coerce, defaultColor, layout);
-
     var lineColor = (traceOut.marker.line || {}).color;
 
     // override defaultColor for error bars with defaultLine
@@ -61,22 +62,50 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
 function crossTraceDefaults(fullData, fullLayout) {
     var traceIn, traceOut;
 
-    function coerce(attr) {
-        return Lib.coerce(traceOut._input, traceOut, attributes, attr);
+    function coerce(attr, dflt) {
+        return Lib.coerce(traceOut._input, traceOut, attributes, attr, dflt);
     }
 
-    if(fullLayout.barmode === 'group') {
-        for(var i = 0; i < fullData.length; i++) {
-            traceOut = fullData[i];
+    for(var i = 0; i < fullData.length; i++) {
+        traceOut = fullData[i];
+
+        if(traceOut.type === 'bar') {
+            traceIn = traceOut._input;
+            // `marker.cornerradius` needs to be coerced here rather than in handleStyleDefaults()
+            // because it needs to happen after `layout.barcornerradius` has been coerced
+            var r = coerce('marker.cornerradius', fullLayout.barcornerradius);
+            if(traceOut.marker) {
+                traceOut.marker.cornerradius = validateCornerradius(r);
+            }
 
-            if(traceOut.type === 'bar') {
-                traceIn = traceOut._input;
+            if(fullLayout.barmode === 'group') {
                 handleGroupingDefaults(traceIn, traceOut, fullLayout, coerce);
             }
         }
     }
 }
 
+// Returns a value equivalent to the given cornerradius value, if valid;
+// otherwise returns`undefined`.
+// Valid cornerradius values must be either:
+//   - a numeric value (string or number) >= 0, or
+//   - a string consisting of a number >= 0 followed by a % sign
+// If the given cornerradius value is a numeric string, it will be converted
+// to a number.
+function validateCornerradius(r) {
+    if(isNumeric(r)) {
+        r = +r;
+        if(r >= 0) return r;
+    } else if(typeof r === 'string') {
+        r = r.trim();
+        if(r.slice(-1) === '%' && isNumeric(r.slice(0, -1))) {
+            r = +r.slice(0, -1);
+            if(r >= 0) return r + '%';
+        }
+    }
+    return undefined;
+}
+
 function handleText(traceIn, traceOut, layout, coerce, textposition, opts) {
     opts = opts || {};
     var moduleHasSelected = !(opts.moduleHasSelected === false);
@@ -133,5 +162,6 @@ function handleText(traceIn, traceOut, layout, coerce, textposition, opts) {
 module.exports = {
     supplyDefaults: supplyDefaults,
     crossTraceDefaults: crossTraceDefaults,
-    handleText: handleText
+    handleText: handleText,
+    validateCornerradius: validateCornerradius,
 };

src/traces/bar/layout_attributes.js

@@ -51,5 +51,13 @@ module.exports = {
             'Sets the gap (in plot fraction) between bars of',
             'the same location coordinate.'
         ].join(' ')
-    }
+    },
+    barcornerradius: {
+        valType: 'any',
+        editType: 'calc',
+        description: [
+            'Sets the rounding of bar corners. May be an integer number of pixels,',
+            'or a percentage of bar width (as a string ending in %).'
+        ].join(' ')
+    },
 };

src/traces/bar/layout_defaults.js

@@ -5,6 +5,8 @@ var Axes = require('../../plots/cartesian/axes');
 var Lib = require('../../lib');
 
 var layoutAttributes = require('./layout_attributes');
+var validateCornerradius = require('./defaults').validateCornerradius;
+
 
 module.exports = function(layoutIn, layoutOut, fullData) {
     function coerce(attr, dflt) {
@@ -47,4 +49,6 @@ module.exports = function(layoutIn, layoutOut, fullData) {
 
     coerce('bargap', (shouldBeGapless && !gappedAnyway) ? 0 : 0.2);
     coerce('bargroupgap');
+    var r = coerce('barcornerradius');
+    layoutOut.barcornerradius = validateCornerradius(r);
 };