@gravity-ui/charts 1.9.0 → 1.10.1

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

@@ -6,7 +6,7 @@ type TooltipProps = {
     dispatcher: Dispatch<object>;
     tooltip: PreparedTooltip;
     svgContainer: SVGSVGElement | null;
-    xAxis: PreparedAxis;
+    xAxis: PreparedAxis | null;
     yAxis: PreparedAxis;
     tooltipPinned: boolean;
     onOutsideClick?: () => void;

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

@@ -0,0 +1 @@
+export * from './zoom';

package/dist/cjs/hooks/hooks-utils/index.js

@@ -0,0 +1 @@
+export * from './zoom';

package/dist/cjs/hooks/hooks-utils/zoom.d.ts

@@ -0,0 +1,8 @@
+import type { ChartSeries, ChartXAxis, ChartYAxis } from '../../types';
+import type { ZoomState } from '../useZoom/types';
+export declare function getZoomedSeriesData(args: {
+    seriesData: ChartSeries[];
+    zoomState: Partial<ZoomState>;
+    xAxis?: ChartXAxis;
+    yAxises?: ChartYAxis[];
+}): ChartSeries[];

package/dist/cjs/hooks/hooks-utils/zoom.js

@@ -0,0 +1,81 @@
+// eslint-disable-next-line complexity
+function isValueInRange(args) {
+    const { axis, max, min, value } = args;
+    if (value === undefined) {
+        return false;
+    }
+    const axisType = (axis === null || axis === void 0 ? void 0 : axis.type) || 'linear';
+    switch (axisType) {
+        case 'datetime':
+        case 'linear':
+        case 'logarithmic': {
+            const numValue = typeof value === 'string' ? Number(value) : value;
+            const numMin = typeof min === 'string' ? Number(min) : min;
+            const numMax = typeof max === 'string' ? Number(max) : max;
+            if (Number.isNaN(numValue) || Number.isNaN(numMin) || Number.isNaN(numMax)) {
+                return false;
+            }
+            return numValue >= numMin && numValue <= numMax;
+        }
+        case 'category': {
+            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) {
+                    return false;
+                }
+                return valueIndex >= Math.min(min, max) && valueIndex <= Math.max(min, max);
+            }
+            if (typeof value === 'number' && typeof min === 'number' && typeof max === 'number') {
+                if (min === -1 || max === -1) {
+                    return false;
+                }
+                return value >= Math.min(min, max) && value <= Math.max(min, max);
+            }
+            return false;
+        }
+        default: {
+            return false;
+        }
+    }
+}
+export function getZoomedSeriesData(args) {
+    const { seriesData, xAxis, yAxises, zoomState } = args;
+    if (Object.keys(zoomState).length < 0) {
+        return seriesData;
+    }
+    return seriesData.map((seriesItem) => {
+        const filteredData = seriesItem.data.reduce((acc, point) => {
+            let inXRange = true;
+            let inYRange = true;
+            if (zoomState.x) {
+                const [xMin, xMax] = zoomState.x;
+                const x = 'x' in point ? point.x : undefined;
+                inXRange = isValueInRange({
+                    axis: xAxis,
+                    value: x,
+                    min: xMin,
+                    max: xMax,
+                });
+            }
+            if (zoomState.y) {
+                const yAxisIndex = 'yAxis' in seriesItem && typeof seriesItem.yAxis === 'number'
+                    ? seriesItem.yAxis
+                    : 0;
+                const [yMin, yMax] = zoomState.y[yAxisIndex];
+                const y = 'y' in point ? point.y : undefined;
+                inYRange = isValueInRange({
+                    axis: yAxises === null || yAxises === void 0 ? void 0 : yAxises[yAxisIndex],
+                    value: y,
+                    min: yMin,
+                    max: yMax,
+                });
+            }
+            if (inXRange && inYRange) {
+                acc.push(point);
+            }
+            return acc;
+        }, []);
+        return Object.assign(Object.assign({}, seriesItem), { data: filteredData });
+    });
+}

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

