From 5bdc399226a77efbd749c324c319d7fc8683c1b9 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Wed, 26 May 2021 11:52:40 +0530
Subject: [PATCH] Feature: Pie charts

---
 frontend/src/Editor/Components/Chart.jsx     | 22 ++++++++++++++------
 frontend/src/Editor/Components/components.js |  3 ++-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/Editor/Components/Chart.jsx b/frontend/src/Editor/Components/Chart.jsx
index 8285eb51c3..cbab516752 100644
--- a/frontend/src/Editor/Components/Chart.jsx
+++ b/frontend/src/Editor/Components/Chart.jsx
@@ -68,12 +68,22 @@ export const Chart = function Chart({
 
     if(!Array.isArray(rawData)) { rawData = []; }
 
-    const newData = [{
-      type: chartType || 'line',
-      x: rawData.map((item) => item["x"]),
-      y: rawData.map((item) => item["y"]),
-      marker: { color: markerColor }
-    }];
+    let newData = [];
+
+    if(chartType === 'pie') {
+      newData = [{
+        type: chartType,
+        values: rawData.map((item) => item["value"]),
+        labels: rawData.map((item) => item["label"]),
+      }];
+    } else { 
+      newData = [{
+        type: chartType || 'line',
+        x: rawData.map((item) => item["x"]),
+        y: rawData.map((item) => item["y"]),
+        marker: { color: markerColor }
+      }];
+    }
 
     setChartData(newData);
     
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index 8193cd8f68..ae63fbf5a7 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -129,7 +129,8 @@ export const componentTypes = [
       showGridLines: { type: 'toggle', displayName: 'Show grid lines'},
       type: { type: 'select', displayName: 'Chart type', options: [
         { name: 'Line', value: 'line' },
-        { name: 'Bar', value: 'bar' }
+        { name: 'Bar', value: 'bar' },
+        { name: 'Pie', value: 'pie' }
       ] },
     },
     events: {},