@gravity-ui/charts 1.38.6 → 1.39.0

package/dist/cjs/components/ChartInner/useChartInnerProps.js

@@ -1,11 +1,13 @@
 import React from 'react';
+import isEqual from 'lodash/isEqual';
 import { DEFAULT_PALETTE, SERIES_TYPE } from '../../constants';
-import { useAxis, useAxisScales, useChartDimensions, useNormalizedOriginalData, usePrevious, useSeries, useShapes, useSplit, useYAxisLabelWidth, useZoom, } from '../../hooks';
-import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
+import { createScales, getAxes, getPreparedSeries, getShapes, getSplit, getVisibleSeries, useZoom, } from '../../hooks';
+import { getLegendComponents, getPreparedLegend } from '../../hooks/useSeries/prepare-legend';
 import { getPreparedOptions } from '../../hooks/useSeries/prepare-options';
-import { getEffectiveXRange, getZoomedSeriesData } from '../../utils';
-import { useLegend } from './useLegend';
-import { hasAtLeastOneSeriesDataPerPlot } from './utils';
+import { getActiveLegendItems, getAllLegendItems } from '../../hooks/useSeries/utils';
+import { getChartDimensions, getEffectiveXRange, getSortedSeriesData, getYAxisWidth, getZoomedSeriesData, isAxisRelatedSeries, } from '../../utils';
+import { getNormalizedXAxis, getNormalizedYAxis, recalculateYAxisLabelsWidth } from './utils';
+import { hasAtLeastOneSeriesDataPerPlot } from './utils/common';
 const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: false,
 };
@@ -35,110 +37,231 @@ function getBoundsOffsetLeft(args) {
     return chartMarginLeft + legendOffset + leftAxisWidth;
 }
 export function useChartInnerProps(props) {
+    var _a, _b, _c, _d, _e, _f;
     const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, width, updateZoomState, zoomState, } = props;
