fix(table-chart): don't color empty cells in table chart with color formatters (#21501)

This commit is contained in:
Mayur 2022-09-28 13:46:12 +05:30 committed by GitHub
parent 93f08e778b
commit 60bab4269f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 80 additions and 4 deletions

View File

@ -37,6 +37,9 @@
"regenerator-runtime": "^0.13.7",
"xss": "^1.0.10"
},
"devDependencies": {
"@testing-library/react": "^11.2.0"
},
"peerDependencies": {
"@types/react": "*",
"@types/classnames": "*",

View File

@ -415,9 +415,9 @@ export default function TableChart<D extends DataRecord = DataRecord>(
columnColorFormatters!
.filter(formatter => formatter.column === column.key)
.forEach(formatter => {
const formatterResult = formatter.getColorFromValue(
value as number,
);
const formatterResult = value
? formatter.getColorFromValue(value as number)
: false;
if (formatterResult) {
backgroundColor = formatterResult;
}

View File

@ -18,11 +18,12 @@
*/
import React from 'react';
import { CommonWrapper } from 'enzyme';
import { render, screen } from '@testing-library/react';
import TableChart from '../src/TableChart';
import transformProps from '../src/transformProps';
import DateWithFormatter from '../src/utils/DateWithFormatter';
import testData from './testData';
import { mount } from './enzyme';
import { mount, ProviderWrapper } from './enzyme';
describe('plugin-chart-table', () => {
describe('transformProps', () => {
@ -105,5 +106,77 @@ describe('plugin-chart-table', () => {
tree = wrap.render();
expect(tree.text()).toContain('No records found');
});
it('render color with column color formatter', () => {
render(
ProviderWrapper({
children: (
<TableChart
{...transformProps({
...testData.advanced,
rawFormData: {
...testData.advanced.rawFormData,
conditional_formatting: [
{
colorScheme: '#ACE1C4',
column: 'sum__num',
operator: '>',
targetValue: 2467,
},
],
},
})}
/>
),
}),
);
expect(getComputedStyle(screen.getByTitle('2467063')).background).toBe(
'rgba(172, 225, 196, 1)',
);
expect(getComputedStyle(screen.getByTitle('2467')).background).toBe('');
});
it('render cell without color', () => {
const dataWithEmptyCell = testData.advanced.queriesData[0];
dataWithEmptyCell.data.push({
__timestamp: null,
name: 'Noah',
sum__num: null,
'%pct_nice': 0.643,
'abc.com': 'bazzinga',
});
render(
ProviderWrapper({
children: (
<TableChart
{...transformProps({
...testData.advanced,
queriesData: [dataWithEmptyCell],
rawFormData: {
...testData.advanced.rawFormData,
conditional_formatting: [
{
colorScheme: '#ACE1C4',
column: 'sum__num',
operator: '<',
targetValue: 12342,
},
],
},
})}
/>
),
}),
);
expect(getComputedStyle(screen.getByTitle('2467')).background).toBe(
'rgba(172, 225, 196, 0.812)',
);
expect(getComputedStyle(screen.getByTitle('2467063')).background).toBe(
'',
);
expect(getComputedStyle(screen.getByText('N/A')).background).toBe('');
});
});
});