diff --git a/src/models/lineChart.js b/src/models/lineChart.js index f12b596..d96d853 100644 --- a/src/models/lineChart.js +++ b/src/models/lineChart.js @@ -49,25 +49,22 @@ nv.models.lineChart = function() { //------------------------------------------------------------ var showTooltip = function(e, offsetElement) { - var x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)), - y = yAxis.tickFormat()(lines.y()(e.point, e.pointIndex)) - ; + var x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)); var tip = nv.models.tooltip() .position({left: e.pos[0], top: e.pos[1]}) .chartContainer(offsetElement) .fixedTop(30) - // .contentGenerator(tooltip) + .enabled(tooltips) + .valueFormatter(function(d,i) { + return yAxis.tickFormat()(d); + }) .data( { - key: e.series.key, + key: "", value: x, - series: [ - {key: e.series.key, - value: y}, - {key: 'Series2', - value: y} - ] + seriesSelectedKey: e.series.key, + series: e.allSeriesData } ) .render() @@ -277,7 +274,7 @@ nv.models.lineChart = function() { */ dispatch.on('tooltipShow', function(e) { - if (tooltips) showTooltip(e, that.parentNode); + showTooltip(e, that.parentNode); }); diff --git a/src/models/scatter.js b/src/models/scatter.js index 2c7c28b..93aa771 100644 --- a/src/models/scatter.js +++ b/src/models/scatter.js @@ -243,44 +243,38 @@ nv.models.scatter = function() { return 'M' + d.data.join('L') + 'Z'; }); + var mouseEventCallback = function(d,mDispatch) { + if (needsUpdate) return 0; + var series = data[d.series], + point = series.values[d.point]; + + var allSeriesData = []; + data.forEach(function(item) { + allSeriesData.push({ + key: item.key, + value: getY(item.values[d.point], d.point) + }); + }); + + mDispatch({ + point: point, + series: series, + pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top], + seriesIndex: d.series, + pointIndex: d.point, + allSeriesData: allSeriesData + }); + }; + pointPaths .on('click', function(d) { - if (needsUpdate) return 0; - var series = data[d.series], - point = series.values[d.point]; - - dispatch.elementClick({ - point: point, - series: series, - pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top], - seriesIndex: d.series, - pointIndex: d.point - }); + mouseEventCallback(d, dispatch.elementClick); }) .on('mouseover', function(d) { - if (needsUpdate) return 0; - var series = data[d.series], - point = series.values[d.point]; - - dispatch.elementMouseover({ - point: point, - series: series, - pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top], - seriesIndex: d.series, - pointIndex: d.point - }); + mouseEventCallback(d, dispatch.elementMouseover); }) .on('mouseout', function(d, i) { - if (needsUpdate) return 0; - var series = data[d.series], - point = series.values[d.point]; - - dispatch.elementMouseout({ - point: point, - series: series, - seriesIndex: d.series, - pointIndex: d.point - }); + mouseEventCallback(d, dispatch.elementMouseout); }); diff --git a/src/nv.d3.css b/src/nv.d3.css index c1cabc1..23a61e5 100644 --- a/src/nv.d3.css +++ b/src/nv.d3.css @@ -84,6 +84,23 @@ margin: 2px 0; } +.nvtooltip table { + margin: 6px; +} + +.nvtooltip table td { + padding-right: 6px; + padding-bottom: 3px; +} + +.nvtooltip table tr.selected td.key { + font-weight: bold; +} +.nvtooltip table td.value { + text-align: right; + font-weight: bold; +} + .nvtooltip-pending-removal { position: absolute; pointer-events: none; diff --git a/src/tooltip.js b/src/tooltip.js index 76937c9..4ad4a33 100644 --- a/src/tooltip.js +++ b/src/tooltip.js @@ -19,6 +19,7 @@ { key: "Date", value: "August 2009", + seriesSelectedKey: "Series 2", series: [ { key: "Series 1", @@ -39,18 +40,24 @@ , classes = null //Attaches additional CSS classes to the tooltip DIV that is created. , chartContainer = null //Parent container that holds the chart. , position = {left: null, top: null} //Relative position of the tooltip inside chartContainer. + , enabled = true //True -> tooltips are rendered. False -> don't render tooltips. ; + var valueFormatter = function(d,i) { + return d; + }; + var contentGenerator = function(d) { if (content != null) return content; if (d == null) return ''; - var html = "" + d.value + ""; + var html = "
"; if (d.series instanceof Array) { - d.series.forEach(function(item) { - html += ""; - html += ""; + d.series.forEach(function(item, i) { + var isSelected = (item.key === d.seriesSelectedKey) ? "selected" : ""; + html += ""; + html += ""; }); } html += "
" + d.value + "
" + item.key + ":" + item.value + "
" + item.key + ":" + valueFormatter(item.value,i) + "
"; @@ -75,6 +82,8 @@ //Draw the tooltip onto the DOM. nvtooltip.render = function() { + if (!enabled) return; + convertViewBoxRatio(); var left = position.left; @@ -150,6 +159,19 @@ return nvtooltip; }; + nvtooltip.enabled = function(_) { + if (!arguments.length) return enabled; + enabled = _; + return nvtooltip; + }; + + nvtooltip.valueFormatter = function(_) { + if (!arguments.length) return valueFormatter; + if (typeof _ === 'function') { + valueFormatter = _; + } + return nvtooltip; + }; return nvtooltip;