-    const prevWidth = usePrevious(width);
-    const prevHeight = usePrevious(height);
-    const colors = React.useMemo(() => {
-        var _a;
-        return (_a = data.colors) !== null && _a !== void 0 ? _a : DEFAULT_PALETTE;
-    }, [data.colors]);
-    const { normalizedSeriesData, normalizedXAxis, normalizedYAxis } = useNormalizedOriginalData({
-        seriesData: data.series.data,
-        xAxis: data.xAxis,
-        yAxis: data.yAxis,
-    });
-    const preparedSeriesOptions = React.useMemo(() => {
-        return getPreparedOptions(data.series.options);
-    }, [data.series.options]);
-    const { preparedSeries: allPreparedSeries, preparedLegend, handleLegendItemClick, } = useSeries({
-        colors,
-        legend: data.legend,
-        originalSeriesData: normalizedSeriesData,
-        seriesData: normalizedSeriesData,
-        seriesOptions: data.series.options,
-    });
-    const effectiveZoomState = React.useMemo(() => {
-        const result = {};
-        const effectiveX = getEffectiveXRange(zoomState.x, rangeSliderState);
-        if (effectiveX !== undefined) {
-            result.x = effectiveX;
-        }
-        if (zoomState.y !== undefined) {
-            result.y = zoomState.y;
-        }
-        return result;
-    }, [zoomState, rangeSliderState]);
-    const { preparedSeries, preparedShapesSeries } = React.useMemo(() => {
-        return getZoomedSeriesData({
-            seriesData: allPreparedSeries,
-            xAxis: normalizedXAxis,
-            yAxis: normalizedYAxis,
-            zoomState: effectiveZoomState,
-        });
-    }, [allPreparedSeries, normalizedXAxis, normalizedYAxis, effectiveZoomState]);
-    const { legendConfig, legendItems } = useLegend({
-        width,
-        height,
-        preparedChart,
-        preparedSeries,
-        preparedLegend,
-    });
-    const { xAxis, yAxis, setAxes } = useAxis({
-        height,
-        preparedChart,
-        legendConfig,
-        preparedLegend,
-        preparedSeries,
-        preparedSeriesOptions,
-        width,
-        xAxis: normalizedXAxis,
-        yAxis: normalizedYAxis,
-    });
-    const { boundsWidth, boundsHeight } = useChartDimensions({
+    const [selectedLegendItems, setSelectedLegendItems] = React.useState(null);
+    const [chartState, setState] = React.useState(null);
+    const prevStateValue = React.useRef(chartState);
+    const previousChartData = React.useRef(null);
+    const currentRunRef = React.useRef(0);
+    React.useEffect(() => {
+        currentRunRef.current++;
+        const currentRun = currentRunRef.current;
+        (async function () {
+            var _a, _b, _c;
+            const chartDataChanged = !(previousChartData.current && isEqual(previousChartData.current, data));
+            const colors = (_a = data.colors) !== null && _a !== void 0 ? _a : DEFAULT_PALETTE;
+            const normalizedSeriesData = getSortedSeriesData({
+                seriesData: data.series.data,
+                xAxis: data.xAxis,
+                yAxis: data.yAxis,
+            });
+            const normalizedXAxis = getNormalizedXAxis({ xAxis: data.xAxis });
+            const normalizedYAxis = getNormalizedYAxis({ yAxis: data.yAxis });
+            const preparedSeriesOptions = getPreparedOptions(data.series.options);
+            const preparedLegend = await getPreparedLegend({
+                legend: data.legend,
+                series: normalizedSeriesData,
+            });
+            let allPreparedSeries;
+            if (chartDataChanged) {
+                allPreparedSeries = await getPreparedSeries({
+                    seriesData: normalizedSeriesData,
+                    seriesOptions: data.series.options,
+                    preparedLegend,
+                    colors,
+                });
+            }
+            else {
+                allPreparedSeries = (_c = (_b = prevStateValue.current) === null || _b === void 0 ? void 0 : _b.allPreparedSeries) !== null && _c !== void 0 ? _c : [];
+            }
+            const activeLegendItems = selectedLegendItems !== null && selectedLegendItems !== void 0 ? selectedLegendItems : getActiveLegendItems(allPreparedSeries);
+            const visiblePreparedSeries = getVisibleSeries({
+                preparedSeries: allPreparedSeries,
+                activeLegendItems,
+            });
+            const effectiveZoomState = {};
+            const effectiveX = getEffectiveXRange(zoomState.x, rangeSliderState);
+            if (effectiveX !== undefined) {
+                effectiveZoomState.x = effectiveX;
+            }
+            if (zoomState.y !== undefined) {
+                effectiveZoomState.y = zoomState.y;
+            }
+            const { preparedSeries, preparedShapesSeries } = getZoomedSeriesData({
+                seriesData: visiblePreparedSeries,
+                xAxis: normalizedXAxis,
+                yAxis: normalizedYAxis,
+                zoomState: effectiveZoomState,
+            });
+            const { legendConfig, legendItems } = await getLegendComponents({
+                chartWidth: width,
+                chartHeight: height,
+                chartMargin: preparedChart.margin,
+                series: preparedSeries,
+                preparedLegend,
+            });
+            const axes = await getAxes({
+                height,
+                preparedChart,
+                legendConfig,
+                preparedLegend,
+                preparedSeries,
+                preparedSeriesOptions,
+                width,
+                xAxis: normalizedXAxis,
+                yAxis: normalizedYAxis,
+            });
+            const xAxis = axes.xAxis;
+            let yAxis = axes.yAxis;
+            let preparedSplit = { plots: [], gap: 0 };
+            let xScale;
+            let yScale;
+            let boundsWidth = 0;
+            let boundsHeight = 0;
+            const calculateAxisBasedProps = () => {
+                const chartDimensions = getChartDimensions({
+                    height,
+                    margin: preparedChart.margin,
+                    preparedLegend,
+                    preparedSeries: preparedSeries,
+                    preparedYAxis: yAxis,
+                    preparedXAxis: xAxis,
+                    width,
+                    legendConfig,
+                });
+                boundsHeight = chartDimensions.boundsHeight;
+                boundsWidth = chartDimensions.boundsWidth;
+                preparedSplit = getSplit({ split: data.split, boundsHeight, chartWidth: width });
+                if (preparedSeries.some(isAxisRelatedSeries)) {
+                    ({ xScale, yScale } = createScales({
+                        boundsWidth,
+                        boundsHeight,
+                        isRangeSlider: false,
+                        rangeSliderState,
+                        series: preparedSeries,
+                        split: preparedSplit,
+                        xAxis,
+                        yAxis,
+                        zoomState,
+                    }));
+                }
+            };
+            calculateAxisBasedProps();
+            const newYAxis = await recalculateYAxisLabelsWidth({
+                seriesData: preparedSeries,
+                yAxis,
+                yScale,
+            });
+            if (!isEqual(yAxis, newYAxis)) {
+                yAxis = newYAxis;
+                calculateAxisBasedProps();
+            }
+            const { shapes, shapesData } = await getShapes({
+                boundsWidth,
+                boundsHeight,
+                clipPathBySeriesType: CLIP_PATH_BY_SERIES_TYPE,
+                dispatcher,
+                series: preparedShapesSeries,
+                seriesOptions: preparedSeriesOptions,
+                xAxis,
+                xScale,
+                yAxis,
+                yScale,
+                split: preparedSplit,
+                htmlLayout,
+                clipPathId,
+                isOutsideBounds: (x, y) => {
+                    return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
+                },
+                zoomState: effectiveZoomState,
+            });
+            const boundsOffsetTop = getBoundsOffsetTop({
+                chartMarginTop: preparedChart.margin.top,
+                preparedLegend,
+                legendConfig,
+            });
+            // We need to calculate the width of each left axis because the first axis can be hidden
+            const boundsOffsetLeft = getBoundsOffsetLeft({
+                chartMarginLeft: preparedChart.margin.left,
+                preparedLegend,
+                yAxis,
+                getYAxisWidth,
+                legendConfig,
+            });
+            //end
+            const newStateValue = {
+                allPreparedSeries,
+                boundsHeight,
+                boundsOffsetLeft,
+                boundsOffsetTop,
+                boundsWidth,
+                legendConfig,
+                legendItems,
+                preparedLegend,
+                preparedSeries,
+                preparedSeriesOptions,
+                preparedSplit,
+                shapes,
+                shapesData,
+                xAxis,
+                xScale,
+                yAxis,
+                yScale,
+                activeLegendItems,
+            };
+            if (currentRunRef.current === currentRun) {
+                if (!isEqual(prevStateValue.current, newStateValue)) {
+                    setState(newStateValue);
+                    prevStateValue.current = newStateValue;
+                }
+                previousChartData.current = data;
+            }
+        })();
+    }, [
         height,
-        margin: preparedChart.margin,
-        preparedLegend,
-        preparedSeries: preparedSeries,
-        preparedYAxis: yAxis,
-        preparedXAxis: xAxis,
         width,
-        legendConfig,
-    });
-    const preparedSplit = useSplit({ split: data.split, boundsHeight, chartWidth: width });
-    const { xScale, yScale } = useAxisScales({
-        boundsWidth,
-        boundsHeight,
-        rangeSliderState,
-        series: preparedSeries,
-        split: preparedSplit,
-        xAxis,
-        yAxis,
+        data,
+        selectedLegendItems,
         zoomState,
-    });
-    useYAxisLabelWidth({ seriesData: preparedSeries, setAxes, yAxis, yScale });
-    const isOutsideBounds = React.useCallback((x, y) => {
-        return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
-    }, [boundsHeight, boundsWidth]);
-    const { shapes, shapesData, shapesReady } = useShapes({
-        boundsWidth,
-        boundsHeight,
-        clipPathBySeriesType: CLIP_PATH_BY_SERIES_TYPE,
+        rangeSliderState,
+        preparedChart,
         dispatcher,
-        series: preparedShapesSeries,
-        seriesOptions: preparedSeriesOptions,
-        xAxis,
-        xScale,
-        yAxis,
-        yScale,
-        split: preparedSplit,
         htmlLayout,
         clipPathId,
-        isOutsideBounds,
-        zoomState: effectiveZoomState,
-    });
+    ]);
+    // additional start
+    const preparedSeries = React.useMemo(() => { var _a; return (_a = chartState === null || chartState === void 0 ? void 0 : chartState.preparedSeries) !== null && _a !== void 0 ? _a : []; }, [chartState === null || chartState === void 0 ? void 0 : chartState.preparedSeries]);
+    const activeLegendItems = React.useMemo(() => { var _a; return (_a = chartState === null || chartState === void 0 ? void 0 : chartState.activeLegendItems) !== null && _a !== void 0 ? _a : []; }, [chartState === null || chartState === void 0 ? void 0 : chartState.activeLegendItems]);
+    const boundsHeight = (_a = chartState === null || chartState === void 0 ? void 0 : chartState.boundsHeight) !== null && _a !== void 0 ? _a : 0;
+    const boundsWidth = (_b = chartState === null || chartState === void 0 ? void 0 : chartState.boundsWidth) !== null && _b !== void 0 ? _b : 0;
+    const xAxis = (_c = chartState === null || chartState === void 0 ? void 0 : chartState.xAxis) !== null && _c !== void 0 ? _c : null;
+    const yAxis = React.useMemo(() => { var _a; return (_a = chartState === null || chartState === void 0 ? void 0 : chartState.yAxis) !== null && _a !== void 0 ? _a : []; }, [chartState === null || chartState === void 0 ? void 0 : chartState.yAxis]);
+    const handleLegendItemClick = React.useCallback(({ id, metaKey }) => {
+        const allItems = getAllLegendItems(preparedSeries);
+        const onlyItemSelected = (selectedLegendItems !== null && selectedLegendItems !== void 0 ? selectedLegendItems : []).length === 1 && activeLegendItems.includes(id);
+        let nextActiveLegendItems;
+        if (metaKey && activeLegendItems.includes(id)) {
+            nextActiveLegendItems = activeLegendItems.filter((item) => item !== id);
+        }
+        else if (metaKey && !activeLegendItems.includes(id)) {
+            nextActiveLegendItems = activeLegendItems.concat(id);
+        }
+        else if (onlyItemSelected && allItems.length === 1) {
+            nextActiveLegendItems = [];
+        }
+        else if (onlyItemSelected) {
+            nextActiveLegendItems = allItems;
+        }
+        else {
+            nextActiveLegendItems = [id];
+        }
+        setSelectedLegendItems(nextActiveLegendItems);
+    }, [preparedSeries, selectedLegendItems, activeLegendItems]);
     const handleAttemptToSetZoomState = React.useCallback((nextZoomState) => {
+        var _a;
         const { preparedSeries: nextZoomedSeriesData } = getZoomedSeriesData({
-            seriesData: preparedSeries,
+            seriesData: (_a = chartState === null || chartState === void 0 ? void 0 : chartState.preparedSeries) !== null && _a !== void 0 ? _a : [],
             xAxis,
             yAxis,
             zoomState: nextZoomState,
@@ -147,54 +270,22 @@ export function useChartInnerProps(props) {
         if (hasData) {
             updateZoomState(nextZoomState);
         }
-    }, [xAxis, yAxis, preparedSeries, updateZoomState]);
+    }, [chartState === null || chartState === void 0 ? void 0 : chartState.preparedSeries, updateZoomState, xAxis, yAxis]);
     useZoom({
         node: plotNode,
         onUpdate: handleAttemptToSetZoomState,
         plotContainerHeight: boundsHeight,
         plotContainerWidth: boundsWidth,
-        preparedSplit,
+        preparedSplit: chartState === null || chartState === void 0 ? void 0 : chartState.preparedSplit,
         preparedZoom: preparedChart.zoom,
         xAxis,
-        xScale,
+        xScale: chartState === null || chartState === void 0 ? void 0 : chartState.xScale,
         yAxis,
-        yScale,
+        yScale: chartState === null || chartState === void 0 ? void 0 : chartState.yScale,
     });
-    const boundsOffsetTop = getBoundsOffsetTop({
-        chartMarginTop: preparedChart.margin.top,
-        preparedLegend,
-        legendConfig,
-    });
-    // We need to calculate the width of each left axis because the first axis can be hidden
-    const boundsOffsetLeft = getBoundsOffsetLeft({
-        chartMarginLeft: preparedChart.margin.left,
-        preparedLegend,
-        yAxis,
-        getYAxisWidth,
-        legendConfig,
-    });
-    return {
-        allPreparedSeries,
-        boundsHeight,
-        boundsOffsetLeft,
-        boundsOffsetTop,
+    // additional end
+    return Object.assign(Object.assign({}, chartState), { preparedSeries, boundsOffsetLeft: (_d = chartState === null || chartState === void 0 ? void 0 : chartState.boundsOffsetLeft) !== null && _d !== void 0 ? _d : 0, boundsOffsetTop: (_e = chartState === null || chartState === void 0 ? void 0 : chartState.boundsOffsetTop) !== null && _e !== void 0 ? _e : 0, boundsHeight,
         boundsWidth,
-        handleLegendItemClick,
-        isOutsideBounds,
-        legendConfig,
-        legendItems,
-        preparedLegend,
-        preparedSeries,
-        preparedSeriesOptions,
-        preparedSplit,
-        prevHeight,
-        prevWidth,
-        shapes,
-        shapesData,
-        shapesReady,
         xAxis,
-        xScale,
-        yAxis,
-        yScale,
-    };
+        yAxis, shapesData: (_f = chartState === null || chartState === void 0 ? void 0 : chartState.shapesData) !== null && _f !== void 0 ? _f : [], shapesReady: Boolean(chartState), handleLegendItemClick });
 }

