@gravity-ui/charts 1.34.0 → 1.34.1

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

@@ -6,6 +6,7 @@ import { getPreparedRangeSlider } from '../../hooks/useAxis/range-slider';
 import { getPreparedChart } from '../../hooks/useChartOptions/chart';
 import { getPreparedTitle } from '../../hooks/useChartOptions/title';
 import { getPreparedTooltip } from '../../hooks/useChartOptions/tooltip';
+import { getClipPathIdByBounds } from '../../hooks/useShapes/utils';
 import { EventType, block, getDispatcher, isBandScale } from '../../utils';
 import { AxisX } from '../AxisX/AxisX';
 import { prepareXAxisData } from '../AxisX/prepare-axis-data';
@@ -214,8 +215,10 @@ export const ChartInner = (props) => {
     }, [height, areShapesReady, onReady, width]);
     const chartContent = (React.createElement(React.Fragment, null,
         React.createElement("defs", null,
-            React.createElement("clipPath", { id: clipPathId },
-                React.createElement("rect", { x: 0, y: 0, width: boundsWidth, height: boundsHeight }))),
+            React.createElement("clipPath", { id: getClipPathIdByBounds({ clipPathId }) },
+                React.createElement("rect", { x: 0, y: 0, width: boundsWidth, height: boundsHeight })),
+            React.createElement("clipPath", { id: getClipPathIdByBounds({ clipPathId, bounds: 'horizontal' }) },
+                React.createElement("rect", { x: 0, y: -boundsHeight, width: boundsWidth, height: boundsHeight * 3 }))),
         preparedTitle && React.createElement(Title, Object.assign({}, preparedTitle, { chartWidth: width })),
         React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
             return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });

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

@@ -126,6 +126,7 @@ export function useChartInnerProps(props) {
         htmlLayout,
         clipPathId,
         isOutsideBounds,
+        zoomState,
     });
     const handleAttemptToSetZoomState = React.useCallback((nextZoomState) => {
         const { preparedSeries: nextZoomedSeriesData } = getZoomedSeriesData({

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

@@ -59,6 +59,7 @@ function RangeSliderComponent(props, forwardedRef) {
         brushOptions: brush,
         node: ref.current,
         onBrushEnd,
+        preventNullSelection: true,
         selection,
         type: 'x',
     });

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import { brush, brushX, brushY, select } from 'd3';
+import { brush, brushX, brushY, pointer, select } from 'd3';
 import { block } from '../../utils';
-import { getNormalizedSelection, setBrushBorder, setBrushHandles } from './utils';
+import { getDefaultSelection, getNormalizedSelection, setBrushBorder, setBrushHandles, } from './utils';
 import './styles.css';
 const b = block('brush');
 export function useBrush(props) {
-    const { areas, brushOptions, disabled, node, selection, type, onBrushStart, onBrush, onBrushEnd, } = props;
+    const { areas, brushOptions, disabled, node, preventNullSelection = false, selection, type, onBrushStart, onBrush, onBrushEnd, } = props;
     React.useEffect(() => {
         if (!node || !areas.length || disabled) {
             return () => { };
@@ -103,7 +103,15 @@ export function useBrush(props) {
                     });
                 }
                 if (event.sourceEvent) {
-                    onBrushEnd === null || onBrushEnd === void 0 ? void 0 : onBrushEnd.call(this, instance, event.selection);
+                    let resultSelection = event.selection;
+                    if (preventNullSelection && !resultSelection) {
+                        const [pointerPositionX] = pointer(event, this);
+                        resultSelection = getDefaultSelection({
+                            brushWidth,
+                            pointerPositionX,
+                        });
+                    }
+                    onBrushEnd === null || onBrushEnd === void 0 ? void 0 : onBrushEnd.call(this, instance, resultSelection);
                 }
             });
             groupSelection.call(instance);
@@ -129,5 +137,16 @@ export function useBrush(props) {
                 groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.remove();
             });
         };
-    }, [areas, brushOptions, disabled, node, selection, type, onBrushStart, onBrush, onBrushEnd]);
+    }, [
+        areas,
+        brushOptions,
+        disabled,
+        node,
+        preventNullSelection,
+        selection,
+        type,
+        onBrushStart,
+        onBrush,
+        onBrushEnd,
+    ]);
 }

