@gravity-ui/charts 1.20.0 → 1.21.0

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

@@ -67,7 +67,14 @@ export const AxisY = (props) => {
             }
             if (tickData.svgLabel) {
                 const label = tickData.svgLabel;
-                const textSelection = tickSelection.append('text');
+                const textSelection = tickSelection
+                    .append('text')
+                    .style('transform', [
+                    `translate(${label.x}px, ${label.y}px)`,
+                    label.angle ? `rotate(${label.angle}deg)` : '',
+                ]
+                    .filter(Boolean)
+                    .join(' '));
                 if (label.title) {
                     textSelection.append('title').html(label.title);
                 }

package/dist/cjs/components/AxisY/prepare-axis-data.js

@@ -9,15 +9,19 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
     const labelMaxWidth = axis.labels.width; //axis.labels.maxWidth;
     const size = originalTextSize;
     const content = [];
-    // Warp label text only for categories - it will look strange for numbers or dates.
-    if (originalTextSize.width > labelMaxWidth && axis.type === 'category') {
+    // line breaks in the text are supported only
+    // 1. for the category axis - it will look strange for numbers or dates
+    // 2. for labels without rotation - it is unclear how to handle long strings correctly
+    if (originalTextSize.width > labelMaxWidth &&
+        axis.type === 'category' &&
+        axis.labels.rotation === 0) {
         const textRows = await wrapText({
             text,
             style: axis.labels.style,
             width: labelMaxWidth,
             getTextSize,
         });
-        let labelTopOffset = top;
+        let labelTopOffset = 0;
         let newLabelWidth = 0;
         let newLabelHeight = 0;
         for (let textRowIndex = 0; textRowIndex < textRows.length; textRowIndex++) {
@@ -43,9 +47,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
                     });
                     textSize = await getTextSize(rowText);
                 }
-                const x = axis.position === 'left'
-                    ? left - textSize.width - axis.labels.margin
-                    : left + axis.labels.margin;
+                const x = axis.position === 'left' ? -textSize.width : 0;
                 content.push({
                     text: rowText,
                     x,
@@ -62,21 +64,46 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
         size.height = newLabelHeight;
     }
     else {
-        const x = axis.position === 'left'
-            ? left - size.width - axis.labels.margin
-            : left + axis.labels.margin;
+        let rowText = text;
+        let textSize = await getTextSize(rowText);
+        const textMaxWidth = Math.min(labelMaxWidth / calculateCos(axis.labels.rotation) -
+            textSize.height * calculateCos(90 - axis.labels.rotation), 
+        // for vertical labels, we need to take into account the available height, otherwise there may be intersections
+        axis.labels.rotation === 90 ? labelMaxHeight : Infinity, 
+        // if there is no rotation, then the height of the label does not affect the width of the text
+        axis.labels.rotation === 0
+            ? Infinity
+            : (top + topOffset - textSize.height / 2) / calculateSin(axis.labels.rotation));
+        if (textSize.width > textMaxWidth) {
+            rowText = await getTextWithElipsis({
+                text: rowText,
+                getTextWidth: async (str) => (await getTextSize(str)).width,
+                maxWidth: textMaxWidth,
+            });
+            textSize = await getTextSize(rowText);
+        }
+        const actualTextHeight = axis.labels.rotation
+            ? textSize.height / calculateSin(axis.labels.rotation)
+            : textSize.height;
+        const x = axis.position === 'left' ? -textSize.width : 0;
+        const y = Math.max(-topOffset - top, -actualTextHeight / 2);
         content.push({
-            text,
+            text: rowText,
             x,
-            y: Math.max(-topOffset, top - size.height / 2),
-            size,
+            y,
+            size: textSize,
         });
     }
+    const x = axis.position === 'left' ? left - axis.labels.margin : left + axis.labels.margin;
+    const y = top;
     const svgLabel = {
         title: content.length > 1 || ((_a = content[0]) === null || _a === void 0 ? void 0 : _a.text) !== text ? text : undefined,
         content: content,
         style: axis.labels.style,
         size: size,
+        x,
+        y,
+        angle: axis.labels.rotation,
     };
     return svgLabel;
 }

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

@@ -10,6 +10,9 @@ export type TextRowData = {
     };
 };
 export type AxisSvgLabelData = {
+    x: number;
+    y: number;
+    angle: number;
     content: TextRowData[];
     title?: string;
     style: BaseTextStyle;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { ArrowRotateLeft } from '@gravity-ui/icons';
 import { Button, ButtonIcon, useUniqId } from '@gravity-ui/uikit';
 import { useCrosshair } from '../../hooks';
+import { getPreparedTooltip } from '../../hooks/useChartOptions/tooltip';
 import { EventType, block, getDispatcher } from '../../utils';
 import { AxisX } from '../AxisX/AxisX';
 import { AxisY } from '../AxisY/AxisY';
@@ -26,12 +27,22 @@ export const ChartInner = (props) => {
     const plotAfterRef = React.useRef(null);
     const dispatcher = React.useMemo(() => getDispatcher(), []);
     const clipPathId = useUniqId();
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, handleZoomReset, isOutsideBounds, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher,
-        htmlLayout, svgContainer: svgRef.current, plotNode: plotRef.current, clipPathId }));
-    const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
+    const preparedTooltip = React.useMemo(() => {
+        return getPreparedTooltip({
+            tooltip: data.tooltip,
+            seriesData: data.series.data,
+            yAxes: data.yAxis,
+            xAxis: data.xAxis,
+        });
+    }, [data.series.data, data.tooltip, data.yAxis, data.xAxis]);
+    const { tooltipPinned, togglePinTooltip, unpinTooltip, updateZoomState, zoomState } = useChartInnerState({
         dispatcher,
-        tooltip,
+        tooltip: preparedTooltip,
     });
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, xAxis, xScale, yAxis, yScale, svgXPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
+        dispatcher,
+        htmlLayout, plotNode: plotRef.current, svgContainer: svgRef.current, updateZoomState,
+        zoomState }));
     const { handleChartClick, handleMouseLeave, throttledHandleMouseMove, throttledHandleTouchMove } = useChartInnerHandlers({
         boundsHeight,
         boundsOffsetLeft,
@@ -45,7 +56,7 @@ export const ChartInner = (props) => {
         unpinTooltip,
         xAxis,
         yAxis,
-        tooltipThrottle: tooltip.throttle,
+        tooltipThrottle: preparedTooltip.throttle,
         isOutsideBounds,
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
@@ -132,8 +143,8 @@ export const ChartInner = (props) => {
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),
-        handleZoomReset && (React.createElement(Button, { style: { position: 'absolute', top: 0, right: 0 }, onClick: handleZoomReset },
+        Object.keys(zoomState).length > 0 && (React.createElement(Button, { style: { position: 'absolute', top: 0, right: 0 }, onClick: () => updateZoomState({}) },
             React.createElement(ButtonIcon, null,
                 React.createElement(ArrowRotateLeft, null)))),
-        React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0], onOutsideClick: unpinTooltip, tooltipPinned: tooltipPinned })));
+        React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: preparedTooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0], onOutsideClick: unpinTooltip, tooltipPinned: tooltipPinned })));
 };

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