package/dist/cjs/components/ChartInner/useChartInnerState.js

@@ -41,8 +41,9 @@ export function useChartInnerState(props) {
             else if (nextZoomState.x !== undefined) {
                 setRangeSliderState({ min: nextZoomState.x[0], max: nextZoomState.x[1] });
             }
+            dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
         }
-    }, [zoomState]);
+    }, [dispatcher, zoomState]);
     const updateRangeSliderState = React.useCallback((nextRangeSliderState) => {
         if (!isEqual(rangeSliderState, nextRangeSliderState)) {
             setRangeSliderState(nextRangeSliderState

package/dist/cjs/components/ChartInner/useDefaultState.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedXAxis, PreparedYAxis, ShapeData } from '../../hooks';
+import type { ChartScale } from '../../hooks/useAxisScales/types';
+type Props = {
+    boundsHeight: number;
+    boundsOffsetLeft: number;
+    boundsOffsetTop: number;
+    boundsWidth: number;
+    defaultState?: {
+        hoveredPosition?: {
+            x: number | string;
+            y: number | string;
+        };
+    };
+    dispatcher: Dispatch<object>;
+    shapesData: ShapeData[];
+    shapesReady: boolean;
+    svgRef: React.RefObject<SVGSVGElement | null>;
+    xAxis: PreparedXAxis | null;
+    yAxis: PreparedYAxis[];
+    xScale?: ChartScale;
+    yScale?: (ChartScale | undefined)[];
+};
+export declare function useDefaultState(props: Props): void;
+export {};

package/dist/cjs/components/ChartInner/useDefaultState.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import get from 'lodash/get';
+import { EventType } from '../../utils';
+import { getClosestPoints } from '../../utils/chart/get-closest-data';
+import { getHoveredPlots } from '../../utils/chart/get-hovered-plots';
+import { calculateNumericProperty } from '../../utils/chart/math';
+export function useDefaultState(props) {
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, defaultState, dispatcher, shapesData, shapesReady, svgRef, xAxis, yAxis, xScale, yScale, } = props;
+    const appliedRef = React.useRef(false);
+    React.useEffect(() => {
+        const hoveredPosition = defaultState === null || defaultState === void 0 ? void 0 : defaultState.hoveredPosition;
+        if (appliedRef.current || !shapesReady || !hoveredPosition) {
+            return;
+        }
+        appliedRef.current = true;
+        // Defer dispatch so shape components (Area, Line, etc.) register their hover-shape.*
+        // listeners first; parent effects run before child effects in React.
+        queueMicrotask(() => {
+            var _a;
+            const x = calculateNumericProperty({ value: hoveredPosition.x, base: boundsWidth });
+            const y = calculateNumericProperty({ value: hoveredPosition.y, base: boundsHeight });
+            if (x === undefined || y === undefined) {
+                return;
+            }
+            const shapesDataWithTooltipEnabled = shapesData.filter((d) => get(d, 'series.tooltip.enabled', true));
+            const closest = getClosestPoints({
+                position: [x, y],
+                shapesData: shapesDataWithTooltipEnabled,
+                boundsHeight,
+                boundsWidth,
+            });
+            const { plotLines, plotBands } = getHoveredPlots({
+                pointerX: x,
+                pointerY: y,
+                xAxis,
+                yAxis,
+                xScale,
+                yScale,
+            });
+            const hoveredPlotsArg = { lines: plotLines, bands: plotBands };
+            const svgPointerX = x + boundsOffsetLeft;
+            const svgPointerY = y + boundsOffsetTop;
+            dispatcher.call(EventType.HOVER_SHAPE, undefined, closest, [svgPointerX, svgPointerY], hoveredPlotsArg);
+            const rect = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const syntheticEvent = rect &&
+                new PointerEvent('pointermove', {
+                    bubbles: true,
+                    clientX: rect.left + svgPointerX,
+                    clientY: rect.top + svgPointerY,
+                });
+            dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
+                hovered: closest,
+                xAxis,
+                yAxis: yAxis[0],
+                hoveredPlotLines: plotLines,
+                hoveredPlotBands: plotBands,
+            }, syntheticEvent);
+        });
+    }, [
+        boundsHeight,
+        boundsOffsetLeft,
+        boundsOffsetTop,
+        boundsWidth,
+        defaultState,
+        dispatcher,
+        shapesData,
+        shapesReady,
+        svgRef,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+    ]);
+}