package/dist/cjs/hooks/useBrush/types.d.ts

@@ -15,6 +15,7 @@ export interface BrushArea {
 export interface UseBrushProps {
     areas: BrushArea[];
     node: SVGGElement | null;
+    preventNullSelection?: boolean;
     brushOptions?: DeepRequired<ChartBrush>;
     disabled?: boolean;
     onBrush?: (this: SVGGElement, brushInstance: BrushBehavior<unknown>, selection: BrushSelection) => void;

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

@@ -17,3 +17,7 @@ export declare function getNormalizedSelection(args: {
     selection: BrushSelection;
     width: number;
 }): [number, number] | [[number, number], [number, number]];
+export declare function getDefaultSelection(args: {
+    brushWidth: number;
+    pointerPositionX: number;
+}): BrushSelection;

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

@@ -170,3 +170,7 @@ export function getNormalizedSelection(args) {
     }
     return resultSelection;
 }
+export function getDefaultSelection(args) {
+    const { brushWidth, pointerPositionX } = args;
+    return pointerPositionX < 0 ? [0, 1] : [brushWidth - 1, brushWidth];
+}

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

@@ -5,6 +5,7 @@ import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales/types';
 import type { PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
 import type { PreparedSplit } from '../useSplit/types';
+import type { ZoomState } from '../useZoom/types';
 import type { PreparedAreaData } from './area/types';
 import type { PreparedBarXData } from './bar-x';
 import type { PreparedBarYData } from './bar-y/types';
@@ -37,6 +38,7 @@ type Args = {
     isRangeSlider?: boolean;
     xScale?: ChartScale;
     yScale?: (ChartScale | undefined)[];
+    zoomState?: Partial<ZoomState>;
 };
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

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

@@ -20,6 +20,7 @@ import { prepareSankeyData } from './sankey/prepare-data';
 import { ScatterSeriesShape, prepareScatterData } from './scatter';
 import { TreemapSeriesShape } from './treemap';
 import { prepareTreemapData } from './treemap/prepare-data';
+import { getSeriesClipPathId } from './utils';
 import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
 import './styles.css';
 function IS_OUTSIDE_BOUNDS() {
@@ -30,7 +31,7 @@ function shouldUseClipPathId(seriesType, clipPathBySeriesType) {
     return (_a = clipPathBySeriesType === null || clipPathBySeriesType === void 0 ? void 0 : clipPathBySeriesType[seriesType]) !== null && _a !== void 0 ? _a : true;
 }
 export const useShapes = (args) => {
-    const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, isRangeSlider, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, } = args;
+    const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, isRangeSlider, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, zoomState, } = args;
     const [shapesElemens, setShapesElements] = React.useState([]);
     const [shapesElemensData, setShapesElemensData] = React.useState([]);
     const countedRef = React.useRef(0);
@@ -109,7 +110,12 @@ export const useShapes = (args) => {
                                 isOutsideBounds,
                                 isRangeSlider,
                             });
-                            shapes.push(React.createElement(LineSeriesShapes, { key: SERIES_TYPE.Line, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            const resultClipPathId = getSeriesClipPathId({
+                                clipPathId,
+                                yAxis,
+                                zoomState,
+                            });
+                            shapes.push(React.createElement(LineSeriesShapes, { key: SERIES_TYPE.Line, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: resultClipPathId }));
                             shapesData.push(...preparedData);
                         }
                         break;
@@ -243,6 +249,7 @@ export const useShapes = (args) => {
         xScale,
         yAxis,
         yScale,
+        zoomState,
     ]);
     return { shapes: shapesElemens, shapesData: shapesElemensData };
 };

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

@@ -2,6 +2,7 @@ import type { BaseType } from 'd3';
 import type { BasicInactiveState } from '../../types';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales/types';
+import type { ZoomState } from '../useZoom/types';
 export declare function getXValue(args: {
     point: {
         x?: number | string | null;
@@ -46,3 +47,12 @@ export declare function getRectBorderPath(args: {
     borderWidth: number;
     borderRadius?: number | number[];
 }): string;
+export declare function getClipPathIdByBounds(args: {
+    clipPathId: string;
+    bounds?: 'horizontal';
+}): string;
+export declare function getSeriesClipPathId(args: {
+    clipPathId: string;
+    yAxis: PreparedYAxis[];
+    zoomState?: Partial<ZoomState>;
+}): string;

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

@@ -131,3 +131,18 @@ export function getRectBorderPath(args) {
     }).toString();
     return `${outerPath} ${innerPath}`;
 }
+export function getClipPathIdByBounds(args) {
+    const { bounds, clipPathId } = args;
+    return bounds ? `${clipPathId}-${bounds}` : clipPathId;
+}
+export function getSeriesClipPathId(args) {
+    const { clipPathId, yAxis, zoomState } = args;
+    const hasMinOrMax = yAxis.some((axis) => {
+        return typeof (axis === null || axis === void 0 ? void 0 : axis.min) === 'number' || typeof (axis === null || axis === void 0 ? void 0 : axis.max) === 'number';
+    });
+    const hasZoom = zoomState && Object.keys(zoomState).length > 0;
+    if (!hasZoom && !hasMinOrMax) {
+        return getClipPathIdByBounds({ clipPathId, bounds: 'horizontal' });
+    }
+    return getClipPathIdByBounds({ clipPathId });
+}

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

@@ -6,6 +6,7 @@ import { getPreparedRangeSlider } from '../../hooks/useAxis/range-slider';
 import { getPreparedChart } from '../../hooks/useChartOptions/chart';
 import { getPreparedTitle } from '../../hooks/useChartOptions/title';
 import { getPreparedTooltip } from '../../hooks/useChartOptions/tooltip';
+import { getClipPathIdByBounds } from '../../hooks/useShapes/utils';
 import { EventType, block, getDispatcher, isBandScale } from '../../utils';
 import { AxisX } from '../AxisX/AxisX';
 import { prepareXAxisData } from '../AxisX/prepare-axis-data';
@@ -214,8 +215,10 @@ export const ChartInner = (props) => {
     }, [height, areShapesReady, onReady, width]);
     const chartContent = (React.createElement(React.Fragment, null,
         React.createElement("defs", null,
-            React.createElement("clipPath", { id: clipPathId },
-                React.createElement("rect", { x: 0, y: 0, width: boundsWidth, height: boundsHeight }))),
+            React.createElement("clipPath", { id: getClipPathIdByBounds({ clipPathId }) },
+                React.createElement("rect", { x: 0, y: 0, width: boundsWidth, height: boundsHeight })),
+            React.createElement("clipPath", { id: getClipPathIdByBounds({ clipPathId, bounds: 'horizontal' }) },
+                React.createElement("rect", { x: 0, y: -boundsHeight, width: boundsWidth, height: boundsHeight * 3 }))),
         preparedTitle && React.createElement(Title, Object.assign({}, preparedTitle, { chartWidth: width })),
         React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
             return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });

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

