From 11bc4965e36dc64286f263dcc644f3e95536f5cb Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Wed, 19 Mar 2025 20:09:00 -0700 Subject: [PATCH] echarts theming --- .../src/Funnel/transformProps.ts | 5 +++-- .../src/Gauge/transformProps.ts | 1 + .../src/Radar/transformProps.ts | 17 +++++++++++++++++ .../src/Sunburst/transformProps.ts | 11 +++++++---- .../src/Timeseries/transformProps.ts | 1 - .../plugin-chart-echarts/src/Tree/constants.ts | 1 - .../src/Tree/transformProps.ts | 5 ++++- .../src/Treemap/transformProps.ts | 15 ++++++++++++--- .../src/Waterfall/transformProps.ts | 17 ++++++++++------- .../plugin-chart-echarts/src/utils/series.ts | 4 ++-- 10 files changed, 56 insertions(+), 21 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts index b2ba862e6ae..ff5a97c348f 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts @@ -227,7 +227,9 @@ export default function transformProps( const defaultLabel = { formatter, show: showLabels, - color: theme.colors.grayscale.dark2, + color: theme.colorText, + textBorderColor: theme.colorBgBase, + textBorderWidth: 1, }; const series: FunnelSeriesOption[] = [ @@ -245,7 +247,6 @@ export default function transformProps( label: { ...defaultLabel, position: labelLine ? 'outer' : 'inner', - textBorderColor: 'transparent', }, emphasis: { label: { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts index 2a0ebd85cc9..29dcafc45b8 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts @@ -183,6 +183,7 @@ export default function transformProps( `${index * titleOffsetFromTitle + OFFSETS.titleFromCenter}%`, ], fontSize, + color: theme.colorTextSecondary, }, detail: { offsetCenter: [ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts index c9d0d2cfe37..c991255abf3 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts @@ -275,6 +275,23 @@ export default function transformProps( radar: { shape: isCircle ? 'circle' : 'polygon', indicator, + splitLine: { + show: true, + lineStyle: { + color: theme.colorSplit, + }, + }, + splitArea: { + show: true, + areaStyle: { + color: [theme.colorBgLayout, theme.colorBgContainer], + }, + }, + axisLine: { + lineStyle: { + color: theme.colorSplit, + }, + }, }, }; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts index 68b9b2d8071..22da9e02ce7 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts @@ -274,7 +274,11 @@ export default function transformProps( } else { linearColorScale(totalSecondaryValue / totalValue); } - + const labelProps = { + color: theme.colorText, + textBorderColor: theme.colorBgBase, + textBorderWidth: 1, + }; const traverse = ( treeNodes: TreeNode[], path: string[], @@ -316,7 +320,7 @@ export default function transformProps( opacity: OpacityEnum.SemiTransparent, }, label: { - color: `rgba(0, 0, 0, ${OpacityEnum.SemiTransparent})`, + ...labelProps, }, }; } @@ -356,10 +360,10 @@ export default function transformProps( }, }, label: { + ...labelProps, width: (radius * 0.6) / (columns.length || 1), show: showLabels, formatter, - color: theme.colors.grayscale.dark2, minAngle: minShowLabelAngle, overflow: 'breakAll', }, @@ -381,7 +385,6 @@ export default function transformProps( } : null, }; - return { formData, width, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index 0fb392a12da..fff1d75b144 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -669,7 +669,6 @@ export default function transformProps( const onFocusedSeries = (seriesName: string | null) => { focusedSeries = seriesName; }; - return { echartOptions, emitCrossFilters, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/constants.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/constants.ts index 79cea342a2c..38c3eb94984 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/constants.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/constants.ts @@ -27,7 +27,6 @@ export const DEFAULT_TREE_SERIES_OPTION: TreeSeriesOption = { animation: true, animationDuration: 500, animationEasing: 'cubicOut', - lineStyle: { color: 'source', width: 1.5 }, }; export const DEFAULT_FORM_DATA: Partial = { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/transformProps.ts index 6065545a11b..7b8aefee52f 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/transformProps.ts @@ -199,7 +199,10 @@ export default function transformProps( symbol, roam, symbolSize, - lineStyle: DEFAULT_TREE_SERIES_OPTION.lineStyle, + lineStyle: { + color: theme.colorText, + width: 1.5, + }, select: DEFAULT_TREE_SERIES_OPTION.select, leaves: { label: { position: childLabelPosition } }, }, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts index f38c229e3f4..5ed0c565c3c 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts @@ -163,6 +163,11 @@ export default function transformProps( const metricLabel = getMetricLabel(metric); const groupbyLabels = groupby.map(getColumnLabel); const treeData = treeBuilder(data, groupbyLabels, metricLabel); + const labelProps = { + color: theme.colorText, + borderColor: theme.colorBgBase, + borderWidth: 1, + }; const traverse = (treeNodes: TreeNode[], path: string[]) => treeNodes.map(treeNode => { const { name: nodeName, value, groupBy } = treeNode; @@ -201,9 +206,12 @@ export default function transformProps( ...item, itemStyle: { colorAlpha: OpacityEnum.SemiTransparent, + color: theme.colorText, + borderColor: theme.colorBgBase, + borderWidth: 2, }, label: { - color: `rgba(0, 0, 0, ${OpacityEnum.SemiTransparent})`, + ...labelProps, }, }; } @@ -256,18 +264,20 @@ export default function transformProps( }, emphasis: { label: { + ...labelProps, show: true, }, }, levels, label: { + ...labelProps, show: showLabels, position: labelPosition, formatter, - color: theme.colors.grayscale.dark2, fontSize: LABEL_FONTSIZE, }, upperLabel: { + ...labelProps, show: showUpperLabels, formatter, textBorderColor: 'transparent', @@ -290,7 +300,6 @@ export default function transformProps( }, series, }; - return { formData, width, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts index a1d410ab882..e2fc17e2398 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts @@ -355,7 +355,13 @@ export default function transformProps( disabled: true, }, }; - + const labelProps = { + show: showValue, + formatter: seriesformatter, + color: theme.colorText, + borderColor: theme.colorBgBase, + borderWidth: 1, + }; const barSeries: BarSeriesOption[] = [ { ...seriesProps, @@ -366,9 +372,8 @@ export default function transformProps( ...seriesProps, name: LEGEND.INCREASE, label: { - show: showValue, + ...labelProps, position: 'top', - formatter: seriesformatter, }, itemStyle: { color: rgbToHex(increaseColor.r, increaseColor.g, increaseColor.b), @@ -379,9 +384,8 @@ export default function transformProps( ...seriesProps, name: LEGEND.DECREASE, label: { - show: showValue, + ...labelProps, position: 'bottom', - formatter: seriesformatter, }, itemStyle: { color: rgbToHex(decreaseColor.r, decreaseColor.g, decreaseColor.b), @@ -392,9 +396,8 @@ export default function transformProps( ...seriesProps, name: LEGEND.TOTAL, label: { - show: showValue, + ...labelProps, position: 'top', - formatter: seriesformatter, }, itemStyle: { color: rgbToHex(totalColor.r, totalColor.g, totalColor.b), diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts index e82e633c0f0..e268c9b7692 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts @@ -440,8 +440,8 @@ export function getLegendProps( selectorLabel: { fontFamily: theme.fontFamily, fontSize: theme.fontSizeSM, - color: theme.colors.grayscale.base, - borderColor: theme.colors.grayscale.base, + color: theme.colorText, + borderColor: theme.colorBgBase, }, }; const MIN_LEGEND_WIDTH = 0;