package/dist/cjs/components/ChartInner/utils/axis.d.ts

@@ -0,0 +1,44 @@
+import type { PreparedYAxis } from '../../../hooks';
+import type { ChartScale } from '../../../hooks/useAxisScales/types';
+import type { PreparedSeries } from '../../../hooks/useSeries/types';
+export declare function recalculateYAxisLabelsWidth(props: {
+    seriesData: PreparedSeries[];
+    yAxis: PreparedYAxis[];
+    yScale?: (ChartScale | undefined)[];
+}): Promise<(Omit<import("../../..").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {
+    type: import("../../..").ChartAxisType;
+    labels: Omit<import("../../..").ChartAxisLabels, "style" | "enabled" | "padding" | "autoRotation"> & Required<Pick<import("../../..").ChartAxisLabels, "margin" | "enabled" | "html" | "rotation" | "padding">> & {
+        style: import("../../..").BaseTextStyle;
+        rotation: number;
+        height: number;
+        width: number;
+        lineHeight: number;
+        maxWidth: number;
+    };
+    title: {
+        height: number;
+        width: number;
+        text: string;
+        margin: number;
+        style: import("../../..").BaseTextStyle;
+        align: import("../../..").ChartAxisTitleAlignment;
+        maxRowCount: number;
+        rotation: number;
+        maxWidth: number;
+        html: boolean;
+    };
+    min?: number;
+    grid: {
+        enabled: boolean;
+    };
+    maxPadding: number;
+    ticks: {
+        pixelInterval?: number;
+    };
+    tickMarks: import("../../../hooks").PreparedAxisTickMarks;
+    position: "left" | "right" | "top" | "bottom";
+    plotIndex: number;
+    plotLines: import("../../../hooks").PreparedAxisPlotLine[];
+    plotBands: import("../../../hooks").PreparedAxisPlotBand[];
+    crosshair: Required<import("../../..").AxisCrosshair>;
+})[]>;

