fix(D3 plugin): add axis title option

src/plugins/d3/__stories__/LinearCategories.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import random from 'lodash/random';
 import {Meta, Story} from '@storybook/react';
-import {withKnobs, select, radios} from '@storybook/addon-knobs';
+import {withKnobs, select, radios, text} from '@storybook/addon-knobs';
 import {Button} from '@gravity-ui/uikit';
 import {settings} from '../../../libs';
 import {ChartKit} from '../../../components/ChartKit';
@@ -61,8 +61,16 @@ const shapeScatterChartData = (
         labels: {
             enabled: false,
         },
+        title: {
+            text: text('X axis title', ''),
+        },
+    };
+
+    let yAxis: ChartKitWidgetAxis = {
+        title: {
+            text: text('Y axis title', ''),
+        },
     };
-    let yAxis: ChartKitWidgetAxis[] | undefined;
 
     if (categories && categoriesType === 'x') {
         xAxis = {
@@ -73,20 +81,19 @@ const shapeScatterChartData = (
     }
 
     if (categories && categoriesType === 'y') {
-        yAxis = [
-            {
-                type: 'category',
-                categories,
-            },
-        ];
+        yAxis = {
+            ...yAxis,
+            type: 'category',
+            categories,
+        };
     }
 
     return {
         series,
         xAxis,
-        yAxis,
+        yAxis: [yAxis],
         title: {
-            text: 'Chart title',
+            text: text('title', 'Chart title'),
         },
     };
 };

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

@@ -70,6 +70,20 @@ export const AxisX = ({axis, width, height, scale}: Props) => {
             svgElement.select('.tick').remove();
         }
 
+        if (axis.title.text) {
+            const textY =
+                axis.title.height + parseInt(axis.labels.style.fontSize) + axis.labels.padding;
+
+            svgElement
+                .append('text')
+                .attr('class', b('title'))
+                .attr('text-anchor', 'middle')
+                .attr('x', width / 2)
+                .attr('y', textY)
+                .attr('font-size', axis.title.style.fontSize)
+                .text(axis.title.text);
+        }
+
         removeOverlappingXTicks(svgElement);
     }, [axis, width, height, scale]);
 

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

@@ -74,6 +74,20 @@ export const AxisY = ({axises, width, height, scale}: Props) => {
             svgElement.select('.tick line').style('stroke', 'none');
         }
 
+        if (axis.title.text) {
+            const textY = axis.title.height + axis.labels.padding;
+
+            svgElement
+                .append('text')
+                .attr('class', b('title'))
+                .attr('text-anchor', 'middle')
+                .attr('dy', -textY)
+                .attr('dx', -height / 2)
+                .attr('font-size', axis.title.style.fontSize)
+                .attr('transform', 'rotate(-90)')
+                .text(axis.title.text);
+        }
+
         removeOverlappingYTicks(svgElement);
     }, [axises, width, height, scale]);
 

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

@@ -43,6 +43,8 @@ export const Chart = ({width, height, data}: Props) => {
         margin: chart.margin,
         legend,
         title,
+        xAxis,
+        yAxis,
     });
     const {activeLegendItems, handleLegendItemClick} = useLegend({series});
     const {chartSeries} = useSeries({activeLegendItems, series});

src/plugins/d3/renderer/components/styles.scss

@@ -10,6 +10,10 @@
     & .tick line {
         stroke: var(--g-color-line-generic);
     }
