You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by li...@apache.org on 2024/03/27 19:21:32 UTC
(superset) 01/01: update type
This is an automated email from the ASF dual-hosted git repository.
lilykuang pushed a commit to branch table-time-comparison-color
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 1540e3f3e693d3df75abbb0cf3f2be4eaf3c5b2c
Author: lilykuang <ji...@gmail.com>
AuthorDate: Tue Mar 26 09:38:12 2024 -0700
update type
---
.../plugins/plugin-chart-table/src/TableChart.tsx | 18 ++---
.../plugin-chart-table/src/controlPanel.tsx | 5 +-
.../plugin-chart-table/src/transformProps.ts | 80 +++++++++++-----------
.../plugins/plugin-chart-table/src/types.ts | 7 +-
4 files changed, 57 insertions(+), 53 deletions(-)
diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
index ef564fdf27..06fa6139e2 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
@@ -252,7 +252,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
onContextMenu,
emitCrossFilters,
enableTimeComparison,
- basicColorFormatter,
+ basicColorFormatters,
} = props;
const comparisonColumns = [
{ key: 'all', label: t('Display all') },
@@ -697,11 +697,11 @@ export default function TableChart<D extends DataRecord = DataRecord>(
Array.isArray(columnColorFormatters) &&
columnColorFormatters.length > 0;
- const hasBasicColorFormatter =
- Array.isArray(basicColorFormatter) && basicColorFormatter.length > 0;
+ const hasBasicColorFormatters =
+ Array.isArray(basicColorFormatters) && basicColorFormatters.length > 0;
const valueRange =
- !hasBasicColorFormatter &&
+ !hasBasicColorFormatters &&
!hasColumnColorFormatters &&
(config.showCellBars === undefined
? showCellBars
@@ -739,12 +739,12 @@ export default function TableChart<D extends DataRecord = DataRecord>(
let backgroundColor;
let arrow = '';
const originKey = column.key.substring(column.label.length).trim();
- if (!hasColumnColorFormatters && hasBasicColorFormatter) {
+ if (!hasColumnColorFormatters && hasBasicColorFormatters) {
backgroundColor =
- basicColorFormatter[row.index][originKey]?.backgroundColor;
+ basicColorFormatters[row.index][originKey]?.backgroundColor;
arrow =
column.label === comparisonLabels[0]
- ? basicColorFormatter[row.index][originKey]?.mainArrow
+ ? basicColorFormatters[row.index][originKey]?.mainArrow
: '';
}
@@ -794,8 +794,8 @@ export default function TableChart<D extends DataRecord = DataRecord>(
`;
const arrowStyles = css`
- color: ${basicColorFormatter &&
- basicColorFormatter[row.index][originKey]?.arrowColor ===
+ color: ${basicColorFormatters &&
+ basicColorFormatters[row.index][originKey]?.arrowColor ===
ColorSchemeEnum.Green
? theme.colors.success.base
: theme.colors.error.base};
diff --git a/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx
index 6fcdcd825d..641445913b 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx
@@ -665,9 +665,8 @@ const config: ControlPanelConfig = {
}))
: [];
- const columnOptions = Boolean(
- explore?.controls?.enable_time_comparison?.value,
- )
+ const columnOptions = explore?.controls?.enable_time_comparison
+ ?.value
? processComparisonColumns(numericColumns || [])
: numericColumns;
diff --git a/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts b/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts
index 8a39f4b4dd..3edec0c9ef 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts
@@ -43,6 +43,7 @@ import {
import isEqualColumns from './utils/isEqualColumns';
import DateWithFormatter from './utils/DateWithFormatter';
import {
+ BasicColorFormatterType,
ColorSchemeEnum,
DataColumnMeta,
TableChartProps,
@@ -379,12 +380,13 @@ const transformProps = (
comparison_color_scheme: comparisonColorScheme = ColorSchemeEnum.Green,
} = formData;
- const calculateColorAndArrow = (percentDifferenceNum: number) => {
+ const calculateBasicStyle = (percentDifferenceNum: number) => {
if (percentDifferenceNum === 0) {
return {
arrow: '',
arrowColor: '',
- basicBackgroundColor: 'rgba(255, 191, 161, 0.2)',
+ // eslint-disable-next-line theme-colors/no-literal-colors
+ backgroundColor: '#FFBFA133',
};
}
const isPositive = percentDifferenceNum > 0;
@@ -397,51 +399,49 @@ const transformProps = (
: isPositive
? ColorSchemeEnum.Red
: ColorSchemeEnum.Green;
- const basicBackgroundColor =
+ const backgroundColor =
comparisonColorScheme === ColorSchemeEnum.Green
? `rgba(${isPositive ? '0,150,0' : '150,0,0'},0.2)`
: `rgba(${isPositive ? '150,0,0' : '0,150,0'},0.2)`;
- return { arrow, arrowColor, basicBackgroundColor };
+ return { arrow, arrowColor, backgroundColor };
};
- const getBasicColorFormatter = memoizeOne(
- function processComparisonDataRecords(
- originalData: DataRecord[] | undefined,
- originalColumns: DataColumnMeta[],
- ) {
- // Transform data
- return originalData?.map(originalItem => {
- const item: any = {};
- originalColumns.forEach(origCol => {
- if (
- (origCol.isMetric || origCol.isPercentMetric) &&
- !origCol.key.includes(COMPARISON_PREFIX) &&
- origCol.isNumeric
- ) {
- const originalValue = originalItem[origCol.key] || 0;
- const comparisonValue = origCol.isMetric
- ? originalItem?.[`${COMPARISON_PREFIX}${origCol.key}`] || 0
- : originalItem[`%${COMPARISON_PREFIX}${origCol.key.slice(1)}`] ||
- 0;
- const { percentDifferenceNum } = calculateDifferences(
- originalValue as number,
- comparisonValue as number,
- );
+ const getBasicColorFormatter = memoizeOne(function getBasicColorFormatter(
+ originalData: DataRecord[] | undefined,
+ originalColumns: DataColumnMeta[],
+ ) {
+ // Transform data
+ return originalData?.map(originalItem => {
+ const item: { [key: string]: BasicColorFormatterType } = {};
+ originalColumns.forEach(origCol => {
+ if (
+ (origCol.isMetric || origCol.isPercentMetric) &&
+ !origCol.key.includes(COMPARISON_PREFIX) &&
+ origCol.isNumeric
+ ) {
+ const originalValue = originalItem[origCol.key] || 0;
+ const comparisonValue = origCol.isMetric
+ ? originalItem?.[`${COMPARISON_PREFIX}${origCol.key}`] || 0
+ : originalItem[`%${COMPARISON_PREFIX}${origCol.key.slice(1)}`] || 0;
+ const { percentDifferenceNum } = calculateDifferences(
+ originalValue as number,
+ comparisonValue as number,
+ );
- const { arrow, arrowColor, basicBackgroundColor } =
- calculateColorAndArrow(percentDifferenceNum);
+ const { arrow, arrowColor, backgroundColor } =
+ calculateBasicStyle(percentDifferenceNum);
- item[`${origCol.key}`] = {};
- item[`${origCol.key}`].mainArrow = arrow;
- item[`${origCol.key}`].arrowColor = arrowColor;
- item[`${origCol.key}`].backgroundColor = basicBackgroundColor;
- }
- });
- return item;
+ item[`${origCol.key}`] = {
+ mainArrow: arrow,
+ arrowColor,
+ backgroundColor,
+ };
+ }
});
- },
- );
+ return item;
+ });
+ });
const canUseTimeComparison =
enableTimeComparison &&
@@ -481,7 +481,7 @@ const transformProps = (
const passedTotals = canUseTimeComparison ? comparisonTotals : totals;
const passedColumns = canUseTimeComparison ? comparisonColumns : columns;
- const basicColorFormatter =
+ const basicColorFormatters =
comparisonColorEnabled && getBasicColorFormatter(baseQuery?.data, columns);
const columnColorFormatters =
getColorFormatters(conditionalFormatting, passedData) ??
@@ -518,7 +518,7 @@ const transformProps = (
allowRearrangeColumns,
onContextMenu,
enableTimeComparison: canUseTimeComparison,
- basicColorFormatter,
+ basicColorFormatters,
};
};
diff --git a/superset-frontend/plugins/plugin-chart-table/src/types.ts b/superset-frontend/plugins/plugin-chart-table/src/types.ts
index f4ca8473f1..e8f2ae3f0a 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/types.ts
+++ b/superset-frontend/plugins/plugin-chart-table/src/types.ts
@@ -103,6 +103,11 @@ export interface TableChartProps extends ChartProps {
queriesData: ChartDataResponseResult[];
}
+export type BasicColorFormatterType = {
+ backgroundColor: string;
+ arrowColor: string;
+ mainArrow: string;
+};
export interface TableChartTransformedProps<D extends DataRecord = DataRecord> {
timeGrain?: TimeGranularity;
height: number;
@@ -137,7 +142,7 @@ export interface TableChartTransformedProps<D extends DataRecord = DataRecord> {
filters?: ContextMenuFilters,
) => void;
enableTimeComparison?: boolean;
- basicColorFormatter?: any;
+ basicColorFormatters?: { [Key: string]: BasicColorFormatterType }[];
}
export enum ColorSchemeEnum {