From 23bfcc706da1953e7ea79f34bb7b1ca967eb0112 Mon Sep 17 00:00:00 2001
From: Yash <vibhandikyash@gmail.com>
Date: Tue, 1 Jun 2021 20:27:58 +0530
Subject: [PATCH] FIX #3899 : added supported custom chart types list, validate
 chart type and fix type error by fusioncharts

---
 .../src/constants/CustomChartConstants.ts     | 64 ++++++++++++++
 app/client/src/workers/validations.test.ts    | 87 ++-----------------
 app/client/src/workers/validations.ts         | 14 +++
 3 files changed, 87 insertions(+), 78 deletions(-)
 create mode 100644 app/client/src/constants/CustomChartConstants.ts

diff --git a/app/client/src/constants/CustomChartConstants.ts b/app/client/src/constants/CustomChartConstants.ts
new file mode 100644
index 0000000000..fa11c207e9
--- /dev/null
+++ b/app/client/src/constants/CustomChartConstants.ts
@@ -0,0 +1,64 @@
+export const CUSTOM_CHART_TYPES = [
+  "column2d",
+  "column3d",
+  "line",
+  "area",
+  "bar2d",
+  "bar3d",
+  "pie2d",
+  "pie3d",
+  "doughnut2d",
+  "doughnut3d",
+  "pareto2d",
+  "pareto3d",
+  "scrollcombidy2d",
+  "scrollcombi2d",
+  "scrollstackedcolumn2d",
+  "scrollmsstackedcolumn2d",
+  "scrollmsstackedcolumn2dlinedy",
+  "scrollstackedbar2d",
+  "scrollarea2d",
+  "scrollline2d",
+  "scrollcolumn2d",
+  "scrollbar2d",
+  "bubble",
+  "scatter",
+  "msstackedcolumn2d",
+  "stackedarea2d",
+  "stackedbar3d",
+  "stackedbar2d",
+  "stackedcolumn3d",
+  "stackedcolumn2d",
+  "msstackedcolumn2dlinedy",
+  "stackedcolumn3dlinedy",
+  "mscolumn3dlinedy",
+  "mscombidy2d",
+  "mscombidy3d",
+  "stackedcolumn3dline",
+  "stackedcolumn2dline",
+  "mscolumnline3d",
+  "mscombi3d",
+  "mscombi2d",
+  "marimekko",
+  "msarea",
+  "msbar3d",
+  "msbar2d",
+  "msline",
+  "mscolumn3d",
+  "mscolumn2d",
+  "spline",
+  "splinearea",
+  "msspline",
+  "mssplinedy",
+  "mssplinearea",
+  "stackedcolumn2dlinedy",
+  "stackedarea2dlinedy",
+];
+
+export const CUSTOM_CHART_DEFAULT_PARSED = {
+  type: "",
+  dataSource: {
+    chart: {},
+    data: [],
+  },
+};
diff --git a/app/client/src/workers/validations.test.ts b/app/client/src/workers/validations.test.ts
index 4956ddaed4..b1053b5bd2 100644
--- a/app/client/src/workers/validations.test.ts
+++ b/app/client/src/workers/validations.test.ts
@@ -126,7 +126,7 @@ describe("Chart Custom Config validator", () => {
     const cases = [
       {
         input: {
-          type: "area2d",
+          type: "area",
           dataSource: {
             chart: {
               caption: "Countries With Most Oil Reserves [2017-18]",
@@ -175,7 +175,7 @@ describe("Chart Custom Config validator", () => {
         output: {
           isValid: true,
           parsed: {
-            type: "area2d",
+            type: "area",
             dataSource: {
               chart: {
                 caption: "Countries With Most Oil Reserves [2017-18]",
@@ -222,7 +222,7 @@ describe("Chart Custom Config validator", () => {
           },
 
           transformed: {
-            type: "area2d",
+            type: "area",
             dataSource: {
               chart: {
                 caption: "Countries With Most Oil Reserves [2017-18]",
@@ -310,83 +310,14 @@ describe("Chart Custom Config validator", () => {
           },
         },
         output: {
-          isValid: true,
+          isValid: false,
+          message:
+            'This value does not evaluate to type "{type: string, dataSource: { chart: object, data: Array<{label: string, value: number}>}}"',
           parsed: {
-            type: "area2d",
+            type: "",
             dataSource: {
-              data: [
-                {
-                  label: "Venezuela",
-                  value: "290",
-                },
-                {
-                  label: "Saudi",
-                  value: "260",
-                },
-                {
-                  label: "Canada",
-                  value: "180",
-                },
-                {
-                  label: "Iran",
-                  value: "140",
-                },
-                {
-                  label: "Russia",
-                  value: "115",
-                },
-                {
-                  label: "UAE",
-                  value: "100",
-                },
-                {
-                  label: "US",
-                  value: "30",
-                },
-                {
-                  label: "China",
-                  value: "30",
-                },
-              ],
-            },
-          },
-          transformed: {
-            type: "area2d",
-            dataSource: {
-              data: [
-                {
-                  label: "Venezuela",
-                  value: "290",
-                },
-                {
-                  label: "Saudi",
-                  value: "260",
-                },
-                {
-                  label: "Canada",
-                  value: "180",
-                },
-                {
-                  label: "Iran",
-                  value: "140",
-                },
-                {
-                  label: "Russia",
-                  value: "115",
-                },
-                {
-                  label: "UAE",
-                  value: "100",
-                },
-                {
-                  label: "US",
-                  value: "30",
-                },
-                {
-                  label: "China",
-                  value: "30",
-                },
-              ],
+              chart: {},
+              data: [],
             },
           },
         },
diff --git a/app/client/src/workers/validations.ts b/app/client/src/workers/validations.ts
index c374c9d737..c17447170c 100644
--- a/app/client/src/workers/validations.ts
+++ b/app/client/src/workers/validations.ts
@@ -7,6 +7,7 @@ import {
 import { DataTree } from "../entities/DataTree/dataTreeFactory";
 import _, {
   every,
+  indexOf,
   isBoolean,
   isNil,
   isNumber,
@@ -18,6 +19,10 @@ import _, {
   toString,
 } from "lodash";
 import { WidgetProps } from "../widgets/BaseWidget";
+import {
+  CUSTOM_CHART_TYPES,
+  CUSTOM_CHART_DEFAULT_PARSED,
+} from "../constants/CustomChartConstants";
 import moment from "moment";
 
 export function validateDateString(
@@ -416,6 +421,15 @@ export const VALIDATORS: Record<VALIDATION_TYPES, Validator> = {
         message: `${WIDGET_TYPE_VALIDATION_ERROR} "{type: string, dataSource: { chart: object, data: Array<{label: string, value: number}>}}"`,
       };
     }
+    // check custom chart exist or not
+    const typeExist = indexOf(CUSTOM_CHART_TYPES, parsed.type) !== -1;
+    if (!typeExist) {
+      return {
+        isValid: false,
+        parsed: { ...CUSTOM_CHART_DEFAULT_PARSED },
+        message: `${WIDGET_TYPE_VALIDATION_ERROR} "{type: string, dataSource: { chart: object, data: Array<{label: string, value: number}>}}"`,
+      };
+    }
     return { isValid, parsed, transformed: parsed };
   },
   [VALIDATION_TYPES.MARKERS]: (