fix(legacy-preset-chart-nvd3): time compare and stacked area tooltips (…

…apache#850)

* fix: time compare tooltip

* refactor: create separate function

* refactor: remove fn

* fix: area chart tooltip

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Compare/Stories.tsx

@@ -7,3 +7,4 @@ export default {
 };
 
 export { basic } from './stories/basic';
+export { timeFormat } from './stories/timeFormat';

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Compare/stories/timeFormat.tsx

@@ -0,0 +1,233 @@
+import React from 'react';
+import { SuperChart } from '@superset-ui/core';
+import dummyDatasource from '../../../../../shared/dummyDatasource';
+
+export const timeFormat = () => (
+  <SuperChart
+    chartType="compare"
+    width={400}
+    height={400}
+    datasource={dummyDatasource}
+    queryData={{
+      data: [
+        {
+          key: ['Africa and Middle East'],
+          values: [
+            {
+              x: 1606348800000,
+              y: 3985,
+            },
+            {
+              x: 1606435200000,
+              y: 5882,
+            },
+            {
+              x: 1606521600000,
+              y: 7983,
+            },
+            {
+              x: 1606608000000,
+              y: 16462,
+            },
+            {
+              x: 1606694400000,
+              y: 5542,
+            },
+            {
+              x: 1606780800000,
+              y: 2825,
+            },
+          ],
+        },
+        {
+          key: ['Asia'],
+          values: [
+            {
+              x: 1606348800000,
+              y: 34837,
+            },
+            {
+              x: 1606435200000,
+              y: 40718,
+            },
+            {
+              x: 1606521600000,
+              y: 58507,
+            },
+            {
+              x: 1606608000000,
+              y: 110120,
+            },
+            {
+              x: 1606694400000,
+              y: 43443,
+            },
+            {
+              x: 1606780800000,
+              y: 33538,
+            },
+          ],
+        },
+        {
+          key: ['Australia'],
+          values: [
+            {
+              x: 1606348800000,
+              y: 12975,
+            },
+            {
+              x: 1606435200000,
+              y: 18471,
+            },
+            {
+              x: 1606521600000,
+              y: 17880,
+            },
+            {
+              x: 1606608000000,
+              y: 52204,
+            },
+            {
+              x: 1606694400000,
+              y: 26690,
+            },
+            {
+              x: 1606780800000,
+              y: 16423,
+            },
+          ],
+        },
+        {
+          key: ['Europe'],
+          values: [
+            {
+              x: 1606348800000,
+              y: 127029,
+            },
+            {
+              x: 1606435200000,
+              y: 177637,
+            },
+            {
+              x: 1606521600000,
+              y: 172653,
+            },
+            {
+              x: 1606608000000,
+              y: 203654,
+            },
+            {
+              x: 1606694400000,
+              y: 79200,
+            },
+            {
+              x: 1606780800000,
+              y: 45238,
+            },
+          ],
+        },
+        {
+          key: ['LatAm'],
+          values: [
+            {
+              x: 1606348800000,
+              y: 22513,
+            },
+            {
+              x: 1606435200000,
+              y: 24594,
+            },
+            {
+              x: 1606521600000,
+              y: 32578,
+            },
+            {
+              x: 1606608000000,
+              y: 34733,
+            },
+            {
+              x: 1606694400000,
+              y: 71696,
+            },
+            {
+              x: 1606780800000,
+              y: 166611,
+            },
+          ],
+        },
+        {
+          key: ['North America'],
+          values: [
+            {
+              x: 1606348800000,
+              y: 104596,
+            },
+            {
+              x: 1606435200000,
+              y: 109850,
+            },
+            {
+              x: 1606521600000,
+              y: 136873,
+            },
+            {
+              x: 1606608000000,
+              y: 133243,
+            },
+            {
+              x: 1606694400000,
+              y: 327739,
+            },
+            {
+              x: 1606780800000,
+              y: 162711,
+            },
+          ],
+        },
+      ],
+    }}
+    formData={{
+      queryFields: {
+        metrics: 'metrics',
+        groupby: 'groupby',
+      },
+      datasource: '24771__table',
+      vizType: 'compare',
+      urlParams: {},
+      timeRangeEndpoints: ['inclusive', 'exclusive'],
+      granularitySqla: '__time',
+      timeGrainSqla: 'P1D',
+      timeRange: 'Last week',
+      metrics: ['random_metric'],
+      adhocFilters: [],
+      groupby: ['dim_origin_region'],
+      timeseriesLimitMetric: null,
+      orderDesc: true,
+      contribution: false,
+      rowLimit: 10000,
+      colorScheme: 'd3Category10',
+      labelColors: {},
+      xAxisLabel: '',
+      bottomMargin: 'auto',
+      xTicksLayout: 'auto',
+      xAxisFormat: 'smart_date',
+      xAxisShowminmax: false,
+      yAxisLabel: '',
+      leftMargin: 'auto',
+      yAxisShowminmax: false,
+      yLogScale: false,
+      yAxisFormat: 'SMART_NUMBER',
+      yAxisBounds: [null, null],
+      rollingType: 'None',
+      comparisonType: 'values',
+      resampleRule: null,
+      resampleMethod: null,
+      annotationLayers: [],
+      appliedTimeExtras: {},
+      where: '',
+      having: '',
+      havingFilters: [],
+      filters: [],
+    }}
+  />
+);

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js

@@ -45,6 +45,7 @@ import {
   computeStackedYDomain,
   drawBarValues,
   generateBubbleTooltipContent,
+  generateCompareTooltipContent,
   generateMultiLineTooltipContent,
   generateRichLineTooltipContent,
   generateTimePivotTooltip,
@@ -641,14 +642,20 @@ function nvd3Vis(element, props) {
         chart.interactiveLayer.tooltip.contentGenerator(d =>
           generateRichLineTooltipContent(d, smartDateVerboseFormatter, yAxisFormatter),
         );
-      } else if (areaStackedStyle !== 'expand') {
+      } else {
         // area chart
         chart.interactiveLayer.tooltip.contentGenerator(d =>
-          generateAreaChartTooltipContent(d, smartDateVerboseFormatter, yAxisFormatter),
+          generateAreaChartTooltipContent(d, smartDateVerboseFormatter, yAxisFormatter, chart),
         );
       }
     }
 
+    if (isVizTypes(['compare'])) {
+      chart.interactiveLayer.tooltip.contentGenerator(d =>
+        generateCompareTooltipContent(d, yAxisFormatter),
+      );
+    }
+
     if (isVizTypes(['dual_line', 'line_multi'])) {
       const yAxisFormatter1 = getNumberFormatter(yAxisFormat);
       const yAxisFormatter2 = getNumberFormatter(yAxis2Format);

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/utils.js

@@ -132,8 +132,40 @@ export function generateRichLineTooltipContent(d, timeFormatter, valueFormatter)
   return dompurify.sanitize(tooltip);
 }
 
-export function generateAreaChartTooltipContent(d, timeFormatter, valueFormatter) {
-  const total = d.series[d.series.length - 1].value;
+export function generateCompareTooltipContent(d, valueFormatter) {
+  let tooltip = '';
+  tooltip +=
+    "<table><thead><tr><td colspan='3'>" +
+    `<strong class='x-value'>${d.value}</strong>` +
+    '</td></tr></thead><tbody>';
+  d.series.sort((a, b) => (a.value >= b.value ? -1 : 1));
+  d.series.forEach(series => {
+    const key = getFormattedKey(series.key, true);
+    tooltip +=
+      `<tr class="${series.highlight ? 'emph' : ''}">` +
+      `<td class='legend-color-guide' style="opacity: ${series.highlight ? '1' : '0.75'};"">` +
+      '<div ' +
+      `style="border: 2px solid ${series.highlight ? 'black' : 'transparent'}; background-color: ${
+        series.color
+      };"` +
+      '></div>' +
+      '</td>' +
+      `<td>${key}</td>` +
+      `<td>${valueFormatter(series.value)}</td>` +
+      '</tr>';
+  });
+  tooltip += '</tbody></table>';
+
+  return dompurify.sanitize(tooltip);
+}
+
+export function generateAreaChartTooltipContent(d, timeFormatter, valueFormatter, chart) {
+  const total =
+    chart.style() === 'expand'
+      ? // expand mode does not include total row
+        d3.sum(d.series, s => s.value)
+      : // other modes include total row at the end
+        d.series[d.series.length - 1].value;
   let tooltip = '';
   tooltip +=
     "<table><thead><tr><td colspan='4'>" +