diff --git a/superset-frontend/plugins/plugin-chart-echarts/package.json b/superset-frontend/plugins/plugin-chart-echarts/package.json index f84ecd0ed4a..64da86afdcc 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/package.json +++ b/superset-frontend/plugins/plugin-chart-echarts/package.json @@ -26,7 +26,8 @@ "dependencies": { "d3-array": "^1.2.0", "lodash": "^4.17.21", - "dayjs": "^1.11.13" + "dayjs": "^1.11.13", + "@types/react-redux": "^7.1.10" }, "peerDependencies": { "@superset-ui/chart-controls": "*", 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 995e3a53513..5f5f71c14bd 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx @@ -27,8 +27,10 @@ import { Ref, } from 'react'; +import { useSelector } from 'react-redux'; + import { styled } from '@superset-ui/core'; -import { use, init, EChartsType } from 'echarts/core'; +import { use, init, EChartsType, registerLocale } from 'echarts/core'; import { SankeyChart, PieChart, @@ -60,6 +62,15 @@ import { } from 'echarts/components'; import { LabelLayout } from 'echarts/features'; import { EchartsHandler, EchartsProps, EchartsStylesProps } from '../types'; +import { DEFAULT_LOCALE } from '../constants'; + +// Define this interface here to avoid creating a dependency back to superset-frontend, +// TODO: to move the type to @superset-ui/core +interface ExplorePageState { + common: { + locale: string; + }; +} const Styles = styled.div` height: ${({ height }) => height}; @@ -123,24 +134,52 @@ function Echart( getEchartInstance: () => chartRef.current, })); + const locale = useSelector( + (state: ExplorePageState) => state?.common?.locale ?? DEFAULT_LOCALE, + ).toUpperCase(); + + const handleSizeChange = useCallback( + ({ width, height }: { width: number; height: number }) => { + if (chartRef.current) { + chartRef.current.resize({ width, height }); + } + }, + [], + ); + useEffect(() => { - if (!divRef.current) return; - if (!chartRef.current) { - chartRef.current = init(divRef.current); - } + const loadLocaleAndInitChart = async () => { + if (!divRef.current) return; - Object.entries(eventHandlers || {}).forEach(([name, handler]) => { - chartRef.current?.off(name); - chartRef.current?.on(name, handler); - }); + const lang = await import(`echarts/lib/i18n/lang${locale}`).catch(e => { + console.error(`Locale ${locale} not supported in ECharts`, e); + }); + if (lang?.default) { + registerLocale(locale, lang.default); + } - Object.entries(zrEventHandlers || {}).forEach(([name, handler]) => { - chartRef.current?.getZr().off(name); - chartRef.current?.getZr().on(name, handler); - }); + if (!chartRef.current) { + chartRef.current = init(divRef.current, null, { locale }); + } - chartRef.current.setOption(echartOptions, true); - }, [echartOptions, eventHandlers, zrEventHandlers]); + Object.entries(eventHandlers || {}).forEach(([name, handler]) => { + chartRef.current?.off(name); + chartRef.current?.on(name, handler); + }); + + Object.entries(zrEventHandlers || {}).forEach(([name, handler]) => { + chartRef.current?.getZr().off(name); + chartRef.current?.getZr().on(name, handler); + }); + + chartRef.current.setOption(echartOptions, true); + + // did mount + handleSizeChange({ width, height }); + }; + + loadLocaleAndInitChart(); + }, [echartOptions, eventHandlers, zrEventHandlers, locale]); // highlighting useEffect(() => { @@ -158,22 +197,7 @@ function Echart( }); } previousSelection.current = currentSelection; - }, [currentSelection]); - - const handleSizeChange = useCallback( - ({ width, height }: { width: number; height: number }) => { - if (chartRef.current) { - chartRef.current.resize({ width, height }); - } - }, - [], - ); - - // did mount - useEffect(() => { - handleSizeChange({ width, height }); - return () => chartRef.current?.dispose(); - }, []); + }, [currentSelection, chartRef.current]); useLayoutEffect(() => { handleSizeChange({ width, height }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/constants.ts b/superset-frontend/plugins/plugin-chart-echarts/src/constants.ts index 65ea1679e2c..fb6221342a4 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/constants.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/constants.ts @@ -121,3 +121,5 @@ export const TOOLTIP_POINTER_MARGIN = 10; // If no satisfactory position can be found, how far away // from the edge of the window should the tooltip be kept export const TOOLTIP_OVERFLOW_MARGIN = 5; + +export const DEFAULT_LOCALE = 'en';