From 829543d3af183d9dbed2d2b7162cba690bdf432c Mon Sep 17 00:00:00 2001
From: Thomas Wang <17309187+datability-io@users.noreply.github.com>
Date: Thu, 4 Apr 2019 11:46:16 -0700
Subject: [PATCH] style: add % to total to area chart tooltip (#27)

* style: improve area chart tooltip

* style: improve area chart tooltip
---
 .../src/NVD3Vis.css                           |  9 ++++++
 .../src/NVD3Vis.js                            |  6 ++++
 .../src/utils.js                              | 31 ++++++++++++++++++-
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.css b/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.css
index a7ab3e6bf..35612b25b 100644
--- a/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.css
+++ b/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.css
@@ -112,3 +112,12 @@
 .superset-legacy-chart-nvd3 g.time-shift-9 path, .superset-legacy-chart-nvd3 line.time-shift-9 {
   stroke-dasharray: 5, 5, 1, 5;
 }
+.superset-legacy-chart-nvd3-tr-highlight {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  font-weight: bold;
+}
+
+.superset-legacy-chart-nvd3-tr-total {
+  font-weight: bold;
+}
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 51c9ec6ca..82edafadc 100644
--- a/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js
+++ b/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js
@@ -41,6 +41,7 @@ import {
   generateMultiLineTooltipContent,
   generateRichLineTooltipContent,
   generateTimePivotTooltip,
+  generateAreaChartTooltipContent,
   getMaxLabelSize,
   getTimeOrNumberFormatter,
   hideTooltips,
@@ -558,6 +559,11 @@ function nvd3Vis(element, props) {
         chart.interactiveLayer.tooltip.contentGenerator(d =>
           generateRichLineTooltipContent(d, smartDateVerboseFormatter, yAxisFormatter),
         );
+      } else {
+        // area chart
+        chart.interactiveLayer.tooltip.contentGenerator(d =>
+          generateAreaChartTooltipContent(d, smartDateVerboseFormatter, yAxisFormatter),
+        );
       }
     }
 
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 f40568fdf..a20f4d967 100644
--- a/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js
+++ b/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js
@@ -133,7 +133,36 @@ export function generateRichLineTooltipContent(d, timeFormatter, valueFormatter)
   });
   tooltip += '</tbody></table>';
 
-  return tooltip;
+  return dompurify.sanitize(tooltip);
+}
+
+export function generateAreaChartTooltipContent(d, timeFormatter, valueFormatter) {
+  const total = d.series[d.series.length - 1].value;
+  let tooltip = '';
+  tooltip +=
+    "<table><thead><tr><td colspan='4'>" +
+    `<strong class='x-value'>${timeFormatter(d.value)}</strong>` +
+    '</td></tr></thead><tbody>' +
+    '<tr><td></td><td>Category</td><td>Value</td><td>% to total</td></tr>';
+  d.series.forEach(series => {
+    const key = getFormattedKey(series.key, true);
+    let trClass = '';
+    if (series.highlight) {
+      trClass = 'superset-legacy-chart-nvd3-tr-highlight';
+    } else if (series.key === 'TOTAL') {
+      trClass = 'superset-legacy-chart-nvd3-tr-total';
+    }
+    tooltip +=
+      `<tr class="${trClass}" style="border-color: ${series.color}">` +
+      `<td style="color: ${series.color}">${series.key === 'TOTAL' ? '' : '&#9724;'}</td>` +
+      `<td>${key}</td>` +
+      `<td>${valueFormatter(series.value)}</td>` +
+      `<td>${((100 * series.value) / total).toFixed(2)}%</td>` +
+      '</tr>';
+  });
+  tooltip += '</tbody></table>';
+
+  return dompurify.sanitize(tooltip);
 }
 
 export function generateMultiLineTooltipContent(d, xFormatter, yFormatters) {