@gravity-ui/charts 1.20.0 → 1.22.0

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

@@ -1,12 +1,16 @@
+export * from './useAxis';
+export * from './useAxisScales';
 export * from './useChartDimensions';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
-export * from './useAxisScales';
+export * from './useCrosshair';
+export * from './useNormalizedOriginalData';
 export * from './usePrevious';
 export * from './useSeries';
 export * from './useSeries/types';
 export * from './useShapes';
-export * from './useTooltip';
 export * from './useSplit';
 export * from './useSplit/types';
-export * from './useCrosshair';
+export * from './useTooltip';
+export * from './useZoom';
+export * from './useZoom/types';

package/dist/cjs/hooks/index.js

@@ -1,12 +1,16 @@
+export * from './useAxis';
+export * from './useAxisScales';
 export * from './useChartDimensions';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
-export * from './useAxisScales';
+export * from './useCrosshair';
+export * from './useNormalizedOriginalData';
 export * from './usePrevious';
 export * from './useSeries';
 export * from './useSeries/types';
 export * from './useShapes';
-export * from './useTooltip';
 export * from './useSplit';
 export * from './useSplit/types';
-export * from './useCrosshair';
+export * from './useTooltip';
+export * from './useZoom';
+export * from './useZoom/types';

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

@@ -0,0 +1,19 @@
+import type { ChartXAxis, ChartYAxis } from '../../types';
+import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
+import type { PreparedLegend, PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
+interface UseAxesProps {
+    height: number;
+    preparedChart: PreparedChart;
+    preparedLegend: PreparedLegend | null;
+    preparedSeries: PreparedSeries[];
+    preparedSeriesOptions: PreparedSeriesOptions;
+    width: number;
+    boundsHeight?: number;
+    xAxis?: ChartXAxis;
+    yAxis?: ChartYAxis[];
+}
+export declare function useAxis(props: UseAxesProps): {
+    xAxis: PreparedAxis | null;
+    yAxis: PreparedAxis[];
+};
+export {};

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import isEqual from 'lodash/isEqual';
+import { getPreparedXAxis } from '../useChartOptions/x-axis';
+import { getPreparedYAxis } from '../useChartOptions/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: [] });
+    const axesStateRunRef = React.useRef(0);
+    const prevAxesStateValue = React.useRef(axesState);
+    const axesStateReady = React.useRef(false);
+    React.useEffect(() => {
+        axesStateRunRef.current++;
+        axesStateReady.current = false;
+        (async function () {
+            const currentRun = axesStateRunRef.current;
+            const seriesData = preparedSeries.filter((s) => s.visible);
+            const preparedXAxis = await getPreparedXAxis({
+                xAxis,
+                width,
+                seriesData,
+                seriesOptions: preparedSeriesOptions,
+            });
+            let estimatedBoundsHeight = boundsHeight !== null && boundsHeight !== void 0 ? boundsHeight : height;
+            if (preparedXAxis && typeof boundsHeight !== 'number') {
+                estimatedBoundsHeight =
+                    height -
+                        (preparedXAxis.title.height +
+                            preparedXAxis.title.margin +
+                            preparedXAxis.labels.margin +
+                            preparedXAxis.labels.height +
+                            (preparedLegend ? preparedLegend.height + preparedLegend.margin : 0) +
+                            preparedChart.margin.top +
+                            preparedChart.margin.bottom);
+            }
+            const preparedYAxis = await getPreparedYAxis({
+                height,
+                boundsHeight: estimatedBoundsHeight,
+                width,
+                seriesData,
+                yAxis,
+            });
+            const newStateValue = { xAxis: preparedXAxis, yAxis: preparedYAxis };
+            if (axesStateRunRef.current === currentRun) {
+                if (!isEqual(prevAxesStateValue.current, newStateValue)) {
+                    setValue(newStateValue);
+                    prevAxesStateValue.current = newStateValue;
+                }
+                axesStateReady.current = true;
+            }
+        })();
+    }, [
+        boundsHeight,
+        height,
+        preparedChart.margin,
+        preparedLegend,
+        preparedSeries,
+        preparedSeriesOptions,
+        width,
+        xAxis,
+        yAxis,
+    ]);
+    return axesStateReady.current ? axesState : { xAxis: null, yAxis: [] };
+}

