mirror of https://github.com/apache/superset.git
feat(plugins): add color options for big number with time comparison (#27524)
This commit is contained in:
parent
ad9024b040
commit
ae294274c7
|
@ -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(
|
||||
() => [
|
||||
|
|
|
@ -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.',
|
||||
),
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
],
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -61,4 +61,10 @@ export type PopKPIProps = PopKPIStylesProps &
|
|||
compType: string;
|
||||
percentDifferenceNumber: number;
|
||||
comparatorText: string;
|
||||
comparisonColorScheme?: string;
|
||||
};
|
||||
|
||||
export enum ColorSchemeEnum {
|
||||
Green = 'Green',
|
||||
Red = 'Red',
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue