@gravity-ui/charts 0.5.0 → 0.6.1-beta.1

package/README.md

@@ -1,4 +1,4 @@
-# @gravity-ui/charts · [![npm package](https://img.shields.io/npm/v/@gravity-ui/charts)](https://www.npmjs.com/package/@gravity-ui/charts) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/charts/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/charts/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/charts/)
+# Gravity Charts · [![npm package](https://img.shields.io/npm/v/@gravity-ui/charts)](https://www.npmjs.com/package/@gravity-ui/charts) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/charts/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/charts/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/charts/)
 
 > [!WARNING]
 > The library may have major changes in minor releases while it is on version `0.*.*`.
@@ -6,7 +6,7 @@
 ## Install
 
 ```shell
-npm install --save-dev @gravity-ui/uikit @gravity-ui/charts
+npm install @gravity-ui/uikit @gravity-ui/charts
 ```
 
 ## Development

package/dist/cjs/components/Axis/AxisY.d.ts

@@ -7,6 +7,7 @@ type Props = {
     width: number;
     height: number;
     split: PreparedSplit;
+    plotRef?: React.MutableRefObject<SVGGElement | null>;
 };
 export declare const AxisY: (props: Props) => React.JSX.Element;
 export {};

package/dist/cjs/components/Axis/AxisY.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { axisLeft, axisRight, line, select } from 'd3';
-import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getClosestPointsRange, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
+import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
 import './styles.css';
 const b = block('d3-axis');
 function transformLabel(args) {
@@ -79,7 +79,7 @@ function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisY = (props) => {
-    const { axes, width, height: totalHeight, scale, split } = props;
+    const { axes, width, height: totalHeight, scale, split, plotRef } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -88,26 +88,34 @@ export const AxisY = (props) => {
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
+        const getAxisPosition = (axis) => {
+            var _a;
+            const top = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+            if (axis.position === 'left') {
+                return `translate(0, ${top}px)`;
+            }
+            return `translate(${width}px, 0)`;
+        };
+        const plotLines = axes.reduce((acc, axis) => {
+            if (axis.plotLines.length) {
+                acc.push(...axis.plotLines.map((plotLine) => {
+                    return Object.assign(Object.assign({}, plotLine), { transform: getAxisPosition(axis) });
+                }));
+            }
+            return acc;
+        }, []);
         const axisSelection = svgElement
             .selectAll('axis')
             .data(axes)
             .join('g')
             .attr('class', b())
-            .style('transform', (d) => {
-            var _a;
-            const top = ((_a = split.plots[d.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
-            if (d.position === 'left') {
-                return `translate(0, ${top}px)`;
-            }
-            return `translate(${width}px, 0)`;
-        });
+            .style('transform', (d) => getAxisPosition(d));
         axisSelection.each((d, index, node) => {
             const seriesScale = scale[index];
             const axisItem = select(node[index]);
+            const axisScale = seriesScale;
             const yAxisGenerator = getAxisGenerator({
-                axisGenerator: d.position === 'left'
-                    ? axisLeft(seriesScale)
-                    : axisRight(seriesScale),
+                axisGenerator: d.position === 'left' ? axisLeft(axisScale) : axisRight(axisScale),
                 preparedAxis: d,
                 height,
                 width,
@@ -148,6 +156,40 @@ export const AxisY = (props) => {
                 })
                     .remove();
             }
+            if (plotRef && d.plotLines.length > 0) {
+                const plotLineClassName = b('plotLine');
+                const plotLineContainer = select(plotRef.current);
+                plotLineContainer.selectAll(`.${plotLineClassName}`).remove();
+                const plotLinesSelection = plotLineContainer
+                    .selectAll(`.${plotLineClassName}`)
+                    .data(plotLines)
+                    .join('g')
+                    .attr('class', plotLineClassName)
+                    .style('transform', (plotLine) => plotLine.transform);
+                plotLinesSelection
+                    .append('path')
+                    .attr('d', (plotLine) => {
+                    const plotLineValue = Number(axisScale(plotLine.value));
+                    const points = [
+                        [0, plotLineValue],
+                        [width, plotLineValue],
+                    ];
+                    return line()(points);
+                })
+                    .attr('stroke', (plotLine) => plotLine.color)
+                    .attr('stroke-width', (plotLine) => plotLine.width)
+                    .attr('stroke-dasharray', (plotLine) => getLineDashArray(plotLine.dashStyle, plotLine.width))
+                    .attr('opacity', (plotLine) => plotLine.opacity);
+                plotLinesSelection.each((plotLineData, i, nodes) => {
+                    const plotLineSelection = select(nodes[i]);
+                    if (plotLineData.layerPlacement === 'before') {
+                        plotLineSelection.lower();
+                    }
+                    else {
+                        plotLineSelection.raise();
+                    }
+                });
+            }
             return axisItem;
         });
         axisSelection

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

@@ -1,10 +1,4 @@
 import React from 'react';
-import type { ChartData } from '../../types';
+import type { ChartInnerProps } from './types';
 import './styles.css';
-type Props = {
-    width: number;
-    height: number;
-    data: ChartData;
-};
-export declare const ChartInner: (props: Props) => React.JSX.Element;
-export {};
+export declare const ChartInner: (props: ChartInnerProps) => React.JSX.Element;

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

@@ -1,77 +1,40 @@
 import React from 'react';
-import { pointer } from 'd3';
-import throttle from 'lodash/throttle';
-import { IS_TOUCH_ENABLED } from '../../constants';
-import { useAxisScales, useChartDimensions, useChartOptions, useSeries, useShapes, } from '../../hooks';
-import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
-import { getPreparedXAxis } from '../../hooks/useChartOptions/x-axis';
-import { getPreparedYAxis } from '../../hooks/useChartOptions/y-axis';
-import { useSplit } from '../../hooks/useSplit';
 import { EventType, block, getD3Dispatcher } from '../../utils';
-import { getClosestPoints } from '../../utils/chart/get-closest-data';
 import { AxisX, AxisY } from '../Axis';
 import { Legend } from '../Legend';
 import { PlotTitle } from '../PlotTitle';
 import { Title } from '../Title';
 import { Tooltip } from '../Tooltip';
+import { useChartInnerHandlers } from './useChartInnerHandlers';
+import { useChartInnerProps } from './useChartInnerProps';
+import { useChartInnerState } from './useChartInnerState';
 import './styles.css';
 const b = block('d3');
-const THROTTLE_DELAY = 50;
 export const ChartInner = (props) => {
     var _a, _b, _c, _d;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
     const htmlLayerRef = React.useRef(null);
-    const dispatcher = React.useMemo(() => {
-        return getD3Dispatcher();
-    }, []);
-    const { chart, title, tooltip } = useChartOptions({
-        data,
-    });
-    const xAxis = React.useMemo(() => getPreparedXAxis({ xAxis: data.xAxis, width, series: data.series.data }), [data, width]);
-    const yAxis = React.useMemo(() => getPreparedYAxis({
-        series: data.series.data,
-        yAxis: data.yAxis,
-        height,
-    }), [data, height]);
-    const { legendItems, legendConfig, preparedSeries, preparedSeriesOptions, preparedLegend, handleLegendItemClick, } = useSeries({
-        chartWidth: width,
-        chartHeight: height,
-        chartMargin: chart.margin,
-        series: data.series,
-        legend: data.legend,
-        preparedYAxis: yAxis,
-    });
-    const { boundsWidth, boundsHeight } = useChartDimensions({
-        width,
-        height,
-        margin: chart.margin,
-        preparedLegend,
-        preparedXAxis: xAxis,
-        preparedYAxis: yAxis,
-        preparedSeries: preparedSeries,
+    const plotRef = React.useRef(null);
+    const dispatcher = React.useMemo(() => getD3Dispatcher(), []);
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher, htmlLayout: htmlLayerRef.current }));
+    const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
+        dispatcher,
+        tooltip,
     });
-    const preparedSplit = useSplit({ split: data.split, boundsHeight, chartWidth: width });
-    const { xScale, yScale } = useAxisScales({
-        boundsWidth,
+    const { handleChartClick, handleMouseLeave, throttledHandleMouseMove, throttledHandleTouchMove } = useChartInnerHandlers({
         boundsHeight,
-        series: preparedSeries,
-        xAxis,
-        yAxis,
-        split: preparedSplit,
-    });
-    const { shapes, shapesData } = useShapes({
+        boundsOffsetLeft,
+        boundsOffsetTop,
         boundsWidth,
-        boundsHeight,
         dispatcher,
-        series: preparedSeries,
-        seriesOptions: preparedSeriesOptions,
+        shapesData,
+        svgContainer: svgRef.current,
+        togglePinTooltip,
+        tooltipPinned,
+        unpinTooltip,
         xAxis,
-        xScale,
         yAxis,
-        yScale,
-        split: preparedSplit,
-        htmlLayout: htmlLayerRef.current,
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
     const pointerMoveHandler = (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.pointermove;
@@ -90,83 +53,26 @@ export const ChartInner = (props) => {
             dispatcher.on(EventType.POINTERMOVE_CHART, null);
         };
     }, [dispatcher, clickHandler, pointerMoveHandler]);
-    const boundsOffsetTop = chart.margin.top;
-    // We only need to consider the width of the first left axis
-    const boundsOffsetLeft = chart.margin.left + getYAxisWidth(yAxis[0]);
-    const isOutsideBounds = React.useCallback((x, y) => {
-        return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
-    }, [boundsHeight, boundsWidth]);
-    const handleMove = ([pointerX, pointerY], event) => {
-        const x = pointerX - boundsOffsetLeft;
-        const y = pointerY - boundsOffsetTop;
-        if (isOutsideBounds(x, y)) {
-            dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
-            dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
-            return;
-        }
-        const closest = getClosestPoints({
-            position: [x, y],
-            shapesData,
-        });
-        dispatcher.call(EventType.HOVER_SHAPE, event.target, closest, [pointerX, pointerY]);
-        dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
-            hovered: closest,
-            xAxis,
-            yAxis: yAxis[0],
-        }, event);
-    };
-    const handleMouseMove = (event) => {
-        const [pointerX, pointerY] = pointer(event, svgRef.current);
-        handleMove([pointerX, pointerY], event);
-    };
-    const throttledHandleMouseMove = IS_TOUCH_ENABLED
-        ? undefined
-        : throttle(handleMouseMove, THROTTLE_DELAY);
-    const handleMouseLeave = (event) => {
-        throttledHandleMouseMove === null || throttledHandleMouseMove === void 0 ? void 0 : throttledHandleMouseMove.cancel();
-        dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
-        dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
-    };
-    const handleTouchMove = (event) => {
-        const touch = event.touches[0];
-        const [pointerX, pointerY] = pointer(touch, svgRef.current);
-        handleMove([pointerX, pointerY], event);
-    };
-    const throttledHandleTouchMove = IS_TOUCH_ENABLED
-        ? throttle(handleTouchMove, THROTTLE_DELAY)
-        : undefined;
-    const handleChartClick = React.useCallback((event) => {
-        const [pointerX, pointerY] = pointer(event, svgRef.current);
-        const x = pointerX - boundsOffsetLeft;
-        const y = pointerY - boundsOffsetTop;
-        if (isOutsideBounds(x, y)) {
-            return;
-        }
-        const items = getClosestPoints({
-            position: [x, y],
-            shapesData,
-        });
-        const selected = items === null || items === void 0 ? void 0 : items.find((item) => item.closest);
-        if (!selected) {
-            return;
+    React.useEffect(() => {
+        if ((prevWidth !== width || prevHeight !== height) && tooltipPinned) {
+            unpinTooltip === null || unpinTooltip === void 0 ? void 0 : unpinTooltip();
         }
-        dispatcher.call('click-chart', undefined, { point: selected.data, series: selected.series }, event);
-    }, [boundsOffsetLeft, boundsOffsetTop, dispatcher, isOutsideBounds, shapesData]);
+    }, [prevWidth, width, prevHeight, height, tooltipPinned, unpinTooltip]);
     return (React.createElement(React.Fragment, null,
         React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick },
             title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
             React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
                 return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
             })),
-            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})` },
+            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit }),
+                    React.createElement(AxisY, { axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotRef: plotRef }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit })))),
                 shapes),
-            preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick }))),
+            preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip }))),
         React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {
                 transform: `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),
-        React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0] })));
+        React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0], onOutsideClick: unpinTooltip, tooltipPinned: tooltipPinned })));
 };

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

