@gravity-ui/chartkit 4.5.0 → 4.6.1

package/build/plugins/d3/renderer/constants/defaults/legend.js

@@ -0,0 +1,8 @@
+export const legendDefaults = {
+    align: 'center',
+    itemDistance: 20,
+    margin: 15,
+    itemStyle: {
+        fontSize: '12px',
+    },
+};

package/build/plugins/d3/renderer/{constants.d.ts → constants/index.d.ts}

@@ -1,4 +1,4 @@
+export * from './defaults';
 export declare const DEFAULT_PALETTE: string[];
 export declare const DEFAULT_AXIS_LABEL_FONT_SIZE = "11px";
-export declare const DEFAULT_AXIS_LABEL_PADDING = 10;
 export declare const DEFAULT_AXIS_TITLE_FONT_SIZE = "14px";

package/build/plugins/d3/renderer/{constants.js → constants/index.js}

@@ -1,3 +1,4 @@
+export * from './defaults';
 export const DEFAULT_PALETTE = [
     '#4DA2F1',
     '#FF3D64',
@@ -21,5 +22,4 @@ export const DEFAULT_PALETTE = [
     '#DCA3D7',
 ];
 export const DEFAULT_AXIS_LABEL_FONT_SIZE = '11px';
-export const DEFAULT_AXIS_LABEL_PADDING = 10;
 export const DEFAULT_AXIS_TITLE_FONT_SIZE = '14px';

package/build/plugins/d3/renderer/hooks/useAxisScales/index.d.ts

@@ -1,5 +1,5 @@
 import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
-import type { ChartOptions } from '../useChartOptions/types';
+import type { ChartOptions, PreparedAxis } from '../useChartOptions/types';
 import { PreparedSeries } from '../useSeries/types';
 export type ChartScale = ScaleLinear<number, number> | ScaleBand<string> | ScaleTime<number, number>;
 type Args = {
@@ -13,6 +13,8 @@ type ReturnValue = {
     xScale?: ChartScale;
     yScale?: ChartScale;
 };
+export declare function createYScale(axis: PreparedAxis, series: PreparedSeries[], boundsHeight: number): ScaleLinear<number, number, never> | ScaleBand<string> | ScaleTime<number, number, never>;
+export declare function createXScale(axis: PreparedAxis, series: PreparedSeries[], boundsWidth: number): ScaleLinear<number, number, never> | ScaleBand<string> | ScaleTime<number, number, never>;
 /**
  * Uses to create scales for axis related series
  */

package/build/plugins/d3/renderer/hooks/useAxisScales/index.js

@@ -17,108 +17,110 @@ const filterCategoriesByVisibleSeries = (args) => {
     });
     return categories.filter((c) => visibleCategories.has(c));
 };
