feat: improve the tooltip for the time pivot chart (#30)

* style: improve the tooltip for the time pivot chart * fix: lint errors
apache · Nov 26, 2021 · ec2c194 · ec2c194
1 parent 049b40b
commit ec2c194
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git a/.../plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js b/.../plugins/superset-ui-plugins/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/...ui/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js b/...ui/plugins/superset-ui-plugins/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;
 }