package/dist/cjs/hooks/useChartOptions/chart.js

@@ -72,7 +72,7 @@ function getZoomType(args) {
     return undefined;
 }
 function getPreparedZoom(args) {
-    var _a;
+    var _a, _b, _c, _d;
     const { zoom, seriesData } = args;
     if (!(zoom === null || zoom === void 0 ? void 0 : zoom.enabled)) {
         return null;
@@ -86,6 +86,11 @@ function getPreparedZoom(args) {
         brush: {
             style: Object.assign({ fillOpacity: 1 }, (_a = zoom === null || zoom === void 0 ? void 0 : zoom.brush) === null || _a === void 0 ? void 0 : _a.style),
         },
+        resetButton: {
+            align: ((_b = zoom === null || zoom === void 0 ? void 0 : zoom.resetButton) === null || _b === void 0 ? void 0 : _b.align) || 'top-right',
+            offset: Object.assign({ x: 0, y: 0 }, (_c = zoom === null || zoom === void 0 ? void 0 : zoom.resetButton) === null || _c === void 0 ? void 0 : _c.offset),
+            relativeTo: ((_d = zoom === null || zoom === void 0 ? void 0 : zoom.resetButton) === null || _d === void 0 ? void 0 : _d.relativeTo) || 'chart-box',
+        },
     };
 }
 export const getPreparedChart = (args) => {

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

@@ -1,13 +1,10 @@
-import type { ChartSeries, ChartTitle, ChartTooltip, ChartXAxis, ChartYAxis, ChartOptions as GeneralChartOptions } from '../../types';
+import type { ChartSeries, ChartTitle, ChartOptions as GeneralChartOptions } from '../../types';
 import type { ChartOptions } from './types';
 type Args = {
     seriesData: ChartSeries[];
     chart?: GeneralChartOptions;
     colors?: string[];
     title?: ChartTitle;
-    tooltip?: ChartTooltip;
-    yAxes?: ChartYAxis[];
-    xAxis?: ChartXAxis;
 };
 export declare const useChartOptions: (args: Args) => ChartOptions;
 export {};

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

@@ -2,12 +2,10 @@ import React from 'react';
 import { DEFAULT_PALETTE } from '../../constants';
 import { getPreparedChart } from './chart';
 import { getPreparedTitle } from './title';
-import { getPreparedTooltip } from './tooltip';
 export const useChartOptions = (args) => {
-    const { chart, colors, seriesData, title, tooltip, yAxes, xAxis } = args;
+    const { chart, colors, seriesData, title } = args;
     const options = React.useMemo(() => {
         const preparedTitle = getPreparedTitle({ title });
-        const preparedTooltip = getPreparedTooltip({ tooltip, seriesData, yAxes, xAxis });
         const preparedChart = getPreparedChart({
             chart,
             preparedTitle,
@@ -17,8 +15,7 @@ export const useChartOptions = (args) => {
             colors: colors !== null && colors !== void 0 ? colors : DEFAULT_PALETTE,
             chart: preparedChart,
             title: preparedTitle,
-            tooltip: preparedTooltip,
         };
-    }, [chart, colors, seriesData, title, tooltip, xAxis, yAxes]);
+    }, [chart, colors, seriesData, title]);
     return options;
 };

package/dist/cjs/hooks/useChartOptions/title.js

@@ -3,10 +3,12 @@ import { getHorizontalSvgTextHeight } from '../../utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
 const TITLE_PADDINGS = 8 * 2;
 export const getPreparedTitle = ({ title, }) => {
+    var _a, _b, _c, _d, _e, _f;
     const titleText = get(title, 'text');
     const titleStyle = {
-        fontSize: get(title, 'style.fontSize', DEFAULT_TITLE_FONT_SIZE),
-        fontWeight: get(title, 'style.fontWeight'),
+        fontSize: (_b = (_a = title === null || title === void 0 ? void 0 : title.style) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : DEFAULT_TITLE_FONT_SIZE,
+        fontWeight: (_d = (_c = title === null || title === void 0 ? void 0 : title.style) === null || _c === void 0 ? void 0 : _c.fontWeight) !== null && _d !== void 0 ? _d : 'var(--g-text-subheader-font-weight)',
+        fontColor: (_f = (_e = title === null || title === void 0 ? void 0 : title.style) === null || _e === void 0 ? void 0 : _e.fontColor) !== null && _f !== void 0 ? _f : 'var(--g-color-text-primary)',
     };
     const titleHeight = titleText
         ? getHorizontalSvgTextHeight({ text: titleText, style: titleStyle }) + TITLE_PADDINGS

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

@@ -69,7 +69,6 @@ export type PreparedTooltip = ChartData['tooltip'] & {
 };
 export type ChartOptions = {
     chart: PreparedChart;
-    tooltip: PreparedTooltip;
     title?: PreparedTitle;
     colors: string[];
 };

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

@@ -8,7 +8,4 @@ export declare function prepareAxisPlotLabel(d: AxisPlot): {
     };
     padding: number;
 };
-export declare function getAxisCategories({ categories, order, }?: {
-    categories?: string[];
-    order?: ChartAxis['order'];
-}): string[] | undefined;
+export declare function getAxisCategories({ categories: originalCategories, max, min, order, }?: Partial<ChartAxis>): string[] | undefined;

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

@@ -8,19 +8,42 @@ export function prepareAxisPlotLabel(d) {
         padding: (_e = (_d = d.label) === null || _d === void 0 ? void 0 : _d.padding) !== null && _e !== void 0 ? _e : 5,
     };
 }
-export function getAxisCategories({ categories, order, } = {}) {
-    if (categories) {
+function getNormalizedIndexMinMax(args) {
+    const { max, min } = args;
+    if (typeof min === 'number' && typeof max === 'number') {
+        return min > max ? [max, min] : [min, max];
+    }
+    return [min, max];
+}
+function getNormalizedStartEnd(args) {
+    const { length, max, min } = args;
+    const [normalizedMin, normalizedMax] = getNormalizedIndexMinMax({ max, min });
+    const start = typeof normalizedMin === 'number' && normalizedMin >= 0 ? normalizedMin : 0;
+    const end = typeof normalizedMax === 'number' && normalizedMax <= length ? normalizedMax + 1 : length;
+    return [start, end];
+}
+export function getAxisCategories({ categories: originalCategories, max, min, order, } = {}) {
+    if (originalCategories) {
+        let categories = originalCategories;
         switch (order) {
             case 'reverse': {
-                return reverse(categories);
+                categories = reverse(originalCategories);
+                break;
             }
             case 'sortAsc': {
-                return sort(categories, (a, b) => ascending(a, b));
+                categories = sort(originalCategories, (a, b) => ascending(a, b));
+                break;
             }
             case 'sortDesc': {
-                return sort(categories, (a, b) => descending(a, b));
+                categories = sort(originalCategories, (a, b) => descending(a, b));
+                break;
             }
         }
+        if (typeof min === 'number' || typeof max === 'number') {
+            const [start, end] = getNormalizedStartEnd({ length: categories.length, max, min });
+            categories = categories.slice(start, end);
+        }
+        return categories;
     }
-    return categories;
+    return originalCategories;
 }

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

@@ -2,7 +2,7 @@ import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, SeriesType, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
 import { calculateCos, calculateNumericProperty, formatAxisTickLabel, getAxisItems, getClosestPointsRange, getDefaultDateFormat, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, hasOverlappingLabels, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
-import { getAxisCategories, prepareAxisPlotLabel } from './utils';
+import { prepareAxisPlotLabel } from './utils';
 async function setLabelSettings({ axis, seriesData, seriesOptions, width, autoRotation = true, }) {
     const scale = createXScale({ axis, series: seriesData, seriesOptions, boundsWidth: width });
     if (!scale) {
@@ -98,7 +98,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width
             html: labelsHtml,
         },
         lineColor: get(xAxis, 'lineColor'),
-        categories: getAxisCategories(xAxis),
+        categories: xAxis === null || xAxis === void 0 ? void 0 : xAxis.categories,
         timestamps: get(xAxis, 'timestamps'),
         title: {
             text: titleText,

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

@@ -3,7 +3,7 @@ import { getTickValues } from '../../components/AxisY/utils';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, SeriesType, axisCrosshairDefaults, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
 import { calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getDefaultMinYAxisValue, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
-import { getAxisCategories, prepareAxisPlotLabel } from './utils';
+import { prepareAxisPlotLabel } from './utils';
 const getAxisLabelMaxWidth = async (args) => {
     const { axis, seriesData, height } = args;
     if (!axis.labels.enabled) {
@@ -50,7 +50,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
     if (!hasAxisRelatedSeries) {
         return Promise.resolve([]);
     }
-    return Promise.all(axisItems.map(async (axisItem) => {
+    return Promise.all(axisItems.map(async (axisItem, axisIndex) => {
         var _a, _b, _c, _d, _e, _f, _g;
         const plotIndex = get(axisItem, 'plotIndex', 0);
         const firstPlotAxis = !axisByPlot[plotIndex];
@@ -59,6 +59,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
         }
         axisByPlot[plotIndex].push(axisItem);
         const defaultAxisPosition = firstPlotAxis ? 'left' : 'right';
+        const axisSeriesData = seriesData.filter((s) => get(s, 'yAxis', 0) === axisIndex);
         const labelsEnabled = get(axisItem, 'labels.enabled', true);
         const labelsStyle = {
             fontSize: get(axisItem, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
@@ -77,7 +78,8 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
         })).slice(0, titleMaxRowsCount);
         const titleSize = await getLabelsSize({ labels: [titleText], style: titleStyle });
         const axisType = get(axisItem, 'type', DEFAULT_AXIS_TYPE);
-        const shouldHideGrid = axisItem.visible === false || seriesData.some((s) => s.type === SeriesType.Heatmap);
+        const shouldHideGrid = axisItem.visible === false ||
+            axisSeriesData.some((s) => s.type === SeriesType.Heatmap);
         const preparedAxis = {
             type: axisType,
             labels: {
@@ -97,7 +99,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 html: labelsHtml,
             },
             lineColor: get(axisItem, 'lineColor'),
-            categories: getAxisCategories(axisItem),
+            categories: axisItem.categories,
             timestamps: get(axisItem, 'timestamps'),
             title: {
                 text: titleText,
@@ -108,9 +110,9 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 align: get(axisItem, 'title.align', yAxisTitleDefaults.align),
                 maxRowCount: titleMaxRowsCount,
             },
-            min: (_c = get(axisItem, 'min')) !== null && _c !== void 0 ? _c : getDefaultMinYAxisValue(seriesData),
+            min: (_c = get(axisItem, 'min')) !== null && _c !== void 0 ? _c : getDefaultMinYAxisValue(axisSeriesData),
             max: get(axisItem, 'max'),
-            maxPadding: get(axisItem, 'maxPadding', getMaxPaddingBySeries({ series: seriesData })),
+            maxPadding: get(axisItem, 'maxPadding', getMaxPaddingBySeries({ series: axisSeriesData })),
             grid: {
                 enabled: shouldHideGrid
                     ? false
@@ -159,14 +161,11 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
         if (labelsEnabled) {
             const { height: labelsHeight, width: labelsWidth } = await getAxisLabelMaxWidth({
                 axis: preparedAxis,
-                seriesData,
+                seriesData: axisSeriesData,
                 height: boundsHeight,
             });
             preparedAxis.labels.height = labelsHeight;
-            preparedAxis.labels.width =
-                labelsWidth > preparedAxis.labels.maxWidth
-                    ? preparedAxis.labels.maxWidth
-                    : labelsWidth;
+            preparedAxis.labels.width = Math.min(preparedAxis.labels.maxWidth, labelsWidth);
         }
         return preparedAxis;
     }));

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

@@ -0,0 +1,40 @@
+import type { ChartData } from '../../types';
+interface UseOriginalDataProps {
+    seriesData: ChartData['series']['data'];
+    xAxis: ChartData['xAxis'];
+    yAxis: ChartData['yAxis'];
+}
+export declare function useNormalizedOriginalData(props: UseOriginalDataProps): {
+    normalizedSeriesData: import("../../types").ChartSeries[];
+    normalizedXAxis: {
+        categories: string[] | undefined;
+        crosshair?: import("../../types").AxisCrosshair;
+        timestamps?: number[];
+        type?: import("../../types").ChartAxisType;
+        labels?: import("../../types").ChartAxisLabels;
+        lineColor?: string;
+        title?: {
+            text?: string;
+            style?: Partial<import("../../types").BaseTextStyle>;
+            margin?: number;
+            align?: import("../../types").ChartAxisTitleAlignment;
+            maxRowCount?: number;
+        };
+        min?: number;
+        max?: number;
+        grid?: {
+            enabled?: boolean;
+        };
+        ticks?: {
+            pixelInterval?: number;
+            interval?: number | string;
+        };
+        maxPadding?: number;
+        plotLines?: import("../../types").AxisPlotLine[];
+        plotBands?: import("../../types").AxisPlotBand[];
+        visible?: boolean;
+        order?: "sortAsc" | "sortDesc" | "reverse";
+    };
+    normalizedYAxis: import("../../types").ChartYAxis[] | undefined;
+};
+export {};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { getSortedSeriesData } from '../../utils';
+import { getAxisCategories } from '../useChartOptions/utils';
+export function useNormalizedOriginalData(props) {
+    const normalizedSeriesData = React.useMemo(() => {
+        return getSortedSeriesData({
+            seriesData: props.seriesData,
+            xAxis: props.xAxis,
+            yAxis: props.yAxis,
+        });
+    }, [props.seriesData, props.xAxis, props.yAxis]);
+    const normalizedXAxis = React.useMemo(() => {
+        var _a;
+        let categories = (_a = props.xAxis) === null || _a === void 0 ? void 0 : _a.categories;
+        if (props.xAxis && props.xAxis.categories) {
+            categories = getAxisCategories(props.xAxis);
+        }
+        return Object.assign(Object.assign({}, props.xAxis), { categories });
+    }, [props.xAxis]);
+    const normalizedYAxis = React.useMemo(() => {
+        if (Array.isArray(props.yAxis) && props.yAxis.some((axis) => axis.categories)) {
+            return props.yAxis.map((axis) => {
+                let categories = axis.categories;
+                if (axis.categories) {
+                    categories = getAxisCategories(axis);
+                }
+                return Object.assign(Object.assign({}, axis), { categories });
+            });
+        }
+        return props.yAxis;
+    }, [props.yAxis]);
+    return { normalizedSeriesData, normalizedXAxis, normalizedYAxis };
+}

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

@@ -13,13 +13,4 @@ export declare const useSeries: (args: Args) => {
     preparedSeries: PreparedSeries[];
     handleLegendItemClick: OnLegendItemClick;
 };
-export declare const useShapeSeries: ({ seriesData, seriesOptions, colors, preparedLegend, activeLegendItems, }: {
-    colors: string[];
-    seriesData: ChartData["series"]["data"];
-    seriesOptions: ChartData["series"]["options"];
-    activeLegendItems: string[];
-    preparedLegend?: PreparedLegend | null;
-}) => {
-    preparedSeries: PreparedSeries[];
-};
 export {};

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

@@ -93,21 +93,3 @@ export const useSeries = (args) => {
         handleLegendItemClick,
     };
 };
-export const useShapeSeries = ({ seriesData, seriesOptions, colors, preparedLegend, activeLegendItems, }) => {
-    const [preparedSeries, setPreparedSeries] = React.useState([]);
-    React.useEffect(() => {
-        (async () => {
-            const items = await getPreparedSeries({
-                seriesData,
-                seriesOptions,
-                preparedLegend,
-                colors,
-            });
-            setPreparedSeries(items);
-        })();
-    }, [seriesData, seriesOptions, preparedLegend, colors]);
-    const chartSeries = useVisibleSeries({ preparedSeries, activeLegendItems });
-    return {
-        preparedSeries: chartSeries,
-    };
-};

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

@@ -326,6 +326,9 @@ export type PreparedRadarSeries = {
     };
 } & BasePreparedSeries;
 export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries | PreparedSankeySeries | PreparedRadarSeries | PreparedHeatmapSeries;
+export type PreparedZoomableSeries = Extract<PreparedSeries, {
+    data: Array<unknown>;
+}>;
 export type PreparedSeriesOptions = SeriesOptionsDefaults;
 export type StackedSeries = BarXSeries | AreaSeries | BarYSeries;
 export {};

package/dist/cjs/hooks/useShapes/bar-x/prepare-data.js

@@ -118,6 +118,10 @@ export const prepareBarXData = async (args) => {
                 let xCenter;
                 if (xAxis.type === 'category') {
                     const xBandScale = xScale;
+                    const xBandScaleDomain = xBandScale.domain();
+                    if (xBandScaleDomain.indexOf(xValue) === -1) {
+                        continue;
+                    }
                     xCenter = (xBandScale(xValue) || 0) + xBandScale.bandwidth() / 2;
                 }
                 else {

package/dist/cjs/hooks/useShapes/bar-y/prepare-data.js

@@ -67,6 +67,10 @@ export async function prepareBarYData(args) {
                 let center;
                 if (yAxis[0].type === 'category') {
                     const bandScale = yScale;
+                    const bandScaleDomain = bandScale.domain();
+                    if (bandScaleDomain.indexOf(yValue) === -1) {
+                        return;
+                    }
                     center = (bandScale(yValue) || 0) + bandSize / 2;
                 }
                 else {

package/dist/cjs/hooks/useShapes/scatter/prepare-data.d.ts

@@ -2,11 +2,11 @@ import type { ChartScale } from '../../useAxisScales';
 import type { PreparedAxis } from '../../useChartOptions/types';
 import type { PreparedScatterSeries } from '../../useSeries/types';
 import type { PreparedScatterData } from './types';
-export declare const prepareScatterData: (args: {
+export declare function prepareScatterData(args: {
     series: PreparedScatterSeries[];
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
     yScale: (ChartScale | undefined)[];
     isOutsideBounds: (x: number, y: number) => boolean;
-}) => PreparedScatterData[];
+}): PreparedScatterData[];

package/dist/cjs/hooks/useShapes/scatter/prepare-data.js

@@ -1,9 +1,38 @@
 import get from 'lodash/get';
+import { getDataCategoryValue } from '../../../utils';
 import { getXValue, getYValue } from '../utils';
-const getFilteredLinearScatterData = (data) => {
+function getFilteredLinearScatterData(data) {
     return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
-};
-export const prepareScatterData = (args) => {
+}
+function getFilteredCategoryScatterData(args) {
+    const { data, xAxis, xScale, yAxis, yScale } = args;
+    const xDomain = xScale.domain();
+    const xCategories = get(xAxis, 'categories', []);
+    const yDomain = yScale.domain();
+    const yCategories = get(yAxis, 'categories', []);
+    return data.filter((d) => {
+        let xInRange = true;
+        let yInRange = true;
+        if (xAxis.type === 'category') {
+            const dataCategory = getDataCategoryValue({
+                axisDirection: 'x',
+                categories: xCategories,
+                data: d,
+            });
+            xInRange = xDomain.indexOf(dataCategory) !== -1;
+        }
+        if (yAxis.type === 'category') {
+            const dataCategory = getDataCategoryValue({
+                axisDirection: 'y',
+                categories: yCategories,
+                data: d,
+            });
+            yInRange = yDomain.indexOf(dataCategory) !== -1;
+        }
+        return xInRange && yInRange;
+    });
+}
+export function prepareScatterData(args) {
     const { series, xAxis, xScale, yAxis, yScale, isOutsideBounds } = args;
     return series.reduce((acc, s) => {
         const yAxisIndex = get(s, 'yAxis', 0);
@@ -13,7 +42,13 @@ export const prepareScatterData = (args) => {
             return acc;
         }
         const filteredData = xAxis.type === 'category' || seriesYAxis.type === 'category'
-            ? s.data
+            ? getFilteredCategoryScatterData({
+                data: s.data,
+                xAxis,
+                xScale,
+                yAxis: seriesYAxis,
+                yScale: seriesYScale,
+            })
             : getFilteredLinearScatterData(s.data);
         filteredData.forEach((d) => {
             var _a;
@@ -39,4 +74,4 @@ export const prepareScatterData = (args) => {
         });
         return acc;
     }, []);
-};
+}

package/dist/cjs/types/chart/axis.d.ts

@@ -65,9 +65,27 @@ export interface ChartAxis {
          */
         maxRowCount?: number;
     };
-    /** The minimum value of the axis. If undefined the min value is automatically calculate. */
+    /**
+     * The minimum value of the axis. If undefined the min value is automatically calculated.
+     *
+     * The value type depends on the axis scale:
+     * - For `linear` and `logarithmic` axes: numeric value
+     * - For `datetime` axes: timestamp (milliseconds since Unix epoch)
+     * - For `category` axes: index of the element in the categories array (which has been processed according to the specified `order` property)
+     *
+     * Note: min/max is not supported for category axes in waterfall and heatmap visualizations.
+     */
     min?: number;
-    /** The maximum value of the axis. If undefined the max value is automatically calculate. */
+    /**
+     * The maximum value of the axis. If undefined the max value is automatically calculated.
+     *
+     * The value type depends on the axis scale:
+     * - For `linear` and `logarithmic` axes: numeric value
+     * - For `datetime` axes: timestamp (milliseconds since Unix epoch)
+     * - For `category` axes: index of the element in the categories array (which has been processed according to the specified `order` property)
+     *
+     * Note: min/max is not supported for category axes in waterfall and heatmap visualizations.
+     */
     max?: number;
     /** The grid lines settings.
      * Unavailable for some visualizations, such as a heatmap.

package/dist/cjs/types/chart/zoom.d.ts

@@ -33,4 +33,33 @@ export interface ChartZoom {
             fillOpacity?: number;
         };
     };
+    /**
+     * Reset zoom button configuration.
+     * The button appears only after the zoom has been applied.
+     */
+    resetButton?: {
+        /**
+         * The alignment of the button.
+         *
+         * @default 'top-right'
+         */
+        align?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+        /**
+         * The offset of the button.
+         *
+         * @default {x: 0, y: 0}
+         */
+        offset?: {
+            x?: number;
+            y?: number;
+        };
+        /**
+         * The box to which the button is positioned relative to.
+         * - `chart-box` refers to the entire chart area, including titles and legends.
+         * - `plot-box` refers to the area where the series are drawn.
+         *
+         * @default 'chart-box'
+         */
+        relativeTo?: 'chart-box' | 'plot-box';
+    };
 }