QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-19 16:14:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add formatting column and formatting object to conditional formating table (#35897)

Browse Source
This commit is contained in:
SBIN2010
2026-02-19 02:07:15 +03:00
committed by GitHub
parent 9ec56f5f02
commit 33441ccf3d
13 changed files with 421 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -74,7 +74,11 @@ import {
TableOutlined,
} from '@ant-design/icons';
import { isEmpty, debounce, isEqual } from 'lodash';
import { ColorFormatters, ColorSchemeEnum } from '@superset-ui/chart-controls';
import {
ColorFormatters,
ObjectFormattingEnum,
ColorSchemeEnum,
} from '@superset-ui/chart-controls';
import {
DataColumnMeta,
SearchOption,
@@ -874,12 +878,11 @@ export default function TableChart<D extends DataRecord = DataRecord>(
isUsingTimeComparison &&
Array.isArray(basicColorFormatters) &&
basicColorFormatters.length > 0;
const generalShowCellBars =
config.showCellBars === undefined ? showCellBars : config.showCellBars;
const valueRange =
!hasBasicColorFormatters &&
!hasColumnColorFormatters &&
(config.showCellBars === undefined
? showCellBars
: config.showCellBars) &&
generalShowCellBars &&
(isMetric || isRawRecords || isPercentMetric) &&
getValueRange(key, alignPositiveNegative);
@@ -914,6 +917,8 @@ export default function TableChart<D extends DataRecord = DataRecord>(
let backgroundColor;
let color;
let backgroundColorCellBar;
let valueRangeFlag = true;
let arrow = '';
const originKey = column.key.substring(column.label.length).trim();
if (!hasColumnColorFormatters && hasBasicColorFormatters) {
@@ -934,18 +939,43 @@ export default function TableChart<D extends DataRecord = DataRecord>(
formatter.getColorFromValue(valueToFormat);
if (!formatterResult) return;
if (formatter.toTextColor) {
if (
formatter.objectFormatting === ObjectFormattingEnum.TEXT_COLOR
) {
color = formatterResult.slice(0, -2);
} else if (
formatter.objectFormatting === ObjectFormattingEnum.CELL_BAR
) {
if (generalShowCellBars)
backgroundColorCellBar = formatterResult.slice(0, -2);
} else {
backgroundColor = formatterResult;
valueRangeFlag = false;
}
};
columnColorFormatters
.filter(formatter => formatter.column === column.key)
.forEach(formatter => applyFormatter(formatter, value));
.filter(formatter => {
if (formatter.columnFormatting) {
return formatter.columnFormatting === column.key;
}
return formatter.column === column.key;
})
.forEach(formatter => {
let valueToFormat;
if (formatter.columnFormatting) {
valueToFormat = row.original[formatter.column];
} else {
valueToFormat = value;
}
applyFormatter(formatter, valueToFormat);
});
columnColorFormatters
.filter(formatter => formatter.toAllRow)
.filter(
formatter =>
formatter.columnFormatting ===
ObjectFormattingEnum.ENTIRE_ROW,
)
.forEach(formatter =>
applyFormatter(formatter, row.original[formatter.column]),
);
@@ -968,6 +998,9 @@ export default function TableChart<D extends DataRecord = DataRecord>(
text-align: ${sharedStyle.textAlign};
white-space: ${value instanceof Date ? 'nowrap' : undefined};
position: relative;
font-weight: ${color
? `${theme.fontWeightBold}`
: `${theme.fontWeightNormal}`};
background: ${backgroundColor || undefined};
padding-left: ${column.isChildColumn
? `${theme.sizeUnit * 5}px`
@@ -981,6 +1014,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
top: 0;
${valueRange &&
typeof value === 'number' &&
valueRangeFlag &&
`
width: ${`${cellWidth({
value: value as number,
@@ -992,11 +1026,14 @@ export default function TableChart<D extends DataRecord = DataRecord>(
valueRange,
alignPositiveNegative,
})}%`};
background-color: ${cellBackground({
value: value as number,
colorPositiveNegative,
theme,
})};
background-color: ${
(backgroundColorCellBar && `${backgroundColorCellBar}99`) ||
cellBackground({
value: value as number,
colorPositiveNegative,
theme,
})
};
`}
`;