@gravity-ui/charts 1.20.0 → 1.22.0

package/dist/cjs/utils/chart/get-closest-data.js

@@ -105,7 +105,7 @@ export function getClosestPoints(args) {
             case 'bar-y': {
                 const points = list;
                 const sorted = sort(points, (p) => p.y);
-                const closestYIndex = bisector((p) => p.y).center(sorted, pointerY);
+                const closestYIndex = bisector((p) => p.y + p.height / 2).center(sorted, pointerY);
                 const closestYPoint = sorted[closestYIndex];
                 let selectedPoints = [];
                 let closestPointXValue = -1;

package/dist/cjs/utils/chart/series/sorting.d.ts

@@ -1,6 +1,6 @@
 import type { ChartAxis, ChartSeries } from '../../../types';
-export declare function getSortedSeriesData({ seriesData, yAxes, xAxis, }: {
+export declare function getSortedSeriesData({ seriesData, xAxis, yAxis, }: {
     seriesData: ChartSeries[];
-    yAxes?: ChartAxis[];
     xAxis?: ChartAxis;
+    yAxis?: ChartAxis[];
 }): ChartSeries[];

package/dist/cjs/utils/chart/series/sorting.js

@@ -20,11 +20,11 @@ function applyAxisCategoriesOrder({ series, axis, key, }) {
     });
     return Object.assign(Object.assign({}, series), { data: newSeriesData });
 }
-export function getSortedSeriesData({ seriesData, yAxes, xAxis, }) {
+export function getSortedSeriesData({ seriesData, xAxis, yAxis, }) {
     return seriesData.map((s) => {
-        const yAxis = yAxes === null || yAxes === void 0 ? void 0 : yAxes[0];
+        const yAxisItem = yAxis === null || yAxis === void 0 ? void 0 : yAxis[0];
         let sortedSeries = s;
-        sortedSeries = applyAxisCategoriesOrder({ series: sortedSeries, axis: yAxis, key: 'y' });
+        sortedSeries = applyAxisCategoriesOrder({ series: sortedSeries, axis: yAxisItem, key: 'y' });
         sortedSeries = applyAxisCategoriesOrder({ series: sortedSeries, axis: xAxis, key: 'x' });
         switch (sortedSeries.type) {
             case SeriesType.Area: {

package/dist/cjs/utils/chart/text.js

@@ -1,4 +1,6 @@
 import { select } from 'd3-selection';
+import { block } from '../cn';
+const b = block('chart');
 export function handleOverflowingText(tSpan, maxWidth, textWidth) {
     var _a, _b, _c;
     if (!tSpan) {
@@ -186,29 +188,30 @@ function unescapeHtml(str) {
         return result.replace(value, key);
     }, str);
 }
+function getCssStyle(prop, el = document.body) {
+    return window.getComputedStyle(el, null).getPropertyValue(prop);
+}
+let measureCanvas = null;
 export function getTextSizeFn({ style }) {
-    const map = {};
-    const setSymbolSize = async (s) => {
-        const labels = [s === ' ' ? ' ' : s];
-        const size = await getLabelsSize({
-            labels,
-            style,
-        });
-        map[s] = { width: size.maxWidth, height: size.maxHeight };
-    };
+    var _a;
+    const canvas = measureCanvas || (measureCanvas = document.createElement('canvas'));
+    const context = canvas.getContext('2d');
+    if (!context) {
+        throw new Error("Couldn't get canvas context");
+    }
+    const element = (_a = document.getElementsByClassName(b())[0]) !== null && _a !== void 0 ? _a : document.body;
+    const defaultFontFamily = getCssStyle('font-family', element);
+    const defaultFontSize = getCssStyle('font-size', element);
+    const defaultFontWeight = getCssStyle('font-weight', element);
     return async (str) => {
-        let width = 0;
-        let height = 0;
-        const symbols = unescapeHtml(str);
-        for (let i = 0; i < symbols.length; i++) {
-            const s = symbols[i];
-            if (!map[s]) {
-                await setSymbolSize(s);
-            }
-            width += map[s].width;
-            height = Math.max(height, map[s].height);
-        }
-        return { width, height };
+        var _a, _b;
+        await document.fonts.ready;
+        context.font = `${(_a = style === null || style === void 0 ? void 0 : style.fontWeight) !== null && _a !== void 0 ? _a : defaultFontWeight} ${(_b = style === null || style === void 0 ? void 0 : style.fontSize) !== null && _b !== void 0 ? _b : defaultFontSize} ${defaultFontFamily}`;
+        const textMetric = context.measureText(unescapeHtml(str));
+        return {
+            width: textMetric.width,
+            height: textMetric.fontBoundingBoxDescent + textMetric.fontBoundingBoxAscent,
+        };
     };
 }
 // We ignore an inaccuracy of less than a pixel.

package/dist/cjs/utils/chart/zoom.d.ts

@@ -1,11 +1,12 @@
+import type { PreparedAxis, PreparedSeries } from '../../hooks';
 import type { ZoomState } from '../../hooks/useZoom/types';
-import type { ChartSeries, ChartXAxis, ChartYAxis } from '../../types';
+import type { ChartXAxis, ChartYAxis } from '../../types';
 export declare function getZoomedSeriesData(args: {
-    seriesData: ChartSeries[];
+    seriesData: PreparedSeries[];
     zoomState: Partial<ZoomState>;
-    xAxis?: ChartXAxis;
-    yAxes?: ChartYAxis[];
+    xAxis?: ChartXAxis | PreparedAxis | null;
+    yAxis?: ChartYAxis[] | PreparedAxis[] | null;
 }): {
-    zoomedSeriesData: ChartSeries[];
-    zoomedShapesSeriesData: ChartSeries[];
+    preparedSeries: PreparedSeries[];
+    preparedShapesSeries: PreparedSeries[];
 };

package/dist/cjs/utils/chart/zoom.js

@@ -1,5 +1,4 @@
 import { SeriesType } from '../../constants';
-import { getAxisCategories } from '../../hooks/useChartOptions/utils';
 const SERIES_TYPE_WITH_HIDDEN_POINTS = [SeriesType.Area, SeriesType.Line];
 // eslint-disable-next-line complexity
 function isValueInRange(args) {
@@ -21,7 +20,7 @@ function isValueInRange(args) {
             return numValue >= numMin && numValue <= numMax;
         }
         case 'category': {
-            const categories = getAxisCategories(axis) || [];
+            const categories = (axis === null || axis === void 0 ? void 0 : axis.categories) || [];
             if (typeof value === 'string' && typeof min === 'number' && typeof max === 'number') {
                 const valueIndex = categories.indexOf(value);
                 if (min === -1 || max === -1 || valueIndex === -1) {
@@ -42,10 +41,13 @@ function isValueInRange(args) {
         }
     }
 }
+function isPreparedZoomableSeries(series) {
+    return Array.isArray(series.data);
+}
 export function getZoomedSeriesData(args) {
-    const { seriesData, xAxis, yAxes, zoomState } = args;
+    const { seriesData, xAxis, yAxis, zoomState } = args;
     if (Object.keys(zoomState).length <= 0) {
-        return { zoomedSeriesData: seriesData, zoomedShapesSeriesData: seriesData };
+        return { preparedSeries: seriesData, preparedShapesSeries: seriesData };
     }
     const zoomedSeriesData = [];
     const zoomedShapesSeriesData = [];
@@ -56,6 +58,9 @@ export function getZoomedSeriesData(args) {
         const filteredShapesData = SERIES_TYPE_WITH_HIDDEN_POINTS.includes(seriesItem.type) && (xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) !== 'category'
             ? []
             : undefined;
+        if (!isPreparedZoomableSeries(seriesItem)) {
+            return;
+        }
         seriesItem.data.forEach((point, i) => {
             const prevPoint = seriesItem.data[i - 1];
             const isFirstPoint = i === 0;
@@ -81,7 +86,7 @@ export function getZoomedSeriesData(args) {
                     const [yMin, yMax] = zoomStateY;
                     const y = 'y' in point ? point.y : undefined;
                     inYRange = isValueInRange({
-                        axis: yAxes === null || yAxes === void 0 ? void 0 : yAxes[yAxisIndex],
+                        axis: yAxis === null || yAxis === void 0 ? void 0 : yAxis[yAxisIndex],
                         value: y,
                         min: yMin,
                         max: yMax,
@@ -111,5 +116,8 @@ export function getZoomedSeriesData(args) {
         zoomedSeriesData.push(Object.assign(Object.assign({}, seriesItem), { data: filteredData }));
         zoomedShapesSeriesData.push(Object.assign(Object.assign({}, seriesItem), { data: filteredShapesData || filteredData }));
     });
-    return { zoomedSeriesData, zoomedShapesSeriesData };
+    return {
+        preparedSeries: zoomedSeriesData,
+        preparedShapesSeries: zoomedShapesSeriesData,
+    };
 }

package/dist/esm/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/esm/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/esm/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/esm/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';
@@ -13,25 +14,36 @@ import { Tooltip } from '../Tooltip';
 import { useChartInnerHandlers } from './useChartInnerHandlers';
 import { useChartInnerProps } from './useChartInnerProps';
 import { useChartInnerState } from './useChartInnerState';
-import { useAsyncState } from './utils';
+import { getResetZoomButtonStyle, useAsyncState } from './utils';
 import './styles.css';
 const b = block('chart');
 export const ChartInner = (props) => {
     var _a, _b, _c, _d;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
+    const resetZoomButtonRef = React.useRef(null);
     const [htmlLayout, setHtmlLayout] = React.useState(null);
     const plotRef = React.useRef(null);
     const plotBeforeRef = React.useRef(null);
     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, preparedZoom, prevHeight, prevWidth, shapes, shapesData, svgXPos, title, xAxis, xScale, yAxis, yScale, } = 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 +57,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 +144,11 @@ 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 && preparedZoom && (React.createElement(Button, { onClick: () => updateZoomState({}), ref: resetZoomButtonRef, style: getResetZoomButtonStyle(Object.assign({ boundsHeight,
+                boundsOffsetLeft,
+                boundsOffsetTop,
+                boundsWidth, node: resetZoomButtonRef.current, titleHeight: title === null || title === void 0 ? void 0 : title.height }, preparedZoom.resetButton)) },
             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/esm/components/ChartInner/useChartInnerProps.d.ts

@@ -1,24 +1,23 @@
 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;
-    svgTopPos: number | undefined;
     svgXPos: number | undefined;
     boundsHeight: number;
     boundsOffsetLeft: number;
     boundsOffsetTop: number;
     boundsWidth: number;
     handleLegendItemClick: import("../../hooks").OnLegendItemClick;
-    handleZoomReset: (() => void) | undefined;
     isOutsideBounds: (x: number, y: number) => boolean;
     legendConfig: {
         offset: {
@@ -37,6 +36,22 @@ export declare function useChartInnerProps(props: Props): {
     preparedLegend: import("../../hooks").PreparedLegend | null;
     preparedSeries: import("../../hooks").PreparedSeries[];
     preparedSplit: import("../../hooks").PreparedSplit;
+    preparedZoom: Required<{
+        type?: ("x" | "y" | "xy") | undefined;
+        brush?: Required<{
+            style?: Required<{
+                fillOpacity?: number | undefined;
+            } | undefined>;
+        } | undefined>;
+        resetButton?: Required<{
+            align?: ("bottom-left" | "bottom-right" | "top-left" | "top-right") | undefined;
+            offset?: Required<{
+                x?: number | undefined;
+                y?: number | undefined;
+            } | undefined>;
+            relativeTo?: ("chart-box" | "plot-box") | undefined;
+        } | undefined>;
+    }> | null;
     prevHeight: number | undefined;
     prevWidth: number | undefined;
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
@@ -44,13 +59,9 @@ export declare function useChartInnerProps(props: Props): {
     title: (import("../..").ChartTitle & {
         height: number;
     }) | undefined;
-    tooltip: import("../..").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/esm/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,
+        originalSeriesData: normalizedSeriesData,
+        seriesData: normalizedSeriesData,
         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,
-        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,
@@ -198,32 +138,26 @@ 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({});
-    }, []);
+    const { x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
     return {
-        svgBottomPos: bottom,
-        svgTopPos: top,
         svgXPos: x,
         boundsHeight,
         boundsOffsetLeft,
         boundsOffsetTop,
         boundsWidth,
         handleLegendItemClick,
-        handleZoomReset: Object.keys(zoomState).length > 0 ? handleZoomReset : undefined,
         isOutsideBounds,
         legendConfig,
         legendItems,
         preparedLegend,
         preparedSeries,
         preparedSplit,
+        preparedZoom: chart.zoom,
         prevHeight,
         prevWidth,
         shapes,
         shapesData,
         title,
-        tooltip,
         xAxis,
         xScale,
         yAxis,