Skip to content

Commit 33441cc

Browse files
SBIN2010SBIN2010
authored
feat: add formatting column and formatting object to conditional formating table (#35897)
1 parent 9ec56f5 commit 33441cc

13 files changed

Lines changed: 421 additions & 208 deletions

File tree

‎superset-frontend/packages/superset-core/src/ui/theme/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ export interface SupersetSpecificTokens {
116116
fontWeightNormal: string;
117117
fontWeightLight: string;
118118
fontWeightStrong: number;
119+
fontWeightBold: string;
119120

120121
// Brand-related
121122
brandIconMaxWidth: number;

‎superset-frontend/packages/superset-ui-chart-controls/src/types.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -491,12 +491,16 @@ export type ConditionalFormattingConfig = {
491491
toAllRow?: boolean;
492492
toTextColor?: boolean;
493493
useGradient?: boolean;
494+
columnFormatting?: string;
495+
objectFormatting?: ObjectFormattingEnum;
494496
};
495497

496498
export type ColorFormatters = {
497499
column: string;
498500
toAllRow?: boolean;
499501
toTextColor?: boolean;
502+
columnFormatting?: string;
503+
objectFormatting?: ObjectFormattingEnum;
500504
getColorFromValue: (
501505
value: number | string | boolean | null,
502506
) => string | undefined;
@@ -614,6 +618,13 @@ export type ControlFormItemSpec<T extends ControlType = ControlType> = {
614618
}
615619
: {});
616620

621+
export enum ObjectFormattingEnum {
622+
BACKGROUND_COLOR = 'BACKGROUND_COLOR',
623+
TEXT_COLOR = 'TEXT_COLOR',
624+
CELL_BAR = 'CELL_BAR',
625+
ENTIRE_ROW = 'ENTIRE_ROW',
626+
}
627+
617628
export enum ColorSchemeEnum {
618629
Green = 'Green',
619630
Red = 'Red',

‎superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,8 @@ export const getColorFormatters = memoizeOne(
311311
column: config?.column,
312312
toAllRow: config?.toAllRow,
313313
toTextColor: config?.toTextColor,
314+
columnFormatting: config?.columnFormatting,
315+
objectFormatting: config?.objectFormatting,
314316
getColorFromValue: getColorFunction(
315317
{ ...config, colorScheme: resolvedColorScheme },
316318
data.map(row => row[config.column!] as number),

‎superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx‎

Lines changed: 51 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,11 @@ import {
7474
TableOutlined,
7575
} from '@ant-design/icons';
7676
import { isEmpty, debounce, isEqual } from 'lodash';
77-
import { ColorFormatters, ColorSchemeEnum } from '@superset-ui/chart-controls';
77+
import {
78+
ColorFormatters,
79+
ObjectFormattingEnum,
80+
ColorSchemeEnum,
81+
} from '@superset-ui/chart-controls';
7882
import {
7983
DataColumnMeta,
8084
SearchOption,
@@ -874,12 +878,11 @@ export default function TableChart<D extends DataRecord = DataRecord>(
874878
isUsingTimeComparison &&
875879
Array.isArray(basicColorFormatters) &&
876880
basicColorFormatters.length > 0;
881+
const generalShowCellBars =
882+
config.showCellBars === undefined ? showCellBars : config.showCellBars;
877883
const valueRange =
878884
!hasBasicColorFormatters &&
879-
!hasColumnColorFormatters &&
880-
(config.showCellBars === undefined
881-
? showCellBars
882-
: config.showCellBars) &&
885+
generalShowCellBars &&
883886
(isMetric || isRawRecords || isPercentMetric) &&
884887
getValueRange(key, alignPositiveNegative);
885888

@@ -914,6 +917,8 @@ export default function TableChart<D extends DataRecord = DataRecord>(
914917

915918
let backgroundColor;
916919
let color;
920+
let backgroundColorCellBar;
921+
let valueRangeFlag = true;
917922
let arrow = '';
918923
const originKey = column.key.substring(column.label.length).trim();
919924
if (!hasColumnColorFormatters && hasBasicColorFormatters) {
@@ -934,18 +939,43 @@ export default function TableChart<D extends DataRecord = DataRecord>(
934939
formatter.getColorFromValue(valueToFormat);
935940
if (!formatterResult) return;
936941

937-
if (formatter.toTextColor) {
942+
if (
943+
formatter.objectFormatting === ObjectFormattingEnum.TEXT_COLOR
944+
) {
938945
color = formatterResult.slice(0, -2);
946+
} else if (
947+
formatter.objectFormatting === ObjectFormattingEnum.CELL_BAR
948+
) {
949+
if (generalShowCellBars)
950+
backgroundColorCellBar = formatterResult.slice(0, -2);
939951
} else {
940952
backgroundColor = formatterResult;
953+
valueRangeFlag = false;
941954
}
942955
};
943956
columnColorFormatters
944-
.filter(formatter => formatter.column === column.key)
945-
.forEach(formatter => applyFormatter(formatter, value));
957+
.filter(formatter => {
958+
if (formatter.columnFormatting) {
959+
return formatter.columnFormatting === column.key;
960+
}
961+
return formatter.column === column.key;
962+
})
963+
.forEach(formatter => {
964+
let valueToFormat;
965+
if (formatter.columnFormatting) {
966+
valueToFormat = row.original[formatter.column];
967+
} else {
968+
valueToFormat = value;
969+
}
970+
applyFormatter(formatter, valueToFormat);
971+
});
946972

947973
columnColorFormatters
948-
.filter(formatter => formatter.toAllRow)
974+
.filter(
975+
formatter =>
976+
formatter.columnFormatting ===
977+
ObjectFormattingEnum.ENTIRE_ROW,
978+
)
949979
.forEach(formatter =>
950980
applyFormatter(formatter, row.original[formatter.column]),
951981
);
@@ -968,6 +998,9 @@ export default function TableChart<D extends DataRecord = DataRecord>(
968998
text-align: ${sharedStyle.textAlign};
969999
white-space: ${value instanceof Date ? 'nowrap' : undefined};
9701000
position: relative;
1001+
font-weight: ${color
1002+
? `${theme.fontWeightBold}`
1003+
: `${theme.fontWeightNormal}`};
9711004
background: ${backgroundColor || undefined};
9721005
padding-left: ${column.isChildColumn
9731006
? `${theme.sizeUnit * 5}px`
@@ -981,6 +1014,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
9811014
top: 0;
9821015
${valueRange &&
9831016
typeof value === 'number' &&
1017+
valueRangeFlag &&
9841018
`
9851019
width: ${`${cellWidth({
9861020
value: value as number,
@@ -992,11 +1026,14 @@ export default function TableChart<D extends DataRecord = DataRecord>(
9921026
valueRange,
9931027
alignPositiveNegative,
9941028
})}%`};
995-
background-color: ${cellBackground({
996-
value: value as number,
997-
colorPositiveNegative,
998-
theme,
999-
})};
1029+
background-color: ${
1030+
(backgroundColorCellBar && `${backgroundColorCellBar}99`) ||
1031+
cellBackground({
1032+
value: value as number,
1033+
colorPositiveNegative,
1034+
theme,
1035+
})
1036+
};
10001037
`}
10011038
`;
10021039

‎superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import {
4040
isRegularMetric,
4141
isPercentMetric,
4242
ConditionalFormattingConfig,
43+
ObjectFormattingEnum,
4344
ColorSchemeEnum,
4445
} from '@superset-ui/chart-controls';
4546
import { t } from '@apache-superset/core';
@@ -781,12 +782,16 @@ const config: ControlPanelConfig = {
781782
item.colorScheme &&
782783
!['Green', 'Red'].includes(item.colorScheme)
783784
) {
784-
if (!item.toAllRow || !item.toTextColor) {
785+
if (item.columnFormatting === undefined) {
785786
// eslint-disable-next-line no-param-reassign
786787
array[index] = {
787788
...item,
788-
toAllRow: item.toAllRow ?? false,
789-
toTextColor: item.toTextColor ?? false,
789+
...(item.toTextColor === true && {
790+
objectFormatting: ObjectFormattingEnum.TEXT_COLOR,
791+
}),
792+
...(item.toAllRow === true && {
793+
columnFormatting: ObjectFormattingEnum.ENTIRE_ROW,
794+
}),
790795
};
791796
}
792797
}
@@ -795,6 +800,23 @@ const config: ControlPanelConfig = {
795800
}
796801
const { colnames, coltypes } =
797802
chart?.queriesResponse?.[0] ?? {};
803+
const allColumns =
804+
Array.isArray(colnames) && Array.isArray(coltypes)
805+
? [
806+
{
807+
value: ObjectFormattingEnum.ENTIRE_ROW,
808+
label: t('entire row'),
809+
dataType: GenericDataType.String,
810+
},
811+
...colnames.map((colname: string, index: number) => ({
812+
value: colname,
813+
label: Array.isArray(verboseMap)
814+
? colname
815+
: (verboseMap[colname] ?? colname),
816+
dataType: coltypes[index],
817+
})),
818+
]
819+
: [];
798820
const numericColumns =
799821
Array.isArray(colnames) && Array.isArray(coltypes)
800822
? colnames.reduce((acc, colname, index) => {
@@ -826,10 +848,7 @@ const config: ControlPanelConfig = {
826848
removeIrrelevantConditions: chartStatus === 'success',
827849
columnOptions,
828850
verboseMap,
829-
conditionalFormattingFlag: {
830-
toAllRowCheck: true,
831-
toColorTextCheck: true,
832-
},
851+
allColumns,
833852
extraColorChoices,
834853
};
835854
},

‎superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
* under the License.
1818
*/
1919
import '@testing-library/jest-dom';
20+
import { ObjectFormattingEnum } from '@superset-ui/chart-controls';
2021
import {
2122
render,
2223
screen,
@@ -1250,7 +1251,7 @@ describe('plugin-chart-table', () => {
12501251
column: 'sum__num',
12511252
operator: '>',
12521253
targetValue: 2467,
1253-
toAllRow: true,
1254+
columnFormatting: ObjectFormattingEnum.ENTIRE_ROW,
12541255
},
12551256
],
12561257
},
@@ -1286,7 +1287,7 @@ describe('plugin-chart-table', () => {
12861287
column: 'sum__num',
12871288
operator: '>',
12881289
targetValue: 2467,
1289-
toTextColor: true,
1290+
objectFormatting: ObjectFormattingEnum.TEXT_COLOR,
12901291
},
12911292
],
12921293
},
@@ -1319,8 +1320,8 @@ describe('plugin-chart-table', () => {
13191320
column: 'sum__num',
13201321
operator: '>',
13211322
targetValue: 2467,
1322-
toAllRow: true,
1323-
toTextColor: true,
1323+
columnFormatting: ObjectFormattingEnum.ENTIRE_ROW,
1324+
objectFormatting: ObjectFormattingEnum.TEXT_COLOR,
13241325
},
13251326
],
13261327
},

‎superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ const ConditionalFormattingControl = ({
7474
verboseMap,
7575
removeIrrelevantConditions,
7676
extraColorChoices,
77-
conditionalFormattingFlag,
77+
allColumns,
7878
...props
7979
}: ConditionalFormattingControlProps) => {
8080
const [conditionalFormattingConfigs, setConditionalFormattingConfigs] =
@@ -159,6 +159,7 @@ const ConditionalFormattingControl = ({
159159
}
160160
destroyTooltipOnHide
161161
extraColorChoices={extraColorChoices}
162+
allColumns={allColumns}
162163
>
163164
<OptionControlContainer withCaret>
164165
<Label>{createLabel(config)}</Label>
@@ -175,7 +176,7 @@ const ConditionalFormattingControl = ({
175176
onChange={onSave}
176177
destroyTooltipOnHide
177178
extraColorChoices={extraColorChoices}
178-
conditionalFormattingFlag={conditionalFormattingFlag}
179+
allColumns={allColumns}
179180
>
180181
<AddControlLabel>
181182
<Icons.PlusOutlined

‎superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopover.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const FormattingPopover = ({
2828
config,
2929
children,
3030
extraColorChoices,
31-
conditionalFormattingFlag,
31+
allColumns,
3232
...props
3333
}: FormattingPopoverProps) => {
3434
const [visible, setVisible] = useState(false);
@@ -50,7 +50,7 @@ export const FormattingPopover = ({
5050
config={config}
5151
columns={columns}
5252
extraColorChoices={extraColorChoices}
53-
conditionalFormattingFlag={conditionalFormattingFlag}
53+
allColumns={allColumns}
5454
/>
5555
}
5656
open={visible}

0 commit comments

Comments
 (0)