diff --git a/src/plugins/d3/__stories__/scatter/Timestamp.stories.tsx b/src/plugins/d3/__stories__/scatter/Timestamp.stories.tsx index a31cdb61..c00cc5f4 100644 --- a/src/plugins/d3/__stories__/scatter/Timestamp.stories.tsx +++ b/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[]): ChartKitWidgetData => { 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; diff --git a/src/plugins/d3/renderer/components/AxisX.tsx b/src/plugins/d3/renderer/components/AxisX.tsx index 18b2d726..d07a61d9 100644 --- a/src/plugins/d3/renderer/components/AxisX.tsx +++ b/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) - .tickSize(height * -1) + .tickSize(tickSize) .tickPadding(axis.labels.padding) .tickFormat((value) => { return formatAxisTickLabel({ diff --git a/src/plugins/d3/renderer/components/AxisY.tsx b/src/plugins/d3/renderer/components/AxisY.tsx index 001d408d..58dc11e2 100644 --- a/src/plugins/d3/renderer/components/AxisY.tsx +++ b/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) - .tickSize(width * -1) + .tickSize(tickSize) .tickPadding(axis.labels.padding) .tickFormat((value) => { return formatAxisTickLabel({ diff --git a/src/plugins/d3/renderer/hooks/useChartOptions/types.ts b/src/plugins/d3/renderer/hooks/useChartOptions/types.ts index ff2399f8..7b0b2f0b 100644 --- a/src/plugins/d3/renderer/hooks/useChartOptions/types.ts +++ b/src/plugins/d3/renderer/hooks/useChartOptions/types.ts @@ -28,6 +28,9 @@ export type PreparedAxis = Omit & { style: BaseTextStyle; }; min?: number; + grid: { + enabled: boolean; + }; }; export type PreparedTitle = ChartKitWidgetData['title'] & { diff --git a/src/plugins/d3/renderer/hooks/useChartOptions/x-axis.ts b/src/plugins/d3/renderer/hooks/useChartOptions/x-axis.ts index 6d81d10d..81719efd 100644 --- a/src/plugins/d3/renderer/hooks/useChartOptions/x-axis.ts +++ b/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; diff --git a/src/plugins/d3/renderer/hooks/useChartOptions/y-axis.ts b/src/plugins/d3/renderer/hooks/useChartOptions/y-axis.ts index 4426475c..cbd0505d 100644 --- a/src/plugins/d3/renderer/hooks/useChartOptions/y-axis.ts +++ b/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]; diff --git a/src/types/widget-data/axis.ts b/src/types/widget-data/axis.ts index f094f007..cd69b5da 100644 --- a/src/types/widget-data/axis.ts +++ b/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; + }; };