@@ -8,16 +8,18 @@ type Args = {
     boundsWidth: number;
     boundsHeight: number;
     series: PreparedSeries[];
-    xAxis: PreparedAxis;
+    xAxis: PreparedAxis | null;
     yAxis: PreparedAxis[];
     split: PreparedSplit;
+    hasZoomX?: boolean;
+    hasZoomY?: boolean;
 };
 type ReturnValue = {
     xScale?: ChartScale;
     yScale?: ChartScale[];
 };
 export declare function createYScale(axis: PreparedAxis, series: PreparedSeries[], boundsHeight: number): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
-export declare function createXScale(axis: PreparedAxis | ChartAxis, series: (PreparedSeries | ChartSeries)[], boundsWidth: number): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
+export declare function createXScale(axis: PreparedAxis | ChartAxis, series: (PreparedSeries | ChartSeries)[], boundsWidth: number, hasZoomX?: boolean): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
 /**
  * Uses to create scales for axis related series
  */

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

@@ -86,7 +86,7 @@ function calculateXAxisPadding(series) {
     });
     return result;
 }
-export function createXScale(axis, series, boundsWidth) {
+export function createXScale(axis, series, boundsWidth, hasZoomX) {
     const xMin = get(axis, 'min');
     const xMax = getDefaultMaxXAxisValue(series);
     const xType = get(axis, 'type', DEFAULT_AXIS_TYPE);
@@ -104,7 +104,11 @@ export function createXScale(axis, series, boundsWidth) {
                 const xMinValue = typeof xMin === 'number' ? xMin : domainXMin;
                 const xMaxValue = typeof xMax === 'number' ? Math.max(xMax, domainXMax) : domainXMax;
                 const scaleFn = xType === 'logarithmic' ? scaleLog : scaleLinear;
-                return scaleFn().domain([xMinValue, xMaxValue]).range(xRange).nice();
+                const scale = scaleFn().domain([xMinValue, xMaxValue]).range(xRange);
+                if (!hasZoomX) {
+                    scale.nice();
+                }
+                return scale;
             }
             break;
         }
@@ -126,13 +130,21 @@ export function createXScale(axis, series, boundsWidth) {
         case 'datetime': {
             if (xTimestamps) {
                 const [xMin, xMax] = extent(xTimestamps);
-                return scaleUtc().domain([xMin, xMax]).range(xRange).nice();
+                const scale = scaleUtc().domain([xMin, xMax]).range(xRange);
+                if (!hasZoomX) {
+                    scale.nice();
+                }
+                return scale;
             }
             else {
                 const domain = getDomainDataXBySeries(series);
                 if (isNumericalArrayData(domain)) {
                     const [xMin, xMax] = extent(domain);
-                    return scaleUtc().domain([xMin, xMax]).range(xRange).nice();
+                    const scale = scaleUtc().domain([xMin, xMax]).range(xRange);
+                    if (!hasZoomX) {
+                        scale.nice();
+                    }
+                    return scale;
                 }
             }
             break;
@@ -141,13 +153,13 @@ export function createXScale(axis, series, boundsWidth) {
     throw new Error('Failed to create xScale');
 }
 const createScales = (args) => {
-    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split } = args;
+    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split, hasZoomX } = args;
     let visibleSeries = getOnlyVisibleSeries(series);
     // Reassign to all series in case of all series unselected,
     // otherwise we will get an empty space without grid
     visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;
     return {
-        xScale: createXScale(xAxis, visibleSeries, boundsWidth),
+        xScale: xAxis ? createXScale(xAxis, visibleSeries, boundsWidth, hasZoomX) : undefined,
         yScale: yAxis.map((axis, index) => {
             const axisSeries = series.filter((s) => {
                 const seriesAxisIndex = get(s, 'yAxis', 0);
@@ -163,7 +175,7 @@ const createScales = (args) => {
  * Uses to create scales for axis related series
  */
 export const useAxisScales = (args) => {
-    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split } = args;
+    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split, hasZoomX, hasZoomY } = args;
     return React.useMemo(() => {
         let xScale;
         let yScale;
@@ -176,8 +188,10 @@ export const useAxisScales = (args) => {
                 xAxis,
                 yAxis,
                 split,
+                hasZoomX,
+                hasZoomY,
             }));
         }
         return { xScale, yScale };
-    }, [boundsWidth, boundsHeight, series, xAxis, yAxis, split]);
+    }, [boundsWidth, boundsHeight, series, xAxis, yAxis, split, hasZoomX, hasZoomY]);
 };

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

@@ -0,0 +1,3 @@
+import type { UseBrushProps } from './types';
+import './styles.css';
+export declare function useBrush(props: UseBrushProps): void;

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { brush, brushX, brushY, select } from 'd3';
+import { block } from '../../utils';
+import './styles.css';
+const b = block('brush');
+export function useBrush(props) {
+    const { areas, brushOptions, node, type, onBrushStart, onBrush, onBrushEnd } = props;
+    React.useEffect(() => {
+        if (!node || !areas.length) {
+            return () => { };
+        }
+        const brushes = [];
+        const brushGroupSelections = [];
+        const nodeSelection = select(node);
+        areas.forEach((area) => {
+            let brushFn;
+            switch (type) {
+                case 'x': {
+                    brushFn = brushX;
+                    break;
+                }
+                case 'y': {
+                    brushFn = brushY;
+                    break;
+                }
+                case 'xy':
+                default: {
+                    brushFn = brush;
+                    break;
+                }
+            }
+            const brushInstance = brushFn()
+                .extent(area.extent)
+                .on('start', function () {
+                onBrushStart === null || onBrushStart === void 0 ? void 0 : onBrushStart.call(this, brushInstance);
+            })
+                .on('brush', function (event) {
+                onBrush === null || onBrush === void 0 ? void 0 : onBrush.call(this, brushInstance, event.selection);
+            })
+                .on('end', function (event) {
+                onBrushEnd === null || onBrushEnd === void 0 ? void 0 : onBrushEnd.call(this, brushInstance, event.selection);
+            });
+            brushes.push(brushInstance);
+            const brushGroupSelection = nodeSelection
+                .append('g')
+                .attr('class', b())
+                .on('pointerdown', function () {
+                this.setAttribute('data-gc-brush-pressed', 'true');
+            })
+                .on('pointerup', function () {
+                this.removeAttribute('data-gc-brush-pressed');
+            });
+            brushGroupSelection.call(brushInstance);
+            if (brushOptions) {
+                brushGroupSelection
+                    .selectAll('.selection')
+                    .attr('fill-opacity', brushOptions.style.fillOpacity);
+            }
+            brushGroupSelections.push(brushGroupSelection);
+        });
+        return () => {
+            brushes.forEach((brushInstance) => {
+                brushInstance.on('start', null).on('brush', null).on('end', null);
+            });
+            brushGroupSelections.forEach((selection) => {
+                selection === null || selection === void 0 ? void 0 : selection.remove();
+            });
+        };
+    }, [areas, brushOptions, node, type, onBrushStart, onBrush, onBrushEnd]);
+}

package/dist/cjs/hooks/useBrush/styles.css

@@ -0,0 +1,10 @@
+.gcharts-brush {
+  --gcharts-brush-color: rgba(51, 92, 173, 0.25);
+}
+.gcharts-brush:not([data-gc-brush-pressed=true]) .overlay {
+  cursor: default;
+}
+.gcharts-brush .selection {
+  fill: var(--gcharts-brush-color);
+  stroke: none;
+}

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

@@ -0,0 +1,24 @@
+import type { BrushBehavior } from 'd3';
+import type { PreparedZoom } from '../useChartOptions/types';
+type BrushType = PreparedZoom['type'];
+type BrushSelection = [number, number] | [[number, number], [number, number]];
+export interface BrushArea {
+    /**
+     * Array of points [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner
+     * and [x1, y1] is the bottom-right corner.
+     *
+     * The brush extent determines the size of the invisible overlay and also constrains the brush selection;
+     * the brush selection cannot go outside the brush extent.
+     */
+    extent: [[number, number], [number, number]];
+}
+export interface UseBrushProps {
+    areas: BrushArea[];
+    node: SVGGElement | null;
+    type?: BrushType;
+    brushOptions?: PreparedZoom['brush'];
+    onBrushStart?: (this: SVGGElement, brushInstance: BrushBehavior<unknown>) => void;
+    onBrush?: (this: SVGGElement, brushInstance: BrushBehavior<unknown>, selection: BrushSelection) => void;
+    onBrushEnd?: (this: SVGGElement, brushInstance: BrushBehavior<unknown>, selection: BrushSelection | null) => void;
+}
+export {};

package/dist/cjs/hooks/useBrush/types.js

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

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

@@ -5,9 +5,9 @@ type Args = {
     width: number;
     height: number;
     margin: ChartMargin;
-    preparedLegend: PreparedLegend;
-    preparedXAxis: PreparedAxis;
-    preparedYAxis: PreparedAxis[];
+    preparedLegend: PreparedLegend | null;
+    preparedXAxis: PreparedAxis | null;
+    preparedYAxis: PreparedAxis[] | null;
     preparedSeries: PreparedSeries[];
 };
 export declare const useChartDimensions: (args: Args) => {

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

@@ -5,10 +5,10 @@ export { getBoundsWidth } from './utils';
 const getBottomOffset = (args) => {
     const { hasAxisRelatedSeries, preparedLegend, preparedXAxis } = args;
     let result = 0;
-    if (preparedLegend.enabled) {
+    if (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) {
         result += preparedLegend.height + preparedLegend.margin;
     }
-    if (!preparedXAxis.visible) {
+    if (!(preparedXAxis === null || preparedXAxis === void 0 ? void 0 : preparedXAxis.visible)) {
         return result;
     }
     if (hasAxisRelatedSeries) {

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

@@ -2,9 +2,9 @@ import type { PreparedAxis, PreparedChart } from '../../hooks';
 export declare const getBoundsWidth: (args: {
     chartWidth: number;
     chartMargin: PreparedChart["margin"];
-    preparedYAxis: PreparedAxis[];
+    preparedYAxis: PreparedAxis[] | null;
 }) => number;
 export declare function getYAxisWidth(axis: PreparedAxis | undefined): number;
 export declare function getWidthOccupiedByYAxis(args: {
-    preparedAxis: PreparedAxis[];
+    preparedAxis: PreparedAxis[] | null;
 }): number;

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

@@ -1,6 +1,7 @@
-import type { ChartData } from '../../types';
+import type { ChartData, ChartSeries } from '../../types';
 import type { PreparedChart, PreparedTitle } from './types';
 export declare const getPreparedChart: (args: {
     chart: ChartData["chart"];
+    seriesData: ChartSeries[];
     preparedTitle?: PreparedTitle;
 }) => PreparedChart;

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

@@ -1,4 +1,6 @@
 import get from 'lodash/get';
+import intersection from 'lodash/intersection';
+import { SeriesType } from '../../constants';
 const getMarginTop = (args) => {
     const { chart, preparedTitle } = args;
     let marginTop = get(chart, 'margin.top', 0);
@@ -11,12 +13,88 @@ const getMarginRight = (args) => {
     const { chart } = args;
     return get(chart, 'margin.right', 0);
 };
+function mapSeriesTypeToZoomType(seriesType) {
+    switch (seriesType) {
+        case SeriesType.Area: {
+            return ['x', 'y', 'xy'];
+        }
+        case SeriesType.BarX: {
+            return ['x'];
+        }
+        case SeriesType.BarY: {
+            return ['y'];
+        }
+        case SeriesType.Line: {
+            return ['x', 'y', 'xy'];
+        }
+        case SeriesType.Scatter: {
+            return ['x', 'y', 'xy'];
+        }
+        case SeriesType.Waterfall: {
+            return ['x', 'y', 'xy'];
+        }
+        default: {
+            return [];
+        }
+    }
+}
+function getDefaultZoomType(seriesType) {
+    switch (seriesType) {
+        case SeriesType.BarY: {
+            return 'y';
+        }
+        case SeriesType.Scatter: {
+            return 'xy';
+        }
+        default: {
+            return 'x';
+        }
+    }
+}
+function getZoomType(args) {
+    const { seriesData, zoomType } = args;
+    const possibleDefaultZoomTypes = seriesData.map((s) => {
+        return getDefaultZoomType(s.type);
+    });
+    const availableDefaultZoomTypes = intersection(possibleDefaultZoomTypes);
+    if (zoomType) {
+        const possibleZoomTypes = seriesData.map((s) => {
+            return mapSeriesTypeToZoomType(s.type);
+        });
+        const availableZoomTypes = intersection(...possibleZoomTypes);
+        if (availableZoomTypes.includes(zoomType)) {
+            return zoomType;
+        }
+    }
+    if (availableDefaultZoomTypes.length) {
+        return availableDefaultZoomTypes[0];
+    }
+    return undefined;
+}
+function getPreparedZoom(args) {
+    var _a;
+    const { zoom, seriesData } = args;
+    if (!(zoom === null || zoom === void 0 ? void 0 : zoom.enabled)) {
+        return null;
+    }
+    const type = getZoomType({ seriesData, zoomType: zoom.type });
+    if (!type) {
+        return null;
+    }
+    return {
+        type,
+        brush: {
+            style: Object.assign({ fillOpacity: 1 }, (_a = zoom === null || zoom === void 0 ? void 0 : zoom.brush) === null || _a === void 0 ? void 0 : _a.style),
+        },
+    };
+}
 export const getPreparedChart = (args) => {
-    const { chart, preparedTitle } = args;
+    const { chart, preparedTitle, seriesData } = args;
     const marginTop = getMarginTop({ chart, preparedTitle });
     const marginBottom = get(chart, 'margin.bottom', 0);
     const marginLeft = get(chart, 'margin.left', 0);
     const marginRight = getMarginRight({ chart });
+    const zoom = getPreparedZoom({ zoom: chart === null || chart === void 0 ? void 0 : chart.zoom, seriesData });
     return {
         margin: {
             top: marginTop,
@@ -24,5 +102,6 @@ export const getPreparedChart = (args) => {
             bottom: marginBottom,
             left: marginLeft,
         },
+        zoom,
     };
 };

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

@@ -4,13 +4,14 @@ import { getPreparedChart } from './chart';
 import { getPreparedTitle } from './title';
 import { getPreparedTooltip } from './tooltip';
 export const useChartOptions = (args) => {
-    const { data: { chart, title, tooltip, colors }, } = args;
+    const { data: { chart, title, tooltip, colors, series }, } = args;
     const options = React.useMemo(() => {
         const preparedTitle = getPreparedTitle({ title });
         const preparedTooltip = getPreparedTooltip({ tooltip });
         const preparedChart = getPreparedChart({
             chart,
             preparedTitle,
+            seriesData: series.data,
         });
         return {
             chart: preparedChart,
@@ -18,6 +19,6 @@ export const useChartOptions = (args) => {
             tooltip: preparedTooltip,
             colors: colors !== null && colors !== void 0 ? colors : DEFAULT_PALETTE,
         };
-    }, [chart, colors, title, tooltip]);
+    }, [chart, colors, title, tooltip, series.data]);
     return options;
 };

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

@@ -1,5 +1,5 @@
 import type { DashStyle } from '../../constants';
-import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin, PlotLayerPlacement } from '../../types';
+import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin, ChartZoom, DeepRequired, PlotLayerPlacement } from '../../types';
 type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation'>> & {
     style: BaseTextStyle;
     rotation: number;
@@ -8,8 +8,10 @@ type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style'
     lineHeight: number;
     maxWidth: number;
 };
+export type PreparedZoom = DeepRequired<Omit<ChartZoom, 'enabled'>>;
 export type PreparedChart = {
     margin: ChartMargin;
+    zoom: PreparedZoom | null;
 };
 export type PreparedAxisPlotBand = Required<AxisPlotBand>;
 export type PreparedAxisCrosshair = Required<AxisCrosshair>;

package/dist/cjs/hooks/useChartOptions/x-axis.d.ts

@@ -1,7 +1,7 @@
 import type { ChartSeries, ChartXAxis } from '../../types';
 import type { PreparedAxis } from './types';
-export declare const getPreparedXAxis: ({ xAxis, series, width, }: {
+export declare const getPreparedXAxis: ({ xAxis, seriesData, width, }: {
     xAxis?: ChartXAxis;
-    series: ChartSeries[];
+    seriesData: ChartSeries[];
     width: number;
-}) => PreparedAxis;
+}) => Promise<PreparedAxis>;

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

@@ -2,8 +2,8 @@ import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_X_AXIS, calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
-function getLabelSettings({ axis, series, width, autoRotation = true, }) {
-    const scale = createXScale(axis, series, width);
+async function getLabelSettings({ axis, seriesData, width, autoRotation = true, }) {
+    const scale = createXScale(axis, seriesData, width);
     const tickCount = getTicksCount({ axis, range: width });
     const ticks = getXAxisItems({
         scale: scale,
@@ -27,11 +27,11 @@ function getLabelSettings({ axis, series, width, autoRotation = true, }) {
     const defaultRotation = overlapping && autoRotation ? -45 : 0;
     const rotation = axis.labels.rotation || defaultRotation;
     const labelsHeight = rotation
-        ? getLabelsSize({
+        ? (await getLabelsSize({
             labels,
             style: axis.labels.style,
             rotation,
-        }).maxHeight
+        })).maxHeight
         : axis.labels.lineHeight;
     const maxHeight = rotation ? calculateCos(rotation) * axis.labels.maxWidth : labelsHeight;
     return { height: Math.min(maxHeight, labelsHeight), rotation };
@@ -48,17 +48,17 @@ function getAxisMin(axis, series) {
     }
     return min;
 }
-export const getPreparedXAxis = ({ xAxis, series, width, }) => {
+export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
     var _a;
     const titleText = get(xAxis, 'title.text', '');
     const titleStyle = Object.assign(Object.assign({}, xAxisTitleDefaults.style), get(xAxis, 'title.style'));
     const titleMaxRowsCount = get(xAxis, 'title.maxRowCount', xAxisTitleDefaults.maxRowCount);
-    const estimatedTitleRows = wrapText({
+    const estimatedTitleRows = (await wrapText({
         text: titleText,
         style: titleStyle,
         width,
-    }).slice(0, titleMaxRowsCount);
-    const titleSize = getLabelsSize({
+    })).slice(0, titleMaxRowsCount);
+    const titleSize = await getLabelsSize({
         labels: [titleText],
         style: titleStyle,
     });
@@ -92,7 +92,7 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
             align: get(xAxis, 'title.align', xAxisTitleDefaults.align),
             maxRowCount: get(xAxis, 'title.maxRowCount', xAxisTitleDefaults.maxRowCount),
         },
-        min: getAxisMin(xAxis, series),
+        min: getAxisMin(xAxis, seriesData),
         maxPadding: get(xAxis, 'maxPadding', 0.01),
         grid: {
             enabled: get(xAxis, 'grid.enabled', true),
@@ -128,9 +128,9 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
         },
         visible: get(xAxis, 'visible', true),
     };
-    const { height, rotation } = getLabelSettings({
+    const { height, rotation } = await getLabelSettings({
         axis: preparedXAxis,
-        series,
+        seriesData,
         width,
         autoRotation: (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _a === void 0 ? void 0 : _a.autoRotation,
     });

package/dist/cjs/hooks/useChartOptions/y-axis.d.ts

@@ -1,7 +1,7 @@
 import type { ChartSeries, ChartYAxis } from '../../types';
 import type { PreparedAxis } from './types';
-export declare const getPreparedYAxis: ({ series, yAxis, height, }: {
-    series: ChartSeries[];
+export declare const getPreparedYAxis: ({ seriesData, yAxis, height, }: {
+    seriesData: ChartSeries[];
     yAxis: ChartYAxis[] | undefined;
     height: number;
-}) => PreparedAxis[];
+}) => Promise<PreparedAxis[]>;