feat(plugins): Tooltips on BigNumber with Time Comparison chart

superset-frontend/packages/superset-ui-chart-controls/src/index.ts

@@ -30,6 +30,7 @@ export * from './components/ColumnOption';
 export * from './components/ColumnTypeLabel/ColumnTypeLabel';
 export * from './components/MetricOption';
 export * from './components/ControlSubSectionHeader';
+export * from './components/Tooltip';
 
 export * from './shared-controls';
 export * from './types';

superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/PopKPI.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import React, { createRef, useMemo } from 'react';
-import { css, styled, useTheme } from '@superset-ui/core';
+import { css, styled, t, useTheme } from '@superset-ui/core';
+import { Tooltip } from '@superset-ui/chart-controls';
 import {
   PopKPIComparisonSymbolStyleProps,
   PopKPIComparisonValueStyleProps,
@@ -57,6 +58,7 @@ export default function PopKPI(props: PopKPIProps) {
     subheaderFontSize,
     comparisonColorEnabled,
     percentDifferenceNumber,
+    comparatorText,
   } = props;
 
   const rootElem = createRef<HTMLDivElement>();
@@ -117,9 +119,21 @@ export default function PopKPI(props: PopKPIProps) {
 
   const SYMBOLS_WITH_VALUES = useMemo(
     () => [
-      ['#', prevNumber],
-      ['△', valueDifference],
-      ['%', percentDifferenceFormattedString],
+      {
+        symbol: '#',
+        value: prevNumber,
+        tooltipText: t('Data for %s', comparatorText),
+      },
+      {
+        symbol: '△',
+        value: valueDifference,
+        tooltipText: t('Value difference between the time periods'),
+      },
+      {
+        symbol: '%',
+        value: percentDifferenceFormattedString,
+        tooltipText: t('Percentage difference between the time periods'),
+      },
     ],
     [prevNumber, valueDifference, percentDifferenceFormattedString],
   );
@@ -147,18 +161,24 @@ export default function PopKPI(props: PopKPIProps) {
         >
           {SYMBOLS_WITH_VALUES.map((symbol_with_value, index) => (
             <ComparisonValue
-              key={`comparison-symbol-${symbol_with_value[0]}`}
+              key={`comparison-symbol-${symbol_with_value.symbol}`}
               subheaderFontSize={subheaderFontSize}
             >
-              <SymbolWrapper
-                backgroundColor={
-                  index > 0 ? backgroundColor : defaultBackgroundColor
-                }
-                textColor={index > 0 ? textColor : defaultTextColor}
+              <Tooltip
+                id="tooltip"
+                placement="top"
+                title={symbol_with_value.tooltipText}
               >
-                {symbol_with_value[0]}
-              </SymbolWrapper>
-              {symbol_with_value[1]}
+                <SymbolWrapper
+                  backgroundColor={
+                    index > 0 ? backgroundColor : defaultBackgroundColor
+                  }
+                  textColor={index > 0 ? textColor : defaultTextColor}
+                >
+                  {symbol_with_value.symbol}
+                </SymbolWrapper>
+                {symbol_with_value.value}
+              </Tooltip>
             </ComparisonValue>
           ))}
         </div>

superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/transformProps.ts

@@ -24,6 +24,7 @@ import {
   NumberFormats,
   getNumberFormatter,
 } from '@superset-ui/core';
+import { computeQueryBComparator, formatCustomComparator } from '../utils';
 
 export const parseMetricValue = (metricValue: number | string | null) => {
   if (typeof metricValue === 'string') {
@@ -128,6 +129,18 @@ export default function transformProps(chartProps: ChartProps) {
   prevNumber = numberFormatter(prevNumber);
   valueDifference = numberFormatter(valueDifference);
   const percentDifference: string = formatPercentChange(percentDifferenceNum);
+  const comparatorText =
+    formData.timeComparison !== 'c'
+      ? ` ${computeQueryBComparator(
+          formData.adhocFilters,
+          formData.timeComparison,
+          formData.extraFormData,
+          ' - ',
+        )}`
+      : `${formatCustomComparator(
+          formData.adhocCustom,
+          formData.extraFormData,
+        )}`;
 
   return {
     width,
@@ -147,5 +160,6 @@ export default function transformProps(chartProps: ChartProps) {
     compType,
     comparisonColorEnabled,
     percentDifferenceNumber: percentDifferenceNum,
+    comparatorText,
   };
 }

superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/types.ts

@@ -60,4 +60,5 @@ export type PopKPIProps = PopKPIStylesProps &
     percentDifferenceFormattedString: string;
     compType: string;
     percentDifferenceNumber: number;
+    comparatorText: string;
   };

superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/utils.ts

@@ -198,12 +198,10 @@
   return [startDatePrev, endDatePrev];
 };
 
-export const computeQueryBComparator = (
+const getTimeRange = (
   adhocFilters: AdhocFilter[],
-  timeComparison: string,
   extraFormData: any,
-  join = ':',
-) => {
+): string | null => {
   const timeFilterIndex =
     adhocFilters?.findIndex(
       filter => 'operator' in filter && filter.operator === 'TEMPORAL_RANGE',
@@ -212,9 +210,6 @@
   const timeFilter =
     timeFilterIndex !== -1 ? adhocFilters[timeFilterIndex] : null;
 
-  let testSince = null;
-  let testUntil = null;
-
   if (
     timeFilter &&
     'comparator' in timeFilter &&
@@ -224,6 +219,24 @@
     if (extraFormData?.time_range) {
       timeRange = extraFormData.time_range;
     }
+    return timeRange;
+  }
+
+  return null;
+};
+
+export const computeQueryBComparator = (
+  adhocFilters: AdhocFilter[],
+  timeComparison: string,
+  extraFormData: any,
+  join = ':',
+) => {
+  const timeRange = getTimeRange(adhocFilters, extraFormData);
+
+  let testSince = null;
+  let testUntil = null;
+
+  if (timeRange) {
     [testSince, testUntil] = getSinceUntil(timeRange);
   }
 
@@ -244,3 +257,21 @@
 
   return null;
 };
+
+export const formatCustomComparator = (
+  adhocFilters: AdhocFilter[],
+  extraFormData: any,
+): string => {
+  const timeRange = getTimeRange(adhocFilters, extraFormData);
+
+  if (timeRange) {
+    const [start, end] = timeRange.split(' : ').map(dateStr => {
+      const formattedDate = moment(dateStr).format('YYYY-MM-DDTHH:mm:ss');
+      return formattedDate.replace(/Z/g, '');
+    });
+
+    return `${start} - ${end}`;
+  }
+
+  return '';
+};