This is an automated email from the ASF dual-hosted git repository. maximebeauchemin pushed a commit to branch template_less in repository https://gitbox.apache.org/repos/asf/superset.git
commit 2d461deb6885a1824bec71abeb846623c65e2759 Author: Maxime Beauchemin <[email protected]> AuthorDate: Tue Mar 18 10:09:17 2025 -0700 echarts --- .../plugin-chart-echarts/src/components/Echart.tsx | 62 +++++++++++++++++++++- 1 file changed, 60 insertions(+), 2 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx index 995e3a5351..e1b3eff25a 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx @@ -26,8 +26,11 @@ import { useCallback, Ref, } from 'react'; +import merge from 'lodash/merge'; -import { styled } from '@superset-ui/core'; +import * as echarts from 'echarts'; + +import { styled, themeObject } from '@superset-ui/core'; import { use, init, EChartsType } from 'echarts/core'; import { SankeyChart, @@ -95,6 +98,57 @@ use([ LabelLayout, ]); +const getTheme = options => { + const token = themeObject.theme; + const theme = { + textStyle: { + color: token.colorText, + fontFamily: token.fontFamily, + }, + title: { + textStyle: { color: token.colorText }, + }, + legend: { + textStyle: { color: token.colorTextSecondary }, + }, + tooltip: { + backgroundColor: token.colorBgContainer, + borderColor: token.colorSplit, + textStyle: { color: token.colorText }, + }, + axisPointer: { + lineStyle: { color: token.colorPrimary }, + label: { color: token.colorText }, + }, + xAxis: { + axisLine: { lineStyle: { color: token.colorSplit } }, + axisLabel: { color: token.colorTextSecondary }, + splitLine: { lineStyle: { color: token.colorSplit } }, + }, + yAxis: { + axisLine: { lineStyle: { color: token.colorSplit } }, + axisLabel: { color: token.colorTextSecondary }, + splitLine: { lineStyle: { color: token.colorSplit } }, + }, + }; + /* + if (options?.xAxis) { + theme.xAxis = { + axisLine: { lineStyle: { color: token.colorSplit } }, + axisLabel: { color: token.colorTextSecondary }, + splitLine: { lineStyle: { color: token.colorSplit } }, + }; + } + if (options?.yAxis) { + theme.yAxis = { + axisLine: { lineStyle: { color: token.colorSplit } }, + axisLabel: { color: token.colorTextSecondary }, + splitLine: { lineStyle: { color: token.colorSplit } }, + }; +} */ + return theme; +}; + function Echart( { width, @@ -138,8 +192,12 @@ function Echart( chartRef.current?.getZr().off(name); chartRef.current?.getZr().on(name, handler); }); - + /* + const themedEchartOptions = merge({}, getTheme(echartOptions), echartOptions); + */ + chartRef.current.setTheme(getTheme(echartOptions)); chartRef.current.setOption(echartOptions, true); + chartRef.current.setTheme(getTheme(echartOptions)); }, [echartOptions, eventHandlers, zrEventHandlers]); // highlighting
