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:20 UTC
(superset) branch table-time-color-conditional-formatter created (now 07bcfc55f7)
This is an automated email from the ASF dual-hosted git repository.
lilykuang pushed a change to branch table-time-color-conditional-formatter
in repository https://gitbox.apache.org/repos/asf/superset.git
at 07bcfc55f7 multi select for conditional color formatter
This branch includes the following new commits:
new 07bcfc55f7 multi select for conditional color formatter
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: multi select for conditional color formatter
Posted by li...@apache.org.
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;
};