mirror of
https://github.com/apache/superset.git
synced 2024-09-16 02:29:39 -04:00
fix(table-chart): don't color empty cells in table chart with color formatters (#21501)
This commit is contained in:
parent
93f08e778b
commit
60bab4269f
@ -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": "*",
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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('');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user