This is an automated email from the ASF dual-hosted git repository. elizabeth pushed a commit to branch elizabeth/fix-resize-bug in repository https://gitbox.apache.org/repos/asf/superset.git
commit 29b443cc5424c33f87f74bfdfdc750aeaa9664d6 Author: Jan Suleiman <[email protected]> AuthorDate: Fri Jul 25 18:59:28 2025 +0200 fix(cartodiagram): add missing locales for rendering echarts (#34268) --- .../plugins/plugin-chart-cartodiagram/package.json | 2 ++ .../src/components/ChartLayer.tsx | 8 ++++++++ .../src/components/ChartWrapper.tsx | 21 ++++++++++++++++----- .../src/components/OlChartMap.tsx | 5 +++++ .../plugins/plugin-chart-cartodiagram/src/types.ts | 2 ++ .../src/util/chartUtil.tsx | 2 ++ .../test/components/chartLayer.test.ts | 2 ++ 7 files changed, 37 insertions(+), 5 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-cartodiagram/package.json b/superset-frontend/plugins/plugin-chart-cartodiagram/package.json index e63a3513cd..fdba9a9a54 100644 --- a/superset-frontend/plugins/plugin-chart-cartodiagram/package.json +++ b/superset-frontend/plugins/plugin-chart-cartodiagram/package.json @@ -35,8 +35,10 @@ }, "peerDependencies": { "@ant-design/icons": "^5.2.6", + "@reduxjs/toolkit": "*", "@superset-ui/chart-controls": "*", "@superset-ui/core": "*", + "@types/react-redux": "*", "geostyler": "^14.1.3", "geostyler-data": "^1.0.0", "geostyler-openlayers-parser": "^4.0.0", diff --git a/superset-frontend/plugins/plugin-chart-cartodiagram/src/components/ChartLayer.tsx b/superset-frontend/plugins/plugin-chart-cartodiagram/src/components/ChartLayer.tsx index 8800f3da38..875ef5c4c0 100644 --- a/superset-frontend/plugins/plugin-chart-cartodiagram/src/components/ChartLayer.tsx +++ b/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); diff --git a/superset-frontend/plugins/plugin-chart-cartodiagram/src/components/ChartWrapper.tsx b/superset-frontend/plugins/plugin-chart-cartodiagram/src/components/ChartWrapper.tsx index ed441a7181..e4d087dcca 100644 --- a/superset-frontend/plugins/plugin-chart-cartodiagram/src/components/ChartWrapper.tsx +++ b/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> ); }; diff --git a/superset-frontend/plugins/plugin-chart-cartodiagram/src/components/OlChartMap.tsx b/superset-frontend/plugins/plugin-chart-cartodiagram/src/components/OlChartMap.tsx index 4982c5b95e..89b097e899 100644 --- a/superset-frontend/plugins/plugin-chart-cartodiagram/src/components/OlChartMap.tsx +++ b/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 ( diff --git a/superset-frontend/plugins/plugin-chart-cartodiagram/src/types.ts b/superset-frontend/plugins/plugin-chart-cartodiagram/src/types.ts index a875103d9e..62db443c88 100644 --- a/superset-frontend/plugins/plugin-chart-cartodiagram/src/types.ts +++ b/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; }; diff --git a/superset-frontend/plugins/plugin-chart-cartodiagram/src/util/chartUtil.tsx b/superset-frontend/plugins/plugin-chart-cartodiagram/src/util/chartUtil.tsx index e0b4932f32..ecdef6c6e2 100644 --- a/superset-frontend/plugins/plugin-chart-cartodiagram/src/util/chartUtil.tsx +++ b/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} /> ); diff --git a/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts b/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts index 050af2803e..b3418f00ca 100644 --- a/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts +++ b/superset-frontend/plugins/plugin-chart-cartodiagram/test/components/chartLayer.test.ts @@ -24,6 +24,7 @@ describe('ChartLayer', () => { it('creates div and loading mask', () => { const options: ChartLayerOptions = { chartVizType: 'pie', + locale: 'en', }; const chartLayer = new ChartLayer(options); @@ -34,6 +35,7 @@ describe('ChartLayer', () => { it('can remove chart elements', () => { const options: ChartLayerOptions = { chartVizType: 'pie', + locale: 'en', }; const chartLayer = new ChartLayer(options); chartLayer.charts = [
