Fix/chart widget data migration

app/client/src/components/designSystems/appsmith/ChartComponent.tsx

@@ -12,7 +12,7 @@ FusionCharts.options.creditLabel = false;
 
 export interface ChartComponentProps {
   chartType: ChartType;
-  chartData: ChartData[] | ChartDataPoint[];
+  chartData: ChartData[];
   xAxisName: string;
   yAxisName: string;
   chartName: string;
@@ -143,29 +143,23 @@ class ChartComponent extends React.Component<ChartComponentProps> {
   };
 
   getChartDataSource = () => {
-    let chartData: ChartData[];
-    if (!Array.isArray(this.props.chartData[0])) {
-      chartData = [{ data: this.props.chartData as ChartDataPoint[] }];
-    } else {
-      chartData = this.props.chartData as ChartData[];
-    }
     if (
       this.props.chartData.length === 1 ||
       this.props.chartType === "PIE_CHART"
     ) {
       return {
         chart: this.getChartConfig(),
-        data: this.getChartData(chartData),
+        data: this.getChartData(this.props.chartData),
       };
     } else {
       return {
         chart: this.getChartConfig(),
         categories: [
           {
-            category: this.getChartCategories(chartData),
+            category: this.getChartCategories(this.props.chartData),
           },
         ],
-        dataset: this.getChartDataset(chartData),
+        dataset: this.getChartDataset(this.props.chartData),
       };
     }
   };
@@ -182,12 +176,10 @@ class ChartComponent extends React.Component<ChartComponentProps> {
       },
       categories: [
         {
-          category: this.getChartCategories(
-            this.props.chartData as ChartData[],
-          ),
+          category: this.getChartCategories(this.props.chartData),
         },
       ],
-      dataset: this.getChartDataset(this.props.chartData as ChartData[]),
+      dataset: this.getChartDataset(this.props.chartData),
     };
   };
 

app/client/src/utils/WidgetPropsUtils.tsx

@@ -18,6 +18,7 @@ import { OccupiedSpace } from "constants/editorConstants";
 import { DerivedPropFactory } from "utils/DerivedPropertiesFactory";
 import defaultTemplate from "templates/default";
 import { generateReactKey } from "./generators";
+import { ChartDataPoint } from "widgets/ChartWidget";
 
 export type WidgetOperationParams = {
   operation: WidgetOperation;
@@ -74,6 +75,30 @@ const updateContainers = (dsl: ContainerWidgetProps<WidgetProps>) => {
   return dsl;
 };
 
+//transform chart data, from old chart widget to new chart widget
+//updatd chart widget has support for multiple series
+const chartDataMigration = (currentDSL: ContainerWidgetProps<WidgetProps>) => {
+  currentDSL.children = currentDSL.children?.map((children: WidgetProps) => {
+    if (
+      children.type === WidgetTypes.CHART_WIDGET &&
+      children.chartData &&
+      children.chartData.length &&
+      !Array.isArray(children.chartData[0])
+    ) {
+      children.chartData = [{ data: children.chartData as ChartDataPoint[] }];
+    } else if (
+      children.type === WidgetTypes.CONTAINER_WIDGET ||
+      children.type === WidgetTypes.FORM_WIDGET ||
+      children.type === WidgetTypes.CANVAS_WIDGET ||
+      children.type === WidgetTypes.TABS_WIDGET
+    ) {
+      children = chartDataMigration(children);
+    }
+    return children;
+  });
+  return currentDSL;
+};
+
 // A rudimentary transform function which updates the DSL based on its version.
 // A more modular approach needs to be designed.
 const transformDSL = (currentDSL: ContainerWidgetProps<WidgetProps>) => {
@@ -105,7 +130,10 @@ const transformDSL = (currentDSL: ContainerWidgetProps<WidgetProps>) => {
       currentDSL.children = currentDSL.children.map(updateContainers);
     currentDSL.version = 2;
   }
-
+  if (currentDSL.version === 2) {
+    currentDSL = chartDataMigration(currentDSL);
+    currentDSL.version = 3;
+  }
   return currentDSL;
 };