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 <[email protected]> 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; };
