This is an automated email from the ASF dual-hosted git repository.
villebro pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 78efb62781 fix: Changing language doesn't affect echarts charts
(#31751)
78efb62781 is described below
commit 78efb62781f3f55f54d941c8fbb7a2df044c46b8
Author: Giampaolo Capelli <[email protected]>
AuthorDate: Wed Mar 19 19:38:53 2025 +0100
fix: Changing language doesn't affect echarts charts (#31751)
Co-authored-by: Giampaolo Capelli <[email protected]>
---
.../plugins/plugin-chart-echarts/package.json | 3 +-
.../plugin-chart-echarts/src/components/Echart.tsx | 86 ++++++++++++++--------
.../plugins/plugin-chart-echarts/src/constants.ts | 2 +
3 files changed, 59 insertions(+), 32 deletions(-)
diff --git a/superset-frontend/plugins/plugin-chart-echarts/package.json
b/superset-frontend/plugins/plugin-chart-echarts/package.json
index f84ecd0ed4..64da86afdc 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 995e3a5351..5f5f71c14b 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<EchartsStylesProps>`
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 65ea1679e2..fb6221342a 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';
