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/27 20:08:21 UTC
(superset) 01/01: multi select for conditional color formatter
This is an automated email from the ASF dual-hosted git repository.
lilykuang pushed a commit to branch table-time-color-conditional-formatter
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 07bcfc55f7b26a75a29135638fd3cd28064a33c6
Author: lilykuang <ji...@gmail.com>
AuthorDate: Mon Mar 25 09:41:14 2024 -0700
multi select for conditional color formatter
---
.../superset-ui-chart-controls/src/types.ts | 4 ++--
.../src/utils/getColorFormatters.ts | 23 ++++++++++++++--------
.../plugin-chart-table/src/transformProps.ts | 1 +
.../ConditionalFormattingControl.tsx | 8 +++++++-
.../FormattingPopover.tsx | 2 ++
.../FormattingPopoverContent.tsx | 8 +++++++-
.../controls/ConditionalFormattingControl/types.ts | 4 +++-
7 files changed, 37 insertions(+), 13 deletions(-)
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/types.ts b/superset-frontend/packages/superset-ui-chart-controls/src/types.ts
index 3d149b1299..3243f22c60 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/types.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/types.ts
@@ -446,7 +446,7 @@ export type ConditionalFormattingConfig = {
targetValue?: number;
targetValueLeft?: number;
targetValueRight?: number;
- column?: string;
+ column?: string | string[];
colorScheme?: string;
};
@@ -519,7 +519,7 @@ export type ControlFormItemSpec<T extends ControlType = ControlType> = {
? {
allowNewOptions?: boolean;
options: any;
- value?: string;
+ value?: string | string[];
defaultValue?: string;
creatable?: boolean;
minWidth?: number | string;
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts b/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
index 4e5e89fe41..3b493281b3 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
@@ -195,8 +195,13 @@ export const getColorFormatters = memoizeOne(
) =>
columnConfig?.reduce(
(acc: ColorFormatters, config: ConditionalFormattingConfig) => {
+ const columns = Array.isArray(config?.column)
+ ? config?.column
+ : config?.column
+ ? [config?.column]
+ : undefined;
if (
- config?.column !== undefined &&
+ columns !== undefined &&
(config?.operator === Comparator.None ||
(config?.operator !== undefined &&
(MultipleValueComparators.includes(config?.operator)
@@ -204,13 +209,15 @@ export const getColorFormatters = memoizeOne(
config?.targetValueRight !== undefined
: config?.targetValue !== undefined)))
) {
- acc.push({
- column: config?.column,
- getColorFromValue: getColorFunction(
- config,
- data.map(row => row[config.column!] as number),
- alpha,
- ),
+ columns.forEach((column: string) => {
+ acc.push({
+ column,
+ getColorFromValue: getColorFunction(
+ config,
+ data.map(row => row[column!] as number),
+ alpha,
+ ),
+ });
});
}
return acc;
diff --git a/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts b/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts
index 3edec0c9ef..5915c8ecb6 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts
@@ -483,6 +483,7 @@ const transformProps = (
const basicColorFormatters =
comparisonColorEnabled && getBasicColorFormatter(baseQuery?.data, columns);
+
const columnColorFormatters =
getColorFormatters(conditionalFormatting, passedData) ??
defaultColorFormatters;
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
index 6c4ae9f412..5c35d652bf 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
@@ -71,6 +71,7 @@ const ConditionalFormattingControl = ({
columnOptions,
verboseMap,
removeIrrelevantConditions,
+ multi = false,
...props
}: ConditionalFormattingControlProps) => {
const theme = useTheme();
@@ -121,7 +122,10 @@ const ConditionalFormattingControl = ({
targetValueLeft,
targetValueRight,
}: ConditionalFormattingConfig) => {
- const columnName = (column && verboseMap?.[column]) ?? column;
+ const cols = Array.isArray(column) ? column : [column];
+ const columnName = cols
+ .map(col => (col && verboseMap?.[col]) ?? col)
+ .join(', ');
switch (operator) {
case Comparator.None:
return `${columnName}`;
@@ -154,6 +158,7 @@ const ConditionalFormattingControl = ({
onChange={(newConfig: ConditionalFormattingConfig) =>
onEdit(newConfig, index)
}
+ multi={multi}
destroyTooltipOnHide
>
<OptionControlContainer withCaret>
@@ -170,6 +175,7 @@ const ConditionalFormattingControl = ({
columns={columnOptions}
onChange={onSave}
destroyTooltipOnHide
+ multi={multi}
>
<AddControlLabel>
<Icons.PlusSmall iconColor={theme.colors.grayscale.light1} />
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopover.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopover.tsx
index c44ca76235..87dddc43d0 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopover.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopover.tsx
@@ -27,6 +27,7 @@ export const FormattingPopover = ({
onChange,
config,
children,
+ multi = false,
...props
}: FormattingPopoverProps) => {
const [visible, setVisible] = useState(false);
@@ -47,6 +48,7 @@ export const FormattingPopover = ({
onChange={handleSave}
config={config}
columns={columns}
+ multi={multi}
/>
}
visible={visible}
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
index 533e185475..86b1e56330 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
@@ -186,10 +186,12 @@ export const FormattingPopoverContent = ({
config,
onChange,
columns = [],
+ multi = false,
}: {
config?: ConditionalFormattingConfig;
onChange: (config: ConditionalFormattingConfig) => void;
columns: { label: string; value: string }[];
+ multi?: boolean;
}) => {
const theme = useTheme();
const colorScheme = colorSchemeOptions(theme);
@@ -208,7 +210,11 @@ export const FormattingPopoverContent = ({
rules={rulesRequired}
initialValue={columns[0]?.value}
>
- <Select ariaLabel={t('Select column')} options={columns} />
+ <Select
+ mode={multi ? 'multiple' : undefined}
+ ariaLabel={t('Select column')}
+ options={columns}
+ />
</FormItem>
</Col>
<Col span={12}>
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/types.ts b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/types.ts
index 4edadf99b4..44d7fbd602 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/types.ts
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/types.ts
@@ -26,7 +26,7 @@ export type ConditionalFormattingConfig = {
targetValue?: number;
targetValueLeft?: number;
targetValueRight?: number;
- column?: string;
+ column?: string | string[];
colorScheme?: string;
};
@@ -38,6 +38,7 @@ export type ConditionalFormattingControlProps = ControlComponentProps<
verboseMap: Record<string, string>;
label: string;
description: string;
+ multi?: boolean;
};
export type FormattingPopoverProps = PopoverProps & {
@@ -46,4 +47,5 @@ export type FormattingPopoverProps = PopoverProps & {
config?: ConditionalFormattingConfig;
title: string;
children: ReactNode;
+ multi?: boolean;
};