@@ -126,6 +126,7 @@ export function useChartInnerProps(props) {
         htmlLayout,
         clipPathId,
         isOutsideBounds,
+        zoomState,
     });
     const handleAttemptToSetZoomState = React.useCallback((nextZoomState) => {
         const { preparedSeries: nextZoomedSeriesData } = getZoomedSeriesData({

package/dist/esm/components/RangeSlider/index.js

@@ -59,6 +59,7 @@ function RangeSliderComponent(props, forwardedRef) {
         brushOptions: brush,
         node: ref.current,
         onBrushEnd,
+        preventNullSelection: true,
         selection,
         type: 'x',
     });

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import { brush, brushX, brushY, select } from 'd3';
+import { brush, brushX, brushY, pointer, select } from 'd3';
 import { block } from '../../utils';
-import { getNormalizedSelection, setBrushBorder, setBrushHandles } from './utils';
+import { getDefaultSelection, getNormalizedSelection, setBrushBorder, setBrushHandles, } from './utils';
 import './styles.css';
 const b = block('brush');
 export function useBrush(props) {
-    const { areas, brushOptions, disabled, node, selection, type, onBrushStart, onBrush, onBrushEnd, } = props;
+    const { areas, brushOptions, disabled, node, preventNullSelection = false, selection, type, onBrushStart, onBrush, onBrushEnd, } = props;
     React.useEffect(() => {
         if (!node || !areas.length || disabled) {
             return () => { };
@@ -103,7 +103,15 @@ export function useBrush(props) {
                     });
                 }
                 if (event.sourceEvent) {
-                    onBrushEnd === null || onBrushEnd === void 0 ? void 0 : onBrushEnd.call(this, instance, event.selection);
+                    let resultSelection = event.selection;
+                    if (preventNullSelection && !resultSelection) {
+                        const [pointerPositionX] = pointer(event, this);
+                        resultSelection = getDefaultSelection({
+                            brushWidth,
+                            pointerPositionX,
+                        });
+                    }
+                    onBrushEnd === null || onBrushEnd === void 0 ? void 0 : onBrushEnd.call(this, instance, resultSelection);
                 }
             });
             groupSelection.call(instance);
@@ -129,5 +137,16 @@ export function useBrush(props) {
                 groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.remove();
             });
         };
-    }, [areas, brushOptions, disabled, node, selection, type, onBrushStart, onBrush, onBrushEnd]);
+    }, [
+        areas,
+        brushOptions,
+        disabled,
+        node,
+        preventNullSelection,
+        selection,
+        type,
+        onBrushStart,
+        onBrush,
+        onBrushEnd,
+    ]);
 }

