feat: conditional formatting improvements add flag toAllRow and toTextColor in tables (#34762)

This commit is contained in:
SBIN2010
2025-10-29 02:40:40 +03:00
committed by GitHub
parent 5c57c9c0b2
commit 514d56d1ae
10 changed files with 301 additions and 15 deletions

View File

@@ -70,6 +70,7 @@ import {
TableOutlined,
} from '@ant-design/icons';
import { isEmpty, debounce, isEqual } from 'lodash';
import { ColorFormatters } from '@superset-ui/chart-controls';
import {
ColorSchemeEnum,
DataColumnMeta,
@@ -855,6 +856,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
const html = isHtml && allowRenderHtml ? { __html: text } : undefined;
let backgroundColor;
let color;
let arrow = '';
const originKey = column.key.substring(column.label.length).trim();
if (!hasColumnColorFormatters && hasBasicColorFormatters) {
@@ -867,17 +869,33 @@ export default function TableChart<D extends DataRecord = DataRecord>(
}
if (hasColumnColorFormatters) {
columnColorFormatters!
const applyFormatter = (
formatter: ColorFormatters[number],
valueToFormat: any,
) => {
const hasValue =
valueToFormat !== undefined && valueToFormat !== null;
if (!hasValue) return;
const formatterResult =
formatter.getColorFromValue(valueToFormat);
if (!formatterResult) return;
if (formatter.toTextColor) {
color = formatterResult.slice(0, -2);
} else {
backgroundColor = formatterResult;
}
};
columnColorFormatters
.filter(formatter => formatter.column === column.key)
.forEach(formatter => {
const formatterResult =
value || value === 0
? formatter.getColorFromValue(value as number)
: false;
if (formatterResult) {
backgroundColor = formatterResult;
}
});
.forEach(formatter => applyFormatter(formatter, value));
columnColorFormatters
.filter(formatter => formatter.toAllRow)
.forEach(formatter =>
applyFormatter(formatter, row.original[formatter.column]),
);
}
if (
@@ -893,7 +911,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
: '';
}
const StyledCell = styled.td`
color: ${theme.colorText};
color: ${color ? `${color}FF` : theme.colorText};
text-align: ${sharedStyle.textAlign};
white-space: ${value instanceof Date ? 'nowrap' : undefined};
position: relative;