diff --git a/app/client/src/components/designSystems/appsmith/ChartComponent.tsx b/app/client/src/components/designSystems/appsmith/ChartComponent.tsx index a5b767a2e0..c476318a62 100644 --- a/app/client/src/components/designSystems/appsmith/ChartComponent.tsx +++ b/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 { }; 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 { }, 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), }; }; diff --git a/app/client/src/utils/WidgetPropsUtils.tsx b/app/client/src/utils/WidgetPropsUtils.tsx index 37bf0701b4..e8d9390200 100644 --- a/app/client/src/utils/WidgetPropsUtils.tsx +++ b/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) => { 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) => { + 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) => { @@ -105,7 +130,10 @@ const transformDSL = (currentDSL: ContainerWidgetProps) => { currentDSL.children = currentDSL.children.map(updateContainers); currentDSL.version = 2; } - + if (currentDSL.version === 2) { + currentDSL = chartDataMigration(currentDSL); + currentDSL.version = 3; + } return currentDSL; };