From 8cca2862be88c04e21769b1602156ed1a1241053 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Sat, 15 May 2021 18:28:47 +0530
Subject: [PATCH] [Charts] Ability to change marker color

---
 frontend/src/Editor/Components/Chart.jsx      | 25 ++++++++++++++++---
 frontend/src/Editor/Components/components.js  |  2 ++
 .../src/Editor/Inspector/Components/Chart.jsx |  2 ++
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Editor/Components/Chart.jsx b/frontend/src/Editor/Components/Chart.jsx
index f92d9a2a86..c3cd74e619 100644
--- a/frontend/src/Editor/Components/Chart.jsx
+++ b/frontend/src/Editor/Components/Chart.jsx
@@ -32,11 +32,30 @@ export const Chart = function Chart({
   const typeProperty = component.definition.properties.type;
   const chartType = typeProperty.value;
 
+  const markerColorProperty = component.definition.properties.markerColor;
+  const markerColor = markerColorProperty ? markerColorProperty.value : 'red';
+
   const chartData = [{
     type: chartType || 'line',
     x: data.map((item) => item["x"]),
-    y: data.map((item) => item["y"])
-  }]
+    y: data.map((item) => item["y"]),
+    marker: { color: markerColor },
+    xaxis: { showgrid: false }
+  }];
+
+  const layout = {
+    width, 
+    height, 
+    title,
+    xaxis: {
+      showgrid: true,
+      showline: true
+    },
+    yaxis: {
+        showgrid: true,
+        showline: true
+    }
+  }
 
   return (
     <div
@@ -45,7 +64,7 @@ export const Chart = function Chart({
     >
       <Plot
         data={chartData}
-        layout={ {width: width, height: height, title } }
+        layout={layout}
       />
     </div>
   );
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index 62d5eea82f..7b02bb9c27 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -126,6 +126,7 @@ export const componentTypes = [
       title: { type: 'string', displayName: 'Title' },
       data: { type: 'json', displayName: 'Data' },
       loadingState: { type: 'code', displayName: 'Loading State'},
+      markerColor: { type: 'color', displayName: 'Marker color'},
       type: { type: 'select', displayName: 'Chart type', options: [
         { name: 'Line', value: 'line' },
         { name: 'Bar', value: 'bar' }
@@ -141,6 +142,7 @@ export const componentTypes = [
     definition: {
       properties: {
         title: { value: 'This title can be changed' },
+        markerColor: { value: 'red' },
         loadingState: { value: `{{false}}` },
         type: { value: `line` },
         data: { value: `[
diff --git a/frontend/src/Editor/Inspector/Components/Chart.jsx b/frontend/src/Editor/Inspector/Components/Chart.jsx
index 3914759629..3126534e16 100644
--- a/frontend/src/Editor/Inspector/Components/Chart.jsx
+++ b/frontend/src/Editor/Inspector/Components/Chart.jsx
@@ -81,6 +81,8 @@ class Chart extends React.Component {
         </div>
 
         {renderElement(component, componentMeta, paramUpdated, dataQueries, 'loadingState', 'properties', currentState)}
+
+        {renderElement(component, componentMeta, paramUpdated, dataQueries, 'markerColor', 'properties', currentState)}
       </div>
     );
   }