@gravity-ui/charts 1.16.0 → 1.18.0

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

@@ -1,17 +1,25 @@
 import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
-import { calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
+import { calculateCos, calculateNumericProperty, formatAxisTickLabel, getAxisItems, getClosestPointsRange, getDefaultDateFormat, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 import { getAxisCategories, prepareAxisPlotLabel } from './utils';
-async function getLabelSettings({ axis, seriesData, seriesOptions, width, autoRotation = true, }) {
+async function setLabelSettings({ axis, seriesData, seriesOptions, width, autoRotation = true, }) {
     const scale = createXScale({ axis, series: seriesData, seriesOptions, boundsWidth: width });
+    if (!scale) {
+        axis.labels.height = 0;
+        axis.labels.rotation = 0;
+        return;
+    }
     const tickCount = getTicksCount({ axis, range: width });
-    const ticks = getXAxisItems({
+    const ticks = getAxisItems({
         scale: scale,
         count: tickCount,
         maxCount: getMaxTickCount({ width, axis }),
     });
     const step = getClosestPointsRange(axis, ticks);
+    if (axis.type === 'datetime' && !axis.labels.dateFormat) {
+        axis.labels.dateFormat = getDefaultDateFormat(step);
+    }
     const labels = ticks.map((value) => {
         return formatAxisTickLabel({
             axis,
@@ -38,10 +46,11 @@ async function getLabelSettings({ axis, seriesData, seriesOptions, width, autoRo
         })).maxHeight
         : axis.labels.lineHeight;
     const maxHeight = rotation ? calculateCos(rotation) * axis.labels.maxWidth : labelsHeight;
-    return { height: Math.min(maxHeight, labelsHeight), rotation };
+    axis.labels.height = Math.min(maxHeight, labelsHeight);
+    axis.labels.rotation = rotation;
 }
 export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width, }) => {
-    var _a;
+    var _a, _b, _c, _d, _e;
     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);
@@ -74,7 +83,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width
             width: 0,
             height: 0,
             lineHeight: labelsLineHeight,
-            maxWidth: get(xAxis, 'labels.maxWidth', axisLabelsDefaults.maxWidth),
+            maxWidth: (_b = calculateNumericProperty({ base: width, value: (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _a === void 0 ? void 0 : _a.maxWidth })) !== null && _b !== void 0 ? _b : axisLabelsDefaults.maxWidth,
             html: labelsHtml,
         },
         lineColor: get(xAxis, 'lineColor'),
@@ -96,7 +105,12 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width
             enabled: get(xAxis, 'grid.enabled', true),
         },
         ticks: {
-            pixelInterval: get(xAxis, 'ticks.pixelInterval'),
+            pixelInterval: ((_c = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _c === void 0 ? void 0 : _c.interval)
+                ? calculateNumericProperty({
+                    base: width,
+                    value: xAxis.ticks.interval,
+                })
+                : (_d = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _d === void 0 ? void 0 : _d.pixelInterval,
         },
         position: 'bottom',
         plotIndex: 0,
@@ -129,14 +143,12 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width
         visible: get(xAxis, 'visible', true),
         order: xAxis === null || xAxis === void 0 ? void 0 : xAxis.order,
     };
-    const { height, rotation } = await getLabelSettings({
+    await setLabelSettings({
         axis: preparedXAxis,
         seriesData,
         seriesOptions,
         width,
-        autoRotation: (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _a === void 0 ? void 0 : _a.autoRotation,
+        autoRotation: (_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _e === void 0 ? void 0 : _e.autoRotation,
     });
-    preparedXAxis.labels.height = height;
-    preparedXAxis.labels.rotation = rotation;
     return preparedXAxis;
 };

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

@@ -1,8 +1,10 @@
 import type { ChartSeries, ChartYAxis } from '../../types';
 import type { PreparedSeriesOptions } from '../useSeries/types';
 import type { PreparedAxis } from './types';
-export declare const getPreparedYAxis: ({ height, seriesData, seriesOptions, yAxis, }: {
+export declare const getPreparedYAxis: ({ height, boundsHeight, width, seriesData, seriesOptions, yAxis, }: {
     height: number;
+    boundsHeight: number;
+    width: number;
     seriesData: ChartSeries[];
     seriesOptions: PreparedSeriesOptions;
     yAxis: ChartYAxis[] | undefined;

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

@@ -1,26 +1,35 @@
 import get from 'lodash/get';
+import { getTickValues } from '../../components/AxisY/utils';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisCrosshairDefaults, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { formatAxisTickLabel, getClosestPointsRange, getDefaultMinYAxisValue, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getScaleTicks, isAxisRelatedSeries, wrapText, } from '../../utils';
+import { calculateNumericProperty, formatAxisTickLabel, getClosestPointsRange, getDefaultDateFormat, getDefaultMinYAxisValue, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getScaleTicks, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 import { getAxisCategories, prepareAxisPlotLabel } from './utils';
 const getAxisLabelMaxWidth = async (args) => {
-    const { axis, seriesData, seriesOptions } = args;
+    const { axis, seriesData, seriesOptions, height } = args;
     if (!axis.labels.enabled) {
         return { height: 0, width: 0 };
     }
     const scale = createYScale({
         axis,
-        boundsHeight: 1,
+        boundsHeight: height,
         series: seriesData,
         seriesOptions,
     });
+    if (!scale) {
+        return { height: 0, width: 0 };
+    }
+    const getTextSize = getTextSizeFn({ style: axis.labels.style });
+    const labelLineHeight = (await getTextSize('Tmp')).height;
+    const tickValues = getTickValues({ axis, scale, labelLineHeight });
     const ticks = getScaleTicks(scale);
-    // FIXME: it is necessary to filter data, since we do not draw overlapping ticks
-    const step = getClosestPointsRange(axis, ticks);
-    const labels = ticks.map((tick) => formatAxisTickLabel({
+    const tickStep = getClosestPointsRange(axis, ticks);
+    if (axis.type === 'datetime' && !axis.labels.dateFormat) {
+        axis.labels.dateFormat = getDefaultDateFormat(tickStep);
+    }
+    const labels = tickValues.map((tick) => formatAxisTickLabel({
         axis,
-        value: tick,
-        step,
+        value: tick.value,
+        step: tickStep,
     }));
     const size = await getLabelsSize({
         labels,
@@ -30,7 +39,7 @@ const getAxisLabelMaxWidth = async (args) => {
     });
     return { height: size.maxHeight, width: size.maxWidth };
 };
-export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, }) => {
+export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, seriesOptions, yAxis, }) => {
     const axisByPlot = [];
     const axisItems = yAxis || [{}];
     const hasAxisRelatedSeries = seriesData.some(isAxisRelatedSeries);
@@ -38,7 +47,7 @@ export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, })
         return Promise.resolve([]);
     }
     return Promise.all(axisItems.map(async (axisItem) => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f, _g;
         const plotIndex = get(axisItem, 'plotIndex', 0);
         const firstPlotAxis = !axisByPlot[plotIndex];
         if (firstPlotAxis) {
@@ -71,9 +80,7 @@ export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, })
                 margin: labelsEnabled
                     ? get(axisItem, 'labels.margin', axisLabelsDefaults.margin)
                     : 0,
-                padding: labelsEnabled
-                    ? get(axisItem, 'labels.padding', axisLabelsDefaults.padding)
-                    : 0,
+                padding: labelsEnabled ? get(axisItem, 'labels.padding', 4) : 0,
                 dateFormat: get(axisItem, 'labels.dateFormat'),
                 numberFormat: get(axisItem, 'labels.numberFormat'),
                 style: labelsStyle,
@@ -81,7 +88,7 @@ export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, })
                 width: 0,
                 height: 0,
                 lineHeight: labelsLineHeight,
-                maxWidth: get(axisItem, 'labels.maxWidth', axisLabelsDefaults.maxWidth),
+                maxWidth: (_b = calculateNumericProperty({ base: width, value: (_a = axisItem.labels) === null || _a === void 0 ? void 0 : _a.maxWidth })) !== null && _b !== void 0 ? _b : axisLabelsDefaults.maxWidth,
                 html: labelsHtml,
             },
             lineColor: get(axisItem, 'lineColor'),
@@ -96,15 +103,20 @@ export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, })
                 align: get(axisItem, 'title.align', yAxisTitleDefaults.align),
                 maxRowCount: titleMaxRowsCount,
             },
-            min: (_a = get(axisItem, 'min')) !== null && _a !== void 0 ? _a : getDefaultMinYAxisValue(seriesData),
+            min: (_c = get(axisItem, 'min')) !== null && _c !== void 0 ? _c : getDefaultMinYAxisValue(seriesData),
             max: get(axisItem, 'max'),
             maxPadding: get(axisItem, 'maxPadding', 0.05),
             grid: {
                 enabled: get(axisItem, 'grid.enabled', firstPlotAxis ||
-                    (!firstPlotAxis && !((_b = axisByPlot[plotIndex][0].visible) !== null && _b !== void 0 ? _b : true))),
+                    (!firstPlotAxis && !((_d = axisByPlot[plotIndex][0].visible) !== null && _d !== void 0 ? _d : true))),
             },
             ticks: {
-                pixelInterval: get(axisItem, 'ticks.pixelInterval'),
+                pixelInterval: ((_e = axisItem.ticks) === null || _e === void 0 ? void 0 : _e.interval)
+                    ? calculateNumericProperty({
+                        base: height,
+                        value: (_f = axisItem.ticks) === null || _f === void 0 ? void 0 : _f.interval,
+                    })
+                    : (_g = axisItem.ticks) === null || _g === void 0 ? void 0 : _g.pixelInterval,
             },
             position: get(axisItem, 'position', defaultAxisPosition),
             plotIndex: get(axisItem, 'plotIndex', 0),
@@ -142,6 +154,7 @@ export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, })
                 axis: preparedAxis,
                 seriesData,
                 seriesOptions,
+                height: boundsHeight,
             });
             preparedAxis.labels.height = labelsHeight;
             preparedAxis.labels.width =

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

@@ -6,7 +6,7 @@ type Props = {
     width: number;
     height: number;
     xScale?: ChartScale;
-    yScale?: ChartScale[];
+    yScale?: (ChartScale | undefined)[];
     split: PreparedSplit;
     plotElement: SVGGElement | null;
     dispatcher: Dispatch<object>;

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

@@ -63,11 +63,13 @@ export const useCrosshair = (props) => {
         }
         yAxes.forEach((yAxis, index, currentArr) => {
             const yAxisScale = yScale[index];
-            if (index !== 0 && !yAxis.crosshair.snap && !currentArr[0].crosshair.snap) {
+            if (!yAxisScale ||
+                (index !== 0 && !yAxis.crosshair.snap && !currentArr[0].crosshair.snap)) {
                 return;
             }
             if (yAxis.crosshair.enabled && (hovered === null || hovered === void 0 ? void 0 : hovered.length)) {
                 const crosshairDataAttr = `data-crosshair-y-line-${index}`;
+                const crosshairPosition = getAxisPlotsPosition(yAxis, split);
                 const crosshairSelection = svgElement
                     .selectAll(`[${crosshairDataAttr}]`)
                     .data(hovered.filter((node) => {
@@ -82,7 +84,7 @@ export const useCrosshair = (props) => {
                     .attr(plotCrosshairDataAttr, 1)
                     .attr(crosshairDataAttr, 1)
                     .style('transform', yAxis.crosshair.snap
-                    ? getAxisPlotsPosition(yAxis, split)
+                    ? `translate(${crosshairPosition[0]}px, ${crosshairPosition[1]}px)`
                     : 'translate(0, 0)');
                 crosshairSelection
                     .append('path')

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

@@ -7,7 +7,7 @@ export declare const prepareAreaData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
+    yScale: (ChartScale | undefined)[];
     boundsHeight: number;
     isOutsideBounds: (x: number, y: number) => boolean;
 }) => Promise<PreparedAreaData[]>;

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

@@ -71,6 +71,9 @@ export const prepareAreaData = async (args) => {
             const yAxisIndex = s.yAxis;
             const seriesYAxis = yAxis[yAxisIndex];
             const seriesYScale = yScale[yAxisIndex];
+            if (!seriesYScale) {
+                continue;
+            }
             const yMin = getYValue({
                 point: { y: 0 },
                 points: s.data,

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

@@ -8,6 +8,6 @@ export declare const prepareBarXData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
+    yScale: (ChartScale | undefined)[];
     boundsHeight: number;
 }) => Promise<PreparedBarXData[]>;

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

@@ -112,6 +112,9 @@ export const prepareBarXData = async (args) => {
                 const yValue = sortedData[yValueIndex];
                 const yAxisIndex = yValue.series.yAxis;
                 const seriesYScale = yScale[yAxisIndex];
+                if (!seriesYScale) {
+                    continue;
+                }
                 let xCenter;
                 if (xAxis.type === 'category') {
                     const xBandScale = xScale;

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

@@ -8,5 +8,5 @@ export declare const prepareBarYData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
+    yScale: (ChartScale | undefined)[];
 }) => Promise<BarYShapesArgs>;

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

@@ -10,6 +10,13 @@ export const prepareBarYData = async (args) => {
     const stackGap = seriesOptions['bar-y'].stackGap;
     const xLinearScale = xScale;
     const yLinearScale = yScale;
+    if (!yLinearScale) {
+        return {
+            shapes: [],
+            labels: [],
+            htmlElements: [],
+        };
+    }
     const yScaleRange = yLinearScale.range();
     const plotHeight = Math.abs(yScaleRange[0] - yScaleRange[1]);
     const sortingOptions = get(seriesOptions, 'bar-y.dataSorting');
@@ -29,7 +36,7 @@ export const prepareBarYData = async (args) => {
     })();
     const groupedData = groupBarYDataByYValue(series, yAxis);
     const { bandSize, barGap, barSize } = yAxis[0].type === 'category'
-        ? getBarYLayoutForCategoryScale({ groupedData, seriesOptions, yScale })
+        ? getBarYLayoutForCategoryScale({ groupedData, seriesOptions, yScale: yLinearScale })
         : getBarYLayoutForNumericScale({
             groupedData,
             seriesOptions,

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

@@ -25,7 +25,7 @@ type Args = {
     xAxis: PreparedAxis | null;
     yAxis: PreparedAxis[];
     xScale?: ChartScale;
-    yScale?: ChartScale[];
+    yScale?: (ChartScale | undefined)[];
     split: PreparedSplit;
     htmlLayout: HTMLElement | null;
     clipPathId: string;

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

@@ -8,7 +8,7 @@ export declare const prepareLineData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
+    yScale: (ChartScale | undefined)[];
     split: PreparedSplit;
     isOutsideBounds: (x: number, y: number) => boolean;
 }) => Promise<PreparedLineData[]>;

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

@@ -50,6 +50,9 @@ export const prepareLineData = async (args) => {
         const seriesYAxis = yAxis[yAxisIndex];
         const yAxisTop = ((_a = split.plots[seriesYAxis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
         const seriesYScale = yScale[s.yAxis];
+        if (!seriesYScale) {
+            continue;
+        }
         const points = s.data.map((d) => ({
             x: getXValue({ point: d, points: s.data, xAxis, xScale }),
             y: yAxisTop +

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

@@ -7,6 +7,6 @@ export declare const prepareScatterData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
+    yScale: (ChartScale | undefined)[];
     isOutsideBounds: (x: number, y: number) => boolean;
 }) => PreparedScatterData[];

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

@@ -9,6 +9,9 @@ export const prepareScatterData = (args) => {
         const yAxisIndex = get(s, 'yAxis', 0);
         const seriesYAxis = yAxis[yAxisIndex];
         const seriesYScale = yScale[yAxisIndex];
+        if (!seriesYScale) {
+            return acc;
+        }
         const filteredData = xAxis.type === 'category' || seriesYAxis.type === 'category'
             ? s.data
             : getFilteredLinearScatterData(s.data);
@@ -16,6 +19,9 @@ export const prepareScatterData = (args) => {
             var _a;
             const x = getXValue({ point: d, xAxis, xScale });
             const y = getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale });
+            if (typeof x === 'undefined' || typeof y === 'undefined') {
+                return;
+            }
             acc.push({
                 point: {
                     data: d,

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

@@ -8,5 +8,5 @@ export declare const prepareWaterfallData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
+    yScale: (ChartScale | undefined)[];
 }) => Promise<PreparedWaterfallData[]>;

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

@@ -55,6 +55,9 @@ function getBandWidth(args) {
 export const prepareWaterfallData = async (args) => {
     const { series, seriesOptions, xAxis, xScale, yAxis: [yAxis], yScale: [yScale], } = args;
     const yLinearScale = yScale;
+    if (!yLinearScale) {
+        return [];
+    }
     const plotHeight = yLinearScale(yLinearScale.domain()[0]);
     const barMaxWidth = get(seriesOptions, 'waterfall.barMaxWidth');
     const barPadding = get(seriesOptions, 'waterfall.barPadding');
@@ -72,7 +75,7 @@ export const prepareWaterfallData = async (args) => {
     const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(bandWidth - rectGap, barMaxWidth));
     const yZero = getYValue({
         point: { y: 0 },
-        yScale,
+        yScale: yLinearScale,
         yAxis,
     });
     let totalValue = 0;
@@ -92,7 +95,7 @@ export const prepareWaterfallData = async (args) => {
         const height = yZero -
             getYValue({
                 point: { y: Math.abs(yValue) },
-                yScale,
+                yScale: yLinearScale,
                 yAxis,
             });
         let y;
@@ -101,7 +104,7 @@ export const prepareWaterfallData = async (args) => {
                 point: {
                     y: yValue > 0 ? yValue : 0,
                 },
-                yScale,
+                yScale: yLinearScale,
                 yAxis,
             });
         }

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

@@ -12,7 +12,7 @@ interface UseZoomProps {
     xAxis: PreparedAxis | null;
     xScale?: ChartScale;
     yAxis: PreparedAxis[];
-    yScale?: ChartScale[];
+    yScale?: (ChartScale | undefined)[];
 }
 export declare function useZoom(props: UseZoomProps): void;
 export {};

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

@@ -15,5 +15,5 @@ export interface ZoomState {
      * 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][];
+    y: ([number, number] | undefined)[];
 }

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

@@ -7,6 +7,6 @@ export declare function selectionToZoomBounds(args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxes: PreparedAxis[];
-    yScales: ChartScale[];
+    yScales: (ChartScale | undefined)[];
     zoomType: PreparedZoom['type'];
 }): Partial<ZoomState>;

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

@@ -13,11 +13,17 @@ export function selectionToZoomBounds(args) {
                 if (!Array.isArray(zoomState.y)) {
                     zoomState.y = [];
                 }
-                zoomState.y.push(selectionYToZoomBounds({
-                    yAxis,
-                    yScale: yScales[index],
-                    selection: [y1, y0],
-                }));
+                const yScale = yScales[index];
+                if (yScale) {
+                    zoomState.y.push(selectionYToZoomBounds({
+                        yAxis,
+                        yScale,
+                        selection: [y1, y0],
+                    }));
+                }
+                else {
+                    zoomState.y.push(undefined);
+                }
             });
             break;
         }
@@ -29,11 +35,17 @@ export function selectionToZoomBounds(args) {
                 if (!Array.isArray(zoomState.y)) {
                     zoomState.y = [];
                 }
-                zoomState.y.push(selectionYToZoomBounds({
-                    yAxis,
-                    yScale: yScales[index],
-                    selection: [y0, y1],
-                }));
+                const yScale = yScales[index];
+                if (yScale) {
+                    zoomState.y.push(selectionYToZoomBounds({
+                        yAxis,
+                        yScale,
+                        selection: [y0, y1],
+                    }));
+                }
+                else {
+                    zoomState.y.push(undefined);
+                }
             });
             break;
         }

package/dist/cjs/index.d.ts

@@ -1,3 +1,3 @@
-export { CustomShapeRenderer } from './utils';
+export { CustomShapeRenderer, getFormattedValue } from './utils';
 export * from './components';
 export * from './types';

package/dist/cjs/index.js

@@ -1,3 +1,3 @@
-export { CustomShapeRenderer } from './utils';
+export { CustomShapeRenderer, getFormattedValue } from './utils';
 export * from './components';
 export * from './types';

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

@@ -35,6 +35,10 @@ export interface ChartAxisLabels {
      * @default false
      * */
     html?: boolean;
+    /** The maximum width of the axis labels(absolute or relative to the chart area).
+     * If more than that, it collapses into three points.
+     * */
+    maxWidth?: number | string;
 }
 export interface ChartAxis {
     categories?: string[];
@@ -74,8 +78,14 @@ export interface ChartAxis {
     };
     ticks?: {
         /** Pixel interval of the tick marks. Not applicable to categorized axis.
-         * The specified value is only a hint; the interval between ticks can be greater or less depending on the data. */
+         * The specified value is only a hint; the interval between ticks can be greater or less depending on the data.
+         *
+         * @deprecated use `interval` instead
+         * */
         pixelInterval?: number;
+        /** Interval of the tick marks(absolute or relative to the chart area). Not applicable to categorized axis.
+         * The specified value is only a hint; the interval between ticks can be greater or less depending on the data. */
+        interval?: number | string;
     };
     /** Padding of the max value relative to the length of the axis.
      * A padding of 0.05 will make a 100px axis 5px longer.

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

@@ -11,6 +11,7 @@ export type CustomFormat = {
     type: 'custom';
     formatter: (args: {
         value: unknown;
+        formattedValue?: string;
     }) => string;
 };
 export type ValueFormat = NumberFormat | DateFormat;

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

@@ -130,4 +130,7 @@ export interface ChartTooltip<T = MeaningfulAny> {
         /** Formatting settings for totals tooltip value. */
         valueFormat?: ValueFormat;
     };
+    /** Can be used for the UI automated test.
+     * It is assigned as a data-qa attribute to an element. */
+    qa?: string;
 }

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

@@ -0,0 +1 @@
+export declare function getMinSpaceBetween<T>(arr: T[], iterator: (item: T) => number): number;

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

@@ -0,0 +1,9 @@
+export function getMinSpaceBetween(arr, iterator) {
+    return arr.reduce((acc, item, index) => {
+        const prev = arr[index - 1];
+        if (prev) {
+            return Math.min(acc, Math.abs(iterator(prev) - iterator(item)));
+        }
+        return acc;
+    }, Infinity);
+}

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

@@ -1,5 +1,5 @@
 import { path, select } from 'd3';
-import { getXAxisItems, getXAxisOffset, getXTickPosition } from '../axis';
+import { getAxisItems, getXAxisOffset, getXTickPosition } from '../axis';
 import { calculateCos, calculateSin } from '../math';
 import { getLabelsSize, setEllipsisForOverflowText } from '../text';
 const AXIS_BOTTOM_HTML_LABELS_DATA_ATTR = 'data-axis-bottom-html-labels';
@@ -151,7 +151,7 @@ export async function axisBottom(args) {
     const htmlSelection = select(htmlLayout);
     const offset = getXAxisOffset();
     const position = getXTickPosition({ scale, offset });
-    const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
+    const values = getAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
     const labelHeight = (await getLabelsSize({
         labels: values.map(labelFormat),
         style: labelsStyle,
@@ -183,7 +183,7 @@ export async function axisBottom(args) {
             ? values.map((v) => {
                 var _a;
                 return {
-                    content: v,
+                    content: String(v),
                     left: position(v) + offset + boundsOffsetLeft,
                     top: Math.abs(((_a = tickItems === null || tickItems === void 0 ? void 0 : tickItems[0]) === null || _a === void 0 ? void 0 : _a[1]) || 0) + labelsMargin + boundsOffsetTop,
                 };

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

@@ -1,23 +1,24 @@
 import type { AxisDomain, AxisScale, ScaleBand } from 'd3';
-import type { PreparedAxis, PreparedAxisPlotBand, PreparedSplit } from '../../hooks';
+import type { ChartScale, PreparedAxis, PreparedAxisPlotBand, PreparedSplit } from '../../hooks';
 import type { TextRow } from './text';
 import type { AxisDirection } from './types';
+type Ticks = number[] | string[] | Date[];
 export declare function getTicksCount({ axis, range }: {
     axis: PreparedAxis;
     range: number;
 }): number | undefined;
-export declare function isBandScale(scale: AxisScale<AxisDomain>): scale is ScaleBand<AxisDomain>;
-export declare function getScaleTicks(scale: AxisScale<AxisDomain>, ticksCount?: number): any;
+export declare function isBandScale(scale: ChartScale | AxisScale<AxisDomain>): scale is ScaleBand<string>;
+export declare function getScaleTicks(scale: ChartScale | AxisScale<AxisDomain>, ticksCount?: number): Ticks;
 export declare function getXAxisOffset(): 0 | 0.5;
 export declare function getXTickPosition({ scale, offset }: {
     scale: AxisScale<AxisDomain>;
     offset: number;
-}): (d: AxisDomain) => number;
-export declare function getXAxisItems({ scale, count, maxCount, }: {
-    scale: AxisScale<AxisDomain>;
+}): (d: unknown) => number;
+export declare function getAxisItems({ scale, count, maxCount, }: {
+    scale: ChartScale | AxisScale<AxisDomain>;
     count?: number;
     maxCount?: number;
-}): any;
+}): Ticks;
 export declare function getMaxTickCount({ axis, width }: {
     axis: PreparedAxis;
     width: number;
@@ -35,9 +36,14 @@ interface GetBandsPositionArgs {
     axisScale: AxisScale<AxisDomain>;
     axis: AxisDirection;
 }
-export declare const getAxisPlotsPosition: (axis: PreparedAxis, split: PreparedSplit, width?: number) => string;
+export declare const getAxisPlotsPosition: (axis: PreparedAxis, split: PreparedSplit, width?: number) => number[];
 export declare function getBandsPosition(args: GetBandsPositionArgs): {
     from: number;
     to: number;
 };
+export declare function getClosestPointsRange(axis: PreparedAxis, points: AxisDomain[]): number | undefined;
+export declare function getLabelFormatter({ axis, scale }: {
+    axis: PreparedAxis;
+    scale: ChartScale;
+}): (value: AxisDomain) => string;
 export {};