package/dist/cjs/components/ChartInner/utils/axis.js

@@ -0,0 +1,35 @@
+import get from 'lodash/get';
+import { getYAxisLabelMaxWidth } from '../../../hooks/useAxis/y-axis';
+export async function recalculateYAxisLabelsWidth(props) {
+    const { seriesData, yAxis, yScale } = props;
+    const axisIndexesToRecalculateMap = new Map();
+    for (let i = 0; i < yAxis.length; i++) {
+        const axis = yAxis[i];
+        const scale = yScale === null || yScale === void 0 ? void 0 : yScale[i];
+        if (!scale) {
+            continue;
+        }
+        if (axis.startOnTick || axis.endOnTick) {
+            const axisSeriesData = seriesData.filter((s) => get(s, 'yAxis', 0) === i && s.visible);
+            if (axisSeriesData.length === 0) {
+                continue;
+            }
+            const res = await getYAxisLabelMaxWidth({
+                axis,
+                seriesData: axisSeriesData,
+                scale,
+            });
+            if (res.width > axis.labels.width) {
+                axisIndexesToRecalculateMap.set(i, res.width);
+            }
+        }
+    }
+    return yAxis.map((axis, i) => {
+        const width = axisIndexesToRecalculateMap.get(i);
+        if (width) {
+            const axisWithRecalculatedLabels = Object.assign(Object.assign({}, axis), { labels: Object.assign(Object.assign({}, axis.labels), { width }) });
+            return axisWithRecalculatedLabels;
+        }
+        return axis;
+    });
+}

