Skip to content

feat(table): add conditional formatting support for categorical columns #37756

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sharmavikas18 wants to merge 3 commits into
base: master
Choose a base branch
from
+76 −77
Open

feat(table): add conditional formatting support for categorical columns #37756

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a9233f4
feat(table): add conditional formatting support for categorical columns
vikas-sharma123 Feb 6, 2026
ddfb33b
refactor(plugin-chart-table): rename numericColumns to eligibleColumn…
vikas-sharma123 Feb 8, 2026
14251b9
Merge branch 'apache:master' into fix/conditional-formatting-categorical
sharmavikas18 Feb 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 37 additions & 36 deletions superset-frontend/plugins/plugin-chart-ag-grid-table/src/controlPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,8 +174,8 @@ const percentMetricsControl: typeof sharedControls.metrics = {
label: t('Percentage metrics'),
description: t(
'Select one or many metrics to display, that will be displayed in the percentages of total. ' +
'Percentage metrics will be calculated only from data within the row limit. ' +
'You can use an aggregation function on a column or write custom SQL to create a percentage metric.',
'Percentage metrics will be calculated only from data within the row limit. ' +
'You can use an aggregation function on a column or write custom SQL to create a percentage metric.',
),
visibility: isAggMode,
resetOnHide: false,
Expand Down Expand Up @@ -285,8 +285,8 @@ const config: ControlPanelConfig = {
) => ({
columns: datasource?.columns[0]?.hasOwnProperty('filterable')
? (datasource as Dataset)?.columns?.filter(
(c: ColumnMeta) => c.filterable,
)
(c: ColumnMeta) => c.filterable,
)
: datasource?.columns,
savedMetrics: defineSavedMetrics(datasource),
// current active adhoc metrics
Expand Down Expand Up @@ -649,8 +649,8 @@ const config: ControlPanelConfig = {
default: false,
description: t(
'This will be applied to the whole table. Arrows (↑ and ↓) will be added to ' +
'main columns for increase and decrease. Basic conditional formatting can be ' +
'overwritten by conditional formatting below.',
'main columns for increase and decrease. Basic conditional formatting can be ' +
'overwritten by conditional formatting below.',
),
},
},
Expand All @@ -672,7 +672,7 @@ const config: ControlPanelConfig = {
Boolean(controls?.comparison_color_enabled?.value),
description: t(
'Adds color to the chart symbols based on the positive or ' +
'negative change from the comparison value.',
'negative change from the comparison value.',
),
},
},
Expand All @@ -684,9 +684,7 @@ const config: ControlPanelConfig = {
type: 'ConditionalFormattingControl',
renderTrigger: true,
label: t('Custom conditional formatting'),
description: t(
'Apply conditional color formatting to numeric columns',
),
description: t('Apply conditional color formatting to columns'),
shouldMapStateToProps() {
return true;
},
Expand All @@ -701,42 +699,45 @@ const config: ControlPanelConfig = {

const extraColorChoices = hasTimeComparison
? [
{
value: ColorSchemeEnum.Green,
label: t('Green for increase, red for decrease'),
},
{
value: ColorSchemeEnum.Red,
label: t('Red for increase, green for decrease'),
},
]
{
value: ColorSchemeEnum.Green,
label: t('Green for increase, red for decrease'),
},
{
value: ColorSchemeEnum.Red,
label: t('Red for increase, green for decrease'),
},
]
: [];

const chartStatus = chart?.chartStatus;
const { colnames, coltypes } =
chart?.queriesResponse?.[0] ?? {};
const numericColumns =
const eligibleColumns =
Array.isArray(colnames) && Array.isArray(coltypes)
? colnames
.filter(
(colname: string, index: number) =>
coltypes[index] === GenericDataType.Numeric,
)
.map((colname: string) => ({
value: colname,
label: Array.isArray(verboseMap)
? colname
: (verboseMap[colname] ?? colname),
dataType:
colnames && coltypes[colnames?.indexOf(colname)],
}))
.filter(
(colname: string, index: number) =>
coltypes[index] === GenericDataType.Numeric ||
(!hasTimeComparison &&
(coltypes[index] === GenericDataType.String ||
coltypes[index] === GenericDataType.Boolean)),
)
.map((colname: string) => ({
value: colname,
label: Array.isArray(verboseMap)
? colname
: (verboseMap[colname] ?? colname),
dataType:
colnames && coltypes[colnames?.indexOf(colname)],
}))
: [];
const columnOptions = hasTimeComparison
? processComparisonColumns(
numericColumns || [],
ensureIsArray(timeCompareValue)[0]?.toString() || '',
)
: numericColumns;
eligibleColumns || [],
ensureIsArray(timeCompareValue)[0]?.toString() || '',
)
: eligibleColumns;

