olhc: add custom hover text

- by filling in a 'text' array in the generated traces

Author: etpinard

src/traces/ohlc/transform.js

@@ -11,6 +11,7 @@
 
 var Lib = require('../../lib');
 var helpers = require('./helpers');
+var Axes = require('../../plots/cartesian/axes');
 var axisIds = require('../../plots/cartesian/axis_ids');
 
 exports.moduleType = 'transform';
@@ -57,11 +58,11 @@ function makeTrace(traceIn, state, direction) {
         connectgaps: false,
 
         visible: traceIn.visible,
-        hoverinfo: traceIn.hoverinfo,
         opacity: traceIn.opacity,
         xaxis: traceIn.xaxis,
         yaxis: traceIn.yaxis,
 
+        hoverinfo: makeHoverInfo(traceIn),
         transforms: helpers.makeTransform(traceIn, state, direction)
     };
 
@@ -94,43 +95,98 @@ function makeTrace(traceIn, state, direction) {
     return traceOut;
 }
 
+// let scatter hoverPoint format 'x' coordinates, if desired
+function makeHoverInfo(traceIn) {
+    var hoverinfo = traceIn.hoverinfo;
+
+    if(hoverinfo === 'all') return 'x+text';
+
+    var parts = hoverinfo.split('+'),
+        hasX = parts.indexOf('x') !== -1,
+        hasText = parts.indexOf('text') !== -1;
+
+    if(hasX) {
+        if(hasText) return 'x+text';
+        else return 'x';
+
+    }
+    else return 'text';
+}
+
 exports.calcTransform = function calcTransform(gd, trace, opts) {
     var direction = opts.direction,
-        filterFn = helpers.getFilterFn(direction),
-        ax = axisIds.getFromTrace(gd, trace, 'x'),
-        tickWidth = convertTickWidth(trace.x, ax, trace._fullInput.tickwidth);
+        filterFn = helpers.getFilterFn(direction);
+
+    var xa = axisIds.getFromTrace(gd, trace, 'x'),
+        ya = axisIds.getFromTrace(gd, trace, 'y'),
+        tickWidth = convertTickWidth(trace.x, xa, trace._fullInput.tickwidth);
 
     var open = trace.open,
         high = trace.high,
         low = trace.low,
-        close = trace.close;
+        close = trace.close,
+        textIn = trace.text;
 
     var len = open.length,
         x = [],
-        y = [];
+        y = [],
+        textOut = [];
+
+    var getXItem = trace._fullInput.x ?
+        function(i) { return xa.d2c(trace.x[i]); } :
+        function(i) { return i; };
 
-    var appendX = trace._fullInput.x ?
-        function(i) {
-            var v = ax.d2c(trace.x[i]);
-            x.push(v - tickWidth, v, v, v, v, v + tickWidth, null);
-        } :
-        function(i) {
-            x.push(i - tickWidth, i, i, i, i, i + tickWidth, null);
-        };
+    var getTextItem = Array.isArray(textIn) ?
+        function(i) { return textIn[i] || ''; } :
+        function() { return textIn; };
+
+    var appendX = function(i) {
+        var v = getXItem(i);
+        x.push(v - tickWidth, v, v, v, v, v + tickWidth, null);
+    };
 
     var appendY = function(o, h, l, c) {
         y.push(o, o, h, l, c, c, null);
     };
 
+    var format = function(ax, val) {
+        return Axes.tickText(ax, ax.c2l(val), 'hover').text;
+    };
+
+    var hoverinfo = trace._fullInput.hoverinfo,
+        hoverParts = hoverinfo.split('+'),
+        hasAll = hoverinfo === 'all',
+        hasY = hasAll || hoverParts.indexOf('y') !== -1,
+        hasText = hasAll || hoverParts.indexOf('text') !== -1;
+
+    var appendText = function(i, o, h, l, c) {
+        var t = [];
+
+        if(hasY) {
+            t.push('Open: ' + format(ya, o));
+            t.push('High: ' + format(ya, h));
+            t.push('Low: ' + format(ya, l));
+            t.push('Close: ' + format(ya, c));
+        }
+
+        if(hasText) t.push(getTextItem(i));
+
+        var _t = t.join('<br>');
+
+        textOut.push(_t, _t, _t, _t, _t, _t, null);
+    };
+
     for(var i = 0; i < len; i++) {
         if(filterFn(open[i], close[i])) {
             appendX(i);
             appendY(open[i], high[i], low[i], close[i]);
+            appendText(i, open[i], high[i], low[i], close[i]);
         }
     }
 
     trace.x = x;
     trace.y = y;
+    trace.text = textOut;
 };
 
 function convertTickWidth(coords, ax, tickWidth) {

test/jasmine/tests/finance_test.js

@@ -323,6 +323,58 @@ describe('finance charts calc transforms:', function() {
         ]);
     });
 
+    it('should fill *text* for OHLC hover labels', function() {
+        var trace0 = Lib.extendDeep({}, mock0, {
+            type: 'ohlc',
+            text: ['A', 'B', 'C', 'D']
+        });
+
+        var trace1 = Lib.extendDeep({}, mock1, {
+            type: 'ohlc',
+            text: 'IMPORTANT',
+            hoverinfo: 'x+text',
+            xaxis: 'x2'
+        });
+
+        var trace2 = Lib.extendDeep({}, mock1, {
+            type: 'ohlc',
+            hoverinfo: 'y',
+            xaxis: 'x2'
+        });
+
+        var trace3 = Lib.extendDeep({}, mock0, {
+            type: 'ohlc',
+            hoverinfo: 'x',
+        });
+
+        var out = _calc([trace0, trace1, trace2, trace3]);
+
+        expect(out[0].hoverinfo).toEqual('x+text');
+        expect(out[0].text[0])
+            .toEqual('Open: 33.01<br>High: 34.2<br>Low: 31.7<br>Close: 34.1<br>A');
+        expect(out[0].hoverinfo).toEqual('x+text');
+        expect(out[1].text[0])
+            .toEqual('Open: 33.31<br>High: 34.37<br>Low: 30.75<br>Close: 31.93<br>B');
+
+        expect(out[2].hoverinfo).toEqual('x+text');
+        expect(out[2].text[0]).toEqual('IMPORTANT');
+
+        expect(out[3].hoverinfo).toEqual('x+text');
+        expect(out[3].text[0]).toEqual('IMPORTANT');
+
+        expect(out[4].hoverinfo).toEqual('text');
+        expect(out[4].text[0])
+            .toEqual('Open: 33.01<br>High: 34.2<br>Low: 31.7<br>Close: 34.1');
+        expect(out[5].hoverinfo).toEqual('text');
+        expect(out[5].text[0])
+            .toEqual('Open: 33.31<br>High: 34.37<br>Low: 30.75<br>Close: 31.93');
+
+        expect(out[6].hoverinfo).toEqual('x');
+        expect(out[6].text[0]).toEqual('');
+        expect(out[7].hoverinfo).toEqual('x');
+        expect(out[7].text[0]).toEqual('');
+    });
+
     it('should work with *filter* transforms', function() {
         var trace0 = Lib.extendDeep({}, mock1, {
             type: 'ohlc',