@@ -0,0 +1,6 @@
+import type { ChartData } from '../../types';
+export type ChartInnerProps = {
+    width: number;
+    height: number;
+    data: ChartData;
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedAxis, ShapeData } from '../../hooks';
+import type { useChartInnerState } from './useChartInnerState';
+type ChartInnerState = ReturnType<typeof useChartInnerState>;
+type Props = {
+    boundsHeight: number;
+    boundsOffsetLeft: number;
+    boundsOffsetTop: number;
+    boundsWidth: number;
+    dispatcher: Dispatch<object>;
+    shapesData: ShapeData[];
+    svgContainer: SVGSVGElement | null;
+    togglePinTooltip: ChartInnerState['togglePinTooltip'];
+    tooltipPinned: boolean;
+    unpinTooltip: ChartInnerState['unpinTooltip'];
+    xAxis: PreparedAxis;
+    yAxis: PreparedAxis[];
+};
+export declare function useChartInnerHandlers(props: Props): {
+    handleChartClick: (event: React.MouseEvent<SVGSVGElement>) => void;
+    handleMouseLeave: React.MouseEventHandler<SVGSVGElement>;
+    throttledHandleMouseMove: import("lodash").DebouncedFuncLeading<React.MouseEventHandler<SVGSVGElement>> | undefined;
+    throttledHandleTouchMove: import("lodash").DebouncedFuncLeading<React.TouchEventHandler<SVGSVGElement>> | undefined;
+};
+export {};

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import { pointer } from 'd3';
+import throttle from 'lodash/throttle';
+import { IS_TOUCH_ENABLED } from '../../constants';
+import { EventType } from '../../utils';
+import { getClosestPoints } from '../../utils/chart/get-closest-data';
+const THROTTLE_DELAY = 50;
+export function useChartInnerHandlers(props) {
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, dispatcher, shapesData, svgContainer, togglePinTooltip, tooltipPinned, unpinTooltip, xAxis, yAxis, } = props;
+    const isOutsideBounds = React.useCallback((x, y) => {
+        return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
+    }, [boundsHeight, boundsWidth]);
+    const handleMove = ([pointerX, pointerY], event) => {
+        if (tooltipPinned) {
+            return;
+        }
+        const x = pointerX - boundsOffsetLeft;
+        const y = pointerY - boundsOffsetTop;
+        if (isOutsideBounds(x, y)) {
+            dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
+            dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
+            return;
+        }
+        const closest = getClosestPoints({
+            position: [x, y],
+            shapesData,
+            boundsHeight,
+            boundsWidth,
+        });
+        dispatcher.call(EventType.HOVER_SHAPE, event.target, closest, [pointerX, pointerY]);
+        dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
+            hovered: closest,
+            xAxis,
+            yAxis: yAxis[0],
+        }, event);
+    };
+    const handleMouseMove = (event) => {
+        const [pointerX, pointerY] = pointer(event, svgContainer);
+        handleMove([pointerX, pointerY], event);
+    };
+    const throttledHandleMouseMove = IS_TOUCH_ENABLED
+        ? undefined
+        : throttle(handleMouseMove, THROTTLE_DELAY);
+    const handleMouseLeave = (event) => {
+        if (tooltipPinned) {
+            return;
+        }
+        throttledHandleMouseMove === null || throttledHandleMouseMove === void 0 ? void 0 : throttledHandleMouseMove.cancel();
+        dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
+        dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
+    };
+    const handleTouchMove = (event) => {
+        const touch = event.touches[0];
+        const [pointerX, pointerY] = pointer(touch, svgContainer);
+        handleMove([pointerX, pointerY], event);
+    };
+    const throttledHandleTouchMove = IS_TOUCH_ENABLED
+        ? throttle(handleTouchMove, THROTTLE_DELAY)
+        : undefined;
+    const handleChartClick = (event) => {
+        const [pointerX, pointerY] = pointer(event, svgContainer);
+        const x = pointerX - boundsOffsetLeft;
+        const y = pointerY - boundsOffsetTop;
+        if (isOutsideBounds(x, y)) {
+            return;
+        }
+        const items = getClosestPoints({
+            position: [x, y],
+            shapesData,
+            boundsHeight,
+            boundsWidth,
+        });
+        const selected = items === null || items === void 0 ? void 0 : items.find((item) => item.closest);
+        if (!selected) {
+            if (tooltipPinned) {
+                unpinTooltip === null || unpinTooltip === void 0 ? void 0 : unpinTooltip();
+            }
+            return;
+        }
+        dispatcher.call(EventType.CLICK_CHART, undefined, { point: selected.data, series: selected.series }, event);
+        const nextTooltipFixed = !tooltipPinned;
+        if (!nextTooltipFixed) {
+            dispatcher.call(EventType.HOVER_SHAPE, event.target, items, [pointerX, pointerY]);
+            dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
+                hovered: items,
+                xAxis,
+                yAxis: yAxis[0],
+            }, event);
+        }
+        togglePinTooltip === null || togglePinTooltip === void 0 ? void 0 : togglePinTooltip(nextTooltipFixed, event);
+    };
+    return {
+        handleChartClick,
+        handleMouseLeave,
+        throttledHandleMouseMove,
+        throttledHandleTouchMove,
+    };
+}

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { ChartInnerProps } from './types';
+type Props = ChartInnerProps & {
+    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
+};
+export declare function useChartInnerProps(props: Props): {
+    boundsHeight: number;
+    boundsOffsetLeft: number;
+    boundsOffsetTop: number;
+    boundsWidth: number;
+    handleLegendItemClick: import("../../hooks").OnLegendItemClick;
+    legendConfig: {
+        offset: {
+            left: number;
+            top: number;
+        };
+        pagination: {
+            limit: number;
+            maxPage: number;
+        } | undefined;
+    };
+    legendItems: import("../../hooks").LegendItem[][];
+    preparedLegend: import("../../hooks").PreparedLegend;
+    preparedSeries: import("../../hooks").PreparedSeries[];
+    preparedSplit: import("../../hooks").PreparedSplit;
+    prevHeight: number | undefined;
+    prevWidth: number | undefined;
+    shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+    shapesData: import("../../hooks").ShapeData[];
+    title: (import("../../types").ChartTitle & {
+        height: number;
+    }) | undefined;
+    tooltip: import("../../types").ChartTooltip<any> & {
+        enabled: boolean;
+    };
+    xAxis: import("../../hooks").PreparedAxis;
+    xScale: import("../../hooks").ChartScale | undefined;
+    yAxis: import("../../hooks").PreparedAxis[];
+    yScale: import("../../hooks").ChartScale[] | undefined;
+};
+export {};

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { useAxisScales, useChartDimensions, useChartOptions, usePrevious, useSeries, useShapes, useSplit, } from '../../hooks';
+import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
+import { getPreparedXAxis } from '../../hooks/useChartOptions/x-axis';
+import { getPreparedYAxis } from '../../hooks/useChartOptions/y-axis';
+export function useChartInnerProps(props) {
+    const { width, height, data, dispatcher, htmlLayout } = props;
+    const prevWidth = usePrevious(width);
+    const prevHeight = usePrevious(height);
+    const { chart, title, tooltip } = useChartOptions({ data });
+    const xAxis = React.useMemo(() => getPreparedXAxis({ xAxis: data.xAxis, width, series: data.series.data }), [data, width]);
+    const yAxis = React.useMemo(() => getPreparedYAxis({
+        series: data.series.data,
+        yAxis: data.yAxis,
+        height,
+    }), [data, height]);
+    const { legendItems, legendConfig, preparedSeries, preparedSeriesOptions, preparedLegend, handleLegendItemClick, } = useSeries({
+        chartWidth: width,
+        chartHeight: height,
+        chartMargin: chart.margin,
+        series: data.series,
+        legend: data.legend,
+        preparedYAxis: yAxis,
+    });
+    const { boundsWidth, boundsHeight } = useChartDimensions({
+        width,
+        height,
+        margin: chart.margin,
+        preparedLegend,
+        preparedXAxis: xAxis,
+        preparedYAxis: yAxis,
+        preparedSeries: preparedSeries,
+    });
+    const preparedSplit = useSplit({ split: data.split, boundsHeight, chartWidth: width });
+    const { xScale, yScale } = useAxisScales({
+        boundsWidth,
+        boundsHeight,
+        series: preparedSeries,
+        xAxis,
+        yAxis,
+        split: preparedSplit,
+    });
+    const { shapes, shapesData } = useShapes({
+        boundsWidth,
+        boundsHeight,
+        dispatcher,
+        series: preparedSeries,
+        seriesOptions: preparedSeriesOptions,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+        split: preparedSplit,
+        htmlLayout,
+    });
+    const boundsOffsetTop = chart.margin.top;
+    // We only need to consider the width of the first left axis
+    const boundsOffsetLeft = chart.margin.left + getYAxisWidth(yAxis[0]);
+    return {
+        boundsHeight,
+        boundsOffsetLeft,
+        boundsOffsetTop,
+        boundsWidth,
+        handleLegendItemClick,
+        legendConfig,
+        legendItems,
+        preparedLegend,
+        preparedSeries,
+        preparedSplit,
+        prevHeight,
+        prevWidth,
+        shapes,
+        shapesData,
+        title,
+        tooltip,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+    };
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { ChartTooltip } from '../../types';
+type Props = {
+    dispatcher: Dispatch<object>;
+    tooltip?: ChartTooltip;
+};
+export declare function useChartInnerState(props: Props): {
+    tooltipPinned: boolean;
+    togglePinTooltip: ((value: boolean, event: React.MouseEvent) => void) | undefined;
+    unpinTooltip: (() => void) | undefined;
+};
+export {};

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { EventType, isMacintosh } from '../../utils';
+export function useChartInnerState(props) {
+    var _a, _b;
+    const { dispatcher, tooltip } = props;
+    const [tooltipPinned, setTooltipPinned] = React.useState(false);
+    const tooltipEnabled = tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled;
+    const tooltipPinEnabled = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.pin) === null || _a === void 0 ? void 0 : _a.enabled;
+    const modifierKey = (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.pin) === null || _b === void 0 ? void 0 : _b.modifierKey;
+    const togglePinTooltip = React.useCallback((value, event) => {
+        let resultValue = value;
+        if (value && modifierKey) {
+            switch (modifierKey) {
+                case 'altKey': {
+                    resultValue = event.altKey;
+                    break;
+                }
+                case 'metaKey': {
+                    resultValue = isMacintosh() ? event.metaKey : event.ctrlKey;
+                }
+            }
+        }
+        setTooltipPinned(resultValue);
+    }, [modifierKey]);
+    const unpinTooltip = React.useCallback(() => {
+        setTooltipPinned(false);
+        dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
+    }, [dispatcher]);
+    return {
+        tooltipPinned,
+        togglePinTooltip: tooltipEnabled && tooltipPinEnabled ? togglePinTooltip : undefined,
+        unpinTooltip: tooltipEnabled && tooltipPinEnabled ? unpinTooltip : undefined,
+    };
+}

package/dist/cjs/components/Legend/index.d.ts

@@ -8,6 +8,7 @@ type Props = {
     items: LegendItem[][];
     config: LegendConfig;
     onItemClick: OnLegendItemClick;
+    onUpdate?: () => void;
 };
 export declare const Legend: (props: Props) => React.JSX.Element;
 export {};