@gravity-ui/charts 1.10.2 → 1.11.0

package/dist/esm/hooks/useAxisScales/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3';
 import get from 'lodash/get';
 import { DEFAULT_AXIS_TYPE } from '../../constants';
-import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
+import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
 const isNumericalArrayData = (data) => {
     return data.every((d) => typeof d === 'number' || d === null);
 };
@@ -20,7 +20,8 @@ const filterCategoriesByVisibleSeries = (args) => {
 };
 export function createYScale(axis, series, boundsHeight) {
     const yType = get(axis, 'type', DEFAULT_AXIS_TYPE);
-    const yMin = get(axis, 'min');
+    const yMinProps = get(axis, 'min');
+    const yMaxProps = get(axis, 'max');
     const yCategories = get(axis, 'categories');
     const yTimestamps = get(axis, 'timestamps');
     switch (yType) {
@@ -29,14 +30,18 @@ export function createYScale(axis, series, boundsHeight) {
             const domain = getDomainDataYBySeries(series);
             const range = [boundsHeight, boundsHeight * axis.maxPadding];
             if (isNumericalArrayData(domain)) {
-                const [domainYMin, domainMax] = extent(domain);
-                const yMinValue = typeof yMin === 'number' ? yMin : domainYMin;
-                let yMaxValue = domainMax;
-                if (series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type))) {
-                    yMaxValue = Math.max(yMaxValue, 0);
+                const [yMinDomain, yMaxDomain] = extent(domain);
+                const yMin = typeof yMinProps === 'number' ? yMinProps : yMinDomain;
+                let yMax;
+                if (typeof yMaxProps === 'number') {
+                    yMax = yMaxProps;
+                }
+                else {
+                    const hasSeriesWithVolumeOnYAxis = series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type));
+                    yMax = hasSeriesWithVolumeOnYAxis ? Math.max(yMaxDomain, 0) : yMaxDomain;
                 }
                 const scaleFn = yType === 'logarithmic' ? scaleLog : scaleLinear;
-                return scaleFn().domain([yMinValue, yMaxValue]).range(range).nice();
+                return scaleFn().domain([yMin, yMax]).range(range).nice();
             }
             break;
         }
@@ -54,13 +59,17 @@ export function createYScale(axis, series, boundsHeight) {
         case 'datetime': {
             const range = [boundsHeight, boundsHeight * axis.maxPadding];
             if (yTimestamps) {
-                const [yMin, yMax] = extent(yTimestamps);
+                const [yMinTimestamp, yMaxTimestamp] = extent(yTimestamps);
+                const yMin = typeof yMinProps === 'number' ? yMinProps : yMinTimestamp;
+                const yMax = typeof yMaxProps === 'number' ? yMaxProps : yMaxTimestamp;
                 return scaleUtc().domain([yMin, yMax]).range(range).nice();
             }
             else {
                 const domain = getDomainDataYBySeries(series);
                 if (isNumericalArrayData(domain)) {
-                    const [yMin, yMax] = extent(domain);
+                    const [yMinTimestamp, yMaxTimestamp] = extent(domain);
+                    const yMin = typeof yMinProps === 'number' ? yMinProps : yMinTimestamp;
+                    const yMax = typeof yMaxProps === 'number' ? yMaxProps : yMaxTimestamp;
                     return scaleUtc().domain([yMin, yMax]).range(range).nice();
                 }
             }
@@ -86,9 +95,10 @@ function calculateXAxisPadding(series) {
     });
     return result;
 }
