From ad6ab286da05756c066f124c8aa5ebbb6769e5b2 Mon Sep 17 00:00:00 2001
From: Thomas Wang <17309187+datability-io@users.noreply.github.com>
Date: Fri, 29 Mar 2019 10:19:44 -0700
Subject: [PATCH] feat: improve the tooltip for the time pivot chart (#30)

* style: improve the tooltip for the time pivot chart

* fix: lint errors
---
 .../src/NVD3Vis.js                            |  6 ++++
 .../src/utils.js                              | 30 +++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js b/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js
index 000883b34..e323a293c 100644
--- a/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js
+++ b/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js
@@ -40,6 +40,7 @@ import {
   generateBubbleTooltipContent,
   generateMultiLineTooltipContent,
   generateRichLineTooltipContent,
+  generateTimePivotTooltip,
   getMaxLabelSize,
   getTimeOrNumberFormatter,
   hideTooltips,
@@ -539,6 +540,11 @@ function nvd3Vis(element, props) {
           return `rgba(${r}, ${g}, ${b}, ${alpha})`;
         });
       }
+
+      chart.useInteractiveGuideline(true);
+      chart.interactiveLayer.tooltip.contentGenerator(d =>
+        generateTimePivotTooltip(d, xAxisFormatter, yAxisFormatter),
+      );
     } else if (vizType !== 'bullet') {
       const colorFn = getScale(colorScheme);
       chart.color(d => d.color || colorFn(cleanColorInput(d[colorKey])));
diff --git a/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js b/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js
index d4a07f031..880c3f210 100644
--- a/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js
+++ b/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js
@@ -160,6 +160,36 @@ export function generateMultiLineTooltipContent(d, xFormatter, yFormatters) {
   return tooltip;
 }
 
+export function generateTimePivotTooltip(d, xFormatter, yFormatter) {
+  const tooltipTitle = xFormatter(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 => {
+    if (series.highlight) {
+      let label = '';
+      if (series.key === 'current') {
+        label = series.key;
+      } else {
+        label = `${series.key} of the selected frequence`;
+      }
+      tooltip +=
+        "<tr><td class='legend-color-guide'>" +
+        `<div style="background-color: ${series.color};"></div></td>` +
+        `<td class='key'>${label}</td>` +
+        `<td class='value'>${yFormatter(series.value)}</td></tr>`;
+    }
+  });
+
+  tooltip += '</tbody></table>';
+
+  return dompurify.sanitize(tooltip);
+}
+
 function getLabel(stringOrObjectWithLabel) {
   return stringOrObjectWithLabel.label || stringOrObjectWithLabel;
 }