You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ar...@apache.org on 2024/02/14 09:56:19 UTC
(superset) branch master updated: feat(plugins): Tooltips on BigNumber with Time Comparison chart (#27092)
This is an automated email from the ASF dual-hosted git repository.
arivero pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 13f1642c73 feat(plugins): Tooltips on BigNumber with Time Comparison chart (#27092)
13f1642c73 is described below
commit 13f1642c73920792c3c5671ec295cc859aa0856f
Author: Antonio Rivero <38...@users.noreply.github.com>
AuthorDate: Wed Feb 14 10:56:12 2024 +0100
feat(plugins): Tooltips on BigNumber with Time Comparison chart (#27092)
---
.../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 223f2caf17..4e00929119 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 85156ae951..15d20707c1 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<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>
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 e5de882f6d..2199984d0a 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 a239a29593..13a5d67092 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 4ce2ff1e4c..eda69c2bb2 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 '';
+};