From 09a2529d5a724bc3ac6edc8770c00a4a1b4e5dad Mon Sep 17 00:00:00 2001
From: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Date: Tue, 12 Dec 2023 09:22:29 -0800
Subject: [PATCH] fix(plugin-chart-echarts): undefined bounds for bubble chart
 (#26243)

---
 .../superset-ui-core/src/chart/index.ts       |  2 +-
 .../src/Bubble/constants.ts                   |  1 +
 .../src/Bubble/transformProps.ts              |  4 +-
 .../test/Bubble/transformProps.test.ts        | 48 +++++++++++++++++--
 4 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-core/src/chart/index.ts b/superset-frontend/packages/superset-ui-core/src/chart/index.ts
index c1588023a324a..bc4b5a20bffee 100644
--- a/superset-frontend/packages/superset-ui-core/src/chart/index.ts
+++ b/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';
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/constants.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/constants.ts
index 89b03d5e90d27..1c70e872e6fae 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/constants.ts
+++ b/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,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts
index 01d9ed3c53600..754b26003bb67 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts
+++ b/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,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Bubble/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Bubble/transformProps.test.ts
index 1a92a43257d1c..d93f394681205 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Bubble/transformProps.test.ts
+++ b/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,