pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-19 12:09:42 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(chart & table): make to allow highlight in case of numeric column (#19938)

Browse Source 
* fix(chart & table): make to allow highlight in case of numeric column

* fix(chart & table): make to use emitFilter directly

* fix(chart & table): make to use styled component instead of inline style
This commit is contained in:
smileydev 2022-05-04 16:20:57 -04:00 committed by GitHub
parent 060b5c0e17
commit 902ac05372
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
View File

@ -33,6 +33,7 @@ import {
ensureIsArray, ensureIsArray,
GenericDataType, GenericDataType,
getTimeFormatterForGranularity, getTimeFormatterForGranularity,
styled,
t, t,
tn, tn,
} from '@superset-ui/core'; } from '@superset-ui/core';
@ -317,7 +318,6 @@ export default function TableChart<D extends DataRecord = DataRecord>(
const getColumnConfigs = useCallback( const getColumnConfigs = useCallback(
(column: DataColumnMeta, i: number): ColumnWithLooseAccessor<D> => { (column: DataColumnMeta, i: number): ColumnWithLooseAccessor<D> => {
const { key, label, isNumeric, dataType, isMetric, config = {} } = column; const { key, label, isNumeric, dataType, isMetric, config = {} } = column;
const isFilter = !isNumeric && emitFilter;
const columnWidth = Number.isNaN(Number(config.columnWidth)) const columnWidth = Number.isNaN(Number(config.columnWidth))
? config.columnWidth ? config.columnWidth
: Number(config.columnWidth); : Number(config.columnWidth);
@ -348,7 +348,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
getValueRange(key, alignPositiveNegative); getValueRange(key, alignPositiveNegative);
let className = ''; let className = '';
if (isFilter) { if (emitFilter) {
className += ' dt-is-filter'; className += ' dt-is-filter';
} }
@ -376,6 +376,19 @@ export default function TableChart<D extends DataRecord = DataRecord>(
}); });
} }
const StyledCell = styled.td`
text-align: ${sharedStyle.textAlign};
background: ${backgroundColor ||
(valueRange
? cellBar({
value: value as number,
valueRange,
alignPositiveNegative,
colorPositiveNegative,
})
: undefined)};
`;
const cellProps = { const cellProps = {
// show raw number in title in case of numeric values // show raw number in title in case of numeric values
title: typeof value === 'number' ? String(value) : undefined, title: typeof value === 'number' ? String(value) : undefined,
@ -388,27 +401,14 @@ export default function TableChart<D extends DataRecord = DataRecord>(
value == null ? 'dt-is-null' : '', value == null ? 'dt-is-null' : '',
isActiveFilterValue(key, value) ? ' dt-is-active-filter' : '', isActiveFilterValue(key, value) ? ' dt-is-active-filter' : '',
].join(' '), ].join(' '),
style: {
...sharedStyle,
background:
backgroundColor ||
(valueRange
? cellBar({
value: value as number,
valueRange,
alignPositiveNegative,
colorPositiveNegative,
})
: undefined),
},
}; };
if (html) { if (html) {
// eslint-disable-next-line react/no-danger // eslint-disable-next-line react/no-danger
return <td {...cellProps} dangerouslySetInnerHTML={html} />; return <StyledCell {...cellProps} dangerouslySetInnerHTML={html} />;
} }
// If cellProps renderes textContent already, then we don't have to // If cellProps renderes textContent already, then we don't have to
// render `Cell`. This saves some time for large tables. // render `Cell`. This saves some time for large tables.
return <td {...cellProps}>{text}</td>; return <StyledCell {...cellProps}>{text}</StyledCell>;
}, },
Header: ({ column: col, onClick, style }) => ( Header: ({ column: col, onClick, style }) => (
<th <th