return {
removeIrrelevantConditions: chartStatus === 'success',
Expand Down
80 changes: 39 additions & 41 deletions superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,8 +132,8 @@ const percentMetricsControl: typeof sharedControls.metrics = {
label: t('Percentage metrics'),
description: t(
'Select one or many metrics to display, that will be displayed in the percentages of total. ' +
'Percentage metrics will be calculated only from data within the row limit. ' +
'You can use an aggregation function on a column or write custom SQL to create a percentage metric.',
'Percentage metrics will be calculated only from data within the row limit. ' +
'You can use an aggregation function on a column or write custom SQL to create a percentage metric.',
),
visibility: isAggMode,
resetOnHide: false,
Expand Down Expand Up @@ -175,7 +175,7 @@ const percentMetricCalculationControl: ControlConfig<'SelectControl'> = {
label: t('Percentage metric calculation'),
description: t(
'Row Limit: percentages are calculated based on the subset of data retrieved, respecting the row limit. ' +
'All Records: Percentages are calculated based on the total dataset, ignoring the row limit.',
'All Records: Percentages are calculated based on the total dataset, ignoring the row limit.',
),
default: 'row_limit',
clearable: false,
Expand Down Expand Up @@ -307,8 +307,8 @@ const config: ControlPanelConfig = {
) => ({
columns: datasource?.columns[0]?.hasOwnProperty('filterable')
? (datasource as Dataset)?.columns?.filter(
(c: ColumnMeta) => c.filterable,
)
(c: ColumnMeta) => c.filterable,
)
: datasource?.columns,
savedMetrics: defineSavedMetrics(datasource),
// current active adhoc metrics
Expand Down Expand Up @@ -709,8 +709,8 @@ const config: ControlPanelConfig = {
default: false,
description: t(
'This will be applied to the whole table. Arrows (↑ and ↓) will be added to ' +
'main columns for increase and decrease. Basic conditional formatting can be ' +
'overwritten by conditional formatting below.',
'main columns for increase and decrease. Basic conditional formatting can be ' +
'overwritten by conditional formatting below.',
),
},
},
Expand All @@ -732,7 +732,7 @@ const config: ControlPanelConfig = {
Boolean(controls?.comparison_color_enabled?.value),
description: t(
'Adds color to the chart symbols based on the positive or ' +
'negative change from the comparison value.',
'negative change from the comparison value.',
),
},
},
Expand All @@ -744,9 +744,7 @@ const config: ControlPanelConfig = {
type: 'ConditionalFormattingControl',
renderTrigger: true,
label: t('Custom conditional formatting'),
description: t(
'Apply conditional color formatting to numeric columns',
),
description: t('Apply conditional color formatting to columns'),
shouldMapStateToProps() {
return true;
},
Expand All @@ -761,15 +759,15 @@ const config: ControlPanelConfig = {

const extraColorChoices = hasTimeComparison
? [
{
value: ColorSchemeEnum.Green,
label: t('Green for increase, red for decrease'),
},
{
value: ColorSchemeEnum.Red,
label: t('Red for increase, green for decrease'),
},
]
{
value: ColorSchemeEnum.Green,
label: t('Green for increase, red for decrease'),
},
{
value: ColorSchemeEnum.Red,
label: t('Red for increase, green for decrease'),
},
]
: [];

const chartStatus = chart?.chartStatus;
Expand All @@ -795,32 +793,32 @@ const config: ControlPanelConfig = {
}
const { colnames, coltypes } =
chart?.queriesResponse?.[0] ?? {};
const numericColumns =
const eligibleColumns =
Array.isArray(colnames) && Array.isArray(coltypes)
? colnames.reduce((acc, colname, index) => {
if (
coltypes[index] === GenericDataType.Numeric ||
(!hasTimeComparison &&
Comment thread
sharmavikas18 marked this conversation as resolved.
(coltypes[index] === GenericDataType.String ||
coltypes[index] === GenericDataType.Boolean))
) {
acc.push({
value: colname,
label: Array.isArray(verboseMap)
? colname
: (verboseMap[colname] ?? colname),
dataType: coltypes[index],
});
}
return acc;
}, [])
if (
coltypes[index] === GenericDataType.Numeric ||
(!hasTimeComparison &&
(coltypes[index] === GenericDataType.String ||
coltypes[index] === GenericDataType.Boolean))
) {
acc.push({
value: colname,
label: Array.isArray(verboseMap)
? colname
: (verboseMap[colname] ?? colname),
dataType: coltypes[index],
});
}
return acc;
}, [])
: [];
const columnOptions = hasTimeComparison
? processComparisonColumns(
numericColumns || [],
ensureIsArray(timeCompareValue)[0]?.toString() || '',
)
: numericColumns;
eligibleColumns || [],
ensureIsArray(timeCompareValue)[0]?.toString() || '',
)
: eligibleColumns;

return {
removeIrrelevantConditions: chartStatus === 'success',
Expand Down
Loading