@gravity-ui/charts 1.8.0 → 1.10.0

package/dist/esm/hooks/useShapes/waterfall/prepare-data.js

@@ -4,7 +4,7 @@ import { getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { MIN_BAR_GAP, MIN_BAR_WIDTH } from '../constants';
 import { getXValue, getYValue } from '../utils';
-function getLabelData(d, plotHeight) {
+async function getLabelData(d, plotHeight) {
     var _a, _b;
     if (!d.series.dataLabels.enabled) {
         return undefined;
@@ -12,7 +12,7 @@ function getLabelData(d, plotHeight) {
     const labelValue = (_b = (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.y) !== null && _b !== void 0 ? _b : d.subTotal;
     const text = getFormattedValue(Object.assign({ value: labelValue }, d.series.dataLabels));
     const style = d.series.dataLabels.style;
-    const { maxHeight: height, maxWidth: width } = getLabelsSize({ labels: [text], style });
+    const { maxHeight: height, maxWidth: width } = await getLabelsSize({ labels: [text], style });
     let y;
     if (Number(d.data.y) > 0 || d.data.total) {
         y = Math.max(height, d.y - d.series.dataLabels.padding);
@@ -52,7 +52,7 @@ function getBandWidth(args) {
     });
     return bandWidth;
 }
-export const prepareWaterfallData = (args) => {
+export const prepareWaterfallData = async (args) => {
     const { series, seriesOptions, xAxis, xScale, yAxis: [yAxis], yScale: [yScale], } = args;
     const yLinearScale = yScale;
     const plotHeight = yLinearScale(yLinearScale.domain()[0]);
@@ -77,9 +77,10 @@ export const prepareWaterfallData = (args) => {
     });
     let totalValue = 0;
     const result = [];
-    data.forEach((item, _index) => {
+    for (let i = 0; i < data.length; i++) {
+        const item = data[i];
         if (typeof item.data.y !== 'number' && !item.data.total) {
-            return;
+            continue;
         }
         if (!item.data.total) {
             totalValue += Number(item.data.y);
@@ -129,8 +130,8 @@ export const prepareWaterfallData = (args) => {
             subTotal: totalValue,
             htmlElements: [],
         };
-        preparedData.label = getLabelData(preparedData, plotHeight);
+        preparedData.label = await getLabelData(preparedData, plotHeight);
         result.push(preparedData);
-    });
+    }
     return result;
 };

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

@@ -0,0 +1,18 @@
+import type { ChartScale } from '../useAxisScales';
+import type { PreparedAxis, PreparedZoom } from '../useChartOptions/types';
+import type { PreparedSplit } from '../useSplit/types';
+import type { ZoomState } from './types';
+interface UseZoomProps {
+    node: SVGGElement | null;
+    onUpdate: (zoomState: Partial<ZoomState>) => void;
+    plotContainerHeight: number;
+    plotContainerWidth: number;
+    preparedSplit: PreparedSplit;
+    preparedZoom: PreparedZoom | null;
+    xAxis: PreparedAxis | null;
+    xScale?: ChartScale;
+    yAxis: PreparedAxis[];
+    yScale?: ChartScale[];
+}
+export declare function useZoom(props: UseZoomProps): void;
+export {};

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { select } from 'd3';
+import { useBrush } from '../useBrush';
+import { selectionToZoomBounds } from './utils';
+export function useZoom(props) {
+    const { node, onUpdate, plotContainerHeight, plotContainerWidth, preparedSplit, preparedZoom, xAxis, xScale, yAxis, yScale, } = props;
+    const areas = React.useMemo(() => {
+        const result = [];
+        if (!preparedZoom) {
+            return result;
+        }
+        if (preparedSplit.plots.length > 1) {
+            preparedSplit.plots.forEach((plot) => {
+                result.push({
+                    extent: [
+                        [0, plot.top],
+                        [plotContainerWidth, plot.top + plot.height],
+                    ],
+                });
+            });
+        }
+        else {
+            result.push({
+                extent: [
+                    [0, 0],
+                    [plotContainerWidth, plotContainerHeight],
+                ],
+            });
+        }
+        return result;
+    }, [plotContainerHeight, plotContainerWidth, preparedSplit.plots, preparedZoom]);
+    const handleChartBrushEnd = React.useCallback(function (brushInstance, selection) {
+        if (selection && yScale && xAxis && yAxis && xScale && (preparedZoom === null || preparedZoom === void 0 ? void 0 : preparedZoom.type)) {
+            const nextZoomState = selectionToZoomBounds({
+                selection,
+                xAxis,
+                xScale,
+                yAxises: yAxis,
+                yScales: yScale,
+                zoomType: preparedZoom.type,
+            });
+            onUpdate(nextZoomState);
+            brushInstance.clear(select(this));
+        }
+    }, [onUpdate, preparedZoom === null || preparedZoom === void 0 ? void 0 : preparedZoom.type, xAxis, xScale, yAxis, yScale]);
+    // Chart brush for manual zoom handling
+    useBrush({
+        areas,
+        brushOptions: preparedZoom === null || preparedZoom === void 0 ? void 0 : preparedZoom.brush,
+        node,
+        type: preparedZoom === null || preparedZoom === void 0 ? void 0 : preparedZoom.type,
+        onBrushEnd: handleChartBrushEnd,
+    });
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Defines the zoom state for the chart.
+ */
+export interface ZoomState {
+    /**
+     * The range for the X-axis.
+     * The first element is the minimum value on the axis (if the axis type is `linear`, `logarithmic`, or `datetime`)
+     * or the category index from the categories array specified in the axis settings (if the axis type is `category`).
+     * The second element is the corresponding maximum value.
+     */
+    x: [number, number];
+    /**
+     * An array of ranges for the Y-axes.
+     * For each range, the first element is the minimum value on the axis (if the axis type is `linear`, `logarithmic`, or `datetime`)
+     * or the category index from the categories array specified in the axis settings (if the axis type is `category`).
+     * The second element is the corresponding maximum value.
+     */
+    y: [number, number][];
+}

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

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

package/dist/esm/hooks/useZoom/utils.d.ts

@@ -0,0 +1,12 @@
+import type { BrushSelection } from 'd3';
+import type { ChartScale } from '../useAxisScales';
+import type { PreparedAxis, PreparedZoom } from '../useChartOptions/types';
+import type { ZoomState } from './types';
+export declare function selectionToZoomBounds(args: {
+    selection: BrushSelection;
+    xAxis: PreparedAxis;
+    xScale: ChartScale;
+    yAxises: PreparedAxis[];
+    yScales: ChartScale[];
+    zoomType: PreparedZoom['type'];
+}): Partial<ZoomState>;

package/dist/esm/hooks/useZoom/utils.js

@@ -0,0 +1,128 @@
+export function selectionToZoomBounds(args) {
+    const { selection, xAxis, xScale, yAxises, yScales, zoomType } = args;
+    const zoomState = {};
+    switch (zoomType) {
+        case 'x': {
+            const [x0, x1] = selection;
+            zoomState.x = selectionXToZoomBounds({ xAxis, xScale, selection: [x0, x1] });
+            break;
+        }
+        case 'y': {
+            const [y1, y0] = selection;
+            yAxises.forEach((yAxis, index) => {
+                if (!Array.isArray(zoomState.y)) {
+                    zoomState.y = [];
+                }
+                zoomState.y.push(selectionYToZoomBounds({
+                    yAxis,
+                    yScale: yScales[index],
+                    selection: [y1, y0],
+                }));
+            });
+            break;
+        }
+        case 'xy': {
+            const [x0, y0] = selection[0];
+            const [x1, y1] = selection[1];
+            zoomState.x = selectionXToZoomBounds({ xAxis, xScale, selection: [x0, x1] });
+            yAxises.forEach((yAxis, index) => {
+                if (!Array.isArray(zoomState.y)) {
+                    zoomState.y = [];
+                }
+                zoomState.y.push(selectionYToZoomBounds({
+                    yAxis,
+                    yScale: yScales[index],
+                    selection: [y0, y1],
+                }));
+            });
+            break;
+        }
+    }
+    return zoomState;
+}
+function selectionXToZoomBounds(args) {
+    const { xAxis, xScale, selection } = args;
+    switch (xAxis.type) {
+        case 'category': {
+            const [x0, x1] = selection;
+            const bandScale = xScale;
+            const categories = xAxis.categories || [];
+            const currentDomain = bandScale.domain();
+            const step = bandScale.step();
+            let startIndex = Math.floor(x0 / step);
+            let endIndex = Math.floor(x1 / step);
+            const startCategory = currentDomain[startIndex];
+            const endCategory = currentDomain[endIndex];
+            startIndex = categories.indexOf(startCategory);
+            endIndex = categories.indexOf(endCategory);
+            if (!categories[startIndex]) {
+                startIndex = 0;
+            }
+            if (!categories[endIndex]) {
+                endIndex = categories.length - 1;
+            }
+            return [startIndex, endIndex];
+        }
+        case 'datetime': {
+            const [x0, x1] = selection;
+            const timeScale = xScale;
+            const minTimestamp = timeScale.invert(x0).getTime();
+            const maxTimestamp = timeScale.invert(x1).getTime();
+            return [minTimestamp, maxTimestamp];
+        }
+        case 'linear':
+        case 'logarithmic': {
+            const [x0, x1] = selection;
+            const linearScale = xScale;
+            const minValue = linearScale.invert(x0);
+            const maxValue = linearScale.invert(x1);
+            return [minValue, maxValue];
+        }
+        default: {
+            throw new Error(`Invalid axis type: ${xAxis.type}`);
+        }
+    }
+}
+function selectionYToZoomBounds(args) {
+    const { yAxis, yScale, selection } = args;
+    switch (yAxis.type) {
+        case 'category': {
+            const [y1, y0] = selection;
+            const bandScale = yScale;
+            const categories = yAxis.categories || [];
+            const currentDomain = bandScale.domain();
+            const step = bandScale.step();
+            let startIndex = currentDomain.length - 1 - Math.floor(y0 / step);
+            let endIndex = currentDomain.length - 1 - Math.floor(y1 / step);
+            const startCategory = currentDomain[startIndex];
+            const endCategory = currentDomain[endIndex];
+            startIndex = categories.indexOf(startCategory);
+            endIndex = categories.indexOf(endCategory);
+            if (!categories[startIndex]) {
+                startIndex = 0;
+            }
+            if (!categories[endIndex]) {
+                endIndex = categories.length - 1;
+            }
+            return [startIndex, endIndex];
+        }
+        case 'datetime': {
+            const [y1, y0] = selection;
+            const timeScale = yScale;
+            const minTimestamp = timeScale.invert(y0).getTime();
+            const maxTimestamp = timeScale.invert(y1).getTime();
+            return [minTimestamp, maxTimestamp];
+        }
+        case 'linear':
+        case 'logarithmic': {
+            const [y1, y0] = selection;
+            const linearScale = yScale;
+            const minValue = linearScale.invert(y0);
+            const maxValue = linearScale.invert(y1);
+            return [minValue, maxValue];
+        }
+        default: {
+            throw new Error(`Invalid axis type: ${yAxis.type}`);
+        }
+    }
+}

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

@@ -1,4 +1,4 @@
-import type { DashStyle } from 'src/constants';
+import type { DashStyle } from '../../constants';
 import type { FormatNumberOptions } from '../formatter';
 import type { BaseTextStyle } from './base';
 export type ChartAxisType = 'category' | 'datetime' | 'linear' | 'logarithmic';
@@ -7,14 +7,12 @@ export interface ChartAxisLabels {
     /** Enable or disable the axis labels. */
     enabled?: boolean;
     /** The label's pixel distance from the perimeter of the plot area.
-     *
-     * @default: 10
+     * @default 10
      */
     margin?: number;
     /** The pixel padding for axis labels, to ensure white space between them.
-     *
-     * @defaults: 5
-     * */
+     * @default 5
+     */
     padding?: number;
     dateFormat?: string;
     numberFormat?: FormatNumberOptions;
@@ -24,13 +22,14 @@ export interface ChartAxisLabels {
      * As the chart gets narrower, it will start rotating the labels -45 degrees. */
     autoRotation?: boolean;
     /** Rotation of the labels in degrees.
-     *
-     * @default: 0
+     * @default 0
      */
     rotation?: number;
 }
 export interface ChartAxis {
     categories?: string[];
+    /** Configure a crosshair that follows either the mouse pointer or the hovered point. */
+    crosshair?: AxisCrosshair;
     timestamps?: number[];
     type?: ChartAxisType;
     /** The axis labels show the number or category for each tick. */
@@ -42,14 +41,14 @@ export interface ChartAxis {
         /** CSS styles for the title */
         style?: Partial<BaseTextStyle>;
         /** The pixel distance between the axis labels or line and the title.
-         *
-         * Defaults to 4 for horizontal axes, 8 for vertical.
-         * */
+         * @default 4 for horizontal axes, 8 for vertical
+         */
         margin?: number;
         /** Alignment of the title. */
         align?: ChartAxisTitleAlignment;
         /** Allows limiting of the contents of a title block to the specified number of lines.
-         *  Defaults to 1. */
+         * @default 1
+         */
         maxRowCount?: number;
     };
     /** The minimum value of the axis. If undefined the min value is automatically calculate. */
@@ -57,9 +56,8 @@ export interface ChartAxis {
     /** The grid lines settings. */
     grid?: {
         /** Enable or disable the grid lines.
-         *
-         * Defaults to true.
-         * */
+         * @default true
+         */
         enabled?: boolean;
     };
     ticks?: {
@@ -69,9 +67,8 @@ export interface ChartAxis {
     };
     /** Padding of the max value relative to the length of the axis.
      * A padding of 0.05 will make a 100px axis 5px longer.
-     *
-     * Defaults to 0.05 for Y axis and to 0.01 for X axis.
-     * */
+     * @default 0.05 for Y axis, 0.01 for X axis
+     */
     maxPadding?: number;
     /** An array of lines stretching across the plot area, marking a specific value */
     plotLines?: AxisPlotLine[];
@@ -90,7 +87,6 @@ export interface AxisPlot {
     color?: string;
     /**
      * Individual opacity for the line.
-     *
      * @default 1
      * */
     opacity?: number;
@@ -101,12 +97,11 @@ export interface AxisPlotLine extends AxisPlot {
     /** The color of the plot line (hex, rgba). */
     color?: string;
     /** Pixel width of the plot line.
-     *
      * @default 1
      * */
     width?: number;
     /** Option for line stroke style. */
-    dashStyle?: `${DashStyle}`;
+    dashStyle?: DashStyle;
 }
 export interface AxisPlotBand extends AxisPlot {
     /**
@@ -124,6 +119,16 @@ export interface AxisPlotBand extends AxisPlot {
      */
     to: number | string;
 }
+export interface AxisCrosshair extends Omit<AxisPlotLine, 'value'> {
+    /** Whether the crosshair should snap to the point or follow the pointer independent of points.
+     * @default true
+     */
+    snap?: boolean;
+    /** Enable or disable the axis crosshair.
+     * @default false
+     */
+    enabled?: boolean;
+}
 export interface ChartYAxis extends ChartAxis {
     /** Axis location.
      * Possible values - 'left' and 'right'.

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

@@ -1,5 +1,6 @@
 import type { MeaningfulAny } from '../misc';
 import type { ChartTooltipRendererArgs } from './tooltip';
+import type { ChartZoom } from './zoom';
 export interface ChartMargin {
     top: number;
     right: number;
@@ -15,4 +16,8 @@ export interface ChartOptions {
         }, event: PointerEvent) => void;
         pointermove?: (data: ChartTooltipRendererArgs | undefined, event: PointerEvent) => void;
     };
+    /**
+     * Configuration options for chart zooming functionality.
+     */
+    zoom?: ChartZoom;
 }

package/dist/esm/types/chart/line.d.ts

@@ -47,7 +47,7 @@ export interface LineSeries<T = MeaningfulAny> extends BaseSeries {
     /** Options for the point markers of line series */
     marker?: PointMarkerOptions;
     /** Option for line stroke style */
-    dashStyle?: `${DashStyle}`;
+    dashStyle?: DashStyle;
     /** Option for line cap style */
     linecap?: `${LineCap}`;
     /** Individual opacity for the line. */

package/dist/esm/types/chart/pie.d.ts

@@ -94,5 +94,5 @@ export interface PieSeries<T = MeaningfulAny> extends BaseSeries {
         series: {
             innerRadius: number;
         };
-    }) => BaseType;
+    }) => BaseType | Promise<BaseType>;
 }

package/dist/esm/types/chart/series.d.ts

@@ -183,7 +183,7 @@ export interface ChartSeriesOptions {
          *
          * @default 'Solid'
          * */
-        dashStyle?: `${DashStyle}`;
+        dashStyle?: DashStyle;
         /** Options for line cap style
          *
          * @default 'round' when dashStyle is not 'solid', 'none' when dashStyle is not 'solid'

package/dist/esm/types/chart/tooltip.d.ts

@@ -75,7 +75,7 @@ export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | Too
 };
 export interface ChartTooltipRendererArgs<T = MeaningfulAny> {
     hovered: TooltipDataChunk<T>[];
-    xAxis?: ChartXAxis;
+    xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
 }
 export interface ChartTooltip<T = MeaningfulAny> {

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

@@ -0,0 +1,36 @@
+/**
+ * Configuration options for chart zooming functionality using area selection.
+ * Working with only axis related series.
+ */
+export interface ChartZoom {
+    enabled?: boolean;
+    /**
+     * Type of zoom to apply.
+     * - `x`: zoom only on X axis
+     * - `y`: zoom only on Y axis
+     * - `xy`: zoom on both X and Y axes
+     *
+     * The availability of zoom types depends on the series types used in the chart.
+     * If the specified zoom type is not supported by all series, it will be ignored.
+     * If no type is specified, a default will be chosen based on the series.
+     *
+     * Supported zoom types by series type:
+     * - `Area`, `Line`, `Scatter`: `x`, `y`, `xy`
+     * - `BarX`: `x`
+     * - `BarY`: `y`
+     *
+     * Default zoom type by series type:
+     * - `BarY`: `y`
+     * - `Scatter`: `xy`
+     * - All others: `x`
+     */
+    type?: 'x' | 'y' | 'xy';
+    /**
+     * Zoom brush configuration.
+     */
+    brush?: {
+        style?: {
+            fillOpacity?: number;
+        };
+    };
+}

package/dist/esm/types/chart/zoom.js

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

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

@@ -22,6 +22,7 @@ export * from './chart/series';
 export * from './chart/split';
 export * from './chart/title';
 export * from './chart/tooltip';
+export * from './chart/zoom';
 export * from './chart/halo';
 export * from './chart/treemap';
 export * from './chart/waterfall';

package/dist/esm/types/index.js

@@ -14,6 +14,7 @@ export * from './chart/series';
 export * from './chart/split';
 export * from './chart/title';
 export * from './chart/tooltip';
+export * from './chart/zoom';
 export * from './chart/halo';
 export * from './chart/treemap';
 export * from './chart/waterfall';

package/dist/esm/types/misc.d.ts

@@ -3,3 +3,10 @@
  */
 export type MeaningfulAny = any;
 export type PointPosition = [number, number];
+/**
+ * Makes all properties in T required, including nested objects.
+ * Inspired by: https://stackoverflow.com/a/76927120
+ */
+export type DeepRequired<T> = Required<{
+    [K in keyof T]: T[K] extends Required<T[K]> ? T[K] : DeepRequired<T[K]>;
+}>;

package/dist/esm/utils/chart/axis-generators/bottom.d.ts

@@ -21,5 +21,5 @@ type AxisBottomArgs = {
     };
     leftmostLimit?: number;
 };
-export declare function axisBottom(args: AxisBottomArgs): (selection: Selection<SVGGElement, unknown, null, undefined>) => void;
+export declare function axisBottom(args: AxisBottomArgs): Promise<(selection: Selection<SVGGElement, unknown, null, undefined>) => void>;
 export {};

package/dist/esm/utils/chart/axis-generators/bottom.js

@@ -15,15 +15,15 @@ function addDomain(selection, options) {
         domainPath.style('stroke', color);
     }
 }
-export function axisBottom(args) {
+export async function axisBottom(args) {
     const { leftmostLimit = 0, scale, ticks: { labelFormat = (value) => String(value), labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, items: tickItems, count: ticksCount, maxTickCount, rotation = 0, tickColor, }, domain, } = args;
     const offset = getXAxisOffset();
     const position = getXTickPosition({ scale, offset });
     const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
-    const labelHeight = getLabelsSize({
+    const labelHeight = (await getLabelsSize({
         labels: values.map(labelFormat),
         style: labelsStyle,
-    }).maxHeight;
+    })).maxHeight;
     return function (selection) {
         var _a, _b, _c;
         const rect = (_a = selection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
@@ -44,32 +44,34 @@ export function axisBottom(args) {
             tickPath.moveTo(0, start);
             tickPath.lineTo(0, end);
         });
-        selection
+        selection.selectAll('.tick').remove();
+        const ticks = selection
             .selectAll('.tick')
             .data(values)
             .order()
-            .join((el) => {
-            const tick = el.append('g').attr('class', 'tick');
-            tick.append('path')
-                .attr('d', tickPath.toString())
-                .attr('stroke', tickColor !== null && tickColor !== void 0 ? tickColor : 'currentColor');
-            tick.append('text')
-                .text(labelFormat)
-                .attr('fill', 'currentColor')
-                .attr('text-anchor', () => {
-                if (rotation) {
-                    return rotation > 0 ? 'start' : 'end';
-                }
-                return 'middle';
-            })
-                .style('transform', transform)
-                .style('dominant-baseline', 'text-after-edge');
-            return tick;
-        })
+            .join('g')
+            .attr('class', 'tick')
             .attr('transform', function (d) {
             const left = position(d) + offset;
             return `translate(${left}, ${top})`;
         });
+        ticks
+            .append('path')
+            .attr('d', tickPath.toString())
+            .attr('stroke', tickColor !== null && tickColor !== void 0 ? tickColor : 'currentColor');
+        ticks
+            .append('text')
+            .text(labelFormat)
+            .style('font-size', (labelsStyle === null || labelsStyle === void 0 ? void 0 : labelsStyle.fontSize) || '')
+            .attr('fill', 'currentColor')
+            .attr('text-anchor', () => {
+            if (rotation) {
+                return rotation > 0 ? 'start' : 'end';
+            }
+            return 'middle';
+        })
+            .style('transform', transform)
+            .style('dominant-baseline', 'text-after-edge');
         // Remove tick that has the same x coordinate like domain
         selection
             .selectAll('.tick')
@@ -135,8 +137,6 @@ export function axisBottom(args) {
             });
         }
         const { size: domainSize, color: domainColor } = domain;
-        selection
-            .call(addDomain, { size: domainSize, color: domainColor })
-            .style('font-size', (labelsStyle === null || labelsStyle === void 0 ? void 0 : labelsStyle.fontSize) || '');
+        selection.call(addDomain, { size: domainSize, color: domainColor });
     };
 }

package/dist/esm/utils/chart/axis.d.ts

@@ -29,12 +29,13 @@ export declare function getAxisHeight(args: {
 export declare function getAxisTitleRows(args: {
     axis: PreparedAxis;
     textMaxWidth: number;
-}): TextRow[];
+}): Promise<TextRow[]>;
 interface GetBandsPositionArgs {
     band: PreparedAxisPlotBand;
     axisScale: AxisScale<AxisDomain>;
     axis: AxisDirection;
 }
+export declare const getAxisPlotsPosition: (axis: PreparedAxis, split: PreparedSplit, width?: number) => string;
 export declare function getBandsPosition(args: GetBandsPositionArgs): {
     from: number;
     to: number;

package/dist/esm/utils/chart/axis.js

@@ -50,12 +50,12 @@ export function getAxisHeight(args) {
     }
     return boundsHeight;
 }
-export function getAxisTitleRows(args) {
+export async function getAxisTitleRows(args) {
     const { axis, textMaxWidth } = args;
     if (axis.title.maxRowCount < 1) {
         return [];
     }
-    const textRows = wrapText({
+    const textRows = await wrapText({
         text: axis.title.text,
         style: axis.title.style,
         width: textMaxWidth,
@@ -70,6 +70,14 @@ export function getAxisTitleRows(args) {
         return acc;
     }, []);
 }
+export const getAxisPlotsPosition = (axis, split, width = 0) => {
+    var _a;
+    const top = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+    if (axis.position === 'left') {
+        return `translate(0, ${top}px)`;
+    }
+    return `translate(${width}px, ${top}px)`;
+};
 export function getBandsPosition(args) {
     var _a, _b, _c;
     const { band, axisScale } = args;