feat(dashboard): implement boolean conditional formatting (#36338)

Co-authored-by: Morris <morrisho215215@gmail.com>
This commit is contained in:
Edison Liem
2025-12-04 12:53:49 -05:00
committed by GitHub
parent e5da6d3183
commit eabb5bdf7d
9 changed files with 372 additions and 21 deletions

View File

@@ -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);
@@ -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({

View File

@@ -370,6 +370,31 @@ const bigint = {
],
};
const nameAndBoolean: TableChartProps = {
...new ChartProps(basicChartProps),
queriesData: [
{
...basicQueryResult,
colnames: ['name', 'is_adult'],
coltypes: [GenericDataType.String, GenericDataType.Boolean],
data: [
{
name: 'Alice',
is_adult: true,
},
{
name: 'Bob',
is_adult: false,
},
{
name: 'Carl',
is_adult: null,
},
],
},
],
};
export default {
basic,
advanced,
@@ -379,4 +404,5 @@ export default {
empty,
raw,
bigint,
nameAndBoolean,
};