From fde7bd80bc88d2944b11a0a7e24387ba99ddea50 Mon Sep 17 00:00:00 2001 From: Antonio Rivero Date: Mon, 12 Feb 2024 21:54:37 +0100 Subject: [PATCH] BigNumber with Time Comparison: - Adding Tooltip to values in our chart - Add utils function that returns the comparison period - Export Tooltip component so we can use it in the chart --- .../superset-ui-chart-controls/src/index.ts | 1 + .../src/PopKPI.tsx | 46 +++++++++++++------ .../src/plugin/transformProps.ts | 14 ++++++ .../src/types.ts | 1 + .../src/utils.ts | 45 +++++++++++++++--- 5 files changed, 87 insertions(+), 20 deletions(-) diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts b/superset-frontend/packages/superset-ui-chart-controls/src/index.ts index 223f2caf170e4..4e00929119701 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts +++ b/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'; diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/PopKPI.tsx b/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/PopKPI.tsx index 85156ae951608..15d20707c1189 100644 --- a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/PopKPI.tsx +++ b/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(); @@ -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) => ( - 0 ? backgroundColor : defaultBackgroundColor - } - textColor={index > 0 ? textColor : defaultTextColor} + - {symbol_with_value[0]} - - {symbol_with_value[1]} + 0 ? backgroundColor : defaultBackgroundColor + } + textColor={index > 0 ? textColor : defaultTextColor} + > + {symbol_with_value.symbol} + + {symbol_with_value.value} + ))} diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/transformProps.ts b/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/transformProps.ts index e5de882f6d146..2199984d0a4b4 100644 --- a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/transformProps.ts +++ b/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, }; } diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/types.ts b/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/types.ts index a239a295935fa..13a5d67092261 100644 --- a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/types.ts +++ b/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; }; diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/utils.ts b/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/utils.ts index 4ce2ff1e4c28c..eda69c2bb2fcf 100644 --- a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/utils.ts +++ b/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/utils.ts @@ -198,12 +198,10 @@ const calculatePrev = ( 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 @@ export const computeQueryBComparator = ( const timeFilter = timeFilterIndex !== -1 ? adhocFilters[timeFilterIndex] : null; - let testSince = null; - let testUntil = null; - if ( timeFilter && 'comparator' in timeFilter && @@ -224,6 +219,24 @@ export const computeQueryBComparator = ( 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 @@ export const computeQueryBComparator = ( 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 ''; +};