-const createScales = (args) => {
-    const { boundsWidth, boundsHeight, series, xAxis, yAxis } = args;
-    const xMin = get(xAxis, 'min');
-    const xType = get(xAxis, 'type', 'linear');
-    const xCategories = get(xAxis, 'categories');
-    const xTimestamps = get(xAxis, 'timestamps');
-    const yType = get(yAxis[0], 'type', 'linear');
-    const yMin = get(yAxis[0], 'min');
-    const yCategories = get(yAxis[0], 'categories');
-    const yTimestamps = get(xAxis, 'timestamps');
-    let visibleSeries = getOnlyVisibleSeries(series);
-    // Reassign to all series in case of all series unselected,
-    // otherwise we will get an empty space without grid
-    visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;
-    let xScale;
-    let yScale;
-    const xAxisMinPadding = boundsWidth * xAxis.maxPadding;
-    const xRange = [0, boundsWidth - xAxisMinPadding];
-    switch (xType) {
+export function createYScale(axis, series, boundsHeight) {
+    const yType = get(axis, 'type', 'linear');
+    const yMin = get(axis, 'min');
+    const yCategories = get(axis, 'categories');
+    const yTimestamps = get(axis, 'timestamps');
+    switch (yType) {
         case 'linear': {
-            const domain = getDomainDataXBySeries(visibleSeries);
+            const domain = getDomainDataYBySeries(series);
+            const range = [boundsHeight, boundsHeight * axis.maxPadding];
             if (isNumericalArrayData(domain)) {
-                const [domainXMin, xMax] = extent(domain);
-                const xMinValue = typeof xMin === 'number' ? xMin : domainXMin;
-                xScale = scaleLinear().domain([xMinValue, xMax]).range(xRange).nice();
+                const [domainYMin, yMax] = extent(domain);
+                const yMinValue = typeof yMin === 'number' ? yMin : domainYMin;
+                return scaleLinear().domain([yMinValue, yMax]).range(range).nice();
             }
             break;
         }
         case 'category': {
-            if (xCategories) {
+            if (yCategories) {
                 const filteredCategories = filterCategoriesByVisibleSeries({
-                    axisDirection: 'x',
-                    categories: xCategories,
-                    series: visibleSeries,
+                    axisDirection: 'y',
+                    categories: yCategories,
+                    series: series,
                 });
-                xScale = scaleBand().domain(filteredCategories).range([0, boundsWidth]);
-                if (xScale.step() / 2 < xAxisMinPadding) {
-                    xScale.range(xRange);
-                }
+                return scaleBand().domain(filteredCategories).range([boundsHeight, 0]);
             }
             break;
         }
         case 'datetime': {
-            if (xTimestamps) {
-                const [xMin, xMax] = extent(xTimestamps);
-                xScale = scaleUtc().domain([xMin, xMax]).range(xRange).nice();
+            const range = [boundsHeight, boundsHeight * axis.maxPadding];
+            if (yTimestamps) {
+                const [yMin, yMax] = extent(yTimestamps);
+                return scaleUtc().domain([yMin, yMax]).range(range).nice();
             }
             else {
-                const domain = getDomainDataXBySeries(visibleSeries);
+                const domain = getDomainDataYBySeries(series);
                 if (isNumericalArrayData(domain)) {
-                    const [xMin, xMax] = extent(domain);
-                    xScale = scaleUtc().domain([xMin, xMax]).range(xRange).nice();
+                    const [yMin, yMax] = extent(domain);
+                    return scaleUtc().domain([yMin, yMax]).range(range).nice();
                 }
             }
             break;
         }
     }
-    if (!xScale) {
-        throw new Error('Failed to create xScale');
-    }
-    switch (yType) {
+    throw new Error('Failed to create yScale');
+}
+export function createXScale(axis, series, boundsWidth) {
+    const xMin = get(axis, 'min');
+    const xType = get(axis, 'type', 'linear');
+    const xCategories = get(axis, 'categories');
+    const xTimestamps = get(axis, 'timestamps');
+    const xAxisMinPadding = boundsWidth * axis.maxPadding;
+    const xRange = [0, boundsWidth - xAxisMinPadding];
+    switch (xType) {
         case 'linear': {
-            const domain = getDomainDataYBySeries(visibleSeries);
-            const range = [boundsHeight, boundsHeight * yAxis[0].maxPadding];
+            const domain = getDomainDataXBySeries(series);
             if (isNumericalArrayData(domain)) {
-                const [domainYMin, yMax] = extent(domain);
-                const yMinValue = typeof yMin === 'number' ? yMin : domainYMin;
-                yScale = scaleLinear().domain([yMinValue, yMax]).range(range).nice();
+                const [domainXMin, xMax] = extent(domain);
+                const xMinValue = typeof xMin === 'number' ? xMin : domainXMin;
+                return scaleLinear().domain([xMinValue, xMax]).range(xRange).nice();
             }
             break;
         }
         case 'category': {
-            if (yCategories) {
+            if (xCategories) {
                 const filteredCategories = filterCategoriesByVisibleSeries({
-                    axisDirection: 'y',
-                    categories: yCategories,
-                    series: visibleSeries,
+                    axisDirection: 'x',
+                    categories: xCategories,
+                    series: series,
                 });
-                yScale = scaleBand().domain(filteredCategories).range([boundsHeight, 0]);
+                const xScale = scaleBand().domain(filteredCategories).range([0, boundsWidth]);
+                if (xScale.step() / 2 < xAxisMinPadding) {
+                    xScale.range(xRange);
+                }
+                return xScale;
             }
             break;
         }
         case 'datetime': {
-            const range = [boundsHeight, boundsHeight * yAxis[0].maxPadding];
-            if (yTimestamps) {
-                const [yMin, yMax] = extent(yTimestamps);
-                yScale = scaleUtc().domain([yMin, yMax]).range(range).nice();
+            if (xTimestamps) {
+                const [xMin, xMax] = extent(xTimestamps);
+                return scaleUtc().domain([xMin, xMax]).range(xRange).nice();
             }
             else {
-                const domain = getDomainDataYBySeries(visibleSeries);
+                const domain = getDomainDataXBySeries(series);
                 if (isNumericalArrayData(domain)) {
-                    const [yMin, yMax] = extent(domain);
-                    yScale = scaleUtc().domain([yMin, yMax]).range(range).nice();
+                    const [xMin, xMax] = extent(domain);
+                    return scaleUtc().domain([xMin, xMax]).range(xRange).nice();
                 }
             }
             break;
         }
     }
-    if (!yScale) {
-        throw new Error('Failed to create yScale');
-    }
-    return { xScale, yScale };
+    throw new Error('Failed to create xScale');
+}
+const createScales = (args) => {
+    const { boundsWidth, boundsHeight, series, xAxis, yAxis } = args;
+    let visibleSeries = getOnlyVisibleSeries(series);
+    // Reassign to all series in case of all series unselected,
+    // otherwise we will get an empty space without grid
+    visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;
+    return {
+        xScale: createXScale(xAxis, visibleSeries, boundsWidth),
+        yScale: createYScale(yAxis[0], visibleSeries, boundsHeight),
+    };
 };
 /**
  * Uses to create scales for axis related series

package/build/plugins/d3/renderer/hooks/useChartDimensions/index.d.ts

@@ -1,13 +1,16 @@
-import type { ChartMargin } from '../../../../../types/widget-data';
-import type { PreparedAxis } from '../useChartOptions/types';
+import type { ChartMargin } from '../../../../../types';
+import type { PreparedAxis, PreparedLegend, PreparedSeries } from '../../hooks';
+export { getBoundsWidth } from './utils';
 type Args = {
     width: number;
     height: number;
     margin: ChartMargin;
-    yAxis?: PreparedAxis[];
+    preparedLegend: PreparedLegend;
+    preparedXAxis: PreparedAxis;
+    preparedYAxis: PreparedAxis[];
+    preparedSeries: PreparedSeries[];
 };
 export declare const useChartDimensions: (args: Args) => {
     boundsWidth: number;
     boundsHeight: number;
 };
-export {};

package/build/plugins/d3/renderer/hooks/useChartDimensions/index.js

@@ -1,9 +1,67 @@
+import React from 'react';
+import { createXScale } from '../../hooks';
+import { formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsMaxHeight, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, isAxisRelatedSeries, } from '../../utils';
+import { getBoundsWidth } from './utils';
+export { getBoundsWidth } from './utils';
+const getHeightOccupiedByXAxis = ({ preparedXAxis, preparedSeries, width, }) => {
+    let height = preparedXAxis.title.height;
+    if (preparedXAxis.labels.enabled) {
+        const scale = createXScale(preparedXAxis, preparedSeries, width);
+        const tickCount = getTicksCount({ axis: preparedXAxis, range: width });
+        const ticks = getXAxisItems({
+            scale: scale,
+            count: tickCount,
+            maxCount: getMaxTickCount({ width, axis: preparedXAxis }),
+        });
+        const step = getClosestPointsRange(preparedXAxis, ticks);
+        const labels = ticks.map((value) => {
+            return formatAxisTickLabel({
+                axis: preparedXAxis,
+                value,
+                step,
+            });
+        });
+        const overlapping = hasOverlappingLabels({
+            width,
+            labels,
+            padding: preparedXAxis.labels.padding,
+            style: preparedXAxis.labels.style,
+        });
+        const labelsHeight = overlapping
+            ? getLabelsMaxHeight({
+                labels,
+                style: preparedXAxis.labels.style,
+                transform: 'rotate(-45)',
+            })
+            : getHorisontalSvgTextHeight({ text: 'Tmp', style: preparedXAxis.labels.style });
+        height += preparedXAxis.labels.margin + labelsHeight;
+    }
+    return height;
+};
+const getBottomOffset = (args) => {
+    const { hasAxisRelatedSeries, preparedLegend, preparedXAxis, preparedSeries, width } = args;
+    let result = 0;
+    if (preparedLegend.enabled) {
+        result += preparedLegend.height + preparedLegend.margin;
+    }
+    if (hasAxisRelatedSeries) {
+        result += getHeightOccupiedByXAxis({ preparedXAxis, preparedSeries, width });
+    }
+    return result;
+};
 export const useChartDimensions = (args) => {
-    const { margin, width, height, yAxis } = args;
-    const yAxisTitleHeight = (yAxis === null || yAxis === void 0 ? void 0 : 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;
-    return { boundsWidth, boundsHeight };
+    const { margin, width, height, preparedLegend, preparedXAxis, preparedYAxis, preparedSeries } = args;
+    return React.useMemo(() => {
+        const hasAxisRelatedSeries = preparedSeries.some(isAxisRelatedSeries);
+        const boundsWidth = getBoundsWidth({ chartWidth: width, chartMargin: margin, preparedYAxis });
+        const bottomOffset = getBottomOffset({
+            hasAxisRelatedSeries,
+            preparedLegend,
+            preparedXAxis,
+            preparedSeries,
+            width: boundsWidth,
+        });
+        const boundsHeight = height - margin.top - margin.bottom - bottomOffset;
+        return { boundsWidth, boundsHeight };
+    }, [margin, width, height, preparedLegend, preparedXAxis, preparedYAxis, preparedSeries]);
 };

package/build/plugins/d3/renderer/hooks/useChartDimensions/utils.d.ts

@@ -0,0 +1,6 @@
+import type { PreparedAxis, PreparedChart } from '../../hooks';
+export declare const getBoundsWidth: (args: {
+    chartWidth: number;
+    chartMargin: PreparedChart['margin'];
+    preparedYAxis: PreparedAxis[];
+}) => number;

package/build/plugins/d3/renderer/hooks/useChartDimensions/utils.js

@@ -0,0 +1,7 @@
+export const getBoundsWidth = (args) => {
+    const { chartWidth, chartMargin, preparedYAxis } = args;
+    const yAxisTitleHeight = preparedYAxis.reduce((acc, axis) => {
+        return acc + (axis.title.height || 0);
+    }, 0) || 0;
+    return chartWidth - chartMargin.right - chartMargin.left - yAxisTitleHeight;
+};

package/build/plugins/d3/renderer/hooks/useChartOptions/chart.d.ts

@@ -1,10 +1,8 @@
 import type { ChartKitWidgetData } from '../../../../../types/widget-data';
-import type { PreparedAxis, PreparedChart, PreparedTitle, PreparedLegend } from './types';
+import type { PreparedAxis, PreparedChart, PreparedTitle } from './types';
 export declare const getPreparedChart: (args: {
     chart: ChartKitWidgetData['chart'];
     series: ChartKitWidgetData['series'];
-    preparedLegend: PreparedLegend;
-    preparedXAxis: PreparedAxis;
     preparedY1Axis: PreparedAxis;
     preparedTitle?: PreparedTitle;
 }) => PreparedChart;

package/build/plugins/d3/renderer/hooks/useChartOptions/chart.js

@@ -1,47 +1,6 @@
-import { select, max } from 'd3';
 import get from 'lodash/get';
-import { formatAxisTickLabel, getDomainDataYBySeries, getHorisontalSvgTextHeight, isAxisRelatedSeries, } from '../../utils';
-const AXIS_WIDTH = 1;
-const getAxisLabelMaxWidth = (args) => {
-    const { axis, series } = args;
-    let maxDomainValue;
-    let width = 0;
-    switch (axis.type) {
-        case 'category': {
-            const yCategories = get(axis, 'categories', []);
-            maxDomainValue = [...yCategories].sort((c1, c2) => c2.length - c1.length)[0];
-            break;
-        }
-        case 'datetime': {
-            const yTimestamps = get(axis, 'timestamps');
-            const domain = yTimestamps || getDomainDataYBySeries(series);
-            maxDomainValue = max(domain);
-            break;
-        }
-        case 'linear': {
-            const domain = getDomainDataYBySeries(series);
-            maxDomainValue = max(domain);
-        }
-    }
-    let formattedValue = '';
-    if (axis.labels.enabled) {
-        formattedValue = formatAxisTickLabel({
-            axisType: axis.type,
-            value: maxDomainValue,
-            dateFormat: axis.labels['dateFormat'],
-            numberFormat: axis.labels['numberFormat'],
-        });
-    }
-    select(document.body)
-        .append('text')
-        .style('font-size', axis.labels.style.fontSize)
-        .text(formattedValue)
-        .each(function () {
-        width = this.getBoundingClientRect().width;
-    })
-        .remove();
-    return width;
-};
+import { isAxisRelatedSeries, getHorisontalSvgTextHeight } from '../../utils';
+const AXIS_LINE_WIDTH = 1;
 const getMarginTop = (args) => {
     const { chart, hasAxisRelatedSeries, preparedY1Axis, preparedTitle } = args;
     let marginTop = get(chart, 'margin.top', 0);
@@ -54,27 +13,14 @@ const getMarginTop = (args) => {
     }
     return marginTop;
 };
-const getMarginBottom = (args) => {
-    const { chart, hasAxisRelatedSeries, preparedLegend, preparedXAxis } = args;
-    let marginBottom = get(chart, 'margin.bottom', 0) + preparedLegend.height;
-    if (hasAxisRelatedSeries) {
-        marginBottom +=
-            preparedXAxis.title.height +
-                getHorisontalSvgTextHeight({ text: 'Tmp', style: preparedXAxis.labels.style });
-        if (preparedXAxis.labels.enabled) {
-            marginBottom += preparedXAxis.labels.padding;
-        }
-    }
-    return marginBottom;
-};
 const getMarginLeft = (args) => {
-    const { chart, hasAxisRelatedSeries, series, preparedY1Axis } = args;
+    const { chart, hasAxisRelatedSeries, preparedY1Axis } = args;
     let marginLeft = get(chart, 'margin.left', 0);
     if (hasAxisRelatedSeries) {
         marginLeft +=
-            AXIS_WIDTH +
-                preparedY1Axis.labels.padding +
-                getAxisLabelMaxWidth({ axis: preparedY1Axis, series: series.data }) +
+            AXIS_LINE_WIDTH +
+                preparedY1Axis.labels.margin +
+                (preparedY1Axis.labels.maxWidth || 0) +
                 preparedY1Axis.title.height;
     }
     return marginLeft;
@@ -84,16 +30,11 @@ const getMarginRight = (args) => {
     return get(chart, 'margin.right', 0);
 };
 export const getPreparedChart = (args) => {
-    const { chart, series, preparedLegend, preparedXAxis, preparedY1Axis, preparedTitle } = args;
+    const { chart, series, preparedY1Axis, preparedTitle } = args;
     const hasAxisRelatedSeries = series.data.some(isAxisRelatedSeries);
     const marginTop = getMarginTop({ chart, hasAxisRelatedSeries, preparedY1Axis, preparedTitle });
-    const marginBottom = getMarginBottom({
-        chart,
-        hasAxisRelatedSeries,
-        preparedLegend,
-        preparedXAxis,
-    });
-    const marginLeft = getMarginLeft({ chart, hasAxisRelatedSeries, series, preparedY1Axis });
+    const marginBottom = get(chart, 'margin.bottom', 0);
+    const marginLeft = getMarginLeft({ chart, hasAxisRelatedSeries, preparedY1Axis });
     const marginRight = getMarginRight({ chart });
     return {
         margin: {

package/build/plugins/d3/renderer/hooks/useChartOptions/index.d.ts

@@ -1,5 +1,7 @@
 import type { ChartKitWidgetData } from '../../../../../types/widget-data';
 import type { ChartOptions } from './types';
-type Args = ChartKitWidgetData;
+type Args = {
+    data: ChartKitWidgetData;
+};
 export declare const useChartOptions: (args: Args) => ChartOptions;
 export {};

package/build/plugins/d3/renderer/hooks/useChartOptions/index.js

@@ -1,34 +1,29 @@
 import React from 'react';
 import { getPreparedChart } from './chart';
-import { getPreparedLegend } from './legend';
 import { getPreparedTitle } from './title';
 import { getPreparedTooltip } from './tooltip';
 import { getPreparedXAxis } from './x-axis';
 import { getPreparedYAxis } from './y-axis';
 export const useChartOptions = (args) => {
-    const { chart, series, legend, title, tooltip, xAxis, yAxis } = args;
+    const { data: { chart, series, title, tooltip, xAxis, yAxis }, } = args;
     const options = React.useMemo(() => {
         const preparedTitle = getPreparedTitle({ title });
         const preparedTooltip = getPreparedTooltip({ tooltip });
-        const preparedLegend = getPreparedLegend({ legend, series });
-        const preparedYAxis = getPreparedYAxis({ yAxis });
+        const preparedYAxis = getPreparedYAxis({ series: series.data, yAxis });
         const preparedXAxis = getPreparedXAxis({ xAxis });
         const preparedChart = getPreparedChart({
             chart,
             series,
             preparedTitle,
-            preparedLegend,
-            preparedXAxis,
             preparedY1Axis: preparedYAxis[0],
         });
         return {
             chart: preparedChart,
-            legend: preparedLegend,
             title: preparedTitle,
             tooltip: preparedTooltip,
             xAxis: preparedXAxis,
             yAxis: preparedYAxis,
         };
-    }, [chart, legend, title, tooltip, series, xAxis, yAxis]);
+    }, [chart, title, tooltip, series, xAxis, yAxis]);
     return options;
 };

package/build/plugins/d3/renderer/hooks/useChartOptions/types.d.ts

@@ -1,13 +1,11 @@
-import type { BaseTextStyle, ChartKitWidgetData, ChartKitWidgetAxis, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels, ChartKitWidgetLegend, ChartMargin } from '../../../../../types/widget-data';
-type PreparedAxisLabels = Omit<ChartKitWidgetAxisLabels, 'enabled' | 'padding' | 'style'> & Required<Pick<ChartKitWidgetAxisLabels, 'enabled' | 'padding'>> & {
+import type { BaseTextStyle, ChartKitWidgetData, ChartKitWidgetAxis, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels, ChartMargin } from '../../../../../types/widget-data';
+type PreparedAxisLabels = Omit<ChartKitWidgetAxisLabels, 'enabled' | 'padding' | 'style'> & Required<Pick<ChartKitWidgetAxisLabels, 'enabled' | 'padding' | 'margin'>> & {
     style: BaseTextStyle;
+    maxWidth?: number;
 };
 export type PreparedChart = {
     margin: ChartMargin;
 };
-export type PreparedLegend = Required<ChartKitWidgetLegend> & {
-    height: number;
-};
 export type PreparedAxis = Omit<ChartKitWidgetAxis, 'type' | 'labels'> & {
     type: ChartKitWidgetAxisType;
     labels: PreparedAxisLabels;
@@ -33,7 +31,6 @@ export type PreparedTooltip = ChartKitWidgetData['tooltip'] & {
 };
 export type ChartOptions = {
     chart: PreparedChart;
-    legend: PreparedLegend;
     tooltip: PreparedTooltip;
     xAxis: PreparedAxis;
     yAxis: PreparedAxis[];

package/build/plugins/d3/renderer/hooks/useChartOptions/x-axis.js

@@ -1,5 +1,5 @@
 import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_LABEL_PADDING, DEFAULT_AXIS_TITLE_FONT_SIZE, } from '../../constants';
+import { axisLabelsDefaults, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TITLE_FONT_SIZE, } from '../../constants';
 import { getHorisontalSvgTextHeight } from '../../utils';
 export const getPreparedXAxis = ({ xAxis }) => {
     const titleText = get(xAxis, 'title.text', '');
@@ -10,9 +10,11 @@ export const getPreparedXAxis = ({ xAxis }) => {
         type: get(xAxis, 'type', 'linear'),
         labels: {
             enabled: get(xAxis, 'labels.enabled', true),
-            padding: get(xAxis, 'labels.padding', DEFAULT_AXIS_LABEL_PADDING),
+            margin: get(xAxis, 'labels.margin', axisLabelsDefaults.margin),
+            padding: get(xAxis, 'labels.padding', axisLabelsDefaults.padding),
             dateFormat: get(xAxis, 'labels.dateFormat'),
             numberFormat: get(xAxis, 'labels.numberFormat'),
+            autoRotation: get(xAxis, 'labels.autoRotation', true),
             style: { fontSize: get(xAxis, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE) },
         },
         lineColor: get(xAxis, 'lineColor'),

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.d.ts

@@ -1,5 +1,6 @@
-import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { ChartKitWidgetData, ChartKitWidgetSeries } from '../../../../../types/widget-data';
 import type { PreparedAxis } from './types';
-export declare const getPreparedYAxis: ({ yAxis }: {
+export declare const getPreparedYAxis: ({ series, yAxis, }: {
+    series: ChartKitWidgetSeries[];
     yAxis: ChartKitWidgetData['yAxis'];
 }) => PreparedAxis[];

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.js

@@ -1,7 +1,31 @@
 import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_LABEL_PADDING, DEFAULT_AXIS_TITLE_FONT_SIZE, } from '../../constants';
-import { getHorisontalSvgTextHeight } from '../../utils';
-export const getPreparedYAxis = ({ yAxis }) => {
+import { axisLabelsDefaults, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TITLE_FONT_SIZE, } from '../../constants';
+import { getHorisontalSvgTextHeight, formatAxisTickLabel, getClosestPointsRange, getScaleTicks, getLabelsMaxWidth, } from '../../utils';
+import { createYScale } from '../useAxisScales';
+const getAxisLabelMaxWidth = (args) => {
+    const { axis, series } = args;
+    if (!axis.labels.enabled) {
+        return 0;
+    }
+    const scale = createYScale(axis, series, 1);
+    const ticks = getScaleTicks(scale);
+    // FIXME: it is necessary to filter data, since we do not draw overlapping ticks
+    const step = getClosestPointsRange(axis, ticks);
+    const labels = ticks.map((tick) => formatAxisTickLabel({
+        axis,
+        value: tick,
+        step,
+    }));
+    return getLabelsMaxWidth({
+        labels,
+        style: axis.labels.style,
+    });
+};
+const applyLabelsMaxWidth = (args) => {
+    const { series, preparedYAxis } = args;
+    preparedYAxis.labels.maxWidth = getAxisLabelMaxWidth({ axis: preparedYAxis, series });
+};
+export const getPreparedYAxis = ({ series, yAxis, }) => {
     // FIXME: add support for n axises
     const yAxis1 = yAxis === null || yAxis === void 0 ? void 0 : yAxis[0];
     const y1LabelsStyle = {
@@ -15,7 +39,9 @@ export const getPreparedYAxis = ({ yAxis }) => {
         type: get(yAxis1, 'type', 'linear'),
         labels: {
             enabled: get(yAxis1, 'labels.enabled', true),
-            padding: get(yAxis1, 'labels.padding', DEFAULT_AXIS_LABEL_PADDING),
+            margin: get(yAxis1, 'labels.margin', axisLabelsDefaults.margin),
+            padding: get(yAxis1, 'labels.padding', axisLabelsDefaults.padding),
+            autoRotation: get(yAxis1, 'labels.autoRotation', false),
             dateFormat: get(yAxis1, 'labels.dateFormat'),
             numberFormat: get(yAxis1, 'labels.numberFormat'),
             style: y1LabelsStyle,
@@ -39,5 +65,6 @@ export const getPreparedYAxis = ({ yAxis }) => {
             pixelInterval: get(yAxis1, 'ticks.pixelInterval'),
         },
     };
+    applyLabelsMaxWidth({ series, preparedYAxis: preparedY1Axis });
     return [preparedY1Axis];
 };

package/build/plugins/d3/renderer/hooks/useSeries/constants.d.ts

@@ -1 +1 @@
-export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 10;
+export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 8;

package/build/plugins/d3/renderer/hooks/useSeries/constants.js

@@ -1 +1 @@
-export const DEFAULT_LEGEND_SYMBOL_SIZE = 10;
+export const DEFAULT_LEGEND_SYMBOL_SIZE = 8;

package/build/plugins/d3/renderer/hooks/useSeries/index.d.ts

@@ -1,15 +1,27 @@
 import type { ChartKitWidgetData } from '../../../../../types/widget-data';
-import { PreparedLegend } from '../useChartOptions/types';
-import { PreparedSeries } from './types';
-export type OnLegendItemClick = (data: {
-    name: string;
-    metaKey: boolean;
-}) => void;
+import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
+import type { PreparedSeries, OnLegendItemClick } from './types';
 type Args = {
-    legend: PreparedLegend;
+    chartWidth: number;
+    chartHeight: number;
+    chartMargin: PreparedChart['margin'];
+    legend: ChartKitWidgetData['legend'];
     series: ChartKitWidgetData['series'];
+    preparedYAxis: PreparedAxis[];
 };
 export declare const useSeries: (args: Args) => {
+    legendItems: import("./types").LegendItem[][];
+    legendConfig: {
+        offset: {
+            left: number;
+            top: number;
+        };
+        pagination: {
+            limit: number;
+            maxPage: number;
+        } | undefined;
+    };
+    preparedLegend: import("./types").PreparedLegend;
     preparedSeries: PreparedSeries[];
     handleLegendItemClick: OnLegendItemClick;
 };