You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by li...@apache.org on 2024/03/16 00:40:53 UTC
(superset) branch master updated: feat(plugins): add color options for big number with time comparison (#27524)
This is an automated email from the ASF dual-hosted git repository.
lilykuang 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 ae294274c7 feat(plugins): add color options for big number with time comparison (#27524)
ae294274c7 is described below
commit ae294274c7da58826a309ab06356d097e98fbe0a
Author: Lily Kuang <li...@preset.io>
AuthorDate: Fri Mar 15 17:40:47 2024 -0700
feat(plugins): add color options for big number with time comparison (#27524)
---
.../BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx | 47 ++++++++++++++++------
.../BigNumberPeriodOverPeriod/controlPanel.ts | 22 ++++++++++
.../BigNumberPeriodOverPeriod/transformProps.ts | 2 +
.../BigNumber/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 4615341dfb..b0d9d912d7 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 6aa54e72d2..f6f81d98d7 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 d5c2254625..a17fb8edd0 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 13a5d67092..a2282febbb 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',
+}