feat(plugins): add color options for big number with time comparison (#…

…27524)
apache · Mar 16, 2024 · ae29427 · ae29427
1 parent ad9024b
commit ae29427
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 13 deletions.
diff --git a/...-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx b/...-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/...tend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/controlPanel.ts b/...tend/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/...nd/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts b/...nd/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/...et-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/types.ts b/...et-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',
+}