bar: draw bar texts

Author: n-riesco

src/traces/bar/plot.js

@@ -13,7 +13,10 @@ var d3 = require('d3');
 var isNumeric = require('fast-isnumeric');
 
 var Lib = require('../../lib');
+var svgTextUtils = require('../../lib/svg_text_utils');
+
 var Color = require('../../components/color');
+var Drawing = require('../../components/drawing');
 var ErrorBars = require('../../components/errorbars');
 
 var arraysToCalcdata = require('./arrays_to_calcdata');
@@ -42,9 +45,9 @@ module.exports = function plot(gd, plotinfo, cdbar) {
 
             arraysToCalcdata(d);
 
-            d3.select(this).selectAll('path')
+            d3.select(this).selectAll('g.point')
                 .data(Lib.identity)
-              .enter().append('path')
+                .enter().append('g').classed('point', true)
                 .each(function(di, i) {
                     // now display the bar
                     // clipped xf/yf (2nd arg true): non-positive
@@ -75,15 +78,18 @@ module.exports = function plot(gd, plotinfo, cdbar) {
                         d3.select(this).remove();
                         return;
                     }
+
                     var lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
                             (di.trace ? di.trace.marker.line.width : 0) + 1) - 1,
                         offset = d3.round((lw / 2) % 1, 2);
+
                     function roundWithLine(v) {
                         // if there are explicit gaps, don't round,
                         // it can make the gaps look crappy
                         return (fullLayout.bargap === 0 && fullLayout.bargroupgap === 0) ?
                             d3.round(Math.round(v) - offset, 2) : v;
                     }
+
                     function expandToVisible(v, vc) {
                         // if it's not in danger of disappearing entirely,
                         // round more precisely
@@ -93,6 +99,7 @@ module.exports = function plot(gd, plotinfo, cdbar) {
                         // its neighbor
                         (v > vc ? Math.ceil(v) : Math.floor(v));
                     }
+
                     if(!gd._context.staticPlot) {
                         // if bars are not fully opaque or they have a line
                         // around them, round to integer pixels, mainly for
@@ -108,12 +115,274 @@ module.exports = function plot(gd, plotinfo, cdbar) {
                         y0 = fixpx(y0, y1);
                         y1 = fixpx(y1, y0);
                     }
-                    d3.select(this).attr('d',
+
+                    // append bar path and text
+                    var bar = d3.select(this);
+
+                    bar.append('path').attr('d',
                         'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
+
+                    appendBarText(gd, bar, d, i, x0, x1, y0, y1);
                 });
         });
 
     // error bars are on the top
     bartraces.call(ErrorBars.plot, plotinfo);
 
 };
+
+function appendBarText(gd, bar, calcTrace, i, x0, x1, y0, y1) {
+    var trace = calcTrace[0].trace;
+
+    // get bar text
+    var traceText = trace.text;
+    if(!traceText) return;
+
+    var text;
+    if(Array.isArray(traceText)) {
+        if(i >= traceText.length) return;
+        text = traceText[i];
+    }
+    else {
+        text = traceText;
+    }
+
+    // get text position
+    var traceTextPosition = trace.textposition,
+        textPosition;
+    if(Array.isArray(traceTextPosition)) {
+        if(i >= traceTextPosition.length) return;
+        textPosition = traceTextPosition[i];
+    }
+    else {
+        textPosition = traceTextPosition;
+    }
+
+    if(textPosition === 'none') return;
+
+    var barWidth = Math.abs(x1 - x0),
+        barHeight = Math.abs(y1 - y0),
+        barIsTooSmall = (barWidth < 8 || barHeight < 8),
+
+        barmode = gd._fullLayout.barmode,
+        inStackMode = (barmode === 'stack'),
+        inRelativeMode = (barmode === 'relative'),
+        inStackOrRelativeMode = inStackMode || inRelativeMode,
+
+        calcBar = calcTrace[i],
+        isOutmostBar = !inStackOrRelativeMode || calcBar._outmost;
+
+    if(textPosition === 'auto') {
+        textPosition = (barIsTooSmall && isOutmostBar) ? 'outside' : 'inside';
+    }
+
+    if(textPosition === 'outside') {
+        if(!isOutmostBar) textPosition = 'inside';
+    }
+
+    if(textPosition === 'inside') {
+        if(barIsTooSmall) return;
+    }
+
+
+    // get text font
+    var textFont;
+
+    if(textPosition === 'outside') {
+        var traceOutsideTextFont = trace.outsidetextfont;
+        if(Array.isArray(traceOutsideTextFont)) {
+            if(i >= traceOutsideTextFont.length) return;
+            textFont = traceOutsideTextFont[i];
+        }
+        else {
+            textFont = traceOutsideTextFont;
+        }
+    }
+    else {
+        var traceInsideTextFont = trace.insidetextfont;
+        if(Array.isArray(traceInsideTextFont)) {
+            if(i >= traceInsideTextFont.length) return;
+            textFont = traceInsideTextFont[i];
+        }
+        else {
+            textFont = traceInsideTextFont;
+        }
+    }
+
+    if(!textFont) {
+        var traceTextFont = trace.textfont;
+        if(Array.isArray(traceTextFont)) {
+            if(i >= traceTextFont.length) return;
+            textFont = traceTextFont[i];
+        }
+        else {
+            textFont = traceTextFont;
+        }
+    }
+
+    if(!textFont) {
+        textFont = gd._fullLayout.font;
+    }
+
+    // append bar text
+    var textSelection = bar.append('text')
+        // prohibit tex interpretation until we can handle
+        // tex and regular text together
+        .attr('data-notex', 1)
+        .text(text)
+        .attr({
+            'class': 'bartext',
+            transform: '',
+            'data-bb': '',
+            'text-anchor': 'middle',
+            x: 0,
+            y: 0
+        })
+        .call(Drawing.font, textFont);
+
+    textSelection.call(svgTextUtils.convertToTspans);
+    textSelection.selectAll('tspan.line').attr({x: 0, y: 0});
+
+    // position bar text
+    var textBB = Drawing.bBox(textSelection.node()),
+        textWidth = textBB.width,
+        textHeight = textBB.height;
+    if(!textWidth || !textHeight) {
+        textSelection.remove();
+        return;
+    }
+
+    // compute translate transform
+    var transform;
+    if(textPosition === 'outside') {
+        transform = getTransformToMoveOutsideBar(x0, x1, y0, y1, textBB,
+            trace.orientation);
+    }
+    else {
+        transform = getTransformToMoveInsideBar(x0, x1, y0, y1, textBB);
+    }
+
+    textSelection.attr('transform', transform);
+}
+
+function getTransformToMoveInsideBar(x0, x1, y0, y1, textBB) {
+    // compute text and target positions
+    var barWidth = Math.abs(x1 - x0),
+        barHeight = Math.abs(y1 - y0),
+        textWidth = textBB.width,
+        textHeight = textBB.height,
+        barX = (x0 + x1) / 2,
+        barY = (y0 + y1) / 2,
+        textX = (textBB.left + textBB.right) / 2,
+        textY = (textBB.top + textBB.bottom) / 2;
+
+    // apply target padding
+    var targetWidth = 0.95 * barWidth,
+        targetHeight = 0.95 * barHeight;
+
+    return getTransform(
+        textX, textY, textWidth, textHeight,
+        barX, barY, targetWidth, targetHeight);
+}
+
+function getTransformToMoveOutsideBar(x0, x1, y0, y1, textBB, orientation) {
+
+    // compute text and target positions
+    var textWidth = textBB.width,
+        textHeight = textBB.height,
+        textX = (textBB.left + textBB.right) / 2,
+        textY = (textBB.top + textBB.bottom) / 2;
+
+    var targetWidth, targetHeight,
+        targetX, targetY;
+    if(orientation === 'h') {
+        if(x1 < x0) {
+            // bar end is on the left hand side
+            targetWidth = 2 + textWidth; // padding included
+            targetHeight = Math.abs(y1 - y0);
+            targetX = x1 - targetWidth / 2;
+            targetY = (y0 + y1) / 2;
+        }
+        else {
+            targetWidth = 2 + textWidth; // padding included
+            targetHeight = Math.abs(y1 - y0);
+            targetX = x1 + targetWidth / 2;
+            targetY = (y0 + y1) / 2;
+        }
+    }
+    else {
+        if(y1 > y0) {
+            // bar end is on the bottom
+            targetWidth = Math.abs(x1 - x0);
+            targetHeight = 2 + textHeight; // padding included
+            targetX = (x0 + x1) / 2;
+            targetY = y1 + targetHeight / 2;
+        }
+        else {
+            targetWidth = Math.abs(x1 - x0);
+            targetHeight = 2 + textHeight; // padding included
+            targetX = (x0 + x1) / 2;
+            targetY = y1 - targetHeight / 2;
+        }
+    }
+
+    return getTransform(
+        textX, textY, textWidth, textHeight,
+        targetX, targetY, targetWidth, targetHeight);
+}
+
+/**
+ * Compute SVG transform to move a text box into a target box
+ *
+ * @param {number} textX         X pixel coord of the text box center
+ * @param {number} textY         Y pixel coord of the text box center
+ * @param {number} textWidth     text box width
+ * @param {number} textHeight    text box height
+ * @param {number} targetX       X pixel coord of the target box center
+ * @param {number} targetY       Y pixel coord of the target box center
+ * @param {number} targetWidth   target box width
+ * @param {number} targetHeight  target box height
+ *
+ * @returns {string} SVG transform
+ */
+function getTransform(
+    textX, textY, textWidth, textHeight,
+    targetX, targetY, targetWidth, targetHeight) {
+
+    // compute translate transform
+    var translateX = targetX - textX,
+        translateY = targetY - textY,
+        translate = 'translate(' + translateX + ' ' + translateY + ')';
+
+    // if bar text doesn't fit, compute rotate and scale transforms
+    var doesntFit = (textWidth > targetWidth || textHeight > targetHeight),
+        rotate, scale, scaleX, scaleY;
+
+    if(doesntFit) {
+        var textIsHorizontal = (textWidth > textHeight),
+            targetIsHorizontal = (targetWidth > targetHeight);
+        if(textIsHorizontal !== targetIsHorizontal) {
+            rotate = 'rotate(-90 ' + textX + ' ' + textY + ')';
+            scaleX = targetWidth / textHeight;
+            scaleY = targetHeight / textWidth;
+        }
+        else {
+            scaleX = targetWidth / textWidth;
+            scaleY = targetHeight / textHeight;
+        }
+
+        if(scaleX > 1) scaleX = 1;
+        if(scaleY > 1) scaleY = 1;
+
+        if(scaleX !== 1 || scaleY !== 1) {
+            scale = 'scale(' + scaleX + ' ' + scaleY + ')';
+        }
+    }
+
+    // compute transform
+    var transform = translate;
+    if(scale) transform += ' ' + scale;
+    if(rotate) transform += ' ' + rotate;
+
+    return transform;
+}

src/traces/bar/set_positions.js

@@ -179,6 +179,24 @@ function setGroupPositionsInStackOrRelativeMode(gd, pa, sa, calcTraces) {
 
     // set bar bases and sizes, and update size axis
     stackBars(gd, sa, sieve);
+
+    // flag the outmost bar (for text display purposes)
+    for(var i = 0; i < calcTraces.length; i++) {
+        var calcTrace = calcTraces[i];
+
+        for(var j = 0; j < calcTrace.length; j++) {
+            var bar = calcTrace[j];
+
+            if(!isNumeric(bar.s)) continue;
+
+            var isOutmostBar = ((bar.b + bar.s) === sieve.get(bar.p, bar.s));
+            if(isOutmostBar) bar._outmost = true;
+        }
+    }
+
+    // Note that marking the outmost bars has to be done
+    // before `normalizeBars` changes `bar.b` and `bar.s`.
+    if(barnorm) normalizeBars(gd, sa, sieve);
 }
 
 
@@ -506,12 +524,7 @@ function stackBars(gd, sa, sieve) {
     }
 
     // if barnorm is set, let normalizeBars update the axis range
-    if(barnorm) {
-        normalizeBars(gd, sa, sieve);
-    }
-    else {
-        Axes.expand(sa, [sMin, sMax], {tozero: true, padded: true});
-    }
+    if(!barnorm) Axes.expand(sa, [sMin, sMax], {tozero: true, padded: true});
 }