style: add % to total to area chart tooltip (#27)

* style: improve area chart tooltip * style: improve area chart tooltip
apache-superset · Apr 4, 2019 · 829543d · 829543d
1 parent cc4b0c1
commit 829543d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 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
@@ -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
@@ -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
@@ -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) {