QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-20 16:44:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Lily Kuang
2024-03-15 17:40:47 -07:00
committed by GitHub
parent ad9024b040
commit ae294274c7
4 changed files with 64 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx
View File

@@ -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(
() => [