@gravity-ui/charts 1.22.0 → 1.24.0

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
+import type { ChartScale, PreparedSplit, PreparedXAxis } from '../../hooks';
 import './styles.css';
 type Props = {
-    axis: PreparedAxis;
+    axis: PreparedXAxis;
     boundsOffsetLeft: number;
     boundsOffsetTop: number;
     height: number;
@@ -15,7 +15,7 @@ type Props = {
     plotAfterRef?: React.MutableRefObject<SVGGElement | null>;
 };
 export declare function getTitlePosition(args: {
-    axis: PreparedAxis;
+    axis: PreparedXAxis;
     width: number;
     rowCount: number;
 }): {

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

@@ -1,24 +1,28 @@
 import React from 'react';
+import { duration } from '@gravity-ui/date-utils';
 import { ArrowRotateLeft } from '@gravity-ui/icons';
 import { Button, ButtonIcon, useUniqId } from '@gravity-ui/uikit';
 import { useCrosshair } from '../../hooks';
+import { getPreparedRangeSlider } from '../../hooks/useAxis/range-slider';
 import { getPreparedTooltip } from '../../hooks/useChartOptions/tooltip';
-import { EventType, block, getDispatcher } from '../../utils';
+import { EventType, block, getDispatcher, isBandScale, isTimeScale } from '../../utils';
 import { AxisX } from '../AxisX/AxisX';
 import { AxisY } from '../AxisY/AxisY';
 import { prepareAxisData } from '../AxisY/prepare-axis-data';
 import { Legend } from '../Legend';
 import { PlotTitle } from '../PlotTitle';
+import { RangeSlider } from '../RangeSlider';
 import { Title } from '../Title';
 import { Tooltip } from '../Tooltip';
 import { useChartInnerHandlers } from './useChartInnerHandlers';
 import { useChartInnerProps } from './useChartInnerProps';
 import { useChartInnerState } from './useChartInnerState';
-import { getResetZoomButtonStyle, useAsyncState } from './utils';
+import { getResetZoomButtonStyle, useAsyncState, useDebouncedValue } from './utils';
 import './styles.css';
 const b = block('chart');
+const DEBOUNCED_VALUE_DELAY = 10;
 export const ChartInner = (props) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
     const resetZoomButtonRef = React.useRef(null);
@@ -36,14 +40,30 @@ export const ChartInner = (props) => {
             xAxis: data.xAxis,
         });
     }, [data.series.data, data.tooltip, data.yAxis, data.xAxis]);
-    const { tooltipPinned, togglePinTooltip, unpinTooltip, updateZoomState, zoomState } = useChartInnerState({
+    const preparedRangeSlider = React.useMemo(() => {
+        return getPreparedRangeSlider({ xAxis: data.xAxis });
+    }, [data.xAxis]);
+    const { initialized, setInitialized, tooltipPinned, togglePinTooltip, unpinTooltip, rangeSliderState, updateRangeSliderState, updateZoomState, zoomState, } = useChartInnerState({
         dispatcher,
         tooltip: preparedTooltip,
+        preparedRangeSlider,
     });
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, preparedZoom, prevHeight, prevWidth, shapes, shapesData, svgXPos, title, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
+    const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedChart, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, preparedZoom, prevHeight, prevWidth, shapes, shapesData, svgXPos, title, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
-        htmlLayout, plotNode: plotRef.current, svgContainer: svgRef.current, updateZoomState,
+        htmlLayout, plotNode: plotRef.current, rangeSliderState, svgContainer: svgRef.current, updateZoomState,
         zoomState }));
