@gravity-ui/charts 1.20.0 → 1.21.0

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/utils/chart/get-closest-data.js

@@ -105,7 +105,7 @@ export function getClosestPoints(args) {
             case 'bar-y': {
                 const points = list;
                 const sorted = sort(points, (p) => p.y);
-                const closestYIndex = bisector((p) => p.y).center(sorted, pointerY);
+                const closestYIndex = bisector((p) => p.y + p.height / 2).center(sorted, pointerY);
                 const closestYPoint = sorted[closestYIndex];
                 let selectedPoints = [];
                 let closestPointXValue = -1;

package/dist/cjs/utils/chart/series/sorting.d.ts

@@ -1,6 +1,6 @@
 import type { ChartAxis, ChartSeries } from '../../../types';
-export declare function getSortedSeriesData({ seriesData, yAxes, xAxis, }: {
+export declare function getSortedSeriesData({ seriesData, xAxis, yAxis, }: {
     seriesData: ChartSeries[];
-    yAxes?: ChartAxis[];
     xAxis?: ChartAxis;
+    yAxis?: ChartAxis[];
 }): ChartSeries[];

package/dist/cjs/utils/chart/series/sorting.js

@@ -20,11 +20,11 @@ function applyAxisCategoriesOrder({ series, axis, key, }) {
     });
     return Object.assign(Object.assign({}, series), { data: newSeriesData });
 }
-export function getSortedSeriesData({ seriesData, yAxes, xAxis, }) {
+export function getSortedSeriesData({ seriesData, xAxis, yAxis, }) {
     return seriesData.map((s) => {
-        const yAxis = yAxes === null || yAxes === void 0 ? void 0 : yAxes[0];
+        const yAxisItem = yAxis === null || yAxis === void 0 ? void 0 : yAxis[0];
         let sortedSeries = s;
-        sortedSeries = applyAxisCategoriesOrder({ series: sortedSeries, axis: yAxis, key: 'y' });
+        sortedSeries = applyAxisCategoriesOrder({ series: sortedSeries, axis: yAxisItem, key: 'y' });
         sortedSeries = applyAxisCategoriesOrder({ series: sortedSeries, axis: xAxis, key: 'x' });
         switch (sortedSeries.type) {
             case SeriesType.Area: {

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

@@ -1,11 +1,12 @@
+import type { PreparedAxis, PreparedSeries } from '../../hooks';
 import type { ZoomState } from '../../hooks/useZoom/types';
-import type { ChartSeries, ChartXAxis, ChartYAxis } from '../../types';
+import type { ChartXAxis, ChartYAxis } from '../../types';
 export declare function getZoomedSeriesData(args: {
-    seriesData: ChartSeries[];
+    seriesData: PreparedSeries[];
     zoomState: Partial<ZoomState>;
-    xAxis?: ChartXAxis;
-    yAxes?: ChartYAxis[];
+    xAxis?: ChartXAxis | PreparedAxis | null;
+    yAxis?: ChartYAxis[] | PreparedAxis[] | null;
 }): {
-    zoomedSeriesData: ChartSeries[];
-    zoomedShapesSeriesData: ChartSeries[];
+    preparedSeries: PreparedSeries[];
+    preparedShapesSeries: PreparedSeries[];
 };

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

@@ -1,5 +1,4 @@
 import { SeriesType } from '../../constants';
-import { getAxisCategories } from '../../hooks/useChartOptions/utils';
 const SERIES_TYPE_WITH_HIDDEN_POINTS = [SeriesType.Area, SeriesType.Line];
 // eslint-disable-next-line complexity
 function isValueInRange(args) {
@@ -21,7 +20,7 @@ function isValueInRange(args) {
             return numValue >= numMin && numValue <= numMax;
         }
         case 'category': {
-            const categories = getAxisCategories(axis) || [];
+            const categories = (axis === null || axis === void 0 ? void 0 : axis.categories) || [];
             if (typeof value === 'string' && typeof min === 'number' && typeof max === 'number') {
                 const valueIndex = categories.indexOf(value);
                 if (min === -1 || max === -1 || valueIndex === -1) {
@@ -42,10 +41,13 @@ function isValueInRange(args) {
         }
     }
 }
+function isPreparedZoomableSeries(series) {
+    return Array.isArray(series.data);
+}
 export function getZoomedSeriesData(args) {
-    const { seriesData, xAxis, yAxes, zoomState } = args;
+    const { seriesData, xAxis, yAxis, zoomState } = args;
     if (Object.keys(zoomState).length <= 0) {
-        return { zoomedSeriesData: seriesData, zoomedShapesSeriesData: seriesData };
+        return { preparedSeries: seriesData, preparedShapesSeries: seriesData };
     }
     const zoomedSeriesData = [];
     const zoomedShapesSeriesData = [];
@@ -56,6 +58,9 @@ export function getZoomedSeriesData(args) {
         const filteredShapesData = SERIES_TYPE_WITH_HIDDEN_POINTS.includes(seriesItem.type) && (xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) !== 'category'
             ? []
             : undefined;
+        if (!isPreparedZoomableSeries(seriesItem)) {
+            return;
+        }
         seriesItem.data.forEach((point, i) => {
             const prevPoint = seriesItem.data[i - 1];
             const isFirstPoint = i === 0;
@@ -81,7 +86,7 @@ export function getZoomedSeriesData(args) {
                     const [yMin, yMax] = zoomStateY;
                     const y = 'y' in point ? point.y : undefined;
                     inYRange = isValueInRange({
-                        axis: yAxes === null || yAxes === void 0 ? void 0 : yAxes[yAxisIndex],
+                        axis: yAxis === null || yAxis === void 0 ? void 0 : yAxis[yAxisIndex],
                         value: y,
                         min: yMin,
                         max: yMax,
@@ -111,5 +116,8 @@ export function getZoomedSeriesData(args) {
         zoomedSeriesData.push(Object.assign(Object.assign({}, seriesItem), { data: filteredData }));
         zoomedShapesSeriesData.push(Object.assign(Object.assign({}, seriesItem), { data: filteredShapesData || filteredData }));
     });
-    return { zoomedSeriesData, zoomedShapesSeriesData };
+    return {
+        preparedSeries: zoomedSeriesData,
+        preparedShapesSeries: zoomedShapesSeriesData,
+    };
 }

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

@@ -67,7 +67,14 @@ export const AxisY = (props) => {
             }
             if (tickData.svgLabel) {
                 const label = tickData.svgLabel;
-                const textSelection = tickSelection.append('text');
+                const textSelection = tickSelection
+                    .append('text')
+                    .style('transform', [
+                    `translate(${label.x}px, ${label.y}px)`,
+                    label.angle ? `rotate(${label.angle}deg)` : '',
+                ]
+                    .filter(Boolean)
+                    .join(' '));
                 if (label.title) {
                     textSelection.append('title').html(label.title);
                 }