fix(cartodiagram): add missing locales for rendering echarts (#34268)

superset-frontend/plugins/plugin-chart-cartodiagram/src/components/ChartLayer.tsx

@@ -52,6 +52,8 @@ export class ChartLayer extends Layer {
 
   theme: SupersetTheme;
 
+  locale: string;
+
   /**
    * Create a ChartLayer.
    *
@@ -91,6 +93,10 @@ export class ChartLayer extends Layer {
       this.theme = options.theme;
     }
 
+    if (options.locale) {
+      this.locale = options.locale;
+    }
+
     const spinner = document.createElement('img');
     spinner.src = Loader;
     spinner.style.position = 'relative';
@@ -183,6 +189,7 @@ export class ChartLayer extends Layer {
         chartWidth,
         chartHeight,
         this.theme,
+        this.locale,
       );
       ReactDOM.render(chartComponent, container);
 
@@ -218,6 +225,7 @@ export class ChartLayer extends Layer {
         chartWidth,
         chartHeight,
         this.theme,
+        this.locale,
       );
       ReactDOM.render(chartComponent, chart.htmlElement);
 

superset-frontend/plugins/plugin-chart-cartodiagram/src/components/ChartWrapper.tsx

@@ -16,8 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { configureStore } from '@reduxjs/toolkit';
 import { getChartComponentRegistry, ThemeProvider } from '@superset-ui/core';
 import { FC, useEffect, useState } from 'react';
+import { Provider as ReduxProvider } from 'react-redux';
 import { ChartWrapperProps } from '../types';
 
 export const ChartWrapper: FC<ChartWrapperProps> = ({
@@ -26,6 +28,7 @@ export const ChartWrapper: FC<ChartWrapperProps> = ({
   height,
   width,
   chartConfig,
+  locale,
 }) => {
   const [Chart, setChart] = useState<any>();
 
@@ -39,13 +42,21 @@ export const ChartWrapper: FC<ChartWrapperProps> = ({
     getChartFromRegistry(vizType);
   }, [vizType]);
 
+  // Create a mock store that is needed by
+  // eCharts components to access the locale.
+  const mockStore = configureStore({
+    reducer: (state = { common: { locale } }) => state,
+  });
+
   return (
     <ThemeProvider theme={theme}>
-      {Chart === undefined ? (
-        <></>
-      ) : (
-        <Chart {...chartConfig.properties} height={height} width={width} />
-      )}
+      <ReduxProvider store={mockStore}>
+        {Chart === undefined ? (
+          <></>
+        ) : (
+          <Chart {...chartConfig.properties} height={height} width={width} />
+        )}
+      </ReduxProvider>
     </ThemeProvider>
   );
 };

superset-frontend/plugins/plugin-chart-cartodiagram/src/components/OlChartMap.tsx

@@ -17,6 +17,7 @@
  * under the License.
  */
 import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
 
 import Point from 'ol/geom/Point';
 import { View } from 'ol';
@@ -55,6 +56,8 @@ export const OlChartMap = (props: OlChartMapProps) => {
     theme,
   } = props;
 
+  const locale = useSelector((state: any) => state?.common?.locale);
+
   const [currentChartConfigs, setCurrentChartConfigs] =
     useState<ChartConfig>(chartConfigs);
   const [currentMapView, setCurrentMapView] = useState<MapViewConfigs>(mapView);
@@ -360,6 +363,7 @@ export const OlChartMap = (props: OlChartMapProps) => {
         onMouseOver: deactivateInteractions,
         onMouseOut: activateInteractions,
         theme,
+        locale,
       });
 
       olMap.addLayer(newChartLayer);
@@ -393,6 +397,7 @@ export const OlChartMap = (props: OlChartMapProps) => {
     chartSize.values,
     chartBackgroundColor,
     chartBackgroundBorderRadius,
+    locale,
   ]);
 
   return (

superset-frontend/plugins/plugin-chart-cartodiagram/src/types.ts

@@ -195,6 +195,7 @@ export type ChartLayerOptions = {
   map?: Map | null | undefined;
   render?: RenderFunction | undefined;
   properties?: { [x: string]: any } | undefined;
+  locale: string;
 };
 
 export type CartodiagramPluginConstructorOpts = {
@@ -207,4 +208,5 @@ export type ChartWrapperProps = {
   width: number;
   height: number;
   chartConfig: ChartConfigFeature;
+  locale: string;
 };

superset-frontend/plugins/plugin-chart-cartodiagram/src/util/chartUtil.tsx

@@ -36,6 +36,7 @@ export const createChartComponent = (
   chartWidth: number,
   chartHeight: number,
   chartTheme: SupersetTheme,
+  chartLocale: string,
 ) => (
   <ChartWrapper
     vizType={chartVizType}
@@ -43,6 +44,7 @@ export const createChartComponent = (
     width={chartWidth}
     height={chartHeight}
     theme={chartTheme}
+    locale={chartLocale}
   />
 );