@gravity-ui/charts 1.38.6 → 1.38.7

package/dist/esm/hooks/useShapes/index.js

@@ -30,6 +30,199 @@ function shouldUseClipPathId(seriesType, clipPathBySeriesType) {
     var _a;
     return (_a = clipPathBySeriesType === null || clipPathBySeriesType === void 0 ? void 0 : clipPathBySeriesType[seriesType]) !== null && _a !== void 0 ? _a : true;
 }
+export async function getShapes(args) {
+    const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, isRangeSlider, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, zoomState, } = args;
+    const visibleSeries = getOnlyVisibleSeries(series);
+    const groupedSeries = group(visibleSeries, (item) => item.type);
+    const shapesData = [];
+    const shapes = [];
+    await Promise.all(
+    // eslint-disable-next-line complexity
+    Array.from(groupedSeries).map(async (item, index) => {
+        const [seriesType, chartSeries] = item;
+        switch (seriesType) {
+            case SERIES_TYPE.BarX: {
+                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                    const preparedData = await prepareBarXData({
+                        series: chartSeries,
+                        seriesOptions,
+                        xAxis,
+                        xScale,
+                        yAxis,
+                        yScale,
+                        boundsHeight,
+                        split,
+                        isRangeSlider,
+                    });
+                    shapes[index] = (React.createElement(BarXSeriesShapes, { key: SERIES_TYPE.BarX, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                    shapesData.splice(index, 0, ...preparedData);
+                }
+                break;
+            }
+            case SERIES_TYPE.BarY: {
+                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                    const preparedData = await prepareBarYData({
+                        boundsHeight,
+                        boundsWidth,
+                        series: chartSeries,
+                        seriesOptions,
+                        xAxis,
+                        xScale,
+                        yAxis,
+                        yScale,
+                    });
+                    shapes[index] = (React.createElement(BarYSeriesShapes, { key: SERIES_TYPE.BarY, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                    shapesData.splice(index, 0, ...preparedData.shapes);
+                }
+                break;
+            }
+            case SERIES_TYPE.Waterfall: {
+                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                    const preparedData = await prepareWaterfallData({
+                        series: chartSeries,
+                        seriesOptions,
+                        xAxis,
+                        xScale,
+                        yAxis,
+                        yScale,
+                    });
+                    shapes[index] = (React.createElement(WaterfallSeriesShapes, { key: SERIES_TYPE.Waterfall, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                    shapesData.splice(index, 0, ...preparedData);
+                }
+                break;
+            }
+            case SERIES_TYPE.Line: {
+                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                    const preparedData = await prepareLineData({
+                        series: chartSeries,
+                        xAxis,
+                        xScale,
+                        yAxis,
+                        yScale,
+                        split,
+                        isOutsideBounds,
+                        isRangeSlider,
+                    });
+                    const resultClipPathId = getSeriesClipPathId({
+                        clipPathId,
+                        yAxis,
+                        zoomState,
+                    });
+                    shapes[index] = (React.createElement(LineSeriesShapes, { key: SERIES_TYPE.Line, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: resultClipPathId }));
+                    shapesData.splice(index, 0, ...preparedData);
+                }
+                break;
+            }
+            case SERIES_TYPE.Area: {
+                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                    const preparedData = await prepareAreaData({
+                        series: chartSeries,
+                        xAxis,
+                        xScale,
+                        yAxis,
+                        yScale,
+                        boundsHeight,
+                        split,
+                        isOutsideBounds,
+                        isRangeSlider,
+                    });
+                    shapes[index] = (React.createElement(AreaSeriesShapes, { key: SERIES_TYPE.Area, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                    shapesData.splice(index, 0, ...preparedData);
+                }
+                break;
+            }
+            case SERIES_TYPE.Scatter: {
+                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                    const preparedData = prepareScatterData({
+                        series: chartSeries,
+                        xAxis,
+                        xScale,
+                        yAxis,
+                        yScale,
+                        isOutsideBounds,
+                    });
+                    shapes[index] = (React.createElement(ScatterSeriesShape, { key: SERIES_TYPE.Scatter, clipPathId: shouldUseClipPathId(SERIES_TYPE.Scatter, clipPathBySeriesType)
+                            ? clipPathId
+                            : undefined, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                    shapesData.splice(index, 0, ...preparedData);
+                }
+                break;
+            }
+            case SERIES_TYPE.Pie: {
+                const preparedData = await preparePieData({
+                    series: chartSeries,
+                    boundsWidth,
+                    boundsHeight,
+                });
+                shapes[index] = (React.createElement(PieSeriesShapes, { key: SERIES_TYPE.Pie, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                shapesData.splice(index, 0, ...preparedData);
+                break;
+            }
+            case SERIES_TYPE.Treemap: {
+                const preparedData = await prepareTreemapData({
+                    // We should have exactly one series with "treemap" type
+                    // Otherwise data validation should emit an error
+                    series: chartSeries[0],
+                    width: boundsWidth,
+                    height: boundsHeight,
+                });
+                shapes[index] = (React.createElement(TreemapSeriesShape, { key: SERIES_TYPE.Treemap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                shapesData.splice(index, 0, preparedData);
+                break;
+            }
+            case SERIES_TYPE.Sankey: {
+                const preparedData = prepareSankeyData({
+                    series: chartSeries[0],
+                    width: boundsWidth,
+                    height: boundsHeight,
+                });
+                shapes[index] = (React.createElement(SankeySeriesShape, { key: SERIES_TYPE.Sankey, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                shapesData.splice(index, 0, preparedData);
+                break;
+            }
+            case SERIES_TYPE.Radar: {
+                const preparedData = await prepareRadarData({
+                    series: chartSeries,
+                    boundsWidth,
+                    boundsHeight,
+                });
+                shapes[index] = (React.createElement(RadarSeriesShapes, { key: SERIES_TYPE.Radar, dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                shapesData.splice(index, 0, ...preparedData);
+                break;
+            }
+            case SERIES_TYPE.Heatmap: {
+                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale[0])) {
+                    const preparedData = await prepareHeatmapData({
+                        series: chartSeries[0],
+                        xAxis,
+                        xScale,
+                        yAxis: yAxis[0],
+                        yScale: yScale[0],
+                    });
+                    shapes[index] = (React.createElement(HeatmapSeriesShapes, { key: SERIES_TYPE.Heatmap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                    shapesData.splice(index, 0, preparedData);
+                }
+                break;
+            }
+            case 'funnel': {
+                const preparedData = await prepareFunnelData({
+                    series: chartSeries,
+                    boundsWidth,
+                    boundsHeight,
+                });
+                shapes[index] = (React.createElement(FunnelSeriesShapes, { key: "funnel", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                shapesData.splice(index, 0, preparedData);
+                break;
+            }
+            default: {
+                throw new ChartError({
+                    message: `The display method is not defined for a series with type "${seriesType}"`,
+                });
+            }
+        }
+    }));
+    return { shapes, shapesData };
+}
 export const useShapes = (args) => {
     const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, isRangeSlider, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, zoomState, } = args;
     const [shapesElemens, setShapesElements] = React.useState([]);
@@ -43,195 +236,7 @@ export const useShapes = (args) => {
         }
         (async () => {
             const currentRun = countedRef.current;
-            const visibleSeries = getOnlyVisibleSeries(series);
-            const groupedSeries = group(visibleSeries, (item) => item.type);
-            const shapesData = [];
-            const shapes = [];
-            await Promise.all(
-            // eslint-disable-next-line complexity
-            Array.from(groupedSeries).map(async (item, index) => {
-                const [seriesType, chartSeries] = item;
-                switch (seriesType) {
-                    case SERIES_TYPE.BarX: {
-                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
-                            const preparedData = await prepareBarXData({
-                                series: chartSeries,
-                                seriesOptions,
-                                xAxis,
-                                xScale,
-                                yAxis,
-                                yScale,
-                                boundsHeight,
-                                split,
-                                isRangeSlider,
-                            });
-                            shapes[index] = (React.createElement(BarXSeriesShapes, { key: SERIES_TYPE.BarX, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                            shapesData.splice(index, 0, ...preparedData);
-                        }
-                        break;
-                    }
-                    case SERIES_TYPE.BarY: {
-                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
-                            const preparedData = await prepareBarYData({
-                                boundsHeight,
-                                boundsWidth,
-                                series: chartSeries,
-                                seriesOptions,
-                                xAxis,
-                                xScale,
-                                yAxis,
-                                yScale,
-                            });
-                            shapes[index] = (React.createElement(BarYSeriesShapes, { key: SERIES_TYPE.BarY, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                            shapesData.splice(index, 0, ...preparedData.shapes);
-                        }
-                        break;
-                    }
-                    case SERIES_TYPE.Waterfall: {
-                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
-                            const preparedData = await prepareWaterfallData({
-                                series: chartSeries,
-                                seriesOptions,
-                                xAxis,
-                                xScale,
-                                yAxis,
-                                yScale,
-                            });
-                            shapes[index] = (React.createElement(WaterfallSeriesShapes, { key: SERIES_TYPE.Waterfall, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                            shapesData.splice(index, 0, ...preparedData);
-                        }
-                        break;
-                    }
-                    case SERIES_TYPE.Line: {
-                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
-                            const preparedData = await prepareLineData({
-                                series: chartSeries,
-                                xAxis,
-                                xScale,
-                                yAxis,
-                                yScale,
-                                split,
-                                isOutsideBounds,
-                                isRangeSlider,
-                            });
-                            const resultClipPathId = getSeriesClipPathId({
-                                clipPathId,
-                                yAxis,
-                                zoomState,
-                            });
-                            shapes[index] = (React.createElement(LineSeriesShapes, { key: SERIES_TYPE.Line, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: resultClipPathId }));
-                            shapesData.splice(index, 0, ...preparedData);
-                        }
-                        break;
-                    }
-                    case SERIES_TYPE.Area: {
-                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
-                            const preparedData = await prepareAreaData({
-                                series: chartSeries,
-                                xAxis,
-                                xScale,
-                                yAxis,
-                                yScale,
-                                boundsHeight,
-                                split,
-                                isOutsideBounds,
-                                isRangeSlider,
-                            });
-                            shapes[index] = (React.createElement(AreaSeriesShapes, { key: SERIES_TYPE.Area, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                            shapesData.splice(index, 0, ...preparedData);
-                        }
-                        break;
-                    }
-                    case SERIES_TYPE.Scatter: {
-                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
-                            const preparedData = prepareScatterData({
-                                series: chartSeries,
-                                xAxis,
-                                xScale,
-                                yAxis,
-                                yScale,
-                                isOutsideBounds,
-                            });
-                            shapes[index] = (React.createElement(ScatterSeriesShape, { key: SERIES_TYPE.Scatter, clipPathId: shouldUseClipPathId(SERIES_TYPE.Scatter, clipPathBySeriesType)
-                                    ? clipPathId
-                                    : undefined, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                            shapesData.splice(index, 0, ...preparedData);
-                        }
-                        break;
-                    }
-                    case SERIES_TYPE.Pie: {
-                        const preparedData = await preparePieData({
-                            series: chartSeries,
-                            boundsWidth,
-                            boundsHeight,
-                        });
-                        shapes[index] = (React.createElement(PieSeriesShapes, { key: SERIES_TYPE.Pie, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                        shapesData.splice(index, 0, ...preparedData);
-                        break;
-                    }
-                    case SERIES_TYPE.Treemap: {
-                        const preparedData = await prepareTreemapData({
-                            // We should have exactly one series with "treemap" type
-                            // Otherwise data validation should emit an error
-                            series: chartSeries[0],
-                            width: boundsWidth,
-                            height: boundsHeight,
-                        });
-                        shapes[index] = (React.createElement(TreemapSeriesShape, { key: SERIES_TYPE.Treemap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                        shapesData.splice(index, 0, preparedData);
-                        break;
-                    }
-                    case SERIES_TYPE.Sankey: {
-                        const preparedData = prepareSankeyData({
-                            series: chartSeries[0],
-                            width: boundsWidth,
-                            height: boundsHeight,
-                        });
-                        shapes[index] = (React.createElement(SankeySeriesShape, { key: SERIES_TYPE.Sankey, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                        shapesData.splice(index, 0, preparedData);
-                        break;
-                    }
-                    case SERIES_TYPE.Radar: {
-                        const preparedData = await prepareRadarData({
-                            series: chartSeries,
-                            boundsWidth,
-                            boundsHeight,
-                        });
-                        shapes[index] = (React.createElement(RadarSeriesShapes, { key: SERIES_TYPE.Radar, dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                        shapesData.splice(index, 0, ...preparedData);
-                        break;
-                    }
-                    case SERIES_TYPE.Heatmap: {
-                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale[0])) {
-                            const preparedData = await prepareHeatmapData({
-                                series: chartSeries[0],
-                                xAxis,
-                                xScale,
-                                yAxis: yAxis[0],
-                                yScale: yScale[0],
-                            });
-                            shapes[index] = (React.createElement(HeatmapSeriesShapes, { key: SERIES_TYPE.Heatmap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                            shapesData.splice(index, 0, preparedData);
-                        }
-                        break;
-                    }
-                    case 'funnel': {
-                        const preparedData = await prepareFunnelData({
-                            series: chartSeries,
-                            boundsWidth,
-                            boundsHeight,
-                        });
-                        shapes[index] = (React.createElement(FunnelSeriesShapes, { key: "funnel", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                        shapesData.splice(index, 0, preparedData);
-                        break;
-                    }
-                    default: {
-                        throw new ChartError({
-                            message: `The display method is not defined for a series with type "${seriesType}"`,
-                        });
-                    }
-                }
-            }));
+            const { shapes, shapesData } = await getShapes(args);
             if (countedRef.current === currentRun) {
                 shapesReadyRef.current = true;
                 setShapesElements(shapes);

package/dist/esm/hooks/useSplit/index.d.ts

@@ -1,5 +1,5 @@
 import type { ChartSplit } from '../../types';
-import type { PreparedSplit } from './types';
+import type { PreparedPlot } from './types';
 type UseSplitArgs = {
     split?: ChartSplit;
     boundsHeight: number;
@@ -10,5 +10,8 @@ export declare function getPlotHeight(args: {
     boundsHeight: number;
     gap: number;
 }): number;
-export declare const useSplit: (args: UseSplitArgs) => PreparedSplit;
+export declare function getSplit(args: UseSplitArgs): {
+    plots: PreparedPlot[];
+    gap: number;
+};
 export {};

package/dist/esm/hooks/useSplit/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import { calculateNumericProperty, getHorizontalSvgTextHeight } from '../../utils';
@@ -32,33 +31,31 @@ export function getPlotHeight(args) {
     }
     return boundsHeight;
 }
-export const useSplit = (args) => {
+export function getSplit(args) {
+    var _a, _b;
     const { split, boundsHeight, chartWidth } = args;
-    return React.useMemo(() => {
-        var _a, _b;
-        const splitGap = (_a = calculateNumericProperty({ value: split === null || split === void 0 ? void 0 : split.gap, base: boundsHeight })) !== null && _a !== void 0 ? _a : 0;
-        const plotHeight = getPlotHeight({ split: split, boundsHeight, gap: splitGap });
-        const plots = (_b = split === null || split === void 0 ? void 0 : split.plots) !== null && _b !== void 0 ? _b : [];
-        if (isEmpty(plots)) {
-            plots.push({});
-        }
-        return {
-            plots: plots.map((p, index) => {
-                const title = preparePlotTitle({
-                    title: p.title,
-                    plotIndex: index,
-                    gap: splitGap,
-                    plotHeight,
-                    chartWidth,
-                });
-                const top = index * (plotHeight + splitGap);
-                return {
-                    top: top + title.height,
-                    height: plotHeight - title.height,
-                    title,
-                };
-            }),
-            gap: splitGap,
-        };
-    }, [split, boundsHeight, chartWidth]);
-};
+    const splitGap = (_a = calculateNumericProperty({ value: split === null || split === void 0 ? void 0 : split.gap, base: boundsHeight })) !== null && _a !== void 0 ? _a : 0;
+    const plotHeight = getPlotHeight({ split: split, boundsHeight, gap: splitGap });
+    const plots = (_b = split === null || split === void 0 ? void 0 : split.plots) !== null && _b !== void 0 ? _b : [];
+    if (isEmpty(plots)) {
+        plots.push({});
+    }
+    return {
+        plots: plots.map((p, index) => {
+            const title = preparePlotTitle({
+                title: p.title,
+                plotIndex: index,
+                gap: splitGap,
+                plotHeight,
+                chartWidth,
+            });
+            const top = index * (plotHeight + splitGap);
+            return {
+                top: top + title.height,
+                height: plotHeight - title.height,
+                title,
+            };
+        }),
+        gap: splitGap,
+    };
+}

package/dist/esm/hooks/useYAxisLabelWidth/index.d.ts

@@ -1,11 +1,44 @@
-import type { PreparedYAxis, SetAxes } from '../useAxis/types';
+import type { PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales/types';
 import type { PreparedSeries } from '../useSeries/types';
-type UseYAxisLabelWidthProps = {
+export declare function recalculateYAxisLabelsWidth(props: {
     seriesData: PreparedSeries[];
-    setAxes: SetAxes;
     yAxis: PreparedYAxis[];
     yScale?: (ChartScale | undefined)[];
-};
-export declare function useYAxisLabelWidth(props: UseYAxisLabelWidthProps): void;
-export {};
+}): Promise<(Omit<import("../..").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {
+    type: import("../..").ChartAxisType;
+    labels: Omit<import("../..").ChartAxisLabels, "enabled" | "style" | "padding" | "autoRotation"> & Required<Pick<import("../..").ChartAxisLabels, "margin" | "html" | "enabled" | "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("..").PreparedAxisTickMarks;
+    position: "left" | "right" | "top" | "bottom";
+    plotIndex: number;
+    plotLines: import("..").PreparedAxisPlotLine[];
+    plotBands: import("..").PreparedAxisPlotBand[];
+    crosshair: Required<import("../..").AxisCrosshair>;
+})[]>;

package/dist/esm/hooks/useYAxisLabelWidth/index.js

@@ -1,48 +1,35 @@
-import React from 'react';
 import get from 'lodash/get';
 import { getYAxisLabelMaxWidth } from '../useAxis/y-axis';
-export function useYAxisLabelWidth(props) {
-    const { seriesData, setAxes, yAxis, yScale } = props;
-    const runRef = React.useRef(0);
-    React.useEffect(() => {
-        runRef.current++;
-        (async function () {
-            const currentRun = runRef.current;
-            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);
-                    }
-                }
+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;
             }
-            if (runRef.current === currentRun && axisIndexesToRecalculateMap.size > 0) {
-                setAxes((prevState) => {
-                    const newYAxis = prevState.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;
-                    });
-                    return Object.assign(Object.assign({}, prevState), { yAxis: newYAxis });
-                });
+            const res = await getYAxisLabelMaxWidth({
+                axis,
+                seriesData: axisSeriesData,
+                scale,
+            });
+            if (res.width > axis.labels.width) {
+                axisIndexesToRecalculateMap.set(i, res.width);
             }
-        })();
-    }, [seriesData, setAxes, yAxis, yScale]);
+        }
+    }
+    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/esm/hooks/useZoom/index.d.ts

@@ -8,7 +8,7 @@ interface UseZoomProps {
     onUpdate: (zoomState: Partial<ZoomState>) => void;
     plotContainerHeight: number;
     plotContainerWidth: number;
-    preparedSplit: PreparedSplit;
+    preparedSplit: PreparedSplit | undefined;
     preparedZoom: PreparedZoom | null;
     rangeSliderDomain?: [number, number];
     xAxis: PreparedXAxis | null;

package/dist/esm/hooks/useZoom/index.js

@@ -10,7 +10,7 @@ export function useZoom(props) {
         if (!preparedZoom) {
             return result;
         }
-        if (preparedSplit.plots.length > 1) {
+        if (preparedSplit && preparedSplit.plots.length > 1) {
             preparedSplit.plots.forEach((plot) => {
                 result.push({
                     extent: [
@@ -29,7 +29,7 @@ export function useZoom(props) {
             });
         }
         return result;
-    }, [plotContainerHeight, plotContainerWidth, preparedSplit.plots, preparedZoom]);
+    }, [plotContainerHeight, plotContainerWidth, preparedSplit, preparedZoom]);
     const handleChartBrushEnd = React.useCallback(function (brushInstance, selection) {
         if (selection && yScale && xAxis && yAxis && xScale && (preparedZoom === null || preparedZoom === void 0 ? void 0 : preparedZoom.type)) {
             const nextZoomState = selectionToZoomBounds({

package/dist/esm/utils/chart/axis/common.d.ts

@@ -27,7 +27,7 @@ interface GetBandsPositionArgs {
     axisScale: AxisScale<AxisDomain>;
     axis: AxisDirection;
 }
-export declare const getAxisPlotsPosition: (axis: PreparedAxis, split: PreparedSplit, width?: number) => number[];
+export declare const getAxisPlotsPosition: (axis: PreparedAxis, split: PreparedSplit | undefined, width?: number) => number[];
 export declare function getBandsPosition(args: GetBandsPositionArgs): {
     from: number;
     to: number;

package/dist/esm/utils/chart/axis/common.js

@@ -50,7 +50,7 @@ export function getAxisHeight(args) {
 }
 export const getAxisPlotsPosition = (axis, split, width = 0) => {
     var _a;
-    const top = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+    const top = ((_a = split === null || split === void 0 ? void 0 : split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
     if (axis.position === 'left') {
         return [0, top];
     }