package/dist/cjs/{hooks/useChartOptions → components/ChartInner/utils}/chart.d.ts

@@ -1,5 +1,5 @@
-import type { ChartData, ChartSeries } from '../../types';
-import type { PreparedChart, PreparedTitle } from './types';
+import type { PreparedChart, PreparedTitle } from '../../../hooks/types';
+import type { ChartData, ChartSeries } from '../../../types';
 export declare const getPreparedChart: (args: {
     chart: ChartData["chart"];
     seriesData: ChartSeries[];

package/dist/{esm/components/ChartInner/utils.d.ts → cjs/components/ChartInner/utils/common.d.ts}

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { PreparedAxis, PreparedSeries, PreparedZoom } from '../../hooks';
+import type { PreparedAxis, PreparedSeries } from '../../../hooks';
+import type { PreparedZoom } from '../../../hooks/types';
 export declare function hasAtLeastOneSeriesDataPerPlot(seriesData: PreparedSeries[], yAxes?: PreparedAxis[]): boolean;
 export declare function useAsyncState<T>(value: T, setState: () => Promise<T>, isReady?: boolean): T;
 export declare function getResetZoomButtonStyle(args: {

package/dist/cjs/components/ChartInner/utils/index.d.ts

@@ -0,0 +1,7 @@
+export * from './axis';
+export * from './common';
+export * from './tooltip';
+export * from './chart';
+export * from './zoom';
+export * from './title';
+export * from './normalized-original-data';

package/dist/cjs/components/ChartInner/utils/index.js

@@ -0,0 +1,7 @@
+export * from './axis';
+export * from './common';
+export * from './tooltip';
+export * from './chart';
+export * from './zoom';
+export * from './title';
+export * from './normalized-original-data';