+// eslint-disable-next-line complexity
 export function createXScale(axis, series, boundsWidth, hasZoomX) {
-    const xMin = get(axis, 'min');
-    const xMax = getDefaultMaxXAxisValue(series);
+    const xMinProps = get(axis, 'min');
+    const xMaxProps = get(axis, 'max');
     const xType = get(axis, 'type', DEFAULT_AXIS_TYPE);
     const xCategories = get(axis, 'categories');
     const xTimestamps = get(axis, 'timestamps');
@@ -100,11 +110,28 @@ export function createXScale(axis, series, boundsWidth, hasZoomX) {
         case 'logarithmic': {
             const domain = getDomainDataXBySeries(series);
             if (isNumericalArrayData(domain)) {
-                const [domainXMin, domainXMax] = extent(domain);
-                const xMinValue = typeof xMin === 'number' ? xMin : domainXMin;
-                const xMaxValue = typeof xMax === 'number' ? Math.max(xMax, domainXMax) : domainXMax;
+                const [xMinDomain, xMaxDomain] = extent(domain);
+                let xMin;
+                let xMax;
+                if (typeof xMinProps === 'number') {
+                    xMin = xMinProps;
+                }
+                else {
+                    const xMinDefault = getDefaultMinXAxisValue(series);
+                    xMin = xMinDefault !== null && xMinDefault !== void 0 ? xMinDefault : xMinDomain;
+                }
+                if (typeof xMaxProps === 'number') {
+                    xMax = xMaxProps;
+                }
+                else {
+                    const xMaxDefault = getDefaultMaxXAxisValue(series);
+                    xMax =
+                        typeof xMaxDefault === 'number'
+                            ? Math.max(xMaxDefault, xMaxDomain)
+                            : xMaxDomain;
+                }
                 const scaleFn = xType === 'logarithmic' ? scaleLog : scaleLinear;
-                const scale = scaleFn().domain([xMinValue, xMaxValue]).range(xRange);
+                const scale = scaleFn().domain([xMin, xMax]).range(xRange);
                 if (!hasZoomX) {
                     scale.nice();
                 }
@@ -129,7 +156,9 @@ export function createXScale(axis, series, boundsWidth, hasZoomX) {
         }
         case 'datetime': {
             if (xTimestamps) {
-                const [xMin, xMax] = extent(xTimestamps);
+                const [xMinTimestamp, xMaxTimestamp] = extent(xTimestamps);
+                const xMin = typeof xMinProps === 'number' ? xMinProps : xMinTimestamp;
+                const xMax = typeof xMaxProps === 'number' ? xMaxProps : xMaxTimestamp;
                 const scale = scaleUtc().domain([xMin, xMax]).range(xRange);
                 if (!hasZoomX) {
                     scale.nice();
@@ -139,7 +168,9 @@ export function createXScale(axis, series, boundsWidth, hasZoomX) {
             else {
                 const domain = getDomainDataXBySeries(series);
                 if (isNumericalArrayData(domain)) {
-                    const [xMin, xMax] = extent(domain);
+                    const [xMinTimestamp, xMaxTimestamp] = extent(domain);
+                    const xMin = typeof xMinProps === 'number' ? xMinProps : xMinTimestamp;
+                    const xMax = typeof xMaxProps === 'number' ? xMaxProps : xMaxTimestamp;
                     const scale = scaleUtc().domain([xMin, xMax]).range(xRange);
                     if (!hasZoomX) {
                         scale.nice();

package/dist/esm/hooks/useChartOptions/x-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
-import { CHART_SERIES_WITH_VOLUME_ON_X_AXIS, calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
+import { calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 async function getLabelSettings({ axis, seriesData, width, autoRotation = true, }) {
     const scale = createXScale(axis, seriesData, width);
@@ -36,18 +36,6 @@ async function getLabelSettings({ axis, seriesData, width, autoRotation = true,
     const maxHeight = rotation ? calculateCos(rotation) * axis.labels.maxWidth : labelsHeight;
     return { height: Math.min(maxHeight, labelsHeight), rotation };
 }
-function getAxisMin(axis, series) {
-    const min = axis === null || axis === void 0 ? void 0 : axis.min;
-    if (typeof min === 'undefined' &&
-        (series === null || series === void 0 ? void 0 : series.some((s) => CHART_SERIES_WITH_VOLUME_ON_X_AXIS.includes(s.type)))) {
-        return series.reduce((minValue, s) => {
-            // @ts-expect-error
-            const minYValue = s.data.reduce((res, d) => Math.min(res, get(d, 'x', 0)), 0);
-            return Math.min(minValue, minYValue);
-        }, 0);
-    }
-    return min;
-}
 export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
     var _a;
     const titleText = get(xAxis, 'title.text', '');
@@ -92,7 +80,8 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
             align: get(xAxis, 'title.align', xAxisTitleDefaults.align),
             maxRowCount: get(xAxis, 'title.maxRowCount', xAxisTitleDefaults.maxRowCount),
         },
-        min: getAxisMin(xAxis, seriesData),
+        min: get(xAxis, 'min'),
+        max: get(xAxis, 'max'),
         maxPadding: get(xAxis, 'maxPadding', 0.01),
         grid: {
             enabled: get(xAxis, 'grid.enabled', true),

package/dist/esm/hooks/useChartOptions/y-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisCrosshairDefaults, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, isAxisRelatedSeries, wrapText, } from '../../utils';
+import { formatAxisTickLabel, getClosestPointsRange, getDefaultMinYAxisValue, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 const getAxisLabelMaxWidth = async (args) => {
     const { axis, seriesData } = args;
@@ -23,26 +23,6 @@ const getAxisLabelMaxWidth = async (args) => {
     });
     return size.maxWidth;
 };
-function getAxisMin(axis, seriesData) {
-    const min = axis === null || axis === void 0 ? void 0 : axis.min;
-    if (typeof min === 'undefined' &&
-        (seriesData === null || seriesData === void 0 ? void 0 : seriesData.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type)))) {
-        return seriesData.reduce((minValue, s) => {
-            switch (s.type) {
-                case 'waterfall': {
-                    const minSubTotal = s.data.reduce((res, d) => Math.min(res, getWaterfallPointSubtotal(d, s) || 0), 0);
-                    return Math.min(minValue, minSubTotal);
-                }
-                default: {
-                    // @ts-expect-error
-                    const minYValue = s.data.reduce((res, d) => Math.min(res, get(d, 'y', 0)), 0);
-                    return Math.min(minValue, minYValue);
-                }
-            }
-        }, 0);
-    }
-    return min;
-}
 export const getPreparedYAxis = ({ seriesData, yAxis, height, }) => {
     const axisByPlot = [];
     const axisItems = yAxis || [{}];
@@ -51,7 +31,7 @@ export const getPreparedYAxis = ({ seriesData, yAxis, height, }) => {
         return Promise.resolve([]);
     }
     return Promise.all(axisItems.map(async (axisItem) => {
-        var _a;
+        var _a, _b;
         const plotIndex = get(axisItem, 'plotIndex', 0);
         const firstPlotAxis = !axisByPlot[plotIndex];
         if (firstPlotAxis) {
@@ -104,11 +84,12 @@ export const getPreparedYAxis = ({ seriesData, yAxis, height, }) => {
                 align: get(axisItem, 'title.align', yAxisTitleDefaults.align),
                 maxRowCount: titleMaxRowsCount,
             },
-            min: getAxisMin(axisItem, seriesData),
+            min: (_a = get(axisItem, 'min')) !== null && _a !== void 0 ? _a : getDefaultMinYAxisValue(seriesData),
+            max: get(axisItem, 'max'),
             maxPadding: get(axisItem, 'maxPadding', 0.05),
             grid: {
                 enabled: get(axisItem, 'grid.enabled', firstPlotAxis ||
-                    (!firstPlotAxis && !((_a = axisByPlot[plotIndex][0].visible) !== null && _a !== void 0 ? _a : true))),
+                    (!firstPlotAxis && !((_b = axisByPlot[plotIndex][0].visible) !== null && _b !== void 0 ? _b : true))),
             },
             ticks: {
                 pixelInterval: get(axisItem, 'ticks.pixelInterval'),

package/dist/esm/hooks/useShapes/area/index.d.ts

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

package/dist/esm/hooks/useShapes/area/index.js

@@ -7,22 +7,25 @@ import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarke
 import { setActiveState } from '../utils';
 const b = block('area');
 export const AreaSeriesShapes = (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, 'area.states.hover');
         const inactiveOptions = get(seriesOptions, 'area.states.inactive');
         const line = lineGenerator()
             .x((d) => d.x)
             .y((d) => d.y);
-        svgElement.selectAll('*').remove();
-        const shapeSelection = svgElement
+        plotSvgElement.selectAll('*').remove();
+        markersSvgElement.selectAll('*').remove();
+        const shapeSelection = plotSvgElement
             .selectAll('shape')
             .data(preparedData)
             .join('g')
@@ -53,7 +56,7 @@ export const AreaSeriesShapes = (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')
@@ -66,7 +69,7 @@ export const AreaSeriesShapes = (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')
@@ -144,6 +147,7 @@ export const AreaSeriesShapes = (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/esm/hooks/useShapes/area/prepare-data.d.ts

@@ -9,4 +9,5 @@ export declare const prepareAreaData: (args: {
     yAxis: PreparedAxis[];
     yScale: ChartScale[];
     boundsHeight: number;
+    isOutsideBounds: (x: number, y: number) => boolean;
 }) => Promise<PreparedAreaData[]>;

package/dist/esm/hooks/useShapes/area/prepare-data.js

@@ -53,7 +53,7 @@ function getXValues(series, xAxis, xScale) {
     return sort(Array.from(xValues), ([_x, xValue]) => xValue);
 }
 export const prepareAreaData = async (args) => {
-    const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight } = args;
+    const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, isOutsideBounds } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax / (1 - xAxis.maxPadding);
     const result = [];
@@ -142,6 +142,7 @@ export const prepareAreaData = async (args) => {
                     point: p,
                     active: true,
                     hovered: false,
+                    clipped: isOutsideBounds(p.x, p.y),
                 }));
             }
             seriesStackData.push({

package/dist/esm/hooks/useShapes/area/types.d.ts

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

package/dist/esm/hooks/useShapes/bar-x/index.d.ts

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

package/dist/esm/hooks/useShapes/bar-x/index.js

@@ -8,7 +8,7 @@ export { prepareBarXData } from './prepare-data';
 export * from './types';
 const b = block('bar-x');
 export const BarXSeriesShapes = (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(() => {
@@ -110,6 +110,6 @@ export const BarXSeriesShapes = (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/esm/hooks/useShapes/bar-y/index.d.ts

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

package/dist/esm/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/esm/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/esm/hooks/useShapes/index.js

@@ -20,7 +20,7 @@ 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 () => {
@@ -44,7 +44,7 @@ export const useShapes = (args) => {
                             yScale,
                             boundsHeight,
                         });
-                        shapes.push(React.createElement(BarXSeriesShapes, { key: "bar-x", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(BarXSeriesShapes, { key: "bar-x", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                         shapesData.push(...preparedData);
                     }
                     break;
@@ -59,7 +59,7 @@ export const useShapes = (args) => {
                             yAxis,
                             yScale,
                         });
-                        shapes.push(React.createElement(BarYSeriesShapes, { key: "bar-y", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(BarYSeriesShapes, { key: "bar-y", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                         shapesData.push(...preparedData);
                     }
                     break;
@@ -74,7 +74,7 @@ export const useShapes = (args) => {
                             yAxis,
                             yScale,
                         });
-                        shapes.push(React.createElement(WaterfallSeriesShapes, { key: "waterfall", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(WaterfallSeriesShapes, { key: "waterfall", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                         shapesData.push(...preparedData);
                     }
                     break;
@@ -88,8 +88,9 @@ export const useShapes = (args) => {
                             yAxis,
                             yScale,
                             split,
+                            isOutsideBounds,
                         });
-                        shapes.push(React.createElement(LineSeriesShapes, { key: "line", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(LineSeriesShapes, { key: "line", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                         shapesData.push(...preparedData);
                     }
                     break;
@@ -103,8 +104,9 @@ export const useShapes = (args) => {
                             yAxis,
                             yScale,
                             boundsHeight,
+                            isOutsideBounds,
                         });
-                        shapes.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                         shapesData.push(...preparedData);
                     }
                     break;
@@ -117,6 +119,7 @@ export const useShapes = (args) => {
                             xScale,
                             yAxis,
                             yScale,
+                            isOutsideBounds,
                         });
                         shapes.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
@@ -186,6 +189,8 @@ export const useShapes = (args) => {
         xScale,
         yAxis,
         yScale,
+        clipPathId,
+        isOutsideBounds,
     ]);
     React.useEffect(() => {
         setShapes();

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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;