package/dist/esm/hooks/useBrush/types.d.ts

@@ -15,6 +15,7 @@ export interface BrushArea {
 export interface UseBrushProps {
     areas: BrushArea[];
     node: SVGGElement | null;
+    preventNullSelection?: boolean;
     brushOptions?: DeepRequired<ChartBrush>;
     disabled?: boolean;
     onBrush?: (this: SVGGElement, brushInstance: BrushBehavior<unknown>, selection: BrushSelection) => void;

package/dist/esm/hooks/useBrush/utils.d.ts

@@ -17,3 +17,7 @@ export declare function getNormalizedSelection(args: {
     selection: BrushSelection;
     width: number;
 }): [number, number] | [[number, number], [number, number]];
+export declare function getDefaultSelection(args: {
+    brushWidth: number;
+    pointerPositionX: number;
+}): BrushSelection;

package/dist/esm/hooks/useBrush/utils.js

@@ -170,3 +170,7 @@ export function getNormalizedSelection(args) {
     }
     return resultSelection;
 }
+export function getDefaultSelection(args) {
+    const { brushWidth, pointerPositionX } = args;
+    return pointerPositionX < 0 ? [0, 1] : [brushWidth - 1, brushWidth];
+}

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

@@ -5,6 +5,7 @@ import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales/types';
 import type { PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
 import type { PreparedSplit } from '../useSplit/types';
+import type { ZoomState } from '../useZoom/types';
 import type { PreparedAreaData } from './area/types';
 import type { PreparedBarXData } from './bar-x';
 import type { PreparedBarYData } from './bar-y/types';
@@ -37,6 +38,7 @@ type Args = {
     isRangeSlider?: boolean;
     xScale?: ChartScale;
     yScale?: (ChartScale | undefined)[];
+    zoomState?: Partial<ZoomState>;
 };
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

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

@@ -20,6 +20,7 @@ import { prepareSankeyData } from './sankey/prepare-data';
 import { ScatterSeriesShape, prepareScatterData } from './scatter';
 import { TreemapSeriesShape } from './treemap';
 import { prepareTreemapData } from './treemap/prepare-data';
+import { getSeriesClipPathId } from './utils';
 import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
 import './styles.css';
 function IS_OUTSIDE_BOUNDS() {
@@ -30,7 +31,7 @@ function shouldUseClipPathId(seriesType, clipPathBySeriesType) {
     return (_a = clipPathBySeriesType === null || clipPathBySeriesType === void 0 ? void 0 : clipPathBySeriesType[seriesType]) !== null && _a !== void 0 ? _a : true;
 }
 export const useShapes = (args) => {
-    const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, isRangeSlider, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, } = args;
+    const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, isRangeSlider, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, zoomState, } = args;
     const [shapesElemens, setShapesElements] = React.useState([]);
     const [shapesElemensData, setShapesElemensData] = React.useState([]);
     const countedRef = React.useRef(0);
@@ -109,7 +110,12 @@ export const useShapes = (args) => {
                                 isOutsideBounds,
                                 isRangeSlider,
                             });
-                            shapes.push(React.createElement(LineSeriesShapes, { key: SERIES_TYPE.Line, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            const resultClipPathId = getSeriesClipPathId({
+                                clipPathId,
+                                yAxis,
+                                zoomState,
+                            });
+                            shapes.push(React.createElement(LineSeriesShapes, { key: SERIES_TYPE.Line, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: resultClipPathId }));
                             shapesData.push(...preparedData);
                         }
                         break;
@@ -243,6 +249,7 @@ export const useShapes = (args) => {
         xScale,
         yAxis,
         yScale,
+        zoomState,
     ]);
     return { shapes: shapesElemens, shapesData: shapesElemensData };
 };

package/dist/esm/hooks/useShapes/utils.d.ts

@@ -2,6 +2,7 @@ import type { BaseType } from 'd3';
 import type { BasicInactiveState } from '../../types';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales/types';
+import type { ZoomState } from '../useZoom/types';
 export declare function getXValue(args: {
     point: {
         x?: number | string | null;
@@ -46,3 +47,12 @@ export declare function getRectBorderPath(args: {
     borderWidth: number;
     borderRadius?: number | number[];
 }): string;
+export declare function getClipPathIdByBounds(args: {
+    clipPathId: string;
+    bounds?: 'horizontal';
+}): string;
+export declare function getSeriesClipPathId(args: {
+    clipPathId: string;
+    yAxis: PreparedYAxis[];
+    zoomState?: Partial<ZoomState>;
+}): string;

package/dist/esm/hooks/useShapes/utils.js

@@ -131,3 +131,18 @@ export function getRectBorderPath(args) {
     }).toString();
     return `${outerPath} ${innerPath}`;
 }
+export function getClipPathIdByBounds(args) {
+    const { bounds, clipPathId } = args;
+    return bounds ? `${clipPathId}-${bounds}` : clipPathId;
+}
+export function getSeriesClipPathId(args) {
+    const { clipPathId, yAxis, zoomState } = args;
+    const hasMinOrMax = yAxis.some((axis) => {
+        return typeof (axis === null || axis === void 0 ? void 0 : axis.min) === 'number' || typeof (axis === null || axis === void 0 ? void 0 : axis.max) === 'number';
+    });
+    const hasZoom = zoomState && Object.keys(zoomState).length > 0;
+    if (!hasZoom && !hasMinOrMax) {
+        return getClipPathIdByBounds({ clipPathId, bounds: 'horizontal' });
+    }
+    return getClipPathIdByBounds({ clipPathId });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.34.0",
+  "version": "1.34.1",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",