feat(D3 plugin): add axis grid settings (#228)

Author: kuzmadom

src/plugins/d3/__stories__/scatter/Timestamp.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import random from 'lodash/random';
 import {Meta, Story} from '@storybook/react';
+import {boolean} from '@storybook/addon-knobs';
 import {dateTime} from '@gravity-ui/date-utils';
 import {Button} from '@gravity-ui/uikit';
 import {settings} from '../../../../libs';
@@ -72,7 +73,17 @@ const shapeData = (data: Record<string, any>[]): ChartKitWidgetData<string> => {
         xAxis: {
             type: 'datetime',
             timestamps: data.map((d) => d.x),
+            grid: {
+                enabled: boolean('xAxis.grid.enabled', true),
+            },
         },
+        yAxis: [
+            {
+                grid: {
+                    enabled: boolean('yAxis.grid.enabled', true),
+                },
+            },
+        ],
         tooltip: {
             renderer: ({hovered}) => {
                 const d = hovered.data as ScatterSeriesData<string>;

src/plugins/d3/renderer/components/AxisX.tsx

@@ -47,8 +47,9 @@ export const AxisX = ({axis, width, height, scale}: Props) => {
 
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
+        const tickSize = axis.grid.enabled ? height * -1 : 0;
         const xAxisGenerator = axisBottom(scale as AxisScale<AxisDomain>)
-            .tickSize(height * -1)
+            .tickSize(tickSize)
             .tickPadding(axis.labels.padding)
             .tickFormat((value) => {
                 return formatAxisTickLabel({

src/plugins/d3/renderer/components/AxisY.tsx

@@ -48,8 +48,9 @@ export const AxisY = ({axises, width, height, scale}: Props) => {
         const axis = axises[0];
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
+        const tickSize = axis.grid.enabled ? width * -1 : 0;
         const yAxisGenerator = axisLeft(scale as AxisScale<AxisDomain>)
-            .tickSize(width * -1)
+            .tickSize(tickSize)
             .tickPadding(axis.labels.padding)
             .tickFormat((value) => {
                 return formatAxisTickLabel({

src/plugins/d3/renderer/hooks/useChartOptions/types.ts

@@ -28,6 +28,9 @@ export type PreparedAxis = Omit<ChartKitWidgetAxis, 'type' | 'labels'> & {
         style: BaseTextStyle;
     };
     min?: number;
+    grid: {
+        enabled: boolean;
+    };
 };
 
 export type PreparedTitle = ChartKitWidgetData['title'] & {

src/plugins/d3/renderer/hooks/useChartOptions/x-axis.ts

@@ -35,6 +35,10 @@ export const getPreparedXAxis = ({xAxis}: {xAxis: ChartKitWidgetData['xAxis']}):
                 ? getHorisontalSvgTextDimensions({text: titleText, style: titleStyle})
                 : 0,
         },
+        min: get(xAxis, 'min'),
+        grid: {
+            enabled: get(xAxis, 'grid.enabled', true),
+        },
     };
 
     return preparedXAxis;

src/plugins/d3/renderer/hooks/useChartOptions/y-axis.ts

@@ -40,6 +40,9 @@ export const getPreparedYAxis = ({yAxis}: {yAxis: ChartKitWidgetData['yAxis']}):
                 : 0,
         },
         min: get(yAxis1, 'min'),
+        grid: {
+            enabled: get(yAxis1, 'grid.enabled', true),
+        },
     };
 
     return [preparedY1Axis];

src/types/widget-data/axis.ts

@@ -25,4 +25,12 @@ export type ChartKitWidgetAxis = {
 
     /** The minimum value of the axis. If undefined the min value is automatically calculate */
     min?: number;
+
+    grid?: {
+        /** Enable or disable the grid lines.
+         *
+         * Defaults to true.
+         * */
+        enabled?: boolean;
+    };
 };