From c2ee24662aea04c2487c74712137c579c601ac44 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Sat, 15 May 2021 18:35:01 +0530
Subject: [PATCH] Feature: Ability to toggle chart grid lines

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

diff --git a/frontend/src/Editor/Components/Chart.jsx b/frontend/src/Editor/Components/Chart.jsx
index c3cd74e619..4038c6361c 100644
--- a/frontend/src/Editor/Components/Chart.jsx
+++ b/frontend/src/Editor/Components/Chart.jsx
@@ -35,12 +35,14 @@ export const Chart = function Chart({
   const markerColorProperty = component.definition.properties.markerColor;
   const markerColor = markerColorProperty ? markerColorProperty.value : 'red';
 
+  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 },
-    xaxis: { showgrid: false }
+    marker: { color: markerColor }
   }];
 
   const layout = {
@@ -48,11 +50,11 @@ export const Chart = function Chart({
     height, 
     title,
     xaxis: {
-      showgrid: true,
+      showgrid: showGridLines,
       showline: true
     },
     yaxis: {
-        showgrid: true,
+        showgrid: showGridLines,
         showline: true
     }
   }
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index 7b02bb9c27..848aa73108 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -127,6 +127,7 @@ export const componentTypes = [
       data: { type: 'json', displayName: 'Data' },
       loadingState: { type: 'code', displayName: 'Loading State'},
       markerColor: { type: 'color', displayName: 'Marker color'},
+      showGridLines: { type: 'toggle', displayName: 'Show grid lines'},
       type: { type: 'select', displayName: 'Chart type', options: [
         { name: 'Line', value: 'line' },
         { name: 'Bar', value: 'bar' }
@@ -143,6 +144,7 @@ export const componentTypes = [
       properties: {
         title: { value: 'This title can be changed' },
         markerColor: { value: 'red' },
+        showGridLines: { value: true },
         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 3126534e16..c214c3f994 100644
--- a/frontend/src/Editor/Inspector/Components/Chart.jsx
+++ b/frontend/src/Editor/Inspector/Components/Chart.jsx
@@ -83,6 +83,8 @@ class Chart extends React.Component {
         {renderElement(component, componentMeta, paramUpdated, dataQueries, 'loadingState', 'properties', currentState)}
 
         {renderElement(component, componentMeta, paramUpdated, dataQueries, 'markerColor', 'properties', currentState)}
+
+        {renderElement(component, componentMeta, paramUpdated, dataQueries, 'showGridLines', 'properties', currentState)}
       </div>
     );
   }