Implement attributes base, offset and width in bar traces (issue 80)

src/traces/bar/attributes.js

@@ -48,6 +48,41 @@ module.exports = {
         ].join(' ')
     },
 
+    base: {
+        valType: 'any',
+        arrayOk: true,
+        role: 'info',
+        description: [
+            'Sets where the bar base is drawn (in position axis units).',
+            'In *stack* or *relative* barmode,',
+            'traces that set *base* will be excluded',
+            'and drawn in *overlay* mode instead.'
+        ].join(' ')
+    },
+
+    offset: {
+        valType: 'number',
+        arrayOk: true,
+        role: 'info',
+        description: [
+            'Shifts the position where the bar is drawn',
+            '(in position axis units).',
+            'In *group* barmode,',
+            'traces that set *offset* will be excluded',
+            'and drawn in *overlay* mode instead.'
+        ].join(' ')
+    },
+
+    width: {
+        valType: 'number',
+        min: 0,
+        arrayOk: true,
+        role: 'info',
+        description: [
+            'Sets the bar width (in position axis units).'
+        ].join(' ')
+    },
+
     marker: marker,
 
     r: scatterAttrs.r,

src/traces/bar/calc.js

@@ -25,13 +25,15 @@ module.exports = function calc(gd, trace) {
     var xa = Axes.getFromId(gd, trace.xaxis || 'x'),
         ya = Axes.getFromId(gd, trace.yaxis || 'y'),
         orientation = trace.orientation || ((trace.x && !trace.y) ? 'h' : 'v'),
-        pos, size, i;
+        sa, pos, size, i;
 
     if(orientation === 'h') {
+        sa = xa;
         size = xa.makeCalcdata(trace, 'x');
         pos = ya.makeCalcdata(trace, 'y');
     }
     else {
+        sa = ya;
         size = ya.makeCalcdata(trace, 'y');
         pos = xa.makeCalcdata(trace, 'x');
     }
@@ -40,14 +42,43 @@ module.exports = function calc(gd, trace) {
     var serieslen = Math.min(pos.length, size.length),
         cd = [];
 
+    // set position
     for(i = 0; i < serieslen; i++) {
 
         // add bars with non-numeric sizes to calcdata
         // so that ensure that traces with gaps are
         // plotted in the correct order
 
         if(isNumeric(pos[i])) {
-            cd.push({p: pos[i], s: size[i], b: 0});
+            cd.push({p: pos[i]});
+        }
+    }
+
+    // set base
+    var base = trace.base,
+        b;
+
+    if(Array.isArray(base)) {
+        for(i = 0; i < Math.min(base.length, cd.length); i++) {
+            b = sa.d2c(base[i]);
+            cd[i].b = (isNumeric(b)) ? b : 0;
+        }
+        for(; i < cd.length; i++) {
+            cd[i].b = 0;
+        }
+    }
+    else {
+        b = sa.d2c(base);
+        b = (isNumeric(b)) ? b : 0;
+        for(i = 0; i < cd.length; i++) {
+            cd[i].b = b;
+        }
+    }
+
+    // set size
+    for(i = 0; i < cd.length; i++) {
+        if(isNumeric(size[i])) {
+            cd[i].s = size[i] - cd[i].b;
         }
     }
 

src/traces/bar/defaults.js

@@ -30,6 +30,9 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     }
 
     coerce('orientation', (traceOut.x && !traceOut.y) ? 'h' : 'v');
+    coerce('base');
+    coerce('offset');
+    coerce('width');
     coerce('text');
 
     handleStyleDefaults(traceIn, traceOut, coerce, defaultColor, layout);

src/traces/bar/hover.js

@@ -21,7 +21,8 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
         xa = pointData.xa,
         ya = pointData.ya,
         barDelta = (hovermode === 'closest') ?
-            t.barwidth / 2 : t.dbar * (1 - xa._gd._fullLayout.bargap) / 2,
+            t.barwidth / 2 :
+            t.bargroupwidth,
         barPos;
 
     if(hovermode !== 'closest') barPos = function(di) { return di.p; };

src/traces/bar/plot.js

@@ -34,30 +34,39 @@ module.exports = function plot(gd, plotinfo, cdbar) {
         .attr('class', 'points')
         .each(function(d) {
             var t = d[0].t,
-                trace = d[0].trace;
+                trace = d[0].trace,
+                poffset = t.poffset,
+                poffsetIsArray = Array.isArray(poffset),
+                barwidth = t.barwidth,
+                barwidthIsArray = Array.isArray(barwidth);
 
             arraysToCalcdata(d);
 
             d3.select(this).selectAll('path')
                 .data(Lib.identity)
               .enter().append('path')
-                .each(function(di) {
+                .each(function(di, i) {
                     // now display the bar
                     // clipped xf/yf (2nd arg true): non-positive
                     // log values go off-screen by plotwidth
                     // so you see them continue if you drag the plot
+                    var p0 = di.p + ((poffsetIsArray) ? poffset[i] : poffset),
+                        p1 = p0 + ((barwidthIsArray) ? barwidth[i] : barwidth),
+                        s0 = di.b,
+                        s1 = s0 + di.s;
+
                     var x0, x1, y0, y1;
                     if(trace.orientation === 'h') {
-                        y0 = ya.c2p(t.poffset + di.p, true);
-                        y1 = ya.c2p(t.poffset + di.p + t.barwidth, true);
-                        x0 = xa.c2p(di.b, true);
-                        x1 = xa.c2p(di.s + di.b, true);
+                        y0 = ya.c2p(p0, true);
+                        y1 = ya.c2p(p1, true);
+                        x0 = xa.c2p(s0, true);
+                        x1 = xa.c2p(s1, true);
                     }
                     else {
-                        x0 = xa.c2p(t.poffset + di.p, true);
-                        x1 = xa.c2p(t.poffset + di.p + t.barwidth, true);
-                        y1 = ya.c2p(di.s + di.b, true);
-                        y0 = ya.c2p(di.b, true);
+                        x0 = xa.c2p(p0, true);
+                        x1 = xa.c2p(p1, true);
+                        y0 = ya.c2p(s0, true);
+                        y1 = ya.c2p(s1, true);
                     }
 
                     if(!isNumeric(x0) || !isNumeric(x1) ||