+
+    &__title {
+        fill: var(--g-color-text-secondary);
+    }
 }
 
 .chartkit-d3-legend {

src/plugins/d3/renderer/hooks/useChartDimensions/index.ts

@@ -1,6 +1,6 @@
 import type {ChartMargin} from '../../../../../types/widget-data';
 
-import type {ChartOptions, PreparedTitle} from '../useChartOptions/types';
+import type {ChartOptions, PreparedAxis, PreparedTitle} from '../useChartOptions/types';
 
 const LEGEND_LINE_HEIGHT = 15;
 
@@ -10,14 +10,23 @@ type Args = {
     margin: ChartMargin;
     legend: ChartOptions['legend'];
     title?: PreparedTitle;
+    xAxis?: PreparedAxis;
+    yAxis?: PreparedAxis[];
 };
 
 export const useChartDimensions = (args: Args) => {
-    const {margin, legend, title, width, height} = args;
+    const {margin, legend, title, width, height, xAxis, yAxis} = args;
     const legendHeight = legend.enabled ? LEGEND_LINE_HEIGHT : 0;
     const titleHeight = title?.height || 0;
-    const boundsWidth = width - margin.right - margin.left;
-    const boundsHeight = height - margin.top - margin.bottom - legendHeight - titleHeight;
+    const xAxisTitleHeight = xAxis?.title.height || 0;
+    const yAxisTitleHeight =
+        yAxis?.reduce((acc, axis) => {
+            return acc + (axis.title.height || 0);
+        }, 0) || 0;
+
+    const boundsWidth = width - margin.right - margin.left - yAxisTitleHeight;
+    const boundsHeight =
+        height - margin.top - margin.bottom - legendHeight - titleHeight - xAxisTitleHeight;
 
     return {boundsWidth, boundsHeight, legendHeight};
 };

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

@@ -67,7 +67,8 @@ export const getPreparedChart = (args: {
     const marginLeft =
         get(chart, 'margin.left', AXIS_WIDTH) +
         preparedY1Axis.labels.padding +
-        getAxisLabelMaxWidth({axis: preparedY1Axis, series});
+        getAxisLabelMaxWidth({axis: preparedY1Axis, series}) +
+        (preparedY1Axis.title.height || 0);
 
     return {
         margin: {

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

@@ -1,2 +1,3 @@
 export const DEFAULT_AXIS_LABEL_FONT_SIZE = '11px';
 export const DEFAULT_AXIS_LABEL_PADDING = 10;
+export const DEFAULT_AXIS_TITLE_FONT_SIZE = '14px';

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

@@ -22,6 +22,11 @@ export type PreparedLegend = Required<ChartKitWidgetLegend>;
 export type PreparedAxis = Omit<ChartKitWidgetAxis, 'type' | 'labels'> & {
     type: ChartKitWidgetAxisType;
     labels: PreparedAxisLabels;
+    title: {
+        height: number;
+        text: string;
+        style: BaseTextStyle;
+    };
 };
 
 export type PreparedTitle = ChartKitWidgetData['title'] & {

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

@@ -3,9 +3,20 @@ import get from 'lodash/get';
 import type {ChartKitWidgetData} from '../../../../../types/widget-data';
 
 import type {PreparedAxis} from './types';
-import {DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_LABEL_PADDING} from './constants';
+import {
+    DEFAULT_AXIS_LABEL_FONT_SIZE,
+    DEFAULT_AXIS_LABEL_PADDING,
+    DEFAULT_AXIS_TITLE_FONT_SIZE,
+} from './constants';
+import {BaseTextStyle} from '../../../../../types/widget-data';
+import {getHorisontalSvgTextDimensions} from './utils';
 
 export const getPreparedXAxis = ({xAxis}: {xAxis: ChartKitWidgetData['xAxis']}): PreparedAxis => {
+    const titleText = get(xAxis, 'title.text', '');
+    const titleStyle: BaseTextStyle = {
+        fontSize: get(xAxis, 'title.style.fontSize', DEFAULT_AXIS_TITLE_FONT_SIZE),
+    };
+
     const preparedXAxis: PreparedAxis = {
         type: get(xAxis, 'type', 'linear'),
         labels: {
@@ -17,6 +28,13 @@ export const getPreparedXAxis = ({xAxis}: {xAxis: ChartKitWidgetData['xAxis']}):
         },
         categories: get(xAxis, 'categories'),
         timestamps: get(xAxis, 'timestamps'),
+        title: {
+            text: titleText,
+            style: titleStyle,
+            height: titleText
+                ? getHorisontalSvgTextDimensions({text: titleText, style: titleStyle})
+                : 0,
+        },
     };
 
     return preparedXAxis;

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

@@ -3,14 +3,24 @@ import get from 'lodash/get';
 import type {BaseTextStyle, ChartKitWidgetData} from '../../../../../types/widget-data';
 
 import type {PreparedAxis} from './types';
-import {DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_LABEL_PADDING} from './constants';
+import {
+    DEFAULT_AXIS_LABEL_FONT_SIZE,
+    DEFAULT_AXIS_LABEL_PADDING,
+    DEFAULT_AXIS_TITLE_FONT_SIZE,
+} from './constants';
+import {getHorisontalSvgTextDimensions} from './utils';
 
 export const getPreparedYAxis = ({yAxis}: {yAxis: ChartKitWidgetData['yAxis']}): PreparedAxis[] => {
     // FIXME: add support for n axises
     const yAxis1 = yAxis?.[0];
+
     const y1LabelsStyle: BaseTextStyle = {
         fontSize: get(yAxis1, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
     };
+    const y1TitleText = get(yAxis1, 'title.text', '');
+    const y1TitleStyle: BaseTextStyle = {
+        fontSize: get(yAxis1, 'title.style.fontSize', DEFAULT_AXIS_TITLE_FONT_SIZE),
+    };
     const preparedY1Axis: PreparedAxis = {
         type: get(yAxis1, 'type', 'linear'),
         labels: {
@@ -22,6 +32,13 @@ export const getPreparedYAxis = ({yAxis}: {yAxis: ChartKitWidgetData['yAxis']}):
         },
         categories: get(yAxis1, 'categories'),
         timestamps: get(yAxis1, 'timestamps'),
+        title: {
+            text: y1TitleText,
+            style: y1TitleStyle,
+            height: y1TitleText
+                ? getHorisontalSvgTextDimensions({text: y1TitleText, style: y1TitleStyle})
+                : 0,
+        },
     };
 
     return [preparedY1Axis];

src/types/widget-data/axis.ts

@@ -19,4 +19,7 @@ export type ChartKitWidgetAxis = {
     type?: ChartKitWidgetAxisType;
     /** The axis labels show the number or category for each tick */
     labels?: ChartKitWidgetAxisLabels;
+    title?: {
+        text?: string;
+    };
 };