@gravity-ui/charts 1.38.6 → 1.39.0

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

@@ -40,6 +40,10 @@ type Args = {
     yScale?: (ChartScale | undefined)[];
     zoomState?: Partial<ZoomState>;
 };
+export declare function getShapes(args: Args): Promise<{
+    shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+    shapesData: ShapeData[];
+}>;
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: ShapeData[];

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

@@ -30,6 +30,197 @@ 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(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 +234,24 @@ 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({
+                boundsHeight,
+                boundsWidth,
+                clipPathId,
+                clipPathBySeriesType,
+                dispatcher,
+                htmlLayout,
+                isOutsideBounds,
+                isRangeSlider,
+                series,
+                seriesOptions,
+                split,
+                xAxis,
+                xScale,
+                yAxis,
+                yScale,
+                zoomState,
+            });
             if (countedRef.current === currentRun) {
                 shapesReadyRef.current = true;
                 setShapesElements(shapes);

package/dist/esm/hooks/useShapes/pie/prepare-data.js

@@ -145,7 +145,6 @@ export function preparePieData(args) {
             .innerRadius((d) => d.data.radius + distance + connectorPadding)
             .outerRadius((d) => d.data.radius + distance + connectorPadding);
         let shouldStopLabelPlacement = false;
-        // eslint-disable-next-line complexity
         series.forEach((d, index) => {
             var _a, _b;
             const prevLabel = labels[labels.length - 1];

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/useTooltip/index.d.ts

@@ -1,6 +1,6 @@
 import type { Dispatch } from 'd3';
 import type { AxisPlotBand, AxisPlotLine, PointPosition, TooltipDataChunk } from '../../types';
-import type { PreparedTooltip } from '../useChartOptions/types';
+import type { PreparedTooltip } from '../types';
 type Args = {
     dispatcher: Dispatch<object>;
     tooltip: PreparedTooltip;

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

@@ -1,6 +1,6 @@
+import type { PreparedZoom } from '../types';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales/types';
-import type { PreparedZoom } from '../useChartOptions/types';
 import type { PreparedSplit } from '../useSplit/types';
 import type { ZoomState } from './types';
 interface UseZoomProps {
@@ -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/index.d.ts

@@ -1,4 +1,4 @@
 export { CustomShapeRenderer, getFormattedValue } from './utils';
-export { getDefaultTooltipHeaderFormat } from './hooks/useChartOptions/tooltip';
+export { getDefaultTooltipHeaderFormat } from './utils/chart/tooltip';
 export * from './components';
 export * from './types';

package/dist/esm/index.js

@@ -1,4 +1,4 @@
 export { CustomShapeRenderer, getFormattedValue } from './utils';
-export { getDefaultTooltipHeaderFormat } from './hooks/useChartOptions/tooltip';
+export { getDefaultTooltipHeaderFormat } from './utils/chart/tooltip';
 export * from './components';
 export * from './types';

package/dist/esm/types/index.d.ts

@@ -36,6 +36,25 @@ export interface ChartData<T = MeaningfulAny> {
      * General options for the chart.
      */
     chart?: ChartOptions;
+    /**
+     * The color list of palette.
+     * If no color is set in series, the colors would be adopted sequentially and circularly from this list as the colors of series.
+     * @default ['#4DA2F1', '#FF3D64', '#8AD554', '#FFC636', '#FFB9DD', '#84D1EE', '#FF91A1', '#54A520', '#DB9100', '#BA74B3', '#1F68A9', '#ED65A9', '#0FA08D', '#FF7E00', '#E8B0A4', '#52A6C5', '#BE2443', '#70C1AF', '#FFB46C', '#DCA3D7']
+     */
+    colors?: string[];
+    /**
+     * Default state applied on first render.
+     */
+    defaultState?: {
+        /**
+         * Position within the plot area to trigger hover on first render.
+         * Values can be absolute pixels (`number` or `"100px"`) or percentages (`"50%"`).
+         */
+        hoveredPosition?: {
+            x: number | string;
+            y: number | string;
+        };
+    };
     /**
      * The legend displays a labeled box for each data element in the chart.
      * It shows a distinctive symbol paired with a name for every series.
@@ -54,6 +73,11 @@ export interface ChartData<T = MeaningfulAny> {
          */
         options?: ChartSeriesOptions;
     };
+    /**
+     * Setting for displaying charts on different plots.
+     * It can be used to visualize related information on multiple charts.
+     */
+    split?: ChartSplit;
     /**
      * The main title of the chart.
      */
@@ -70,15 +94,4 @@ export interface ChartData<T = MeaningfulAny> {
      * Options for the the Y axis or multiple Y axes.
      */
     yAxis?: ChartYAxis[];
-    /**
-     * Setting for displaying charts on different plots.
-     * It can be used to visualize related information on multiple charts.
-     */
-    split?: ChartSplit;
-    /**
-     * The color list of palette.
-     * If no color is set in series, the colors would be adopted sequentially and circularly from this list as the colors of series.
-     * @default ['#4DA2F1', '#FF3D64', '#8AD554', '#FFC636', '#FFB9DD', '#84D1EE', '#FF91A1', '#54A520', '#DB9100', '#BA74B3', '#1F68A9', '#ED65A9', '#0FA08D', '#FF7E00', '#E8B0A4', '#52A6C5', '#BE2443', '#70C1AF', '#FFB46C', '#DCA3D7']
-     */
-    colors?: string[];
 }

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

@@ -17,7 +17,7 @@ export declare function getAxisItems({ scale, count, maxCount, }: {
     scale: ChartScale | AxisScale<AxisDomain>;
     count?: number;
     maxCount?: number;
-}): number[] | string[] | Date[];
+}): string[] | number[] | Date[];
 export declare function getAxisHeight(args: {
     split: PreparedSplit;
     boundsHeight: number;
@@ -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];
     }