@gravity-ui/charts 1.9.0 → 1.10.1

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

@@ -7,7 +7,8 @@ type Props = {
     height: number;
     scale: ChartScale;
     split: PreparedSplit;
-    plotRef?: React.MutableRefObject<SVGGElement | null>;
+    plotBeforeRef?: React.MutableRefObject<SVGGElement | null>;
+    plotAfterRef?: React.MutableRefObject<SVGGElement | null>;
     leftmostLimit?: number;
 };
 export declare function getTitlePosition(args: {

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

@@ -42,151 +42,157 @@ export function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisX = React.memo(function AxisX(props) {
-    const { axis, width, height: totalHeight, scale, split, plotRef, leftmostLimit } = props;
+    const { axis, width, height: totalHeight, scale, split, plotBeforeRef, plotAfterRef, leftmostLimit, } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
-        if (!ref.current) {
-            return;
-        }
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
-        const plotDataAttr = 'data-plot-x';
-        let plotContainer = null;
-        if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
-            plotContainer = select(plotRef.current);
-            plotContainer.selectAll(`[${plotDataAttr}]`).remove();
-        }
-        if (!axis.visible) {
-            return;
-        }
-        let tickItems = [];
-        if (axis.grid.enabled) {
-            tickItems = new Array(split.plots.length || 1).fill(null).map((_, index) => {
-                var _a, _b;
-                const top = ((_a = split.plots[index]) === null || _a === void 0 ? void 0 : _a.top) || 0;
-                const height = ((_b = split.plots[index]) === null || _b === void 0 ? void 0 : _b.height) || totalHeight;
-                return [-top, -(top + height)];
-            });
-        }
-        const axisScale = scale;
-        const xAxisGenerator = axisBottom({
-            leftmostLimit,
-            scale: axisScale,
-            ticks: {
-                items: tickItems,
-                labelFormat: getLabelFormatter({ axis, scale }),
-                labelsPaddings: axis.labels.padding,
-                labelsMargin: axis.labels.margin,
-                labelsStyle: axis.labels.style,
-                labelsMaxWidth: axis.labels.maxWidth,
-                labelsLineHeight: axis.labels.lineHeight,
-                count: getTicksCount({ axis, range: width }),
-                maxTickCount: getMaxTickCount({ axis, width }),
-                rotation: axis.labels.rotation,
-            },
-            domain: {
-                size: width,
-                color: axis.lineColor,
-            },
-        });
-        svgElement.call(xAxisGenerator).attr('class', b());
-        // add an axis header if necessary
-        if (axis.title.text) {
-            const titleRows = getAxisTitleRows({ axis, textMaxWidth: width });
-            svgElement
-                .append('text')
-                .attr('class', b('title'))
-                .attr('transform', () => {
-                const { x, y } = getTitlePosition({ axis, width, rowCount: titleRows.length });
-                return `translate(${x}, ${y})`;
-            })
-                .attr('font-size', axis.title.style.fontSize)
-                .attr('text-anchor', 'middle')
-                .selectAll('tspan')
-                .data(titleRows)
-                .join('tspan')
-                .attr('x', 0)
-                .attr('y', (d) => d.y)
-                .text((d) => d.text)
-                .each((_d, index, nodes) => {
-                if (index === axis.title.maxRowCount - 1) {
-                    handleOverflowingText(nodes[index], width);
-                }
+        (async () => {
+            if (!ref.current) {
+                return;
+            }
+            const svgElement = select(ref.current);
+            svgElement.selectAll('*').remove();
+            const plotDataAttr = 'data-plot-x';
+            let plotBeforeContainer = null;
+            let plotAfterContainer = null;
+            if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
+                plotBeforeContainer = select(plotBeforeRef.current);
+                plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
+            }
+            if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
+                plotAfterContainer = select(plotAfterRef.current);
+                plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
+            }
+            if (!axis.visible) {
+                return;
+            }
+            let tickItems = [];
+            if (axis.grid.enabled) {
+                tickItems = new Array(split.plots.length || 1).fill(null).map((_, index) => {
+                    var _a, _b;
+                    const top = ((_a = split.plots[index]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+                    const height = ((_b = split.plots[index]) === null || _b === void 0 ? void 0 : _b.height) || totalHeight;
+                    return [-top, -(top + height)];
+                });
+            }
+            const axisScale = scale;
+            const xAxisGenerator = await axisBottom({
+                leftmostLimit,
+                scale: axisScale,
+                ticks: {
+                    items: tickItems,
+                    labelFormat: getLabelFormatter({ axis, scale }),
+                    labelsPaddings: axis.labels.padding,
+                    labelsMargin: axis.labels.margin,
+                    labelsStyle: axis.labels.style,
+                    labelsMaxWidth: axis.labels.maxWidth,
+                    labelsLineHeight: axis.labels.lineHeight,
+                    count: getTicksCount({ axis, range: width }),
+                    maxTickCount: getMaxTickCount({ axis, width }),
+                    rotation: axis.labels.rotation,
+                },
+                domain: {
+                    size: width,
+                    color: axis.lineColor,
+                },
             });
-        }
-        // add plot bands
-        if (plotContainer && axis.plotBands.length > 0) {
-            const plotBandDataAttr = 'plot-x-band';
-            const plotBandsSelection = plotContainer
-                .selectAll(`[${plotBandDataAttr}]`)
-                .data(axis.plotBands)
-                .join('g')
-                .attr(plotDataAttr, 1)
-                .attr(plotBandDataAttr, 1);
-            plotBandsSelection
-                .append('rect')
-                .attr('x', (band) => {
-                var _a, _b;
-                const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
-                const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
-                const startPos = halfBandwidth + Math.min(from, to);
-                return Math.max(0, startPos);
-            })
-                .attr('width', (band) => {
-                const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
-                const startPos = width - Math.min(from, to);
-                const endPos = Math.min(Math.abs(to - from), startPos);
-                return Math.min(endPos, width);
-            })
-                .attr('y', 0)
-                .attr('height', totalHeight)
-                .attr('fill', (band) => band.color)
-                .attr('opacity', (band) => band.opacity);
-            plotBandsSelection.each((plotBandData, i, nodes) => {
-                const plotLineSelection = select(nodes[i]);
-                if (plotBandData.layerPlacement === 'before') {
-                    plotLineSelection.lower();
-                }
-                else {
-                    plotLineSelection.raise();
-                }
-            });
-        }
-        // add plot lines
-        if (plotContainer && axis.plotLines.length > 0) {
-            const plotLineDataAttr = 'plot-x-line';
-            const plotLinesSelection = plotContainer
-                .selectAll(`[${plotLineDataAttr}]`)
-                .data(axis.plotLines)
-                .join('g')
-                .attr(plotDataAttr, 1)
-                .attr(plotLineDataAttr, 1);
-            const lineGenerator = line();
-            plotLinesSelection
-                .append('path')
-                .attr('d', (plotLine) => {
-                const plotLineValue = Number(axisScale(plotLine.value));
-                const points = [
-                    [plotLineValue, 0],
-                    [plotLineValue, totalHeight],
-                ];
-                return lineGenerator(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);
-            // set layer placement
-            plotLinesSelection.each((plotLineData, i, nodes) => {
-                const plotLineSelection = select(nodes[i]);
-                if (plotLineData.layerPlacement === 'before') {
-                    plotLineSelection.lower();
-                }
-                else {
-                    plotLineSelection.raise();
-                }
-            });
-        }
-    }, [axis, width, totalHeight, scale, split, plotRef, leftmostLimit]);
+            svgElement.call(xAxisGenerator).attr('class', b());
+            // add an axis header if necessary
+            if (axis.title.text) {
+                const titleRows = await getAxisTitleRows({ axis, textMaxWidth: width });
+                const titleClassName = b('title');
+                svgElement.selectAll(`.${titleClassName}`).remove();
+                svgElement
+                    .append('text')
+                    .attr('class', titleClassName)
+                    .attr('transform', () => {
+                    const { x, y } = getTitlePosition({ axis, width, rowCount: titleRows.length });
+                    return `translate(${x}, ${y})`;
+                })
+                    .attr('font-size', axis.title.style.fontSize)
+                    .attr('text-anchor', 'middle')
+                    .selectAll('tspan')
+                    .data(titleRows)
+                    .join('tspan')
+                    .attr('x', 0)
+                    .attr('y', (d) => d.y)
+                    .text((d) => d.text)
+                    .each((_d, index, nodes) => {
+                    if (index === axis.title.maxRowCount - 1) {
+                        handleOverflowingText(nodes[index], width);
+                    }
+                });
+            }
+            // add plot bands
+            if (axis.plotBands.length > 0) {
+                const plotBandDataAttr = 'plot-x-band';
+                const setPlotBands = (plotContainer, plotBands) => {
+                    if (!plotContainer || !plotBands.length) {
+                        return;
+                    }
+                    const plotBandsSelection = plotContainer
+                        .selectAll(`[${plotBandDataAttr}]`)
+                        .remove()
+                        .data(plotBands)
+                        .join('g')
+                        .attr(plotDataAttr, 1)
+                        .attr(plotBandDataAttr, 1);
+                    plotBandsSelection
+                        .append('rect')
+                        .attr('x', (band) => {
+                        var _a, _b;
+                        const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
+                        const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
+                        const startPos = halfBandwidth + Math.min(from, to);
+                        return Math.max(0, startPos);
+                    })
+                        .attr('width', (band) => {
+                        const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
+                        const startPos = width - Math.min(from, to);
+                        const endPos = Math.min(Math.abs(to - from), startPos);
+                        return Math.min(endPos, width);
+                    })
+                        .attr('y', 0)
+                        .attr('height', totalHeight)
+                        .attr('fill', (band) => band.color)
+                        .attr('opacity', (band) => band.opacity);
+                };
+                setPlotBands(plotBeforeContainer, axis.plotBands.filter((d) => d.layerPlacement === 'before'));
+                setPlotBands(plotAfterContainer, axis.plotBands.filter((d) => d.layerPlacement === 'after'));
+            }
+            // add plot lines
+            if (axis.plotLines.length > 0) {
+                const plotLineDataAttr = 'plot-x-line';
+                const setPlotLines = (plotContainer, plotLines) => {
+                    if (!plotContainer || !plotLines.length) {
+                        return;
+                    }
+                    const plotLinesSelection = plotContainer
+                        .selectAll(`[${plotLineDataAttr}]`)
+                        .remove()
+                        .data(plotLines)
+                        .join('g')
+                        .attr(plotDataAttr, 1)
+                        .attr(plotLineDataAttr, 1);
+                    const lineGenerator = line();
+                    plotLinesSelection
+                        .append('path')
+                        .attr('d', (plotLine) => {
+                        const plotLineValue = Number(axisScale(plotLine.value));
+                        const points = [
+                            [plotLineValue, 0],
+                            [plotLineValue, totalHeight],
+                        ];
+                        return lineGenerator(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);
+                };
+                setPlotLines(plotBeforeContainer, axis.plotLines.filter((d) => d.layerPlacement === 'before'));
+                setPlotLines(plotAfterContainer, axis.plotLines.filter((d) => d.layerPlacement === 'after'));
+            }
+        })();
+    }, [axis, width, totalHeight, scale, split, leftmostLimit, plotBeforeRef, plotAfterRef]);
     return React.createElement("g", { ref: ref });
 });

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

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

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

@@ -85,7 +85,7 @@ function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisY = (props) => {
-    const { axes: allAxes, width, height: totalHeight, scale, split, plotRef, bottomLimit = 0, } = props;
+    const { axes: allAxes, width, height: totalHeight, scale, split, plotBeforeRef, plotAfterRef, bottomLimit = 0, } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
     const lineGenerator = line();
@@ -96,11 +96,16 @@ export const AxisY = (props) => {
         const axes = allAxes.filter((a) => a.visible);
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
-        let plotContainer = null;
+        let plotBeforeContainer = null;
+        let plotAfterContainer = null;
         const plotDataAttr = 'data-plot-y';
-        if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
-            plotContainer = select(plotRef.current);
-            plotContainer.selectAll(`[${plotDataAttr}]`).remove();
+        if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
+            plotBeforeContainer = select(plotBeforeRef.current);
+            plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
+        }
+        if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
+            plotAfterContainer = select(plotAfterRef.current);
+            plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
         const axisSelection = svgElement
             .selectAll('axis')
@@ -174,76 +179,74 @@ export const AxisY = (props) => {
                 })
                     .remove();
             }
-            if (plotContainer && d.plotBands.length > 0) {
+            if (d.plotBands.length > 0) {
                 const plotBandDataAttr = `data-plot-y-band-${index}`;
-                const plotBandsSelection = plotContainer
-                    .selectAll(`[${plotBandDataAttr}]`)
-                    .data(d.plotBands)
-                    .join('g')
-                    .attr(plotDataAttr, 1)
-                    .attr(plotBandDataAttr, 1)
-                    .style('transform', getAxisPlotsPosition(d, split));
-                plotBandsSelection
-                    .append('rect')
-                    .attr('x', 0)
-                    .attr('width', width)
-                    .attr('y', (band) => {
-                    var _a, _b;
-                    const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
-                    const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
-                    const startPos = halfBandwidth + Math.min(from, to);
-                    return Math.max(0, startPos);
-                })
-                    .attr('height', (band) => {
-                    const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
-                    const startPos = height - Math.min(from, to);
-                    const endPos = Math.min(Math.abs(to - from), startPos);
-                    return Math.min(endPos, height);
-                })
-                    .attr('fill', (band) => band.color)
-                    .attr('opacity', (band) => band.opacity);
-                plotBandsSelection.each((plotBandData, i, nodes) => {
-                    const plotLineSelection = select(nodes[i]);
-                    if (plotBandData.layerPlacement === 'before') {
-                        plotLineSelection.lower();
+                const setPlotBands = (plotContainer, plotBands) => {
+                    if (!plotContainer || !plotBands.length) {
+                        return;
                     }
-                    else {
-                        plotLineSelection.raise();
-                    }
-                });
+                    const plotBandsSelection = plotContainer
+                        .selectAll(`[${plotBandDataAttr}]`)
+                        .remove()
+                        .data(plotBands)
+                        .join('g')
+                        .attr(plotDataAttr, 1)
+                        .attr(plotBandDataAttr, 1)
+                        .style('transform', getAxisPlotsPosition(d, split));
+                    plotBandsSelection
+                        .append('rect')
+                        .attr('x', 0)
+                        .attr('width', width)
+                        .attr('y', (band) => {
+                        var _a, _b;
+                        const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
+                        const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
+                        const startPos = halfBandwidth + Math.min(from, to);
+                        return Math.max(0, startPos);
+                    })
+                        .attr('height', (band) => {
+                        const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
+                        const startPos = height - Math.min(from, to);
+                        const endPos = Math.min(Math.abs(to - from), startPos);
+                        return Math.min(endPos, height);
+                    })
+                        .attr('fill', (band) => band.color)
+                        .attr('opacity', (band) => band.opacity);
+                };
+                setPlotBands(plotBeforeContainer, d.plotBands.filter((item) => item.layerPlacement === 'before'));
+                setPlotBands(plotAfterContainer, d.plotBands.filter((item) => item.layerPlacement === 'after'));
             }
-            if (plotContainer && d.plotLines.length > 0) {
+            if (d.plotLines.length > 0) {
                 const plotLineDataAttr = `data-plot-y-line-${index}`;
-                const plotLinesSelection = plotContainer
-                    .selectAll(`[${plotLineDataAttr}]`)
-                    .data(d.plotLines)
-                    .join('g')
-                    .attr(plotDataAttr, 1)
-                    .attr(plotLineDataAttr, 1)
-                    .style('transform', getAxisPlotsPosition(d, split));
-                plotLinesSelection
-                    .append('path')
-                    .attr('d', (plotLine) => {
-                    const plotLineValue = Number(axisScale(plotLine.value));
-                    const points = [
-                        [0, plotLineValue],
-                        [width, plotLineValue],
-                    ];
-                    return lineGenerator(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();
+                const setPlotLines = (plotContainer, plotLines) => {
+                    if (!plotContainer || !plotLines.length) {
+                        return;
                     }
-                });
+                    const plotLinesSelection = plotContainer
+                        .selectAll(`[${plotLineDataAttr}]`)
+                        .remove()
+                        .data(plotLines)
+                        .join('g')
+                        .attr(plotDataAttr, 1)
+                        .attr(plotLineDataAttr, 1)
+                        .style('transform', getAxisPlotsPosition(d, split));
+                    plotLinesSelection
+                        .append('path')
+                        .attr('d', (plotLine) => {
+                        const plotLineValue = Number(axisScale(plotLine.value));
+                        const points = [
+                            [0, plotLineValue],
+                            [width, plotLineValue],
+                        ];
+                        return lineGenerator(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);
+                };
+                setPlotLines(plotBeforeContainer, d.plotLines.filter((item) => item.layerPlacement === 'before'));
+                setPlotLines(plotAfterContainer, d.plotLines.filter((item) => item.layerPlacement === 'after'));
             }
             return axisItem;
         });
@@ -269,28 +272,47 @@ export const AxisY = (props) => {
             .attr('class', b('title'))
             .attr('text-anchor', 'middle')
             .attr('font-size', (d) => d.title.style.fontSize)
-            .attr('transform', (d) => {
-            const titleRows = wrapText({
-                text: d.title.text,
-                style: d.title.style,
-                width: height,
+            .call(async (s) => {
+            s.each(async function prepareAxisTitle(d) {
+                if (!this) {
+                    return;
+                }
+                const selection = select(this);
+                const titleRows = await wrapText({
+                    text: d.title.text,
+                    style: d.title.style,
+                    width: height,
+                });
+                const rowCount = Math.min(titleRows.length, d.title.maxRowCount);
+                const { x, y } = getTitlePosition({ axis: d, axisHeight: height, rowCount });
+                const angle = d.position === 'left' ? -90 : 90;
+                selection.attr('transform', `translate(${x}, ${y}) rotate(${angle})`);
+                const axisTitleRows = await getAxisTitleRows({ axis: d, textMaxWidth: height });
+                selection
+                    .selectAll('tspan')
+                    .data(axisTitleRows)
+                    .join('tspan')
+                    .attr('x', 0)
+                    .attr('y', (titleRow) => titleRow.y)
+                    .text((titleRow) => titleRow.text)
+                    .each((_d, index, nodes) => {
+                    if (index === nodes.length - 1) {
+                        handleOverflowingText(nodes[index], height);
+                    }
+                });
             });
-            const rowCount = Math.min(titleRows.length, d.title.maxRowCount);
-            const { x, y } = getTitlePosition({ axis: d, axisHeight: height, rowCount });
-            const angle = d.position === 'left' ? -90 : 90;
-            return `translate(${x}, ${y}) rotate(${angle})`;
-        })
-            .selectAll('tspan')
-            .data((d) => getAxisTitleRows({ axis: d, textMaxWidth: height }))
-            .join('tspan')
-            .attr('x', 0)
-            .attr('y', (d) => d.y)
-            .text((d) => d.text)
-            .each((_d, index, nodes) => {
-            if (index === nodes.length - 1) {
-                handleOverflowingText(nodes[index], height);
-            }
+            return s;
         });
-    }, [allAxes, width, height, scale, split, bottomLimit]);
+    }, [
+        allAxes,
+        width,
+        height,
+        scale,
+        split,
+        bottomLimit,
+        lineGenerator,
+        plotBeforeRef,
+        plotAfterRef,
+    ]);
     return React.createElement("g", { ref: ref, className: b('container') });
 };

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import { ArrowRotateLeft } from '@gravity-ui/icons';
+import { Button, ButtonIcon } from '@gravity-ui/uikit';
 import { useCrosshair } from '../../hooks';
 import { EventType, block, getDispatcher } from '../../utils';
 import { AxisX, AxisY } from '../Axis';
@@ -15,10 +17,13 @@ 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 [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 { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, svgBottomPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher, htmlLayout: htmlLayerRef.current, svgContainer: svgRef.current }));
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, handleZoomReset, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, svgBottomPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher,
+        htmlLayout, svgContainer: svgRef.current, plotNode: plotRef.current }));
     const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
         dispatcher,
         tooltip,
@@ -42,7 +47,7 @@ export const ChartInner = (props) => {
     const pointerMoveHandler = (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.pointermove;
     useCrosshair({
         split: preparedSplit,
-        plotElement: plotRef.current,
+        plotElement: plotAfterRef.current,
         boundsOffsetLeft,
         boundsOffsetTop,
         width: boundsWidth,
@@ -74,20 +79,28 @@ export const ChartInner = (props) => {
         }
     }, [prevWidth, width, prevHeight, height, tooltipPinned, unpinTooltip]);
     return (React.createElement("div", { className: b() },
-        React.createElement("svg", { ref: svgRef, width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick },
+        React.createElement("svg", { ref: svgRef, width: width, height: height, 
+            // We use onPointerMove here because onMouseMove works incorrectly when the zoom setting is enabled:
+            // when starting to select an area, the tooltip remains in the position where the selection began
+            onPointerMove: 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(',')})`, ref: plotRef },
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { bottomLimit: svgBottomPos, axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotRef: plotRef }),
-                    React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
-                shapes),
-            preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayerRef.current }))),
-        React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {
+                    React.createElement(AxisY, { bottomLimit: svgBottomPos, axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotBeforeRef: plotBeforeRef, plotAfterRef: plotAfterRef }),
+                    xAxis && (React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
+                        React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotBeforeRef: plotBeforeRef, plotAfterRef: plotAfterRef }))))),
+                React.createElement("g", { ref: plotBeforeRef }),
+                shapes,
+                React.createElement("g", { ref: plotAfterRef })),
+            (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))),
+        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 },
+            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 })));
 };