Skip to content

feat(dashboard): implement boolean conditional formatting #36338

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

Merged
rusackas merged 11 commits into from
Dec 4, 2025
Merged

feat(dashboard): implement boolean conditional formatting #36338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fc9e5d8
feat(dashboard): create types and comparator function logic for boole…
edison-lhk Nov 15, 2025
390330d
feat(dashboard): add support for boolean conditional formatting in co…
edison-lhk Nov 16, 2025
dd82765
fix(dashboard): fix boolean conditional formatting types in getColorF…
edison-lhk Nov 27, 2025
cd3167e
test(dashboard): add unit testing for boolean conditional formatting …
edison-lhk Nov 27, 2025
44846b9
feat(dashboard): apply boolean conditional formatting to dashboard
Morilili Nov 28, 2025
28ebb62
fix(dashboard): fix linting issue in FormattingPopoverContent
edison-lhk Nov 28, 2025
695fb15
fix(dashboard): fix getColorFormatters type and logic
edison-lhk Nov 28, 2025
8170736
fix(dashboard): make isNull comparator function works in the UI
edison-lhk Nov 28, 2025
a79f8bf
test(dashboard): add unit tests for boolean conditional formatting in…
Morilili Nov 30, 2025
8fb4ca3
fix(dashboard): simplify design on choosing columnType in FormattingP…
Morilili Dec 1, 2025
e2e0599
fix(dashboard): fix conditional formatting panel boolean operator men…
edison-lhk Dec 2, 2025
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
8 changes: 7 additions & 1 deletion superset-frontend/packages/superset-ui-chart-controls/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -462,6 +462,10 @@ export enum Comparator {
EndsWith = 'ends with',
Containing = 'containing',
NotContaining = 'not containing',
IsTrue = 'is true',
IsFalse = 'is false',
IsNull = 'is null',
IsNotNull = 'is not null',
}

