RELATED: ONE-2815 Allow disabling gridline

gooddata · Apr 10, 2018 · a3bd32e · a3bd32e
1 parent c6d9cd4
commit a3bd32e
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);