@gravity-ui/charts 1.22.0 → 1.24.0

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/components/RangeSlider/styles.css

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

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

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

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

package/dist/esm/components/Tooltip/index.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { PreparedAxis, PreparedTooltip } from '../../hooks';
+import type { PreparedTooltip, PreparedXAxis, PreparedYAxis } from '../../hooks';
 import './styles.css';
 type TooltipProps = {
     dispatcher: Dispatch<object>;
     tooltip: PreparedTooltip;
     svgContainer: SVGSVGElement | null;
-    xAxis: PreparedAxis | null;
-    yAxis: PreparedAxis;
+    xAxis: PreparedXAxis | null;
+    yAxis: PreparedYAxis;
     tooltipPinned: boolean;
     onOutsideClick?: () => void;
 };

package/dist/esm/constants/chart-types.d.ts

@@ -1,4 +1,4 @@
-export declare const SeriesType: {
+export declare const SERIES_TYPE: {
     readonly Area: "area";
     readonly BarX: "bar-x";
     readonly BarY: "bar-y";
@@ -10,4 +10,6 @@ export declare const SeriesType: {
     readonly Sankey: "sankey";
     readonly Radar: "radar";
     readonly Heatmap: "heatmap";
+    readonly Funnel: "funnel";
 };
+export type SeriesType = (typeof SERIES_TYPE)[keyof typeof SERIES_TYPE];

package/dist/esm/constants/chart-types.js

@@ -1,4 +1,4 @@
-export const SeriesType = {
+export const SERIES_TYPE = {
     Area: 'area',
     BarX: 'bar-x',
     BarY: 'bar-y',
@@ -10,4 +10,5 @@ export const SeriesType = {
     Sankey: 'sankey',
     Radar: 'radar',
     Heatmap: 'heatmap',
+    Funnel: 'funnel',
 };

package/dist/esm/constants/defaults/brush.d.ts

@@ -0,0 +1,2 @@
+import type { ChartBrush, DeepRequired } from '../../types';
+export declare const brushDefaults: DeepRequired<ChartBrush>;

package/dist/esm/constants/defaults/brush.js

@@ -0,0 +1,15 @@
+const DEFAULT_BORDER_COLOR = 'var(--gcharts-brush-border-color)';
+export const brushDefaults = {
+    borderColor: DEFAULT_BORDER_COLOR,
+    borderWidth: 1,
+    handles: {
+        borderColor: DEFAULT_BORDER_COLOR,
+        borderWidth: 1,
+        enabled: true,
+        height: 15,
+        width: 8,
+    },
+    style: {
+        fillOpacity: 1,
+    },
+};

package/dist/esm/constants/defaults/index.d.ts

@@ -1,4 +1,5 @@
 export * from './axis';
+export * from './brush';
 export * from './data-labels';
 export * from './legend';
 export * from './series-options';

package/dist/esm/constants/defaults/index.js

@@ -1,4 +1,5 @@
 export * from './axis';
+export * from './brush';
 export * from './data-labels';
 export * from './legend';
 export * from './series-options';

package/dist/esm/constants/defaults/series-options.d.ts

@@ -1,4 +1,4 @@
-import type { ChartSeriesOptions } from '../../types';
+import type { ChartSeriesOptions, ChartSeriesRangeSliderOptions } from '../../types';
 type DefaultBarXSeriesOptions = Partial<ChartSeriesOptions['bar-x']> & {
     'bar-x': {
         barMaxWidth: number;
@@ -23,4 +23,5 @@ type DefaultWaterfallSeriesOptions = Partial<ChartSeriesOptions['waterfall']> &
 };
 export type SeriesOptionsDefaults = Partial<ChartSeriesOptions> & DefaultBarXSeriesOptions & DefaultBarYSeriesOptions & DefaultWaterfallSeriesOptions;
 export declare const seriesOptionsDefaults: SeriesOptionsDefaults;
+export declare const seriesRangeSliderOptionsDefaults: Required<ChartSeriesRangeSliderOptions>;
 export {};

package/dist/esm/constants/defaults/series-options.js

@@ -125,4 +125,15 @@ export const seriesOptionsDefaults = {
             },
         },
     },
+    funnel: {
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+        },
+    },
+};
+export const seriesRangeSliderOptionsDefaults = {
+    visible: true,
 };

package/dist/esm/constants/index.d.ts

@@ -9,3 +9,4 @@ export * from './palette';
 export * from './symbol-types';
 export * from './tooltip';
 export * from './typography';
+export * from './zoom';

package/dist/esm/constants/index.js

@@ -9,3 +9,4 @@ export * from './palette';
 export * from './symbol-types';
 export * from './tooltip';
 export * from './typography';
+export * from './zoom';

package/dist/esm/constants/zoom.d.ts

@@ -0,0 +1,6 @@
+export declare const ZOOM_TYPE: {
+    readonly X: "x";
+    readonly XY: "xy";
+    readonly Y: "y";
+};
+export type ZoomType = (typeof ZOOM_TYPE)[keyof typeof ZOOM_TYPE];

package/dist/esm/constants/zoom.js

@@ -0,0 +1,5 @@
+export const ZOOM_TYPE = {
+    X: 'x',
+    XY: 'xy',
+    Y: 'y',
+};

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

@@ -1,11 +1,16 @@
 export * from './useAxis';
+export * from './useAxis/types';
 export * from './useAxisScales';
+export * from './useBrush';
+export * from './useBrush/types';
 export * from './useChartDimensions';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
 export * from './useCrosshair';
 export * from './useNormalizedOriginalData';
 export * from './usePrevious';
+export * from './useRangeSlider';
+export * from './useRangeSlider/types';
 export * from './useSeries';
 export * from './useSeries/types';
 export * from './useShapes';

package/dist/esm/hooks/index.js

@@ -1,11 +1,16 @@
 export * from './useAxis';
+export * from './useAxis/types';
 export * from './useAxisScales';
+export * from './useBrush';
+export * from './useBrush/types';
 export * from './useChartDimensions';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
 export * from './useCrosshair';
 export * from './useNormalizedOriginalData';
 export * from './usePrevious';
+export * from './useRangeSlider';
+export * from './useRangeSlider/types';
 export * from './useSeries';
 export * from './useSeries/types';
 export * from './useShapes';

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

@@ -1,6 +1,7 @@
 import type { ChartXAxis, ChartYAxis } from '../../types';
-import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
+import type { PreparedChart } from '../useChartOptions/types';
 import type { PreparedLegend, PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
+import type { PreparedXAxis, PreparedYAxis } from './types';
 interface UseAxesProps {
     height: number;
     preparedChart: PreparedChart;
@@ -13,7 +14,7 @@ interface UseAxesProps {
     yAxis?: ChartYAxis[];
 }
 export declare function useAxis(props: UseAxesProps): {
-    xAxis: PreparedAxis | null;
-    yAxis: PreparedAxis[];
+    xAxis: PreparedXAxis | null;
+    yAxis: PreparedYAxis[];
 };
 export {};

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import isEqual from 'lodash/isEqual';
-import { getPreparedXAxis } from '../useChartOptions/x-axis';
-import { getPreparedYAxis } from '../useChartOptions/y-axis';
+import { getPreparedXAxis } from './x-axis';
+import { getPreparedYAxis } from './y-axis';
 export function useAxis(props) {
     const { boundsHeight, height, preparedChart, preparedLegend, preparedSeries, preparedSeriesOptions, width, xAxis, yAxis, } = props;
     const [axesState, setValue] = React.useState({ xAxis: null, yAxis: [] });

package/dist/esm/hooks/useAxis/range-slider.d.ts

@@ -0,0 +1,5 @@
+import type { ChartXAxis } from '../../types';
+import type { PreparedRangeSlider } from './types';
+export declare function getPreparedRangeSlider({ xAxis }: {
+    xAxis?: ChartXAxis;
+}): PreparedRangeSlider;

package/dist/esm/hooks/useAxis/range-slider.js

@@ -0,0 +1,16 @@
+import merge from 'lodash/merge';
+import { brushDefaults } from '../../constants';
+const DEFAULT_RANGE_SLIDER_HEIGHT = 40;
+const DEFAULT_RANGE_SLIDER_MARGIN = 10;
+export function getPreparedRangeSlider({ xAxis }) {
+    var _a, _b, _c;
+    const rangeSlider = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider;
+    const enabled = (xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) === 'category' ? false : ((_a = rangeSlider === null || rangeSlider === void 0 ? void 0 : rangeSlider.enabled) !== null && _a !== void 0 ? _a : false);
+    return {
+        brush: merge({}, brushDefaults, rangeSlider === null || rangeSlider === void 0 ? void 0 : rangeSlider.brush),
+        defaultRange: rangeSlider === null || rangeSlider === void 0 ? void 0 : rangeSlider.defaultRange,
+        enabled,
+        height: (_b = rangeSlider === null || rangeSlider === void 0 ? void 0 : rangeSlider.height) !== null && _b !== void 0 ? _b : DEFAULT_RANGE_SLIDER_HEIGHT,
+        margin: (_c = rangeSlider === null || rangeSlider === void 0 ? void 0 : rangeSlider.margin) !== null && _c !== void 0 ? _c : DEFAULT_RANGE_SLIDER_MARGIN,
+    };
+}

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

@@ -0,0 +1,66 @@
+import type { DashStyle } from '../../constants';
+import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisRangeSlider, ChartAxisTitleAlignment, ChartAxisType, DeepRequired, PlotLayerPlacement } from '../../types';
+type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation' | 'html'>> & {
+    style: BaseTextStyle;
+    rotation: number;
+    height: number;
+    width: number;
+    lineHeight: number;
+    maxWidth: number;
+};
+export type PreparedAxisPlotBand = Required<AxisPlotBand> & {
+    label: {
+        text: string;
+        style: BaseTextStyle;
+        padding: number;
+    };
+};
+type PreparedAxisCrosshair = Required<AxisCrosshair>;
+export type PreparedAxisPlotLine = {
+    value: number;
+    color: string;
+    width: number;
+    dashStyle: DashStyle;
+    opacity: number;
+    layerPlacement: PlotLayerPlacement;
+    label: {
+        text: string;
+        style: BaseTextStyle;
+        padding: number;
+    };
+};
+export type PreparedRangeSlider = DeepRequired<Omit<ChartAxisRangeSlider, 'defaultRange'>> & {
+    defaultRange?: ChartAxisRangeSlider['defaultRange'];
+};
+type PreparedBaseAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotBands'> & {
+    type: ChartAxisType;
+    labels: PreparedAxisLabels;
+    title: {
+        height: number;
+        width: number;
+        text: string;
+        margin: number;
+        style: BaseTextStyle;
+        align: ChartAxisTitleAlignment;
+        maxRowCount: number;
+    };
+    min?: number;
+    grid: {
+        enabled: boolean;
+    };
+    maxPadding: number;
+    ticks: {
+        pixelInterval?: number;
+    };
+    position: 'left' | 'right' | 'top' | 'bottom';
+    plotIndex: number;
+    plotLines: PreparedAxisPlotLine[];
+    plotBands: PreparedAxisPlotBand[];
+    crosshair: PreparedAxisCrosshair;
+};
+export type PreparedXAxis = PreparedBaseAxis & {
+    rangeSlider: PreparedRangeSlider;
+};
+export type PreparedYAxis = PreparedBaseAxis;
+export type PreparedAxis = PreparedXAxis | PreparedYAxis;
+export {};

package/dist/esm/hooks/useAxis/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/hooks/{useChartOptions → useAxis}/utils.d.ts

@@ -1,4 +1,4 @@
-import type { AxisPlot, ChartAxis } from '../../types';
+import type { AxisPlot } from '../../types';
 export declare function prepareAxisPlotLabel(d: AxisPlot): {
     text: string;
     style: {
@@ -8,4 +8,3 @@ export declare function prepareAxisPlotLabel(d: AxisPlot): {
     };
     padding: number;
 };
-export declare function getAxisCategories({ categories: originalCategories, max, min, order, }?: Partial<ChartAxis>): string[] | undefined;