@gravity-ui/charts 1.34.0 → 1.34.2

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/cjs/setup-jsdom.js

@@ -0,0 +1,19 @@
+"use strict";
+// Global mocks for jsdom environment.
+// Guarded by typeof checks so this file is safe to run in the `node` environment too.
+if (typeof document !== 'undefined') {
+    // jsdom does not implement document.fonts
+    if (!document.fonts) {
+        Object.defineProperty(document, 'fonts', {
+            value: { ready: Promise.resolve() },
+            configurable: true,
+        });
+    }
+}
+if (typeof HTMLCanvasElement !== 'undefined') {
+    // jsdom does not implement HTMLCanvasElement.prototype.getContext (used for text measurement)
+    HTMLCanvasElement.prototype.getContext = (() => ({
+        font: '',
+        measureText: () => ({ width: 0 }),
+    }));
+}

package/dist/cjs/utils/chart/axis/common.d.ts

@@ -3,9 +3,9 @@ import type { ChartScale, PreparedAxis, PreparedAxisPlotBand, PreparedSplit } fr
 import type { ChartAxis } from '../../../types';
 import type { AxisDirection } from '../types';
 type Ticks = number[] | string[] | Date[];
-export declare function getTicksCount({ axis, range }: {
+export declare function getTicksCountByPixelInterval({ axis, axisWidth, }: {
     axis: PreparedAxis;
-    range: number;
+    axisWidth: number;
 }): number | undefined;
 export declare function isBandScale(scale?: ChartScale | AxisScale<AxisDomain>): scale is ScaleBand<string>;
 export declare function isTimeScale(scale?: ChartScale | AxisScale<AxisDomain>): scale is ScaleTime<number, number>;

package/dist/cjs/utils/chart/axis/common.js

@@ -1,9 +1,9 @@
 import { ascending, descending, reverse, sort } from 'd3';
 import clamp from 'lodash/clamp';
-export function getTicksCount({ axis, range }) {
+export function getTicksCountByPixelInterval({ axis, axisWidth, }) {
     let ticksCount;
     if (axis.ticks.pixelInterval) {
-        ticksCount = Math.ceil(range / axis.ticks.pixelInterval);
+        ticksCount = Math.ceil(axisWidth / axis.ticks.pixelInterval);
     }
     return ticksCount;
 }

package/dist/cjs/utils/chart/axis/x-axis.d.ts

@@ -1,12 +1,13 @@
-import type { ChartScale, PreparedAxis } from '../../../hooks';
-export declare function getXAxisTickValues({ scale, axis, labelLineHeight, }: {
-    scale: ChartScale;
+import type { ChartScale, PreparedAxis, PreparedSeries } from '../../../hooks';
+import type { ChartSeries } from '../../../types';
+type TickValue = {
+    x: number;
+    value: number | string | Date;
+};
+export declare function getXAxisTickValues({ axis, labelLineHeight, scale, series, }: {
     axis: PreparedAxis;
     labelLineHeight: number;
-}): {
-    x: number;
-    value: number | Date;
-}[] | {
-    x: number;
-    value: string;
-}[];
+    scale: ChartScale;
+    series?: ChartSeries[] | PreparedSeries[];
+}): TickValue[];
+export {};

package/dist/cjs/utils/chart/axis/x-axis.js

@@ -1,13 +1,34 @@
 import { getMinSpaceBetween } from '../array';
-import { getTicksCount, isBandScale, thinOut } from './common';
-export function getXAxisTickValues({ scale, axis, labelLineHeight, }) {
+import { isSeriesWithNumericalXValues } from '../series-type-guards';
+import { getTicksCountByPixelInterval, isBandScale, thinOut } from './common';
+const DEFAULT_TICKS_COUNT = 10;
+function getTicksCount(args) {
+    const { axis, axisWidth, series } = args;
+    const result = getTicksCountByPixelInterval({ axis, axisWidth });
+    if (typeof result === 'number') {
+        return result;
+    }
+    if (series) {
+        const xDataSet = new Set();
+        series === null || series === void 0 ? void 0 : series.forEach((item) => {
+            if (isSeriesWithNumericalXValues(item)) {
+                item.data.forEach((data) => {
+                    xDataSet.add(data.x);
+                });
+            }
+        });
+        return xDataSet.size < DEFAULT_TICKS_COUNT ? xDataSet.size : DEFAULT_TICKS_COUNT;
+    }
+    return DEFAULT_TICKS_COUNT;
+}
+export function getXAxisTickValues({ axis, labelLineHeight, scale, series, }) {
     if ('ticks' in scale && typeof scale.ticks === 'function') {
         const range = scale.range();
         const axisWidth = Math.abs(range[0] - range[1]);
         if (!axisWidth) {
             return [];
         }
-        const scaleTicksCount = getTicksCount({ axis, range: axisWidth });
+        const scaleTicksCount = getTicksCount({ axis, axisWidth, series });
         const scaleTicks = scale.ticks(scaleTicksCount);
         const originalTickValues = scaleTicks.map((t) => ({
             x: scale(t),

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

@@ -1,4 +1,5 @@
 import type { BaseTextStyle, ChartSeries, ChartSeriesData } from '../../types';
+import type { UnknownSeries } from './series-type-guards';
 import type { AxisDirection } from './types';
 export * from './axis/common';
 export * from './array';
@@ -8,41 +9,13 @@ export * from './labels';
 export * from './legend';
 export * from './math';
 export * from './series';
+export * from './series-type-guards';
 export * from './symbol';
 export * from './text';
 export * from './time';
 export * from './zoom';
 export declare const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS: ChartSeries['type'][];
 export declare const CHART_SERIES_WITH_VOLUME_ON_X_AXIS: ChartSeries['type'][];
-type UnknownSeries = {
-    type: ChartSeries['type'];
-    data: unknown;
-};
-/**
- * Checks whether the series should be drawn with axes.
- *
- * @param series - The series object to check.
- * @returns `true` if the series should be drawn with axes, `false` otherwise.
- */
-export declare function isAxisRelatedSeries(series: UnknownSeries): boolean;
-export declare function isSeriesWithNumericalXValues(series: UnknownSeries): series is {
-    type: ChartSeries['type'];
-    data: {
-        x: number;
-    }[];
-};
-export declare function isSeriesWithNumericalYValues(series: UnknownSeries): series is {
-    type: ChartSeries['type'];
-    data: {
-        y: number;
-    }[];
-};
-export declare function isSeriesWithCategoryValues(series: UnknownSeries): series is {
-    type: ChartSeries['type'];
-    data: {
-        category: string;
-    }[];
-};
 export declare const getDomainDataXBySeries: (series: UnknownSeries[]) => ({} | undefined)[];
 export declare function getDefaultMaxXAxisValue(series: UnknownSeries[]): 0 | undefined;
 export declare function getDefaultMinXAxisValue(series: UnknownSeries[]): number | undefined;

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

@@ -5,6 +5,7 @@ import sortBy from 'lodash/sortBy';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE, SERIES_TYPE } from '../../constants';
 import { getSeriesStackId } from '../../hooks/useSeries/utils';
 import { getWaterfallPointSubtotal } from './series/waterfall';
+import { isSeriesWithNumericalXValues, isSeriesWithNumericalYValues } from './series-type-guards';
 export * from './axis/common';
 export * from './array';
 export * from './color';
@@ -13,35 +14,17 @@ export * from './labels';
 export * from './legend';
 export * from './math';
 export * from './series';
+export * from './series-type-guards';
 export * from './symbol';
 export * from './text';
 export * from './time';
 export * from './zoom';
-const CHARTS_WITHOUT_AXIS = ['pie', 'treemap', 'sankey', 'radar', 'funnel'];
 export const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS = [
     'bar-x',
     'area',
     'waterfall',
 ];
 export const CHART_SERIES_WITH_VOLUME_ON_X_AXIS = ['bar-y'];
-/**
- * Checks whether the series should be drawn with axes.
- *
- * @param series - The series object to check.
- * @returns `true` if the series should be drawn with axes, `false` otherwise.
- */
-export function isAxisRelatedSeries(series) {
-    return !CHARTS_WITHOUT_AXIS.includes(series.type);
-}
-export function isSeriesWithNumericalXValues(series) {
-    return isAxisRelatedSeries(series);
-}
-export function isSeriesWithNumericalYValues(series) {
-    return isAxisRelatedSeries(series);
-}
-export function isSeriesWithCategoryValues(series) {
-    return isAxisRelatedSeries(series);
-}
 function getDomainDataForStackedSeries(seriesList, keyAttr = 'x', valueAttr = 'y') {
     const acc = [];
     const stackedSeries = group(seriesList, getSeriesStackId);

package/dist/cjs/utils/chart/series-type-guards.d.ts

@@ -0,0 +1,30 @@
+import type { ChartSeries } from '../../types';
+export type UnknownSeries = {
+    type: ChartSeries['type'];
+    data: unknown;
+};
+/**
+ * Checks whether the series should be drawn with axes.
+ *
+ * @param series - The series object to check.
+ * @returns `true` if the series should be drawn with axes, `false` otherwise.
+ */
+export declare function isAxisRelatedSeries(series: UnknownSeries): boolean;
+export declare function isSeriesWithNumericalXValues(series: UnknownSeries): series is {
+    type: ChartSeries['type'];
+    data: {
+        x: number;
+    }[];
+};
+export declare function isSeriesWithNumericalYValues(series: UnknownSeries): series is {
+    type: ChartSeries['type'];
+    data: {
+        y: number;
+    }[];
+};
+export declare function isSeriesWithCategoryValues(series: UnknownSeries): series is {
+    type: ChartSeries['type'];
+    data: {
+        category: string;
+    }[];
+};

package/dist/cjs/utils/chart/series-type-guards.js

@@ -0,0 +1,19 @@
+const CHARTS_WITHOUT_AXIS = ['pie', 'treemap', 'sankey', 'radar', 'funnel'];
+/**
+ * Checks whether the series should be drawn with axes.
+ *
+ * @param series - The series object to check.
+ * @returns `true` if the series should be drawn with axes, `false` otherwise.
+ */
+export function isAxisRelatedSeries(series) {
+    return !CHARTS_WITHOUT_AXIS.includes(series.type);
+}
+export function isSeriesWithNumericalXValues(series) {
+    return isAxisRelatedSeries(series);
+}
+export function isSeriesWithNumericalYValues(series) {
+    return isAxisRelatedSeries(series);
+}
+export function isSeriesWithCategoryValues(series) {
+    return isAxisRelatedSeries(series);
+}

package/dist/esm/components/AxisX/prepare-axis-data.d.ts

@@ -1,12 +1,13 @@
-import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
+import type { ChartScale, PreparedAxis, PreparedSeries, PreparedSplit } from '../../hooks';
 import type { AxisXData } from './types';
-export declare function prepareXAxisData({ axis, yAxis, scale, boundsWidth, boundsOffsetLeft, boundsOffsetRight, height, split, }: {
+export declare function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, height, scale, series, split, yAxis, }: {
     axis: PreparedAxis;
-    yAxis: PreparedAxis[];
-    scale: ChartScale;
-    boundsWidth: number;
     boundsOffsetLeft: number;
     boundsOffsetRight: number;
+    boundsWidth: number;
     height: number;
+    scale: ChartScale;
+    series: PreparedSeries[];
     split: PreparedSplit;
+    yAxis: PreparedAxis[];
 }): Promise<AxisXData[]>;

package/dist/esm/components/AxisX/prepare-axis-data.js

@@ -68,7 +68,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
     return svgLabel;
 }
 // eslint-disable-next-line complexity
-export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, boundsOffsetLeft, boundsOffsetRight, height, split, }) {
+export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, height, scale, series, split, yAxis, }) {
     var _a, _b, _c, _d, _e, _f;
     const xAxisItems = [];
     for (let plotIndex = 0; plotIndex < split.plots.length; plotIndex++) {
@@ -95,7 +95,7 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
         const ticks = [];
         const getTextSize = getTextSizeFn({ style: axis.labels.style });
         const labelLineHeight = (await getTextSize('Tmp')).height;
-        const values = getXAxisTickValues({ scale, axis, labelLineHeight });
+        const values = getXAxisTickValues({ scale, axis, labelLineHeight, series });
         const tickStep = getMinSpaceBetween(values, (d) => Number(d.value));
         const labelMaxWidth = values.length > 1
             ? Math.abs(values[0].x - values[1].x) - axis.labels.padding * 2

package/dist/esm/components/AxisY/utils.js

@@ -1,4 +1,4 @@
-import { getDomainDataYBySeries, getMinSpaceBetween, getTicksCount, isBandScale, thinOut, } from '../../utils';
+import { getDomainDataYBySeries, getMinSpaceBetween, getTicksCountByPixelInterval, isBandScale, thinOut, } from '../../utils';
 export function getTickValues({ scale, axis, labelLineHeight, series, }) {
     if ('ticks' in scale && typeof scale.ticks === 'function') {
         const range = scale.range();
@@ -13,10 +13,10 @@ export function getTickValues({ scale, axis, labelLineHeight, series, }) {
                 if (domainData.length < 3) {
                     return domainData;
                 }
-                const ticksCount = (_a = getTicksCount({ axis, range: height })) !== null && _a !== void 0 ? _a : domainData.length;
+                const ticksCount = (_a = getTicksCountByPixelInterval({ axis, axisWidth: height })) !== null && _a !== void 0 ? _a : domainData.length;
                 return scale.ticks(Math.min(ticksCount, domainData.length));
             }
-            const ticksCount = getTicksCount({ axis, range: height });
+            const ticksCount = getTicksCountByPixelInterval({ axis, axisWidth: height });
             return scale.ticks(ticksCount);
         };
         const scaleTicks = getScaleTicks();

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';
@@ -63,7 +64,7 @@ export const ChartInner = (props) => {
         preparedRangeSlider,
         tooltip: preparedTooltip,
     });
-    const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, prevHeight, prevWidth, shapes, shapesData, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
+    const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, prevHeight, prevWidth, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, preparedChart, rangeSliderDomain: (_a = rangeSliderRef.current) === null || _a === void 0 ? void 0 : _a.getDomain(), rangeSliderState, svgContainer: svgRef.current, updateZoomState,
         zoomState }));
@@ -159,18 +160,29 @@ export const ChartInner = (props) => {
         if (axis && scale) {
             const axisData = await prepareXAxisData({
                 axis,
-                yAxis,
-                scale,
-                boundsWidth,
                 boundsOffsetLeft: boundsOffsetLeft,
                 boundsOffsetRight: width - boundsWidth - boundsOffsetLeft,
+                boundsWidth,
                 height: boundsHeight,
+                scale,
+                series: preparedSeries.filter((s) => s.visible),
                 split: preparedSplit,
+                yAxis,
             });
             items.push(...axisData);
         }
         return items;
-    }, [xAxis, xScale, yAxis, boundsWidth, boundsOffsetLeft, width, boundsHeight, preparedSplit]);
+    }, [
+        boundsHeight,
+        boundsOffsetLeft,
+        boundsWidth,
+        preparedSeries,
+        preparedSplit,
+        width,
+        xAxis,
+        xScale,
+        yAxis,
+    ]);
     const xAxisDataItems = useAsyncState([], setXAxisDataItems);
     React.useEffect(() => {
         if (!initialized && xScale) {
@@ -206,16 +218,17 @@ export const ChartInner = (props) => {
         updateRangeSliderState,
         xScale,
     ]);
-    const areShapesReady = shapes.length > 0;
     React.useEffect(() => {
-        if (areShapesReady) {
+        if (shapesReady) {
             onReady === null || onReady === void 0 ? void 0 : onReady({ dimensions: { width, height } });
         }
-    }, [height, areShapesReady, onReady, width]);
+    }, [height, shapesReady, 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.d.ts

@@ -44,6 +44,7 @@ export declare function useChartInnerProps(props: Props): {
     prevWidth: number | undefined;
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: import("../../hooks").ShapeData[];
+    shapesReady: boolean;
     svgXPos: number | undefined;
     xAxis: import("../../hooks").PreparedXAxis | null;
     xScale: import("../../hooks").ChartScale | undefined;

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

@@ -111,7 +111,7 @@ export function useChartInnerProps(props) {
     const isOutsideBounds = React.useCallback((x, y) => {
         return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
     }, [boundsHeight, boundsWidth]);
-    const { shapes, shapesData } = useShapes({
+    const { shapes, shapesData, shapesReady } = useShapes({
         boundsWidth,
         boundsHeight,
         clipPathBySeriesType: CLIP_PATH_BY_SERIES_TYPE,
@@ -126,6 +126,7 @@ export function useChartInnerProps(props) {
         htmlLayout,
         clipPathId,
         isOutsideBounds,
+        zoomState,
     });
     const handleAttemptToSetZoomState = React.useCallback((nextZoomState) => {
         const { preparedSeries: nextZoomedSeriesData } = getZoomedSeriesData({
@@ -182,6 +183,7 @@ export function useChartInnerProps(props) {
         prevWidth,
         shapes,
         shapesData,
+        shapesReady,
         svgXPos: x,
         xAxis,
         xScale,

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/useAxis/x-axis.js

@@ -15,7 +15,7 @@ async function setLabelSettings({ axis, seriesData, width, axisLabels, }) {
     }
     const getTextSize = getTextSizeFn({ style: axis.labels.style });
     const labelLineHeight = (await getTextSize('Tmp')).height;
-    const tickValues = getXAxisTickValues({ axis, scale, labelLineHeight });
+    const tickValues = getXAxisTickValues({ axis, scale, labelLineHeight, series: seriesData });
     const tickStep = getMinSpaceBetween(tickValues, (d) => Number(d.value));
     if (axis.type === 'datetime' && !(axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.dateFormat)) {
         axis.labels.dateFormat = getDefaultDateFormat(tickStep);

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];
+}