export const MultipleValueComparators = [
Expand All @@ -486,7 +490,9 @@ export type ColorFormatters = {
column: string;
toAllRow?: boolean;
toTextColor?: boolean;
getColorFromValue: (value: number | string) => string | undefined;
getColorFromValue: (
value: number | string | boolean | null,
) => string | undefined;
}[];

export default {};
Expand Down
39 changes: 34 additions & 5 deletions superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const MIN_OPACITY_BOUNDED = 0.05;
const MIN_OPACITY_UNBOUNDED = 0;
const MAX_OPACITY = 1;
export const getOpacity = (
value: number | string,
value: number | string | boolean | null,
cutoffPoint: number | string,
extremeValue: number | string,
minOpacity = MIN_OPACITY_BOUNDED,
Expand Down Expand Up @@ -70,15 +70,15 @@ export const getColorFunction = (
targetValueRight,
colorScheme,
}: ConditionalFormattingConfig,
columnValues: number[] | string[],
columnValues: number[] | string[] | (boolean | null)[],
alpha?: boolean,
) => {
let minOpacity = MIN_OPACITY_BOUNDED;
const maxOpacity = MAX_OPACITY;

let comparatorFunction: (
value: number | string,
allValues: number[] | string[],
value: number | string | boolean | null,
allValues: number[] | string[] | (boolean | null)[],
) => false | { cutoffValue: number | string; extremeValue: number | string };
if (operator === undefined || colorScheme === undefined) {
return () => undefined;
Expand Down Expand Up @@ -221,13 +221,38 @@ export const getColorFunction = (
!value?.toLowerCase().includes((targetValue as string).toLowerCase())
? { cutoffValue: targetValue!, extremeValue: targetValue! }
: false;

break;
case Comparator.IsTrue:
comparatorFunction = (value: boolean | null) =>
isBoolean(value) && value
? { cutoffValue: targetValue!, extremeValue: targetValue! }
: false;
break;
case Comparator.IsFalse:
comparatorFunction = (value: boolean | null) =>
isBoolean(value) && !value
? { cutoffValue: targetValue!, extremeValue: targetValue! }
: false;
break;
case Comparator.IsNull:
comparatorFunction = (value: boolean | null) =>
value === null
? { cutoffValue: targetValue!, extremeValue: targetValue! }
: false;
break;
case Comparator.IsNotNull:
comparatorFunction = (value: boolean | null) =>
isBoolean(value) && value !== null
? { cutoffValue: targetValue!, extremeValue: targetValue! }
: false;
break;
default:
comparatorFunction = () => false;
break;
}

return (value: number | string) => {
return (value: number | string | boolean | null) => {
const compareResult = comparatorFunction(value, columnValues);
if (compareResult === false) return undefined;
const { cutoffValue, extremeValue } = compareResult;
Expand Down Expand Up @@ -289,3 +314,7 @@ export const getColorFormatters = memoizeOne(
function isString(value: unknown) {
return typeof value === 'string';
}

function isBoolean(value: unknown) {
return typeof value === 'boolean';
}
107 changes: 107 additions & 0 deletions superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@ const countValues = mockData.map(row => row.count);
const strData = [{ name: 'Brian' }, { name: 'Carlos' }, { name: 'Diana' }];
const strValues = strData.map(row => row.name);

const boolData = [{ isMember: true }, { isMember: false }, { isMember: null }];
const boolValues = boolData.map(row => row.isMember);

test('round', () => {
expect(round(1)).toEqual(1);
expect(round(1, 2)).toEqual(1);
Expand Down Expand Up @@ -443,6 +446,66 @@ test('getColorFunction None', () => {
expect(colorFunction('Brian')).toEqual('#FF0000FF');
});

test('getColorFunction IsTrue', () => {
const colorFunction = getColorFunction(
{
operator: Comparator.IsTrue,
targetValue: '',
colorScheme: '#FF0000',
column: 'isMember',
},
boolValues,
);
expect(colorFunction(true)).toEqual('#FF0000FF');
expect(colorFunction(false)).toBeUndefined();
expect(colorFunction(null)).toBeUndefined();
});

test('getColorFunction IsFalse', () => {
const colorFunction = getColorFunction(
{
operator: Comparator.IsFalse,
targetValue: '',
colorScheme: '#FF0000',
column: 'isMember',
},
boolValues,
);
expect(colorFunction(true)).toBeUndefined();
expect(colorFunction(false)).toEqual('#FF0000FF');
expect(colorFunction(null)).toBeUndefined();
});

test('getColorFunction IsNull', () => {
const colorFunction = getColorFunction(
{
operator: Comparator.IsNull,
targetValue: '',
colorScheme: '#FF0000',
column: 'isMember',
},
boolValues,
);
expect(colorFunction(true)).toBeUndefined();
expect(colorFunction(false)).toBeUndefined();
expect(colorFunction(null)).toEqual('#FF0000FF');
});

test('getColorFunction IsNotNull', () => {
const colorFunction = getColorFunction(
{
operator: Comparator.IsNotNull,
targetValue: '',
colorScheme: '#FF0000',
column: 'isMember',
},
boolValues,
);
expect(colorFunction(true)).toEqual('#FF0000FF');
expect(colorFunction(false)).toEqual('#FF0000FF');
expect(colorFunction(null)).toBeUndefined();
});

test('correct column config', () => {
const columnConfig = [
{
Expand Down Expand Up @@ -532,3 +595,47 @@ test('correct column string config', () => {
expect(colorFormatters[3].column).toEqual('name');
expect(colorFormatters[3].getColorFromValue('Carlos')).toEqual('#FF0000FF');
});

test('correct column boolean config', () => {
const columnConfigBoolean = [
{
operator: Comparator.IsTrue,
targetValue: '',
colorScheme: '#FF0000',
column: 'isMember',
},
{
operator: Comparator.IsFalse,
targetValue: '',
colorScheme: '#FF0000',
column: 'isMember',
},
{
operator: Comparator.IsNull,
targetValue: '',
colorScheme: '#FF0000',
column: 'isMember',
},
{
operator: Comparator.IsNotNull,
targetValue: '',
colorScheme: '#FF0000',
column: 'isMember',
},
];
const colorFormatters = getColorFormatters(columnConfigBoolean, boolData);
expect(colorFormatters.length).toEqual(4);

expect(colorFormatters[0].column).toEqual('isMember');
expect(colorFormatters[0].getColorFromValue(true)).toEqual('#FF0000FF');

expect(colorFormatters[1].column).toEqual('isMember');
expect(colorFormatters[1].getColorFromValue(false)).toEqual('#FF0000FF');

expect(colorFormatters[2].column).toEqual('isMember');
expect(colorFormatters[2].getColorFromValue(null)).toEqual('#FF0000FF');

expect(colorFormatters[3].column).toEqual('isMember');
expect(colorFormatters[3].getColorFromValue(true)).toEqual('#FF0000FF');
expect(colorFormatters[3].getColorFromValue(false)).toEqual('#FF0000FF');
});
4 changes: 0 additions & 4 deletions superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -907,10 +907,6 @@ export default function TableChart<D extends DataRecord = DataRecord>(
formatter: ColorFormatters[number],
valueToFormat: any,
) => {
const hasValue =
valueToFormat !== undefined && valueToFormat !== null;
if (!hasValue) return;

const formatterResult =
formatter.getColorFromValue(valueToFormat);
if (!formatterResult) return;
Expand Down
3 changes: 2 additions & 1 deletion 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 @@ -797,7 +797,8 @@ const config: ControlPanelConfig = {
if (
coltypes[index] === GenericDataType.Numeric ||
(!explore?.controls?.time_compare?.value &&
coltypes[index] === GenericDataType.String)
(coltypes[index] === GenericDataType.String ||
coltypes[index] === GenericDataType.Boolean))
) {
acc.push({
value: colname,
Expand Down
126 changes: 125 additions & 1 deletion superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -613,7 +613,9 @@ describe('plugin-chart-table', () => {
expect(getComputedStyle(screen.getByTitle('2467063')).background).toBe(
'',
);
expect(getComputedStyle(screen.getByText('N/A')).background).toBe('');
expect(getComputedStyle(screen.getByText('N/A')).background).toBe(
'rgba(172, 225, 196, 1)',
);
});
test('should display original label in grouped headers', () => {
const props = transformProps(testData.comparison);
Expand Down Expand Up @@ -986,6 +988,128 @@ describe('plugin-chart-table', () => {
);
});

test('render color with boolean column color formatter (operator is true)', () => {
render(
ProviderWrapper({
children: (
<TableChart
{...transformProps({
...testData.nameAndBoolean,
rawFormData: {
...testData.nameAndBoolean.rawFormData,
conditional_formatting: [
{
colorScheme: '#ACE1C4',
column: 'is_adult',
operator: 'is true',
targetValue: '',
},
],
},
})}
/>
),
}),
);
expect(getComputedStyle(screen.getByText('true')).background).toBe(
'rgba(172, 225, 196, 1)',
);
expect(getComputedStyle(screen.getByText('false')).background).toBe('');
});

test('render color with boolean column color formatter (operator is false)', () => {
render(
ProviderWrapper({
children: (
<TableChart
{...transformProps({
...testData.nameAndBoolean,
rawFormData: {
...testData.nameAndBoolean.rawFormData,
conditional_formatting: [
{
colorScheme: '#ACE1C4',
column: 'is_adult',
operator: 'is false',
targetValue: '',
},
],
},
})}
/>
),
}),
);
expect(getComputedStyle(screen.getByText('false')).background).toBe(
'rgba(172, 225, 196, 1)',
);
expect(getComputedStyle(screen.getByText('true')).background).toBe('');
});

test('render color with boolean column color formatter (operator is null)', () => {
render(
ProviderWrapper({
children: (
<TableChart
{...transformProps({
...testData.nameAndBoolean,
rawFormData: {
...testData.nameAndBoolean.rawFormData,
conditional_formatting: [
{
colorScheme: '#ACE1C4',
column: 'is_adult',
operator: 'is null',
targetValue: '',
},
],
},
})}
/>
),
}),
);
expect(getComputedStyle(screen.getByText('N/A')).background).toBe(
'rgba(172, 225, 196, 1)',
);
expect(getComputedStyle(screen.getByText('true')).background).toBe('');
expect(getComputedStyle(screen.getByText('false')).background).toBe('');
});

test('render color with boolean column color formatter (operator is not null)', () => {
render(
ProviderWrapper({
children: (
<TableChart
{...transformProps({
...testData.nameAndBoolean,
rawFormData: {
...testData.nameAndBoolean.rawFormData,
conditional_formatting: [
{
colorScheme: '#ACE1C4',
column: 'is_adult',
operator: 'is not null',
targetValue: '',
},
],
},
})}
/>
),
}),
);
const trueElements = screen.getAllByText('true');
const falseElements = screen.getAllByText('false');
expect(getComputedStyle(trueElements[0]).background).toBe(
'rgba(172, 225, 196, 1)',
);
expect(getComputedStyle(falseElements[0]).background).toBe(
'rgba(172, 225, 196, 1)',
);
expect(getComputedStyle(screen.getByText('N/A')).background).toBe('');
});

test('render color with column color formatter to entire row', () => {
render(
ProviderWrapper({
Expand Down
Loading
Loading