fix(plugin-chart-echarts): undefined bounds for bubble chart (#26243)

superset-frontend/packages/superset-ui-core/src/chart/index.ts

@@ -20,7 +20,7 @@
 export { default as ChartClient } from './clients/ChartClient';
 export { default as ChartMetadata } from './models/ChartMetadata';
 export { default as ChartPlugin } from './models/ChartPlugin';
-export { default as ChartProps } from './models/ChartProps';
+export { default as ChartProps, ChartPropsConfig } from './models/ChartProps';
 
 export { default as createLoadableRenderer } from './components/createLoadableRenderer';
 export { default as reactify } from './components/reactify';

superset-frontend/plugins/plugin-chart-echarts/src/Bubble/constants.ts

@@ -29,6 +29,7 @@ export const DEFAULT_FORM_DATA: Partial<EchartsBubbleFormData> = {
   yAxisTitleMargin: 30,
   truncateXAxis: false,
   truncateYAxis: false,
+  xAxisBounds: [null, null],
   yAxisBounds: [null, null],
   xAxisLabelRotation: defaultXAxis.xAxisLabelRotation,
   opacity: 0.6,

superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts

@@ -143,8 +143,8 @@ export default function transformProps(chartProps: EchartsBubbleChartProps) {
   const yAxisFormatter = getNumberFormatter(yAxisFormat);
   const tooltipSizeFormatter = getNumberFormatter(tooltipSizeFormat);
 
-  const [xAxisMin, xAxisMax] = xAxisBounds.map(parseAxisBound);
-  const [yAxisMin, yAxisMax] = yAxisBounds.map(parseAxisBound);
+  const [xAxisMin, xAxisMax] = (xAxisBounds || []).map(parseAxisBound);
+  const [yAxisMin, yAxisMax] = (yAxisBounds || []).map(parseAxisBound);
 
   const padding = getPadding(
     showLegend,

superset-frontend/plugins/plugin-chart-echarts/test/Bubble/transformProps.test.ts

@@ -18,6 +18,7 @@
  */
 import {
   ChartProps,
+  ChartPropsConfig,
   getNumberFormatter,
   SqlaFormData,
   supersetTheme,
@@ -27,7 +28,7 @@ import { EchartsBubbleChartProps } from 'plugins/plugin-chart-echarts/src/Bubble
 import transformProps, { formatTooltip } from '../../src/Bubble/transformProps';
 
 describe('Bubble transformProps', () => {
-  const formData: SqlaFormData = {
+  const defaultFormData: SqlaFormData = {
     datasource: '1__table',
     viz_type: 'echarts_bubble',
     entity: 'customer_name',
@@ -51,8 +52,8 @@ describe('Bubble transformProps', () => {
     xAxisBounds: [null, null],
     yAxisBounds: [null, null],
   };
-  const chartProps = new ChartProps({
-    formData,
+  const chartConfig: ChartPropsConfig = {
+    formData: defaultFormData,
     height: 800,
     width: 800,
     queriesData: [
@@ -80,9 +81,48 @@ describe('Bubble transformProps', () => {
       },
     ],
     theme: supersetTheme,
-  });
+  };
 
   it('Should transform props for viz', () => {
+    const chartProps = new ChartProps(chartConfig);
+    expect(transformProps(chartProps as EchartsBubbleChartProps)).toEqual(
+      expect.objectContaining({
+        width: 800,
+        height: 800,
+        echartOptions: expect.objectContaining({
+          series: expect.arrayContaining([
+            expect.objectContaining({
+              data: expect.arrayContaining([
+                [10, 20, 30, 'AV Stores, Co.', null],
+              ]),
+            }),
+            expect.objectContaining({
+              data: expect.arrayContaining([
+                [40, 50, 60, 'Alpha Cognac', null],
+              ]),
+            }),
+            expect.objectContaining({
+              data: expect.arrayContaining([
+                [70, 80, 90, 'Amica Models & Co.', null],
+              ]),
+            }),
+          ]),
+        }),
+      }),
+    );
+  });
+
+  it('Should transform props with undefined control values', () => {
+    const formData: SqlaFormData = {
+      ...defaultFormData,
+      xAxisBounds: undefined,
+      yAxisBounds: undefined,
+    };
+    const chartProps = new ChartProps({
+      ...chartConfig,
+      formData,
+    });
+
     expect(transformProps(chartProps as EchartsBubbleChartProps)).toEqual(
       expect.objectContaining({
         width: 800,