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

feat(theming): land Ant Design v5 overhaul — dynamic themes, real dark mode + massive styling refactor (#31590)

Browse Source 
Co-authored-by: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com>
Co-authored-by: Diego Pucci <diegopucci.me@gmail.com>
Co-authored-by: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Co-authored-by: Geido <60598000+geido@users.noreply.github.com>
Co-authored-by: Alexandru Soare <37236580+alexandrusoare@users.noreply.github.com>
Co-authored-by: Damian Pendrak <dpendrak@gmail.com>
Co-authored-by: Pius Iniobong <67148161+payose@users.noreply.github.com>
Co-authored-by: Enzo Martellucci <enzomartellucci@gmail.com>
Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
This commit is contained in:
Maxime Beauchemin
2025-06-20 13:38:58 -07:00
committed by GitHub
parent 2cc1ef88c8
commit dd129fa403
1267 changed files with 32958 additions and 23592 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
View File

@@ -27,10 +27,11 @@ import {
Ref,
useState,
} from 'react';
import { merge } from 'lodash';
import { useSelector } from 'react-redux';
import { styled } from '@superset-ui/core';
import { styled, themeObject } from '@superset-ui/core';
import { use, init, EChartsType, registerLocale } from 'echarts/core';
import {
SankeyChart,
@@ -117,6 +118,45 @@ const loadLocale = async (locale: string) => {
return lang?.default;
};
const getTheme = (options: any) => {
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,
textStyle: { color: token.colorText },
},
axisPointer: {
lineStyle: { color: token.colorPrimary },
label: { color: token.colorText },
},
} as any;
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,
@@ -184,7 +224,12 @@ function Echart(
chartRef.current?.getZr().on(name, handler);
});
chartRef.current?.setOption(echartOptions, true);
const themedEchartOptions = merge(
{},
getTheme(echartOptions),
echartOptions,
);
chartRef.current?.setOption(themedEchartOptions, true);
// did mount
handleSizeChange({ width, height });