From 92c0946633cc037cceeae1c6e1d4442a815519e8 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Fri, 21 May 2021 10:17:30 +0530
Subject: [PATCH] Feature: Dynamic variable support for chart data

---
 frontend/src/Editor/Components/Chart.jsx | 33 +++++++++++++++---------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/Editor/Components/Chart.jsx b/frontend/src/Editor/Components/Chart.jsx
index e79380d2b0..3ababc96c9 100644
--- a/frontend/src/Editor/Components/Chart.jsx
+++ b/frontend/src/Editor/Components/Chart.jsx
@@ -9,6 +9,7 @@ export const Chart = function Chart({
   console.log('currentState', currentState);
 
   const [loadingState, setLoadingState] = useState(false);
+  const [chartData, setChartData] = useState([]);
 
   useEffect(() => {
     const loadingStateProperty = component.definition.properties.loadingState;
@@ -27,11 +28,6 @@ export const Chart = function Chart({
   const dataProperty = component.definition.properties.data;
   const dataString = dataProperty ? dataProperty.value : [];
 
-  let data = [];
-  try {
-    data = JSON.parse(dataString);
-  } catch (err) { console.log(err); }
-
   const titleProperty = component.definition.properties.title;
   const title = titleProperty.value;
 
@@ -44,13 +40,6 @@ export const Chart = function Chart({
   const gridLinesProperty = component.definition.properties.showGridLines;
   const showGridLines = gridLinesProperty ? gridLinesProperty.value : true;
 
-  const chartData = [{
-    type: chartType || 'line',
-    x: data.map((item) => item["x"]),
-    y: data.map((item) => item["y"]),
-    marker: { color: markerColor }
-  }];
-
   const layout = {
     width, 
     height, 
@@ -65,6 +54,26 @@ export const Chart = function Chart({
     }
   }
 
+  useEffect(() => {
+    let data =  resolveReferences(dataString, currentState, []);
+
+    if(typeof data === 'string') {
+      try {
+        data = JSON.parse(dataString);
+      } catch (err) { data = []; }
+    }
+
+    const newData = [{
+      type: chartType || 'line',
+      x: data.map((item) => item["x"]),
+      y: data.map((item) => item["y"]),
+      marker: { color: markerColor }
+    }];
+
+    setChartData(newData);
+    
+  }, [dataString]);
+
   return (
     <div
       style={computedStyles}