fix: Changing language doesn't affect echarts charts (#31751)

Co-authored-by: Giampaolo Capelli <giampaolo.capelli@docaposte.fr>

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 });