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/14 23:02:41 UTC
(superset) branch big-number-color created (now 6d5c2be620)
This is an automated email from the ASF dual-hosted git repository.
lilykuang pushed a change to branch big-number-color
in repository https://gitbox.apache.org/repos/asf/superset.git
at 6d5c2be620 feat(plugins): add color options for big number with time comparison
This branch includes the following new commits:
new 6d5c2be620 feat(plugins): add color options for big number with time comparison
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(superset) 01/01: feat(plugins): add color options for big number with time comparison
Posted by li...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
lilykuang pushed a commit to branch big-number-color
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 6d5c2be620e0e78cdaea4cb33e2bbaf9d713b50f
Author: lilykuang <ji...@gmail.com>
AuthorDate: Thu Mar 14 15:48:24 2024 -0700
feat(plugins): add color options for big number with time comparison
---
.../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..aac1c540c0 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',
+}