From 317754fdbcfd7685c6d5d43e806dec84e0a2a533 Mon Sep 17 00:00:00 2001
From: Rajat Agrawal <rajat@appsmith.com>
Date: Fri, 4 Aug 2023 14:24:09 +0530
Subject: [PATCH] =?UTF-8?q?fix:=20Reset=20echartsConfiguration=20when=20ch?=
 =?UTF-8?q?artType=20is=20changed=20to=20CUSTOM=5FFUSION=E2=80=A6=20(#2597?=
 =?UTF-8?q?3)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #25974
---
 .../ChartWidget/component/index.test.tsx      | 49 ++++++++++++++++++-
 .../widgets/ChartWidget/component/index.tsx   |  1 +
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/app/client/src/widgets/ChartWidget/component/index.test.tsx b/app/client/src/widgets/ChartWidget/component/index.test.tsx
index 44508d49ad..b0b0ac87c7 100644
--- a/app/client/src/widgets/ChartWidget/component/index.test.tsx
+++ b/app/client/src/widgets/ChartWidget/component/index.test.tsx
@@ -96,7 +96,54 @@ describe("Chart Widget", () => {
     expect(fusionContainer).toBeInTheDocument();
   });
 
-  it("2. adds a click event when user adds a click callback", async () => {
+  it("2. successfully switches sequence of basic chart/custom fusion chart/basic chart", async () => {
+    // First render with Area Chart
+    let props = JSON.parse(JSON.stringify(defaultProps));
+    props.chartType = "AREA_CHART";
+
+    const { container, getByText, rerender } = render(
+      <ChartComponent {...props} />,
+    );
+
+    let xAxisLabel = getByText("xaxisname");
+    expect(xAxisLabel).toBeInTheDocument();
+
+    let echartsContainer = container.querySelector("#widgetIDechart-container");
+    expect(echartsContainer).toBeInTheDocument();
+
+    let fusionContainer = container.querySelector(
+      "#widgetIDcustom-fusion-chart-container",
+    );
+    expect(fusionContainer).not.toBeInTheDocument();
+
+    // Second render with fusion charts
+    props = JSON.parse(JSON.stringify(defaultProps));
+    props.chartType = "CUSTOM_FUSION_CHART";
+
+    rerender(<ChartComponent {...props} />);
+
+    echartsContainer = container.querySelector("#widgetIDechart-container");
+    expect(echartsContainer).not.toBeInTheDocument();
+
+    fusionContainer = container.querySelector(
+      "#widgetIDcustom-fusion-chart-container",
+    );
+    expect(fusionContainer).toBeInTheDocument();
+
+    // Third render with Area charts again.
+    props = JSON.parse(JSON.stringify(defaultProps));
+    props.chartType = "AREA_CHART";
+
+    rerender(<ChartComponent {...props} />);
+
+    xAxisLabel = getByText("xaxisname");
+    expect(xAxisLabel).toBeInTheDocument();
+
+    echartsContainer = container.querySelector("#widgetIDechart-container");
+    expect(echartsContainer).toBeInTheDocument();
+  });
+
+  it("3. adds a click event when user adds a click callback", async () => {
     const mockCallback = jest.fn();
     const props = { ...defaultProps };
     props.onDataPointClick = (point) => {
diff --git a/app/client/src/widgets/ChartWidget/component/index.tsx b/app/client/src/widgets/ChartWidget/component/index.tsx
index 3b98b9599f..7117ba0aa4 100644
--- a/app/client/src/widgets/ChartWidget/component/index.tsx
+++ b/app/client/src/widgets/ChartWidget/component/index.tsx
@@ -251,6 +251,7 @@ class ChartComponent extends React.Component<
       this.props.chartType == "CUSTOM_FUSION_CHART" &&
       this.state.chartType != "CUSTOM_FUSION_CHART"
     ) {
+      this.echartConfiguration = {};
       this.setState({
         eChartsError: undefined,
         chartType: "CUSTOM_FUSION_CHART",