+    const debouncedBoundsWidth = useDebouncedValue({
+        value: boundsWidth,
+        delay: DEBOUNCED_VALUE_DELAY,
+    });
+    const debouncedOffsetLeft = useDebouncedValue({
+        value: boundsOffsetLeft,
+        delay: DEBOUNCED_VALUE_DELAY,
+    });
+    const debouncedAllPreparedSeries = useDebouncedValue({
+        value: allPreparedSeries,
+        delay: DEBOUNCED_VALUE_DELAY,
+    });
     const { handleChartClick, handleMouseLeave, throttledHandleMouseMove, throttledHandleTouchMove } = useChartInnerHandlers({
         boundsHeight,
         boundsOffsetLeft,
@@ -116,31 +136,78 @@ export const ChartInner = (props) => {
         return items;
     }, [boundsHeight, boundsOffsetTop, boundsWidth, preparedSeries, preparedSplit, yAxis, yScale]);
     const yAxisDataItems = useAsyncState([], setYAxisDataItems);
+    React.useEffect(() => {
+        if (!initialized && xScale) {
+            const defaultRange = preparedRangeSlider.defaultRange;
+            if (isBandScale(xScale)) {
+                setInitialized(true);
+                return;
+            }
+            if (isTimeScale(xScale)) {
+                const domain = xScale.domain();
+                const minDomainMs = domain[0].valueOf();
+                const maxDomainMs = domain[1].valueOf();
+                let minRangeMs = minDomainMs;
+                try {
+                    if (defaultRange === null || defaultRange === void 0 ? void 0 : defaultRange.size) {
+                        const durationMs = duration(defaultRange.size).asMilliseconds();
+                        const minDefaultRangeMs = maxDomainMs - durationMs;
+                        if (minDefaultRangeMs < maxDomainMs) {
+                            minRangeMs = minDefaultRangeMs;
+                        }
+                    }
+                }
+                catch (_a) { }
+                updateRangeSliderState({ min: minRangeMs, max: maxDomainMs });
+                setInitialized(true);
+            }
+            else {
+                const [minDomain, maxDomain] = xScale.domain();
+                let minRange = minDomain;
+                if (typeof (defaultRange === null || defaultRange === void 0 ? void 0 : defaultRange.size) === 'number') {
+                    const minDefaultRange = maxDomain - defaultRange.size;
+                    if (minDefaultRange < maxDomain) {
+                        minRange = minDefaultRange;
+                    }
+                }
+                updateRangeSliderState({ min: minRange, max: maxDomain });
+                setInitialized(true);
+            }
+        }
+    }, [
+        initialized,
+        preparedRangeSlider.defaultRange,
+        setInitialized,
+        updateRangeSliderState,
+        xScale,
+    ]);
+    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 }))),
+        title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
+        React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
+            return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
+        })),
+        React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
+            xScale && xAxis && (React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
+                React.createElement(AxisX, { axis: xAxis, boundsOffsetLeft: boundsOffsetLeft, boundsOffsetTop: boundsOffsetTop, height: boundsHeight, htmlLayout: htmlLayout, leftmostLimit: svgXPos, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, scale: xScale, split: preparedSplit, width: boundsWidth }))),
+            Boolean(yAxisDataItems.length) && (React.createElement(React.Fragment, null, yAxisDataItems.map((axisData, index) => {
+                if (!axisData) {
+                    return null;
+                }
+                return (React.createElement(AxisY, { key: index, htmlLayout: htmlLayout, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, preparedAxisData: axisData }));
+            }))),
+            React.createElement("g", { ref: plotBeforeRef }),
+            shapes,
+            React.createElement("g", { ref: plotAfterRef })),
+        ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) && (React.createElement(RangeSlider, { boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, width: width, xAxis: data.xAxis, yAxis: data.yAxis })),
+        (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))));
     return (React.createElement("div", { className: b() },
         React.createElement("svg", { ref: svgRef, width: width, height: height, 
             // We use onPointerMove here because onMouseMove works incorrectly when the zoom setting is enabled:
             // when starting to select an area, the tooltip remains in the position where the selection began
-            onPointerMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick },
-            React.createElement("defs", null,
-                React.createElement("clipPath", { id: clipPathId },
-                    React.createElement("rect", { x: 0, y: 0, width: boundsWidth, height: boundsHeight }))),
-            title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
-            React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
-                return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
-            })),
-            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
-                xScale && xAxis && (React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                    React.createElement(AxisX, { axis: xAxis, boundsOffsetLeft: boundsOffsetLeft, boundsOffsetTop: boundsOffsetTop, height: boundsHeight, htmlLayout: htmlLayout, leftmostLimit: svgXPos, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, scale: xScale, split: preparedSplit, width: boundsWidth }))),
-                Boolean(yAxisDataItems.length) && (React.createElement(React.Fragment, null, yAxisDataItems.map((axisData, index) => {
-                    if (!axisData) {
-                        return null;
-                    }
-                    return (React.createElement(AxisY, { key: index, htmlLayout: htmlLayout, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, preparedAxisData: axisData }));
-                }))),
-                React.createElement("g", { ref: plotBeforeRef }),
-                shapes,
-                React.createElement("g", { ref: plotAfterRef })),
-            (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))),
+            onPointerMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick }, initialized ? chartContent : null),
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),

