@gravity-ui/charts 1.9.0 → 1.10.1

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/hooks/useBrush/types.js

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

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

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

@@ -2,12 +2,12 @@ import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisCrosshairDefaults, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
-const getAxisLabelMaxWidth = (args) => {
-    const { axis, series } = args;
+const getAxisLabelMaxWidth = async (args) => {
+    const { axis, seriesData } = args;
     if (!axis.labels.enabled) {
         return 0;
     }
-    const scale = createYScale(axis, series, 1);
+    const scale = createYScale(axis, seriesData, 1);
     const ticks = getScaleTicks(scale);
     // FIXME: it is necessary to filter data, since we do not draw overlapping ticks
     const step = getClosestPointsRange(axis, ticks);
@@ -16,17 +16,18 @@ const getAxisLabelMaxWidth = (args) => {
         value: tick,
         step,
     }));
-    return getLabelsSize({
+    const size = await getLabelsSize({
         labels,
         style: axis.labels.style,
         rotation: axis.labels.rotation,
-    }).maxWidth;
+    });
+    return size.maxWidth;
 };
-function getAxisMin(axis, series) {
+function getAxisMin(axis, seriesData) {
     const min = axis === null || axis === void 0 ? void 0 : axis.min;
     if (typeof min === 'undefined' &&
-        (series === null || series === void 0 ? void 0 : series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type)))) {
-        return series.reduce((minValue, s) => {
+        (seriesData === null || seriesData === void 0 ? void 0 : seriesData.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type)))) {
+        return seriesData.reduce((minValue, s) => {
             switch (s.type) {
                 case 'waterfall': {
                     const minSubTotal = s.data.reduce((res, d) => Math.min(res, getWaterfallPointSubtotal(d, s) || 0), 0);
@@ -42,14 +43,14 @@ function getAxisMin(axis, series) {
     }
     return min;
 }
-export const getPreparedYAxis = ({ series, yAxis, height, }) => {
+export const getPreparedYAxis = ({ seriesData, yAxis, height, }) => {
     const axisByPlot = [];
     const axisItems = yAxis || [{}];
-    const hasAxisRelatedSeries = series.some(isAxisRelatedSeries);
+    const hasAxisRelatedSeries = seriesData.some(isAxisRelatedSeries);
     if (!hasAxisRelatedSeries) {
-        return [];
+        return Promise.resolve([]);
     }
-    return axisItems.map((axisItem) => {
+    return Promise.all(axisItems.map(async (axisItem) => {
         var _a;
         const plotIndex = get(axisItem, 'plotIndex', 0);
         const firstPlotAxis = !axisByPlot[plotIndex];
@@ -65,12 +66,12 @@ export const getPreparedYAxis = ({ series, yAxis, height, }) => {
         const titleText = get(axisItem, 'title.text', '');
         const titleStyle = Object.assign(Object.assign({}, yAxisTitleDefaults.style), get(axisItem, 'title.style'));
         const titleMaxRowsCount = get(axisItem, 'title.maxRowCount', yAxisTitleDefaults.maxRowCount);
-        const estimatedTitleRows = wrapText({
+        const estimatedTitleRows = (await wrapText({
             text: titleText,
             style: titleStyle,
             width: height,
-        }).slice(0, titleMaxRowsCount);
-        const titleSize = getLabelsSize({ labels: [titleText], style: titleStyle });
+        })).slice(0, titleMaxRowsCount);
+        const titleSize = await getLabelsSize({ labels: [titleText], style: titleStyle });
         const axisType = get(axisItem, 'type', DEFAULT_AXIS_TYPE);
         const preparedAxis = {
             type: axisType,
@@ -103,7 +104,7 @@ export const getPreparedYAxis = ({ series, yAxis, height, }) => {
                 align: get(axisItem, 'title.align', yAxisTitleDefaults.align),
                 maxRowCount: titleMaxRowsCount,
             },
-            min: getAxisMin(axisItem, series),
+            min: getAxisMin(axisItem, seriesData),
             maxPadding: get(axisItem, 'maxPadding', 0.05),
             grid: {
                 enabled: get(axisItem, 'grid.enabled', firstPlotAxis ||
@@ -141,8 +142,11 @@ export const getPreparedYAxis = ({ series, yAxis, height, }) => {
             visible: get(axisItem, 'visible', true),
         };
         if (labelsEnabled) {
-            preparedAxis.labels.width = getAxisLabelMaxWidth({ axis: preparedAxis, series });
+            preparedAxis.labels.width = await getAxisLabelMaxWidth({
+                axis: preparedAxis,
+                seriesData,
+            });
         }
         return preparedAxis;
-    });
+    }));
 };

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

@@ -1,7 +1,7 @@
 import type { Dispatch } from 'd3';
 import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
 type Props = {
-    xAxis: PreparedAxis;
+    xAxis: PreparedAxis | null;
     yAxes: PreparedAxis[];
     width: number;
     height: number;

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

@@ -5,7 +5,7 @@ import { useCrosshairHover } from './useCrosshairHover';
 export const useCrosshair = (props) => {
     var _a, _b;
     const { xScale, plotElement, yScale, dispatcher, xAxis, yAxes, split, width, height: totalHeight, boundsOffsetTop, boundsOffsetLeft, } = props;
-    const crosshairEnabled = xAxis.crosshair.enabled || yAxes.some((axis) => axis.crosshair.enabled);
+    const crosshairEnabled = (xAxis === null || xAxis === void 0 ? void 0 : xAxis.crosshair.enabled) || yAxes.some((axis) => axis.crosshair.enabled);
     const { hovered, pointerPosition } = useCrosshairHover({ dispatcher, enabled: crosshairEnabled });
     const pointerXPos = (_a = pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) !== null && _a !== void 0 ? _a : 0;
     const pointerYPos = (_b = pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[1]) !== null && _b !== void 0 ? _b : 0;
@@ -17,7 +17,7 @@ export const useCrosshair = (props) => {
         const svgElement = select(plotElement);
         svgElement.selectAll(`[${plotCrosshairDataAttr}]`).remove();
         const lineGenerator = line();
-        if (xAxis.crosshair.enabled && (hovered === null || hovered === void 0 ? void 0 : hovered.length)) {
+        if ((xAxis === null || xAxis === void 0 ? void 0 : xAxis.crosshair.enabled) && (hovered === null || hovered === void 0 ? void 0 : hovered.length)) {
             const xAxisScale = xScale;
             const crosshairDataAttr = 'data-crosshair-x-line';
             const crosshairSelection = svgElement

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

@@ -1,17 +1,19 @@
 import type { ChartData } from '../../types';
 import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
-import type { OnLegendItemClick, PreparedSeries } from './types';
+import type { OnLegendItemClick, PreparedLegend, PreparedSeries } from './types';
 type Args = {
     chartWidth: number;
     chartHeight: number;
     chartMargin: PreparedChart['margin'];
+    colors: string[];
     legend: ChartData['legend'];
-    series: ChartData['series'];
+    originalSeriesData: ChartData['series']['data'];
+    seriesData: ChartData['series']['data'];
+    seriesOptions: ChartData['series']['options'];
     preparedYAxis: PreparedAxis[];
-    colors: string[];
 };
 export declare const useSeries: (args: Args) => {
-    legendItems: import("./types").LegendItem[][];
+    legendItems: never[] | import("./types").LegendItem[][];
     legendConfig: {
         offset: {
             left: number;
@@ -23,8 +25,8 @@ export declare const useSeries: (args: Args) => {
                 end: number;
             }[];
         } | undefined;
-    };
-    preparedLegend: import("./types").PreparedLegend;
+    } | undefined;
+    preparedLegend: PreparedLegend | null;
     preparedSeries: PreparedSeries[];
     preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
     handleLegendItemClick: OnLegendItemClick;