@gravity-ui/charts 1.10.2 → 1.11.1

package/dist/cjs/hooks/useShapes/bar-y/index.js

@@ -7,7 +7,7 @@ import { getRectPath } from '../utils';
 export { prepareBarYData } from './prepare-data';
 const b = block('bar-y');
 export const BarYSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
     const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -99,6 +99,6 @@ export const BarYSeriesShapes = (args) => {
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 };

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

@@ -28,6 +28,8 @@ type Args = {
     yScale?: ChartScale[];
     split: PreparedSplit;
     htmlLayout: HTMLElement | null;
+    clipPathId: string;
+    isOutsideBounds: (x: number, y: number) => boolean;
 };
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

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

@@ -20,160 +20,170 @@ import { prepareTreemapData } from './treemap/prepare-data';
 import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
 import './styles.css';
 export const useShapes = (args) => {
-    const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, split, htmlLayout, } = args;
+    const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, split, htmlLayout, clipPathId, isOutsideBounds, } = args;
     const [shapesElemens, setShapesElements] = React.useState([]);
     const [shapesElemensData, setShapesElemensData] = React.useState([]);
-    const setShapes = React.useCallback(async () => {
-        const visibleSeries = getOnlyVisibleSeries(series);
-        const groupedSeries = group(visibleSeries, (item) => item.type);
-        const shapesData = [];
-        const shapes = [];
-        await Promise.all(
-        // eslint-disable-next-line complexity
-        Array.from(groupedSeries).map(async (item) => {
-            const [seriesType, chartSeries] = item;
-            switch (seriesType) {
-                case 'bar-x': {
-                    if (xAxis && xScale && yScale) {
-                        const preparedData = await prepareBarXData({
-                            series: chartSeries,
-                            seriesOptions,
-                            xAxis,
-                            xScale,
-                            yAxis,
-                            yScale,
-                            boundsHeight,
-                        });
-                        shapes.push(React.createElement(BarXSeriesShapes, { key: "bar-x", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
-                        shapesData.push(...preparedData);
+    const countedRef = React.useRef(0);
+    React.useEffect(() => {
+        countedRef.current++;
+        (async () => {
+            const currentRun = countedRef.current;
+            const visibleSeries = getOnlyVisibleSeries(series);
+            const groupedSeries = group(visibleSeries, (item) => item.type);
+            const shapesData = [];
+            const shapes = [];
+            await Promise.all(
+            // eslint-disable-next-line complexity
+            Array.from(groupedSeries).map(async (item) => {
+                const [seriesType, chartSeries] = item;
+                switch (seriesType) {
+                    case 'bar-x': {
+                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                            const preparedData = await prepareBarXData({
+                                series: chartSeries,
+                                seriesOptions,
+                                xAxis,
+                                xScale,
+                                yAxis,
+                                yScale,
+                                boundsHeight,
+                            });
+                            shapes.push(React.createElement(BarXSeriesShapes, { key: "bar-x", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.push(...preparedData);
+                        }
+                        break;
                     }
-                    break;
-                }
-                case 'bar-y': {
-                    if (xAxis && xScale && yScale) {
-                        const preparedData = await prepareBarYData({
+                    case 'bar-y': {
+                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                            const preparedData = await prepareBarYData({
+                                series: chartSeries,
+                                seriesOptions,
+                                xAxis,
+                                xScale,
+                                yAxis,
+                                yScale,
+                            });
+                            shapes.push(React.createElement(BarYSeriesShapes, { key: "bar-y", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.push(...preparedData);
+                        }
+                        break;
+                    }
+                    case 'waterfall': {
+                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                            const preparedData = await prepareWaterfallData({
+                                series: chartSeries,
+                                seriesOptions,
+                                xAxis,
+                                xScale,
+                                yAxis,
+                                yScale,
+                            });
+                            shapes.push(React.createElement(WaterfallSeriesShapes, { key: "waterfall", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.push(...preparedData);
+                        }
+                        break;
+                    }
+                    case 'line': {
+                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                            const preparedData = await prepareLineData({
+                                series: chartSeries,
+                                xAxis,
+                                xScale,
+                                yAxis,
+                                yScale,
+                                split,
+                                isOutsideBounds,
+                            });
+                            shapes.push(React.createElement(LineSeriesShapes, { key: "line", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.push(...preparedData);
+                        }
+                        break;
+                    }
+                    case 'area': {
+                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                            const preparedData = await prepareAreaData({
+                                series: chartSeries,
+                                xAxis,
+                                xScale,
+                                yAxis,
+                                yScale,
+                                boundsHeight,
+                                isOutsideBounds,
+                            });
+                            shapes.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.push(...preparedData);
+                        }
+                        break;
+                    }
+                    case 'scatter': {
+                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                            const preparedData = prepareScatterData({
+                                series: chartSeries,
+                                xAxis,
+                                xScale,
+                                yAxis,
+                                yScale,
+                                isOutsideBounds,
+                            });
+                            shapes.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                            shapesData.push(...preparedData);
+                        }
+                        break;
+                    }
+                    case 'pie': {
+                        const preparedData = await preparePieData({
                             series: chartSeries,
-                            seriesOptions,
-                            xAxis,
-                            xScale,
-                            yAxis,
-                            yScale,
+                            boundsWidth,
+                            boundsHeight,
                         });
-                        shapes.push(React.createElement(BarYSeriesShapes, { key: "bar-y", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(PieSeriesShapes, { key: "pie", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
+                        break;
                     }
-                    break;
-                }
-                case 'waterfall': {
-                    if (xAxis && xScale && yScale) {
-                        const preparedData = await prepareWaterfallData({
-                            series: chartSeries,
-                            seriesOptions,
-                            xAxis,
-                            xScale,
-                            yAxis,
-                            yScale,
+                    case 'treemap': {
+                        const preparedData = await prepareTreemapData({
+                            // We should have exactly one series with "treemap" type
+                            // Otherwise data validation should emit an error
+                            series: chartSeries[0],
+                            width: boundsWidth,
+                            height: boundsHeight,
                         });
-                        shapes.push(React.createElement(WaterfallSeriesShapes, { key: "waterfall", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
-                        shapesData.push(...preparedData);
+                        shapes.push(React.createElement(TreemapSeriesShape, { key: "treemap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapesData.push(preparedData);
+                        break;
                     }
-                    break;
-                }
-                case 'line': {
-                    if (xAxis && xScale && yScale) {
-                        const preparedData = await prepareLineData({
-                            series: chartSeries,
-                            xAxis,
-                            xScale,
-                            yAxis,
-                            yScale,
-                            split,
+                    case 'sankey': {
+                        const preparedData = prepareSankeyData({
+                            series: chartSeries[0],
+                            width: boundsWidth,
+                            height: boundsHeight,
                         });
-                        shapes.push(React.createElement(LineSeriesShapes, { key: "line", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
-                        shapesData.push(...preparedData);
+                        shapes.push(React.createElement(SankeySeriesShape, { key: "sankey", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapesData.push(preparedData);
+                        break;
                     }
-                    break;
-                }
-                case 'area': {
-                    if (xAxis && xScale && yScale) {
-                        const preparedData = await prepareAreaData({
+                    case 'radar': {
+                        const preparedData = await prepareRadarData({
                             series: chartSeries,
-                            xAxis,
-                            xScale,
-                            yAxis,
-                            yScale,
+                            boundsWidth,
                             boundsHeight,
                         });
-                        shapes.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(RadarSeriesShapes, { key: "radar", dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
+                        break;
                     }
-                    break;
-                }
-                case 'scatter': {
-                    if (xAxis && xScale && yScale) {
-                        const preparedData = prepareScatterData({
-                            series: chartSeries,
-                            xAxis,
-                            xScale,
-                            yAxis,
-                            yScale,
+                    default: {
+                        throw new ChartError({
+                            message: `The display method is not defined for a series with type "${seriesType}"`,
                         });
-                        shapes.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                        shapesData.push(...preparedData);
                     }
-                    break;
-                }
-                case 'pie': {
-                    const preparedData = await preparePieData({
-                        series: chartSeries,
-                        boundsWidth,
-                        boundsHeight,
-                    });
-                    shapes.push(React.createElement(PieSeriesShapes, { key: "pie", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                    shapesData.push(...preparedData);
-                    break;
-                }
-                case 'treemap': {
-                    const preparedData = await prepareTreemapData({
-                        // We should have exactly one series with "treemap" type
-                        // Otherwise data validation should emit an error
-                        series: chartSeries[0],
-                        width: boundsWidth,
-                        height: boundsHeight,
-                    });
-                    shapes.push(React.createElement(TreemapSeriesShape, { key: "treemap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                    shapesData.push(preparedData);
-                    break;
-                }
-                case 'sankey': {
-                    const preparedData = prepareSankeyData({
-                        series: chartSeries[0],
-                        width: boundsWidth,
-                        height: boundsHeight,
-                    });
-                    shapes.push(React.createElement(SankeySeriesShape, { key: "sankey", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                    shapesData.push(preparedData);
-                    break;
-                }
-                case 'radar': {
-                    const preparedData = await prepareRadarData({
-                        series: chartSeries,
-                        boundsWidth,
-                        boundsHeight,
-                    });
-                    shapes.push(React.createElement(RadarSeriesShapes, { key: "radar", dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                    shapesData.push(...preparedData);
-                    break;
-                }
-                default: {
-                    throw new ChartError({
-                        message: `The display method is not defined for a series with type "${seriesType}"`,
-                    });
                 }
+            }));
+            if (countedRef.current === currentRun) {
+                setShapesElements(shapes);
+                setShapesElemensData(shapesData);
             }
-        }));
-        setShapesElements(shapes);
-        setShapesElemensData(shapesData);
+        })();
     }, [
         boundsHeight,
         boundsWidth,
@@ -186,9 +196,8 @@ export const useShapes = (args) => {
         xScale,
         yAxis,
         yScale,
+        clipPathId,
+        isOutsideBounds,
     ]);
-    React.useEffect(() => {
-        setShapes();
-    }, [setShapes]);
     return { shapes: shapesElemens, shapesData: shapesElemensData };
 };

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

@@ -7,6 +7,7 @@ type Args = {
     preparedData: PreparedLineData[];
     seriesOptions: PreparedSeriesOptions;
     htmlLayout: HTMLElement | null;
+    clipPathId: string;
 };
 export declare const LineSeriesShapes: (args: Args) => React.JSX.Element;
 export {};

package/dist/cjs/hooks/useShapes/line/index.js

@@ -7,22 +7,25 @@ import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarke
 import { setActiveState } from '../utils';
 const b = block('line');
 export const LineSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
     const hoveredDataRef = React.useRef(null);
-    const ref = React.useRef(null);
+    const plotRef = React.useRef(null);
+    const markersRef = React.useRef(null);
     React.useEffect(() => {
         var _a;
-        if (!ref.current) {
+        if (!plotRef.current || !markersRef.current) {
             return () => { };
         }
-        const svgElement = select(ref.current);
+        const plotSvgElement = select(plotRef.current);
+        const markersSvgElement = select(markersRef.current);
         const hoverOptions = get(seriesOptions, 'line.states.hover');
         const inactiveOptions = get(seriesOptions, 'line.states.inactive');
         const line = lineGenerator()
             .x((d) => d.x)
             .y((d) => d.y);
-        svgElement.selectAll('*').remove();
-        const lineSelection = svgElement
+        plotSvgElement.selectAll('*').remove();
+        markersSvgElement.selectAll('*').remove();
+        const lineSelection = plotSvgElement
             .selectAll('path')
             .data(preparedData)
             .join('path')
@@ -41,7 +44,7 @@ export const LineSeriesShapes = (args) => {
         if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
             dataLabels = filterOverlappingLabels(dataLabels);
         }
-        const labelsSelection = svgElement
+        const labelsSelection = plotSvgElement
             .selectAll('text')
             .data(dataLabels)
             .join('text')
@@ -54,7 +57,7 @@ export const LineSeriesShapes = (args) => {
             .style('font-weight', (d) => d.style.fontWeight || null)
             .style('fill', (d) => d.style.fontColor || null);
         const markers = preparedData.reduce((acc, d) => acc.concat(d.markers), []);
-        const markerSelection = svgElement
+        const markerSelection = markersSvgElement
             .selectAll('marker')
             .data(markers)
             .join('g')
@@ -71,10 +74,10 @@ export const LineSeriesShapes = (args) => {
                 const hovered = Boolean(hoverEnabled && selectedSeriesIds.includes(d.id));
                 if (d.hovered !== hovered) {
                     d.hovered = hovered;
-                    elementSelection.attr('stroke', (d) => {
+                    elementSelection.attr('stroke', (dSelection) => {
                         var _a;
-                        const initialColor = d.color || '';
-                        if (d.hovered) {
+                        const initialColor = dSelection.color || '';
+                        if (dSelection.hovered) {
                             return (((_a = color(initialColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) || initialColor);
                         }
                         return initialColor;
@@ -131,6 +134,7 @@ export const LineSeriesShapes = (args) => {
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement("g", { ref: plotRef, className: b(), clipPath: `url(#${clipPathId})` }),
+        React.createElement("g", { ref: markersRef }),
         React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 };

package/dist/cjs/hooks/useShapes/line/prepare-data.d.ts

@@ -10,4 +10,5 @@ export declare const prepareLineData: (args: {
     yAxis: PreparedAxis[];
     yScale: ChartScale[];
     split: PreparedSplit;
+    isOutsideBounds: (x: number, y: number) => boolean;
 }) => Promise<PreparedLineData[]>;

package/dist/cjs/hooks/useShapes/line/prepare-data.js

@@ -40,7 +40,7 @@ async function getHtmlLabel(point, series, xMax) {
 }
 export const prepareLineData = async (args) => {
     var _a;
-    const { series, xAxis, yAxis, xScale, yScale, split } = args;
+    const { series, xAxis, yAxis, xScale, yScale, split, isOutsideBounds } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax / (1 - xAxis.maxPadding);
     const acc = [];
@@ -74,6 +74,7 @@ export const prepareLineData = async (args) => {
                 point: p,
                 active: true,
                 hovered: false,
+                clipped: isOutsideBounds(p.x, p.y),
             }));
         }
         const result = {

package/dist/cjs/hooks/useShapes/line/types.d.ts

@@ -12,6 +12,7 @@ export type MarkerData = {
     point: PointData;
     active: boolean;
     hovered: boolean;
+    clipped: boolean;
 };
 export type PreparedLineData = {
     id: string;

package/dist/cjs/hooks/useShapes/marker.js

@@ -16,6 +16,9 @@ export function renderMarker(selection) {
         .append('path')
         .attr('class', haloClassName)
         .attr('d', (d) => {
+        if ('clipped' in d && d.clipped) {
+            return null;
+        }
         const series = d.point.series;
         const type = series.marker.states.normal.symbol;
         const radius = get(d.point.data, 'radius', series.marker.states.hover.radius);
@@ -53,6 +56,9 @@ export function getMarkerHaloVisibility(d) {
 export function setMarker(selection, state) {
     selection
         .attr('d', (d) => {
+        if ('clipped' in d && d.clipped) {
+            return null;
+        }
         const series = d.point.series;
         const type = series.marker.states.normal.symbol;
         const radius = get(d.point.data, 'radius', series.marker.states[state].radius);

package/dist/cjs/hooks/useShapes/scatter/prepare-data.d.ts

@@ -8,4 +8,5 @@ export declare const prepareScatterData: (args: {
     xScale: ChartScale;
     yAxis: PreparedAxis[];
     yScale: ChartScale[];
+    isOutsideBounds: (x: number, y: number) => boolean;
 }) => PreparedScatterData[];

package/dist/cjs/hooks/useShapes/scatter/prepare-data.js

@@ -4,7 +4,7 @@ const getFilteredLinearScatterData = (data) => {
     return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
 };
 export const prepareScatterData = (args) => {
-    const { series, xAxis, xScale, yAxis, yScale } = args;
+    const { series, xAxis, xScale, yAxis, yScale, isOutsideBounds } = args;
     return series.reduce((acc, s) => {
         const yAxisIndex = get(s, 'yAxis', 0);
         const seriesYAxis = yAxis[yAxisIndex];
@@ -14,18 +14,21 @@ export const prepareScatterData = (args) => {
             : getFilteredLinearScatterData(s.data);
         filteredData.forEach((d) => {
             var _a;
+            const x = getXValue({ point: d, xAxis, xScale });
+            const y = getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale });
             acc.push({
                 point: {
                     data: d,
                     series: s,
-                    x: getXValue({ point: d, xAxis, xScale }),
-                    y: getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale }),
+                    x,
+                    y,
                     opacity: get(d, 'opacity', null),
                     color: (_a = d.color) !== null && _a !== void 0 ? _a : s.color,
                 },
                 hovered: false,
                 active: true,
                 htmlElements: [],
+                clipped: isOutsideBounds(x, y),
             });
         });
         return acc;

package/dist/cjs/hooks/useShapes/scatter/types.d.ts

@@ -13,6 +13,7 @@ export type MarkerData = {
     active: boolean;
     hovered: boolean;
     htmlElements: HtmlItem[];
+    clipped: boolean;
 };
 export type PreparedScatterData = MarkerData;
 export {};

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

@@ -9,5 +9,6 @@ type Args = {
     preparedData: PreparedWaterfallData[];
     seriesOptions: PreparedSeriesOptions;
     htmlLayout: HTMLElement | null;
+    clipPathId: string;
 };
 export declare const WaterfallSeriesShapes: (args: Args) => React.JSX.Element;

package/dist/cjs/hooks/useShapes/waterfall/index.js

@@ -8,7 +8,7 @@ export { prepareWaterfallData } from './prepare-data';
 export * from './types';
 const b = block('waterfall');
 export const WaterfallSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
     const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     const connectorSelector = `.${b('connector')}`;
@@ -127,6 +127,6 @@ export const WaterfallSeriesShapes = (args) => {
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 };

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

@@ -35,7 +35,7 @@ export function useZoom(props) {
                 selection,
                 xAxis,
                 xScale,
-                yAxises: yAxis,
+                yAxes: yAxis,
                 yScales: yScale,
                 zoomType: preparedZoom.type,
             });

package/dist/cjs/hooks/useZoom/utils.d.ts

@@ -6,7 +6,7 @@ export declare function selectionToZoomBounds(args: {
     selection: BrushSelection;
     xAxis: PreparedAxis;
     xScale: ChartScale;
-    yAxises: PreparedAxis[];
+    yAxes: PreparedAxis[];
     yScales: ChartScale[];
     zoomType: PreparedZoom['type'];
 }): Partial<ZoomState>;

package/dist/cjs/hooks/useZoom/utils.js

@@ -1,5 +1,5 @@
 export function selectionToZoomBounds(args) {
-    const { selection, xAxis, xScale, yAxises, yScales, zoomType } = args;
+    const { selection, xAxis, xScale, yAxes, yScales, zoomType } = args;
     const zoomState = {};
     switch (zoomType) {
         case 'x': {
@@ -9,7 +9,7 @@ export function selectionToZoomBounds(args) {
         }
         case 'y': {
             const [y1, y0] = selection;
-            yAxises.forEach((yAxis, index) => {
+            yAxes.forEach((yAxis, index) => {
                 if (!Array.isArray(zoomState.y)) {
                     zoomState.y = [];
                 }
@@ -25,7 +25,7 @@ export function selectionToZoomBounds(args) {
             const [x0, y0] = selection[0];
             const [x1, y1] = selection[1];
             zoomState.x = selectionXToZoomBounds({ xAxis, xScale, selection: [x0, x1] });
-            yAxises.forEach((yAxis, index) => {
+            yAxes.forEach((yAxis, index) => {
                 if (!Array.isArray(zoomState.y)) {
                     zoomState.y = [];
                 }

package/dist/cjs/types/chart/axis.d.ts

@@ -53,6 +53,8 @@ export interface ChartAxis {
     };
     /** The minimum value of the axis. If undefined the min value is automatically calculate. */
     min?: number;
+    /** The maximum value of the axis. If undefined the max value is automatically calculate. */
+    max?: number;
     /** The grid lines settings. */
     grid?: {
         /** Enable or disable the grid lines.
@@ -130,11 +132,8 @@ export interface AxisCrosshair extends Omit<AxisPlotLine, 'value'> {
     enabled?: boolean;
 }
 export interface ChartYAxis extends ChartAxis {
-    /** Axis location.
-     * Possible values - 'left' and 'right'.
-     * */
+    /** Axis location. */
     position?: 'left' | 'right';
-    /** Property for splitting charts. Determines which area the axis is located in.
-     * */
+    /** Property for splitting charts. Determines which area the axis is located in. */
     plotIndex?: number;
 }

package/dist/cjs/utils/chart/axis-generators/bottom.js

@@ -106,6 +106,7 @@ export async function axisBottom(args) {
                 .remove();
             // add an ellipsis to the labels that go beyond the boundaries of the chart
             labels.each(function (_d, i, nodes) {
+                var _a;
                 if (i === 0) {
                     const currentElement = this;
                     const text = select(currentElement);
@@ -113,7 +114,8 @@ export async function axisBottom(args) {
                     const nextElement = nodes[i + 1];
                     const nextElementPosition = nextElement === null || nextElement === void 0 ? void 0 : nextElement.getBoundingClientRect();
                     if (currentElementPosition.left < leftmostLimit) {
-                        const remainSpace = nextElementPosition.left -
+                        const rightmostPossiblePoint = (_a = nextElementPosition === null || nextElementPosition === void 0 ? void 0 : nextElementPosition.left) !== null && _a !== void 0 ? _a : right;
+                        const remainSpace = rightmostPossiblePoint -
                             currentElementPosition.right +
                             x -
                             labelsMargin;