@@ -1,13 +1,15 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { PreparedAxis } from '../../hooks';
+import type { ZoomState } from '../../hooks/useZoom/types';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
+    clipPathId: string;
     dispatcher: Dispatch<object>;
     htmlLayout: HTMLElement | null;
-    svgContainer: SVGGElement | null;
     plotNode: SVGGElement | null;
-    clipPathId: string;
+    svgContainer: SVGGElement | null;
+    updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
+    zoomState: Partial<ZoomState>;
 };
 export declare function useChartInnerProps(props: Props): {
     svgBottomPos: number | undefined;
@@ -18,7 +20,6 @@ export declare function useChartInnerProps(props: Props): {
     boundsOffsetTop: number;
     boundsWidth: number;
     handleLegendItemClick: import("../../hooks").OnLegendItemClick;
-    handleZoomReset: (() => void) | undefined;
     isOutsideBounds: (x: number, y: number) => boolean;
     legendConfig: {
         offset: {
@@ -41,16 +42,12 @@ export declare function useChartInnerProps(props: Props): {
     prevWidth: number | undefined;
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: import("../../hooks").ShapeData[];
-    title: (import("../../types").ChartTitle & {
+    title: (import("../..").ChartTitle & {
         height: number;
     }) | undefined;
-    tooltip: import("../../types").ChartTooltip<any> & {
-        enabled: boolean;
-        throttle: number;
-    };
-    xAxis: PreparedAxis | null;
+    xAxis: import("../../hooks").PreparedAxis | null;
     xScale: import("../../hooks").ChartScale | undefined;
-    yAxis: PreparedAxis[];
+    yAxis: import("../../hooks").PreparedAxis[];
     yScale: (import("../../hooks").ChartScale | undefined)[] | undefined;
 };
 export {};

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

@@ -1,115 +1,45 @@
 import React from 'react';
-import isEqual from 'lodash/isEqual';
-import { useAxisScales, useChartDimensions, useChartOptions, usePrevious, useSeries, useShapeSeries, useShapes, useSplit, } from '../../hooks';
+import { useAxis, useAxisScales, useChartDimensions, useChartOptions, useNormalizedOriginalData, 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';
 import { getLegendComponents } from '../../hooks/useSeries/prepare-legend';
 import { getPreparedOptions } from '../../hooks/useSeries/prepare-options';
-import { getActiveLegendItems } from '../../hooks/useSeries/utils';
 import { useZoom } from '../../hooks/useZoom';
-import { getSortedSeriesData, getZoomedSeriesData } from '../../utils';
+import { getZoomedSeriesData } from '../../utils';
 import { hasAtLeastOneSeriesDataPerPlot } from './utils';
 export function useChartInnerProps(props) {
     var _a;
-    const { width, height, data, dispatcher, htmlLayout, svgContainer, plotNode, clipPathId } = props;
+    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, svgContainer, width, updateZoomState, zoomState, } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
-    const { chart, title, tooltip, colors } = useChartOptions({
+    const { normalizedSeriesData, normalizedXAxis, normalizedYAxis } = useNormalizedOriginalData({
         seriesData: data.series.data,
+        xAxis: data.xAxis,
+        yAxis: data.yAxis,
+    });
+    const { chart, title, colors } = useChartOptions({
         chart: data.chart,
         colors: data.colors,
+        seriesData: normalizedSeriesData,
         title: data.title,
-        tooltip: data.tooltip,
-        xAxis: data.xAxis,
-        yAxes: data.yAxis,
     });
     const preparedSeriesOptions = React.useMemo(() => {
         return getPreparedOptions(data.series.options);
     }, [data.series.options]);
-    const [zoomState, setZoomState] = React.useState({});
-    const sortedSeriesData = React.useMemo(() => {
-        return getSortedSeriesData({ seriesData: data.series.data, yAxes: data.yAxis });
-    }, [data.series.data, data.yAxis]);
-    const { zoomedSeriesData, zoomedShapesSeriesData } = React.useMemo(() => {
-        return getZoomedSeriesData({
-            seriesData: sortedSeriesData,
-            xAxis: data.xAxis,
-            yAxes: data.yAxis,
-            zoomState,
-        });
-    }, [data.xAxis, data.yAxis, sortedSeriesData, zoomState]);
-    const { preparedSeries, preparedLegend, handleLegendItemClick } = useSeries({
+    const { preparedSeries: basePreparedSeries, preparedLegend, handleLegendItemClick, } = useSeries({
         colors,
         legend: data.legend,
-        originalSeriesData: sortedSeriesData,
-        seriesData: zoomedSeriesData,
-        seriesOptions: data.series.options,
-    });
-    // preparing the X and Y axes
-    const [axesState, setValue] = React.useState({ xAxis: null, yAxis: [] });
-    const axesStateRunRef = React.useRef(0);
-    const prevAxesStateValue = React.useRef(axesState);
-    const axesStateReady = React.useRef(false);
-    React.useEffect(() => {
-        axesStateRunRef.current++;
-        axesStateReady.current = false;
-        (async function () {
-            const currentRun = axesStateRunRef.current;
-            const seriesData = preparedSeries.filter((s) => s.visible);
-            const xAxis = await getPreparedXAxis({
-                xAxis: data.xAxis,
-                width,
-                seriesData,
-                seriesOptions: preparedSeriesOptions,
-            });
-            let estimatedBoundsHeight = height;
-            if (xAxis) {
-                estimatedBoundsHeight =
-                    height -
-                        (xAxis.title.height +
-                            xAxis.title.margin +
-                            xAxis.labels.margin +
-                            xAxis.labels.height +
-                            (preparedLegend ? preparedLegend.height + preparedLegend.margin : 0) +
-                            chart.margin.top +
-                            chart.margin.bottom);
-            }
-            const yAxis = await getPreparedYAxis({
-                height,
-                boundsHeight: estimatedBoundsHeight,
-                width,
-                seriesData,
-                yAxis: data.yAxis,
-            });
-            const newStateValue = { xAxis, yAxis };
-            if (axesStateRunRef.current === currentRun) {
-                if (!isEqual(prevAxesStateValue.current, newStateValue)) {
-                    setValue(newStateValue);
-                    prevAxesStateValue.current = newStateValue;
-                }
-                axesStateReady.current = true;
-            }
-        })();
-    }, [
-        chart.margin,
-        data.xAxis,
-        data.yAxis,
-        height,
-        preparedLegend,
-        preparedSeries,
-        preparedSeriesOptions,
-        width,
-    ]);
-    const { xAxis, yAxis } = axesStateReady.current ? axesState : { xAxis: null, yAxis: [] };
-    const activeLegendItems = React.useMemo(() => getActiveLegendItems(preparedSeries), [preparedSeries]);
-    const { preparedSeries: preparedShapesSeries } = useShapeSeries({
-        colors,
-        seriesData: zoomedShapesSeriesData,
+        originalSeriesData: normalizedSeriesData,
+        seriesData: normalizedSeriesData,
         seriesOptions: data.series.options,
-        activeLegendItems,
-        preparedLegend,
     });
+    const { preparedSeries, preparedShapesSeries } = React.useMemo(() => {
+        return getZoomedSeriesData({
+            seriesData: basePreparedSeries,
+            xAxis: normalizedXAxis,
+            yAxis: normalizedYAxis,
+            zoomState,
+        });
+    }, [basePreparedSeries, normalizedXAxis, normalizedYAxis, zoomState]);
     const { legendConfig, legendItems } = React.useMemo(() => {
         if (!preparedLegend) {
             return { legendConfig: undefined, legendItems: [] };
@@ -122,14 +52,24 @@ export function useChartInnerProps(props) {
             preparedLegend,
         });
     }, [width, height, chart.margin, preparedSeries, preparedLegend]);
-    const { boundsWidth, boundsHeight } = useChartDimensions({
+    const { xAxis, yAxis } = useAxis({
+        height,
+        preparedChart: chart,
+        preparedLegend,
+        preparedSeries,
+        preparedSeriesOptions,
         width,
+        xAxis: normalizedXAxis,
+        yAxis: normalizedYAxis,
+    });
+    const { boundsWidth, boundsHeight } = useChartDimensions({
         height,
         margin: chart.margin,
         preparedLegend,
-        preparedXAxis: xAxis,
-        preparedYAxis: yAxis,
         preparedSeries: preparedSeries,
+        preparedYAxis: yAxis,
+        preparedXAxis: xAxis,
+        width,
     });
     const preparedSplit = useSplit({ split: data.split, boundsHeight, chartWidth: width });
     const { xScale, yScale } = useAxisScales({
@@ -162,17 +102,17 @@ export function useChartInnerProps(props) {
         isOutsideBounds,
     });
     const handleAttemptToSetZoomState = React.useCallback((nextZoomState) => {
-        const { zoomedSeriesData: nextZoomedSeriesData } = getZoomedSeriesData({
-            seriesData: zoomedSeriesData,
-            xAxis: data.xAxis,
-            yAxes: data.yAxis,
+        const { preparedSeries: nextZoomedSeriesData } = getZoomedSeriesData({
+            seriesData: preparedSeries,
+            xAxis,
+            yAxis,
             zoomState: nextZoomState,
         });
         const hasData = hasAtLeastOneSeriesDataPerPlot(nextZoomedSeriesData, yAxis);
         if (hasData) {
-            setZoomState(nextZoomState);
+            updateZoomState(nextZoomState);
         }
-    }, [data.xAxis, data.yAxis, yAxis, zoomedSeriesData]);
+    }, [xAxis, yAxis, preparedSeries, updateZoomState]);
     useZoom({
         node: plotNode,
         onUpdate: handleAttemptToSetZoomState,
@@ -199,9 +139,6 @@ export function useChartInnerProps(props) {
             return acc;
         }, 0);
     const { bottom, top, x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
-    const handleZoomReset = React.useCallback(() => {
-        setZoomState({});
-    }, []);
     return {
         svgBottomPos: bottom,
         svgTopPos: top,
@@ -211,7 +148,6 @@ export function useChartInnerProps(props) {
         boundsOffsetTop,
         boundsWidth,
         handleLegendItemClick,
-        handleZoomReset: Object.keys(zoomState).length > 0 ? handleZoomReset : undefined,
         isOutsideBounds,
         legendConfig,
         legendItems,
@@ -223,7 +159,6 @@ export function useChartInnerProps(props) {
         shapes,
         shapesData,
         title,
-        tooltip,
         xAxis,
         xScale,
         yAxis,

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

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

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

@@ -1,9 +1,11 @@
 import React from 'react';
+import isEqual from 'lodash/isEqual';
 import { EventType, isMacintosh } from '../../utils';
 export function useChartInnerState(props) {
     var _a, _b;
     const { dispatcher, tooltip } = props;
     const [tooltipPinned, setTooltipPinned] = React.useState(false);
+    const [zoomState, setZoomState] = React.useState({});
     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;
@@ -26,9 +28,16 @@ export function useChartInnerState(props) {
         setTooltipPinned(false);
         dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
     }, [dispatcher]);
+    const updateZoomState = React.useCallback((nextZoomState) => {
+        if (!isEqual(zoomState, nextZoomState)) {
+            setZoomState(nextZoomState);
+        }
+    }, [zoomState]);
     return {
         tooltipPinned,
         togglePinTooltip: tooltipEnabled && tooltipPinEnabled ? togglePinTooltip : undefined,
         unpinTooltip: tooltipEnabled && tooltipPinEnabled ? unpinTooltip : undefined,
+        updateZoomState,
+        zoomState,
     };
 }

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

@@ -1,4 +1,4 @@
+import type { PreparedSeries } from '../../hooks';
 import type { PreparedAxis } from '../../hooks/useChartOptions/types';
-import type { ChartSeries } from '../../types';
-export declare function hasAtLeastOneSeriesDataPerPlot(seriesData: ChartSeries[], yAxes?: PreparedAxis[]): boolean;
+export declare function hasAtLeastOneSeriesDataPerPlot(seriesData: PreparedSeries[], yAxes?: PreparedAxis[]): boolean;
 export declare function useAsyncState<T>(value: T, setState: () => Promise<T>): T;

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

@@ -21,7 +21,7 @@ export function hasAtLeastOneSeriesDataPerPlot(seriesData, yAxes = []) {
         const yAxis = yAxes[yAxisIndex];
         const plotIndex = (_a = yAxis === null || yAxis === void 0 ? void 0 : yAxis.plotIndex) !== null && _a !== void 0 ? _a : 0;
         if (!hasDataMap.get(plotIndex)) {
-            if (seriesDataChunk.data.length > 0) {
+            if (Array.isArray(seriesDataChunk.data) && seriesDataChunk.data.length > 0) {
                 hasDataMap.set(plotIndex, true);
             }
         }

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { PreparedTitle } from '../../hooks';
-import './styles.css';
 type Props = PreparedTitle & {
     chartWidth: number;
 };

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

@@ -1,9 +1,11 @@
 import React from 'react';
-import { block } from '../../utils';
-import './styles.css';
-const b = block('title');
 export const Title = (props) => {
     const { chartWidth, text, height, style } = props;
-    return (React.createElement("text", { className: b(), dx: chartWidth / 2, dy: height / 2, dominantBaseline: "middle", textAnchor: "middle", style: Object.assign({ lineHeight: `${height}px` }, style) },
+    return (React.createElement("text", { dx: chartWidth / 2, dy: height / 2, dominantBaseline: "middle", textAnchor: "middle", style: {
+            fill: style === null || style === void 0 ? void 0 : style.fontColor,
+            fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
+            fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
+            lineHeight: `${height}px`,
+        } },
         React.createElement("tspan", { dangerouslySetInnerHTML: { __html: text } })));
 };

package/dist/cjs/hooks/index.d.ts

@@ -1,12 +1,16 @@
+export * from './useAxis';
+export * from './useAxisScales';
 export * from './useChartDimensions';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
-export * from './useAxisScales';
+export * from './useCrosshair';
+export * from './useNormalizedOriginalData';
 export * from './usePrevious';
 export * from './useSeries';
 export * from './useSeries/types';
 export * from './useShapes';
-export * from './useTooltip';
 export * from './useSplit';
 export * from './useSplit/types';
-export * from './useCrosshair';
+export * from './useTooltip';
+export * from './useZoom';
+export * from './useZoom/types';

package/dist/cjs/hooks/index.js

@@ -1,12 +1,16 @@
+export * from './useAxis';
+export * from './useAxisScales';
 export * from './useChartDimensions';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
-export * from './useAxisScales';
+export * from './useCrosshair';
+export * from './useNormalizedOriginalData';
 export * from './usePrevious';
 export * from './useSeries';
 export * from './useSeries/types';
 export * from './useShapes';
-export * from './useTooltip';
 export * from './useSplit';
 export * from './useSplit/types';
-export * from './useCrosshair';
+export * from './useTooltip';
+export * from './useZoom';
+export * from './useZoom/types';

package/dist/cjs/hooks/useAxis/index.d.ts

@@ -0,0 +1,19 @@
+import type { ChartXAxis, ChartYAxis } from '../../types';
+import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
+import type { PreparedLegend, PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
+interface UseAxesProps {
+    height: number;
+    preparedChart: PreparedChart;
+    preparedLegend: PreparedLegend | null;
+    preparedSeries: PreparedSeries[];
+    preparedSeriesOptions: PreparedSeriesOptions;
+    width: number;
+    boundsHeight?: number;
+    xAxis?: ChartXAxis;
+    yAxis?: ChartYAxis[];
+}
+export declare function useAxis(props: UseAxesProps): {
+    xAxis: PreparedAxis | null;
+    yAxis: PreparedAxis[];
+};
+export {};

package/dist/cjs/hooks/useAxis/index.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import isEqual from 'lodash/isEqual';
+import { getPreparedXAxis } from '../useChartOptions/x-axis';
+import { getPreparedYAxis } from '../useChartOptions/y-axis';
+export function useAxis(props) {
+    const { boundsHeight, height, preparedChart, preparedLegend, preparedSeries, preparedSeriesOptions, width, xAxis, yAxis, } = props;
+    const [axesState, setValue] = React.useState({ xAxis: null, yAxis: [] });
+    const axesStateRunRef = React.useRef(0);
+    const prevAxesStateValue = React.useRef(axesState);
+    const axesStateReady = React.useRef(false);
+    React.useEffect(() => {
+        axesStateRunRef.current++;
+        axesStateReady.current = false;
+        (async function () {
+            const currentRun = axesStateRunRef.current;
+            const seriesData = preparedSeries.filter((s) => s.visible);
+            const preparedXAxis = await getPreparedXAxis({
+                xAxis,
+                width,
+                seriesData,
+                seriesOptions: preparedSeriesOptions,
+            });
+            let estimatedBoundsHeight = boundsHeight !== null && boundsHeight !== void 0 ? boundsHeight : height;
+            if (preparedXAxis && typeof boundsHeight !== 'number') {
+                estimatedBoundsHeight =
+                    height -
+                        (preparedXAxis.title.height +
+                            preparedXAxis.title.margin +
+                            preparedXAxis.labels.margin +
+                            preparedXAxis.labels.height +
+                            (preparedLegend ? preparedLegend.height + preparedLegend.margin : 0) +
+                            preparedChart.margin.top +
+                            preparedChart.margin.bottom);
+            }
+            const preparedYAxis = await getPreparedYAxis({
+                height,
+                boundsHeight: estimatedBoundsHeight,
+                width,
+                seriesData,
+                yAxis,
+            });
+            const newStateValue = { xAxis: preparedXAxis, yAxis: preparedYAxis };
+            if (axesStateRunRef.current === currentRun) {
+                if (!isEqual(prevAxesStateValue.current, newStateValue)) {
+                    setValue(newStateValue);
+                    prevAxesStateValue.current = newStateValue;
+                }
+                axesStateReady.current = true;
+            }
+        })();
+    }, [
+        boundsHeight,
+        height,
+        preparedChart.margin,
+        preparedLegend,
+        preparedSeries,
+        preparedSeriesOptions,
+        width,
+        xAxis,
+        yAxis,
+    ]);
+    return axesStateReady.current ? axesState : { xAxis: null, yAxis: [] };
+}