package/dist/cjs/components/ChartInner/useChartInnerHandlers.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { Dispatch } from 'd3';
-import type { PreparedAxis, ShapeData } from '../../hooks';
+import type { PreparedXAxis, PreparedYAxis, ShapeData } from '../../hooks';
 import type { useChartInnerState } from './useChartInnerState';
 type ChartInnerState = ReturnType<typeof useChartInnerState>;
 type Props = {
@@ -14,8 +14,8 @@ type Props = {
     togglePinTooltip: ChartInnerState['togglePinTooltip'];
     tooltipPinned: boolean;
     unpinTooltip: ChartInnerState['unpinTooltip'];
-    xAxis: PreparedAxis | null;
-    yAxis: PreparedAxis[];
+    xAxis: PreparedXAxis | null;
+    yAxis: PreparedYAxis[];
     tooltipThrottle: number;
     isOutsideBounds: (x: number, y: number) => boolean;
 };

package/dist/cjs/components/ChartInner/useChartInnerProps.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { ZoomState } from '../../hooks/useZoom/types';
+import type { RangeSliderState, ZoomState } from '../../hooks';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
     clipPathId: string;
@@ -10,9 +10,10 @@ type Props = ChartInnerProps & {
     svgContainer: SVGGElement | null;
     updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
     zoomState: Partial<ZoomState>;
+    rangeSliderState?: RangeSliderState;
 };
 export declare function useChartInnerProps(props: Props): {
-    svgXPos: number | undefined;
+    allPreparedSeries: import("../../hooks").PreparedSeries[];
     boundsHeight: number;
     boundsOffsetLeft: number;
     boundsOffsetTop: number;
@@ -33,35 +34,55 @@ export declare function useChartInnerProps(props: Props): {
         maxWidth: number;
     } | undefined;
     legendItems: never[] | import("../../hooks").LegendItem[][];
+    preparedChart: import("../../hooks").PreparedChart;
     preparedLegend: import("../../hooks").PreparedLegend | null;
     preparedSeries: import("../../hooks").PreparedSeries[];
+    preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
     preparedSplit: import("../../hooks").PreparedSplit;
-    preparedZoom: Required<{
-        type?: ("x" | "y" | "xy") | undefined;
-        brush?: Required<{
-            style?: Required<{
-                fillOpacity?: number | undefined;
-            } | undefined>;
-        } | undefined>;
-        resetButton?: Required<{
-            align?: ("bottom-left" | "bottom-right" | "top-left" | "top-right") | undefined;
-            offset?: Required<{
-                x?: number | undefined;
-                y?: number | undefined;
-            } | undefined>;
-            relativeTo?: ("chart-box" | "plot-box") | undefined;
-        } | undefined>;
-    }> | null;
+    preparedZoom: import("../../hooks").PreparedZoom | null;
     prevHeight: number | undefined;
     prevWidth: number | undefined;
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: import("../../hooks").ShapeData[];
+    svgXPos: number | undefined;
     title: (import("../..").ChartTitle & {
         height: number;
     }) | undefined;
-    xAxis: import("../../hooks").PreparedAxis | null;
+    xAxis: import("../../hooks").PreparedXAxis | null;
     xScale: import("../../hooks").ChartScale | undefined;
-    yAxis: import("../../hooks").PreparedAxis[];
+    yAxis: (Omit<import("../..").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {
+        type: import("../..").ChartAxisType;
+        labels: Omit<import("../..").ChartAxisLabels, "enabled" | "style" | "padding" | "autoRotation"> & Required<Pick<import("../..").ChartAxisLabels, "enabled" | "html" | "padding" | "margin" | "rotation">> & {
+            style: import("../..").BaseTextStyle;
+            rotation: number;
+            height: number;
+            width: number;
+            lineHeight: number;
+            maxWidth: number;
+        };
+        title: {
+            height: number;
+            width: number;
+            text: string;
+            margin: number;
+            style: import("../..").BaseTextStyle;
+            align: import("../..").ChartAxisTitleAlignment;
+            maxRowCount: number;
+        };
+        min?: number;
+        grid: {
+            enabled: boolean;
+        };
+        maxPadding: number;
+        ticks: {
+            pixelInterval?: number;
+        };
+        position: "left" | "right" | "top" | "bottom";
+        plotIndex: number;
+        plotLines: import("../../hooks").PreparedAxisPlotLine[];
+        plotBands: import("../../hooks").PreparedAxisPlotBand[];
+        crosshair: Required<import("../..").AxisCrosshair>;
+    })[];
     yScale: (import("../../hooks").ChartScale | undefined)[] | undefined;
 };
 export {};

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

@@ -1,14 +1,17 @@
 import React from 'react';
-import { useAxis, useAxisScales, useChartDimensions, useChartOptions, useNormalizedOriginalData, usePrevious, useSeries, useShapes, useSplit, } from '../../hooks';
+import { SERIES_TYPE } from '../../constants';
+import { useAxis, useAxisScales, useChartDimensions, useChartOptions, useNormalizedOriginalData, usePrevious, useSeries, useShapes, useSplit, useZoom, } from '../../hooks';
 import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
 import { getLegendComponents } from '../../hooks/useSeries/prepare-legend';
 import { getPreparedOptions } from '../../hooks/useSeries/prepare-options';
-import { useZoom } from '../../hooks/useZoom';
 import { getZoomedSeriesData } from '../../utils';
 import { hasAtLeastOneSeriesDataPerPlot } from './utils';
+const CLIP_PATH_BY_SERIES_TYPE = {
+    [SERIES_TYPE.Scatter]: false,
+};
 export function useChartInnerProps(props) {
     var _a;
-    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, svgContainer, width, updateZoomState, zoomState, } = props;
+    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, rangeSliderState, svgContainer, width, updateZoomState, zoomState, } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
     const { normalizedSeriesData, normalizedXAxis, normalizedYAxis } = useNormalizedOriginalData({
@@ -16,16 +19,17 @@ export function useChartInnerProps(props) {
         xAxis: data.xAxis,
         yAxis: data.yAxis,
     });
-    const { chart, title, colors } = useChartOptions({
+    const { chart, colors, title } = useChartOptions({
         chart: data.chart,
         colors: data.colors,
         seriesData: normalizedSeriesData,
         title: data.title,
+        xAxis: data.xAxis,
     });
     const preparedSeriesOptions = React.useMemo(() => {
         return getPreparedOptions(data.series.options);
     }, [data.series.options]);
-    const { preparedSeries: basePreparedSeries, preparedLegend, handleLegendItemClick, } = useSeries({
+    const { preparedSeries: allPreparedSeries, preparedLegend, handleLegendItemClick, } = useSeries({
         colors,
         legend: data.legend,
         originalSeriesData: normalizedSeriesData,
@@ -34,12 +38,12 @@ export function useChartInnerProps(props) {
     });
     const { preparedSeries, preparedShapesSeries } = React.useMemo(() => {
         return getZoomedSeriesData({
-            seriesData: basePreparedSeries,
+            seriesData: allPreparedSeries,
             xAxis: normalizedXAxis,
             yAxis: normalizedYAxis,
             zoomState,
         });
-    }, [basePreparedSeries, normalizedXAxis, normalizedYAxis, zoomState]);
+    }, [allPreparedSeries, normalizedXAxis, normalizedYAxis, zoomState]);
     const { legendConfig, legendItems } = React.useMemo(() => {
         if (!preparedLegend) {
             return { legendConfig: undefined, legendItems: [] };
@@ -77,6 +81,7 @@ export function useChartInnerProps(props) {
         boundsHeight,
         hasZoomX: Boolean(zoomState.x),
         hasZoomY: Boolean(zoomState.y),
+        rangeSliderState,
         series: preparedSeries,
         seriesOptions: preparedSeriesOptions,
         split: preparedSplit,
@@ -89,6 +94,7 @@ export function useChartInnerProps(props) {
     const { shapes, shapesData } = useShapes({
         boundsWidth,
         boundsHeight,
+        clipPathBySeriesType: CLIP_PATH_BY_SERIES_TYPE,
         dispatcher,
         series: preparedShapesSeries,
         seriesOptions: preparedSeriesOptions,
@@ -125,7 +131,10 @@ export function useChartInnerProps(props) {
         yAxis,
         yScale,
     });
-    const boundsOffsetTop = chart.margin.top;
+    const boundsOffsetTop = chart.margin.top +
+        ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'top'
+            ? preparedLegend.height + preparedLegend.margin
+            : 0);
     // We need to calculate the width of each left axis because the first axis can be hidden
     const boundsOffsetLeft = chart.margin.left +
         yAxis.reduce((acc, axis) => {
@@ -140,7 +149,7 @@ export function useChartInnerProps(props) {
         }, 0);
     const { x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
     return {
-        svgXPos: x,
+        allPreparedSeries,
         boundsHeight,
         boundsOffsetLeft,
         boundsOffsetTop,
@@ -149,14 +158,17 @@ export function useChartInnerProps(props) {
         isOutsideBounds,
         legendConfig,
         legendItems,
+        preparedChart: chart,
         preparedLegend,
         preparedSeries,
+        preparedSeriesOptions,
         preparedSplit,
         preparedZoom: chart.zoom,
         prevHeight,
         prevWidth,
         shapes,
         shapesData,
+        svgXPos: x,
         title,
         xAxis,
         xScale,

package/dist/cjs/components/ChartInner/useChartInnerState.d.ts

@@ -1,14 +1,19 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { PreparedTooltip, ZoomState } from '../../hooks';
+import type { PreparedRangeSlider, PreparedTooltip, RangeSliderState, ZoomState } from '../../hooks';
 type Props = {
     dispatcher: Dispatch<object>;
+    preparedRangeSlider: PreparedRangeSlider;
     tooltip?: PreparedTooltip;
 };
 export declare function useChartInnerState(props: Props): {
+    initialized: boolean;
+    rangeSliderState: RangeSliderState | undefined;
+    setInitialized: React.Dispatch<React.SetStateAction<boolean>>;
     tooltipPinned: boolean;
     togglePinTooltip: ((value: boolean, event: React.MouseEvent) => void) | undefined;
     unpinTooltip: (() => void) | undefined;
+    updateRangeSliderState: (nextRangeSliderState?: RangeSliderState) => void;
     updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
     zoomState: Partial<ZoomState>;
 };

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

@@ -3,9 +3,11 @@ import isEqual from 'lodash/isEqual';
 import { EventType, isMacintosh } from '../../utils';
 export function useChartInnerState(props) {
     var _a, _b;
-    const { dispatcher, tooltip } = props;
+    const { dispatcher, preparedRangeSlider, tooltip } = props;
     const [tooltipPinned, setTooltipPinned] = React.useState(false);
     const [zoomState, setZoomState] = React.useState({});
+    const [rangeSliderState, setRangeSliderState] = React.useState();
+    const [initialized, setInitialized] = React.useState(!preparedRangeSlider.enabled);
     const tooltipEnabled = tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled;
     const tooltipPinEnabled = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.pin) === null || _a === void 0 ? void 0 : _a.enabled;
     const modifierKey = (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.pin) === null || _b === void 0 ? void 0 : _b.modifierKey;
@@ -33,10 +35,24 @@ export function useChartInnerState(props) {
             setZoomState(nextZoomState);
         }
     }, [zoomState]);
+    const updateRangeSliderState = React.useCallback((nextRangeSliderState) => {
+        if (!isEqual(rangeSliderState, nextRangeSliderState)) {
+            setRangeSliderState(nextRangeSliderState
+                ? {
+                    max: nextRangeSliderState.max,
+                    min: nextRangeSliderState.min,
+                }
+                : undefined);
+        }
+    }, [rangeSliderState]);
     return {
+        initialized,
+        rangeSliderState,
+        setInitialized,
         tooltipPinned,
         togglePinTooltip: tooltipEnabled && tooltipPinEnabled ? togglePinTooltip : undefined,
         unpinTooltip: tooltipEnabled && tooltipPinEnabled ? unpinTooltip : undefined,
+        updateRangeSliderState,
         updateZoomState,
         zoomState,
     };

package/dist/cjs/components/ChartInner/utils.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { PreparedSeries } from '../../hooks';
-import type { PreparedAxis, PreparedZoom } from '../../hooks/useChartOptions/types';
+import type { PreparedAxis, PreparedSeries, PreparedZoom } from '../../hooks';
 export declare function hasAtLeastOneSeriesDataPerPlot(seriesData: PreparedSeries[], yAxes?: PreparedAxis[]): boolean;
 export declare function useAsyncState<T>(value: T, setState: () => Promise<T>): T;
 export declare function getResetZoomButtonStyle(args: {
@@ -11,3 +10,7 @@ export declare function getResetZoomButtonStyle(args: {
     node: HTMLElement | null;
     titleHeight?: number;
 } & PreparedZoom['resetButton']): React.CSSProperties;
+export declare function useDebouncedValue<T>(props: {
+    value: T;
+    delay?: number;
+}): T;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import debounce from 'lodash/debounce';
 import isEqual from 'lodash/isEqual';
 export function hasAtLeastOneSeriesDataPerPlot(seriesData, yAxes = []) {
     const hasDataMap = new Map();
@@ -107,3 +108,15 @@ export function getResetZoomButtonStyle(args) {
     }
     return style;
 }
+export function useDebouncedValue(props) {
+    const { value: propsValue, delay = 0 } = props;
+    const [value, setValue] = React.useState(propsValue);
+    React.useEffect(() => {
+        const debouncedSetValue = debounce(setValue, delay);
+        debouncedSetValue(propsValue);
+        return () => {
+            debouncedSetValue.cancel();
+        };
+    }, [propsValue, delay]);
+    return value;
+}

package/dist/cjs/components/RangeSlider/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { RangeSliderProps } from '../../hooks';
+import './styles.css';
+declare function RangeSliderComponent(props: RangeSliderProps): React.JSX.Element;
+export declare const RangeSlider: React.MemoExoticComponent<typeof RangeSliderComponent>;
+export {};

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useUniqId } from '@gravity-ui/uikit';
+import { useBrush, useRangeSlider } from '../../hooks';
+import { block } from '../../utils';
+import { getFramedPath } from './utils';
+import './styles.css';
+const b = block('range-slider');
+function RangeSliderComponent(props) {
+    const clipPathId = useUniqId();
+    const { brush, height, onBrushEnd, onOverlayClick, offsetLeft, offsetTop, preparedXAxis, preparedYAxis, selection, shapes, width, } = useRangeSlider(Object.assign(Object.assign({}, props), { clipPathId }));
+    const ref = React.useRef(null);
+    const areas = React.useMemo(() => {
+        if (!preparedXAxis || !(preparedYAxis === null || preparedYAxis === void 0 ? void 0 : preparedYAxis.length)) {
+            return [];
+        }
+        return [
+            {
+                extent: [
+                    [0, 0],
+                    [width, height],
+                ],
+            },
+        ];
+    }, [height, preparedXAxis, preparedYAxis, width]);
+    useBrush({
+        areas,
+        brushOptions: brush,
+        node: ref.current,
+        onBrushEnd,
+        selection,
+        type: 'x',
+    });
+    return (React.createElement("g", { className: b(), transform: `translate(${offsetLeft}, ${offsetTop})`, width: width, height: height, ref: ref },
+        React.createElement("defs", null,
+            React.createElement("clipPath", { id: clipPathId },
+                React.createElement("rect", { x: 0, y: 0, width: width, height: height }))),
+        React.createElement("path", { d: getFramedPath({ height, strokeWidth: 1, width }), fill: "var(--g-color-line-generic)" }),
+        React.createElement("g", { className: b('shapes') }, shapes),
+        React.createElement("rect", { height: height, className: b('clickable-overlay'), onClick: onOverlayClick, width: width, x: 0, y: 0 })));
+}
+export const RangeSlider = React.memo(RangeSliderComponent);

package/dist/cjs/components/RangeSlider/styles.css

@@ -0,0 +1,6 @@
+.gcharts-range-slider__shapes {
+  opacity: 0.5;
+}
+.gcharts-range-slider__clickable-overlay {
+  opacity: 0;
+}

package/dist/cjs/components/RangeSlider/utils.d.ts

@@ -0,0 +1,5 @@
+export declare function getFramedPath(args: {
+    height: number;
+    strokeWidth: number;
+    width: number;
+}): string;

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

@@ -0,0 +1,18 @@
+import { path } from 'd3';
+export function getFramedPath(args) {
+    const { height, strokeWidth, width } = args;
+    const p = path();
+    // Outer rectangle
+    p.moveTo(0, 0);
+    p.lineTo(width, 0);
+    p.lineTo(width, height);
+    p.lineTo(0, height);
+    p.closePath();
+    // Inner rectangle (cutout)
+    p.moveTo(strokeWidth, strokeWidth);
+    p.lineTo(strokeWidth, height - strokeWidth);
+    p.lineTo(width - strokeWidth, height - strokeWidth);
+    p.lineTo(width - strokeWidth, strokeWidth);
+    p.closePath();
+    return p.toString();
+}

package/dist/cjs/components/Tooltip/DefaultTooltipContent/index.js

@@ -151,7 +151,8 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
                     }
                     case 'pie':
                     case 'heatmap':
-                    case 'treemap': {
+                    case 'treemap':
+                    case 'funnel': {
                         const seriesData = data;
                         const formattedValue = getFormattedValue({
                             value: hoveredValues[i],

package/dist/cjs/components/Tooltip/DefaultTooltipContent/utils.d.ts

@@ -1,6 +1,6 @@
 import type { ChartSeriesData, ChartTooltip, ChartTooltipTotalsAggregationValue, ChartTooltipTotalsBuiltInAggregation, ChartXAxis, ChartYAxis, TooltipDataChunk, ValueFormat } from '../../../types';
 export type HoveredValue = string | number | null | undefined;
-export declare function getXRowData(data: ChartSeriesData, xAxis?: ChartXAxis | null): string | number | undefined;
+export declare function getXRowData(data: ChartSeriesData, xAxis?: ChartXAxis | null): string | number | null | undefined;
 export declare function getDefaultValueFormat({ axis, closestPointsRange, }: {
     axis?: ChartXAxis | ChartYAxis | null;
     closestPointsRange?: number;
@@ -14,7 +14,7 @@ export declare const getMeasureValue: ({ data, xAxis, yAxis, headerFormat, }: {
     value: string | null;
     formattedValue?: undefined;
 } | {
-    value: string | number | undefined;
+    value: string | number | null | undefined;
     formattedValue: string;
 } | null;
 export declare function getHoveredValues(args: {

package/dist/cjs/components/Tooltip/DefaultTooltipContent/utils.js

@@ -39,7 +39,7 @@ export function getDefaultValueFormat({ axis, closestPointsRange, }) {
 }
 export const getMeasureValue = ({ data, xAxis, yAxis, headerFormat, }) => {
     var _a, _b, _c, _d, _e, _f;
-    if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey', 'heatmap'].includes(item.series.type))) {
+    if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey', 'heatmap', 'funnel'].includes(item.series.type))) {
         return null;
     }
     if (data.some((item) => item.series.type === 'radar')) {
@@ -79,7 +79,8 @@ export function getHoveredValues(args) {
             case 'pie':
             case 'radar':
             case 'heatmap':
-            case 'treemap': {
+            case 'treemap':
+            case 'funnel': {
                 const seriesData = data;
                 return seriesData.value;
             }