From ae294274c7da58826a309ab06356d097e98fbe0a Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Fri, 15 Mar 2024 17:40:47 -0700 Subject: [PATCH] feat(plugins): add color options for big number with time comparison (#27524) --- .../BigNumberPeriodOverPeriod/PopKPI.tsx | 47 ++++++++++++++----- .../BigNumberPeriodOverPeriod/controlPanel.ts | 22 +++++++++ .../transformProps.ts | 2 + .../BigNumberPeriodOverPeriod/types.ts | 6 +++ 4 files changed, 64 insertions(+), 13 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx index 4615341dfb3be..b0d9d912d79bf 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx @@ -20,6 +20,7 @@ import React, { useMemo } from 'react'; import { css, styled, t, useTheme } from '@superset-ui/core'; import { Tooltip } from '@superset-ui/chart-controls'; import { + ColorSchemeEnum, PopKPIComparisonSymbolStyleProps, PopKPIComparisonValueStyleProps, PopKPIProps, @@ -66,6 +67,7 @@ export default function PopKPI(props: PopKPIProps) { headerFontSize, subheaderFontSize, comparisonColorEnabled, + comparisonColorScheme, percentDifferenceNumber, comparatorText, } = props; @@ -90,8 +92,18 @@ export default function PopKPI(props: PopKPIProps) { `; const getArrowIndicatorColor = () => { - if (!comparisonColorEnabled) return theme.colors.grayscale.base; - return percentDifferenceNumber > 0 + if (!comparisonColorEnabled || percentDifferenceNumber === 0) { + return theme.colors.grayscale.base; + } + + if (percentDifferenceNumber > 0) { + // Positive difference + return comparisonColorScheme === ColorSchemeEnum.Green + ? theme.colors.success.base + : theme.colors.error.base; + } + // Negative difference + return comparisonColorScheme === ColorSchemeEnum.Red ? theme.colors.success.base : theme.colors.error.base; }; @@ -106,23 +118,32 @@ export default function PopKPI(props: PopKPIProps) { const { backgroundColor, textColor } = useMemo(() => { let bgColor = defaultBackgroundColor; let txtColor = defaultTextColor; - if (percentDifferenceNumber > 0) { - if (comparisonColorEnabled) { - bgColor = theme.colors.success.light2; - txtColor = theme.colors.success.base; - } - } else if (percentDifferenceNumber < 0) { - if (comparisonColorEnabled) { - bgColor = theme.colors.error.light2; - txtColor = theme.colors.error.base; - } + if (comparisonColorEnabled && percentDifferenceNumber !== 0) { + const useSuccess = + (percentDifferenceNumber > 0 && + comparisonColorScheme === ColorSchemeEnum.Green) || + (percentDifferenceNumber < 0 && + comparisonColorScheme === ColorSchemeEnum.Red); + + // Set background and text colors based on the conditions + bgColor = useSuccess + ? theme.colors.success.light2 + : theme.colors.error.light2; + txtColor = useSuccess + ? theme.colors.success.base + : theme.colors.error.base; } return { backgroundColor: bgColor, textColor: txtColor, }; - }, [theme, comparisonColorEnabled, percentDifferenceNumber]); + }, [ + theme, + comparisonColorScheme, + comparisonColorEnabled, + percentDifferenceNumber, + ]); const SYMBOLS_WITH_VALUES = useMemo( () => [ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/controlPanel.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/controlPanel.ts index 6aa54e72d282f..f6f81d98d75f3 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/controlPanel.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/controlPanel.ts @@ -32,6 +32,7 @@ import { sharedControls, } from '@superset-ui/chart-controls'; import { headerFontSize, subheaderFontSize } from '../sharedControls'; +import { ColorSchemeEnum } from './types'; const config: ControlPanelConfig = { controlPanelSections: [ @@ -156,6 +157,27 @@ const config: ControlPanelConfig = { }, }, ], + [ + { + name: 'comparison_color_scheme', + config: { + type: 'SelectControl', + label: t('color scheme for comparison'), + default: ColorSchemeEnum.Green, + renderTrigger: true, + choices: [ + [ColorSchemeEnum.Green, 'Green for increase, red for decrease'], + [ColorSchemeEnum.Red, 'Red for increase, green for decrease'], + ], + visibility: ({ controls }) => + controls?.comparison_color_enabled?.value === true, + description: t( + 'Adds color to the chart symbols based on the positive or ' + + 'negative change from the comparison value.', + ), + }, + }, + ], ], }, ], diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts index d5c22546252c7..a17fb8edd08fd 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts @@ -82,6 +82,7 @@ export default function transformProps(chartProps: ChartProps) { yAxisFormat, currencyFormat, subheaderFontSize, + comparisonColorScheme, comparisonColorEnabled, percentDifferenceFormat, } = formData; @@ -152,6 +153,7 @@ export default function transformProps(chartProps: ChartProps) { headerText, compType, comparisonColorEnabled, + comparisonColorScheme, percentDifferenceNumber: percentDifferenceNum, comparatorText, }; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/types.ts index 13a5d67092261..a2282febbb1c5 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/types.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/types.ts @@ -61,4 +61,10 @@ export type PopKPIProps = PopKPIStylesProps & compType: string; percentDifferenceNumber: number; comparatorText: string; + comparisonColorScheme?: string; }; + +export enum ColorSchemeEnum { + Green = 'Green', + Red = 'Red', +}