From a3bd32e54a72aa5bf9433a46bd1331a7e66b1bba Mon Sep 17 00:00:00 2001
From: Peter Lacko <peter.lacko@gooddata.com>
Date: Thu, 29 Mar 2018 08:14:19 +0200
Subject: [PATCH] RELATED: ONE-2815 Allow disabling gridline

---
 src/components/core/base/BaseChart.tsx          |  7 +++++--
 src/components/visualizations/chart/Chart.tsx   |  1 +
 .../visualizations/chart/chartOptionsBuilder.ts |  4 ++++
 .../chart/highcharts/customConfiguration.ts     | 17 ++++++++++++++++-
 .../highcharts/test/customConfiguration.spec.ts |  5 +++++
 .../chart/test/chartOptionsBuilder.spec.ts      |  9 +++++++++
 6 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/components/core/base/BaseChart.tsx b/src/components/core/base/BaseChart.tsx
index 0e8e17f310..e7153cd970 100644
--- a/src/components/core/base/BaseChart.tsx
+++ b/src/components/core/base/BaseChart.tsx
@@ -58,9 +58,12 @@ export class StatelessBaseChart extends BaseVisualization<IBaseChartProps & ILoa
             config,
             type,
             execution,
-            onDataTooLarge
+            onDataTooLarge,
+            visualizationProperties
         } = this.props;
 
+        const fullConfig = { ...config, ...visualizationProperties, type };
+
         return (
             <IntlWrapper locale={locale}>
                 <IntlTranslationsProvider>
@@ -79,7 +82,7 @@ export class StatelessBaseChart extends BaseVisualization<IBaseChartProps & ILoa
                                 executionResponse={execution.executionResponse.executionResponse}
                                 executionResult={fixedExecutionResult.executionResult}
                                 height={height}
-                                config={{ ...config, type }}
+                                config={fullConfig}
                                 afterRender={afterRender}
                                 onDataTooLarge={onDataTooLarge}
                                 onNegativeValues={this.props.onNegativeValues}
diff --git a/src/components/visualizations/chart/Chart.tsx b/src/components/visualizations/chart/Chart.tsx
index 18c3abc7b6..3f01965e98 100644
--- a/src/components/visualizations/chart/Chart.tsx
+++ b/src/components/visualizations/chart/Chart.tsx
@@ -29,6 +29,7 @@ export interface IChartConfig {
     legend?: ILegendConfig;
     limits?: IChartLimits;
     stacking?: boolean;
+    grid?: any;
 }
 
 export interface IChartProps {
diff --git a/src/components/visualizations/chart/chartOptionsBuilder.ts b/src/components/visualizations/chart/chartOptionsBuilder.ts
index ea535e4bbd..27ea386a3a 100644
--- a/src/components/visualizations/chart/chartOptionsBuilder.ts
+++ b/src/components/visualizations/chart/chartOptionsBuilder.ts
@@ -551,6 +551,7 @@ export function getChartOptions(
     // if there is only one measure, yLabel is name of this measure, otherwise an empty string
     const yLabel = config.yLabel || (measureGroup.items.length === 1 ? unwrap(measureGroup.items[0]).name : '');
     const yFormat = config.yFormat || unwrap(measureGroup.items[0]).format;
+    const gridEnabled = get(config, 'grid.enabled', true);
 
     return {
         type,
@@ -573,6 +574,9 @@ export function getChartOptions(
         },
         actions: {
             tooltip: generateTooltipFn(viewByAttribute, type)
+        },
+        grid: {
+            enabled: gridEnabled
         }
     };
 }
diff --git a/src/components/visualizations/chart/highcharts/customConfiguration.ts b/src/components/visualizations/chart/highcharts/customConfiguration.ts
index 9011ca8466..e53a133fcf 100644
--- a/src/components/visualizations/chart/highcharts/customConfiguration.ts
+++ b/src/components/visualizations/chart/highcharts/customConfiguration.ts
@@ -428,6 +428,20 @@ function getHoverStyles(chartOptions: any, config: any) {
     };
 }
 
+function getGridConfiguration(chartOptions: any) {
+    const gridEnabled = get(chartOptions, 'grid.enabled', true);
+
+    if (!gridEnabled) {
+        return {
+            yAxis: {
+                gridLineWidth: 0
+            }
+        };
+    }
+
+    return {};
+}
+
 export function getCustomizedConfiguration(chartOptions: any) {
     const configurators = [
         getTitleConfiguration,
@@ -436,7 +450,8 @@ export function getCustomizedConfiguration(chartOptions: any) {
         getLabelsConfiguration,
         getDataConfiguration,
         getTooltipConfiguration,
-        getHoverStyles
+        getHoverStyles,
+        getGridConfiguration
     ];
 
     const commonData = configurators.reduce((config: any, configurator: any) => {
diff --git a/src/components/visualizations/chart/highcharts/test/customConfiguration.spec.ts b/src/components/visualizations/chart/highcharts/test/customConfiguration.spec.ts
index 9476fac4a6..a321a32e44 100644
--- a/src/components/visualizations/chart/highcharts/test/customConfiguration.spec.ts
+++ b/src/components/visualizations/chart/highcharts/test/customConfiguration.spec.ts
@@ -30,4 +30,9 @@ describe('getCustomizedConfiguration', () => {
         const result = getCustomizedConfiguration(chartOptions);
         expect(result.series[0].data[0].name).toEqual('&lt;b&gt;bbb&lt;/b&gt;');
     });
+
+    it('should set gridline width to zero', () => {
+        const result = getCustomizedConfiguration({ ...chartOptions, grid: { enabled: false } });
+        expect(result.yAxis.gridLineWidth).toEqual(0);
+    });
 });
diff --git a/src/components/visualizations/chart/test/chartOptionsBuilder.spec.ts b/src/components/visualizations/chart/test/chartOptionsBuilder.spec.ts
index 65de87427d..8f58439cfb 100644
--- a/src/components/visualizations/chart/test/chartOptionsBuilder.spec.ts
+++ b/src/components/visualizations/chart/test/chartOptionsBuilder.spec.ts
@@ -1096,6 +1096,15 @@ describe('chartOptionsBuilder', () => {
             expect(chartOptionsWithCustomOptions.legendLayout).toBe('vertical');
         });
 
+        it('should enable grid', () => {
+            expect(chartOptionsWithCustomOptions.grid.enabled).toBe(true);
+        });
+
+        it('should disable grid', () => {
+            const chartOptions = generateChartOptions(dataSet, { grid: { enabled: false }, type: 'line' });
+            expect(chartOptions.grid.enabled).toEqual(false);
+        });
+
         describe('in usecase of bar chart with 3 metrics', () => {
             const chartOptions = generateChartOptions(fixtures.barChartWith3MetricsAndViewByAttribute);