Customize tooltip with axis format (#2068)

apache · Jan 30, 2017 · 87869a2 · 87869a2
1 parent 544211f
commit 87869a2
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/superset/assets/javascripts/modules/utils.js b/superset/assets/javascripts/modules/utils.js
@@ -159,3 +159,28 @@ export function getAjaxErrorMsg(error) {
   return (respJSON && respJSON.message) ? respJSON.message :
           error.responseText;
 }
+
+export function customizeToolTip(chart, xAxisFormatter, yAxisFormatters) {
+  chart.useInteractiveGuideline(true);
+  chart.interactiveLayer.tooltip.contentGenerator(function (d) {
+    const tooltipTitle = xAxisFormatter(d.value);
+    let tooltip = '';
+
+    tooltip += "<table><thead><tr><td colspan='3'>"
+      + `<strong class='x-value'>${tooltipTitle}</strong>`
+      + '</td></tr></thead><tbody>';
+
+    d.series.forEach((series, i) => {
+      const yAxisFormatter = yAxisFormatters[i];
+      const value = yAxisFormatter(series.value);
+      tooltip += "<tr><td class='legend-color-guide'>"
+        + `<div style="background-color: ${series.color};"></div></td>`
+        + `<td class='key'>${series.key}</td>`
+        + `<td class='value'>${value}</td></tr>`;
+    });
+
+    tooltip += '</tbody></table>';
+
+    return tooltip;
+  });
+}
diff --git a/superset/assets/visualizations/nvd3_vis.js b/superset/assets/visualizations/nvd3_vis.js
@@ -1,6 +1,8 @@
 // JS
 import { category21 } from '../javascripts/modules/colors';
 import { timeFormatFactory, formatDate } from '../javascripts/modules/dates';
+import { customizeToolTip } from '../javascripts/modules/utils';
+
 const d3 = require('d3');
 const nv = require('nvd3');
 
@@ -345,8 +347,11 @@ function nvd3Vis(slice, payload) {
       svg = d3.select(slice.selector).append('svg');
     }
     if (vizType === 'dual_line') {
-      chart.yAxis1.tickFormat(d3.format(fd.y_axis_format));
-      chart.yAxis2.tickFormat(d3.format(fd.y_axis_2_format));
+      const yAxisFormatter1 = d3.format(fd.y_axis_format);
+      const yAxisFormatter2 = d3.format(fd.y_axis_2_format);
+      chart.yAxis1.tickFormat(yAxisFormatter1);
+      chart.yAxis2.tickFormat(yAxisFormatter2);
+      customizeToolTip(chart, xAxisFormatter, [yAxisFormatter1, yAxisFormatter2]);
       chart.showLegend(true);
       chart.margin({ right: 50 });
     }