@gravity-ui/charts 1.34.0 → 1.34.2

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

@@ -94,11 +94,13 @@ export const prepareAreaData = async (args) => {
             const positiveStackValues = new Map();
             const negativeStackValues = new Map();
             xValues.forEach(([key]) => {
-                positiveStackValues.set(key, 0);
-                negativeStackValues.set(key, 0);
+                positiveStackValues.set(key, { prev: 0, next: 0 });
+                negativeStackValues.set(key, { prev: 0, next: 0 });
             });
             const seriesStackData = [];
-            for (let j = 0; j < seriesStack.length; j++) {
+            // Process series in reverse order so that the first series in input
+            // appears at the top of the stack (furthest from baseline)
+            for (let j = seriesStack.length - 1; j >= 0; j--) {
                 const s = seriesStack[j];
                 const yAxisIndex = s.yAxis;
                 const seriesYAxis = yAxis[yAxisIndex];
@@ -123,40 +125,97 @@ export const prepareAreaData = async (args) => {
                         : d.x);
                     return m.set(key, d);
                 }, new Map());
-                const points = xValues.reduce((pointsAcc, [x, xValue]) => {
-                    var _a, _b;
+                const points = xValues.reduce((pointsAcc, [x, xValue], index) => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h;
                     const d = (_a = seriesData.get(x)) !== null && _a !== void 0 ? _a : {
                         x,
                         y: 0,
                     };
                     const yDataValue = (_b = d.y) !== null && _b !== void 0 ? _b : null;
+                    if (s.nullMode === 'connect' && yDataValue === null) {
+                        return pointsAcc;
+                    }
                     const yValue = getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale });
-                    let y = null;
-                    let y0 = yAxisTop + yMin;
                     if (typeof yDataValue === 'number' && yValue !== null) {
+                        const prevPoint = seriesData.get((_c = xValues[index - 1]) === null || _c === void 0 ? void 0 : _c[0]);
+                        const nextPoint = seriesData.get((_d = xValues[index + 1]) === null || _d === void 0 ? void 0 : _d[0]);
+                        const currentPointStackHeight = Math.abs(yMin - yValue);
                         if (yDataValue >= 0) {
-                            const positiveStackHeight = positiveStackValues.get(x) || 0;
-                            y = yAxisTop + yValue - positiveStackHeight;
-                            y0 -= positiveStackHeight;
-                            positiveStackValues.set(x, positiveStackHeight + (yMin - yValue));
+                            const positiveStackHeights = positiveStackValues.get(x);
+                            let prevSectionStackHeight = (_e = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.prev) !== null && _e !== void 0 ? _e : 0;
+                            let nextSectionStackHeight = (_f = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.next) !== null && _f !== void 0 ? _f : 0;
+                            pointsAcc.push({
+                                y0: yAxisTop + yMin - prevSectionStackHeight,
+                                x: xValue,
+                                y: yAxisTop + yValue - prevSectionStackHeight,
+                                data: d,
+                                series: s,
+                            });
+                            if (prevSectionStackHeight !== nextSectionStackHeight) {
+                                pointsAcc.push({
+                                    y0: yAxisTop + yMin - nextSectionStackHeight,
+                                    x: xValue,
+                                    y: yAxisTop + yValue - nextSectionStackHeight,
+                                    data: d,
+                                    series: s,
+                                });
+                            }
+                            if ((prevPoint === null || prevPoint === void 0 ? void 0 : prevPoint.y) !== null) {
+                                prevSectionStackHeight =
+                                    prevSectionStackHeight + currentPointStackHeight;
+                            }
+                            if ((nextPoint === null || nextPoint === void 0 ? void 0 : nextPoint.y) !== null) {
+                                nextSectionStackHeight =
+                                    nextSectionStackHeight + currentPointStackHeight;
+                            }
+                            positiveStackValues.set(x, {
+                                prev: prevSectionStackHeight,
+                                next: nextSectionStackHeight,
+                            });
                         }
                         else {
-                            const negativeStackHeight = negativeStackValues.get(x) || 0;
-                            y = yAxisTop + yValue + negativeStackHeight;
-                            y0 += negativeStackHeight;
-                            negativeStackValues.set(x, negativeStackHeight + (yValue - yMin));
+                            const negativeStackHeights = negativeStackValues.get(x);
+                            let prevSectionStackHeight = (_g = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.prev) !== null && _g !== void 0 ? _g : 0;
+                            let nextSectionStackHeight = (_h = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.next) !== null && _h !== void 0 ? _h : 0;
+                            pointsAcc.push({
+                                y0: yAxisTop + yMin + prevSectionStackHeight,
+                                x: xValue,
+                                y: yAxisTop + yValue + prevSectionStackHeight,
+                                data: d,
+                                series: s,
+                            });
+                            if (prevSectionStackHeight !== nextSectionStackHeight) {
+                                pointsAcc.push({
+                                    y0: yAxisTop + yMin + nextSectionStackHeight,
+                                    x: xValue,
+                                    y: yAxisTop + yValue + nextSectionStackHeight,
+                                    data: d,
+                                    series: s,
+                                });
+                            }
+                            if ((prevPoint === null || prevPoint === void 0 ? void 0 : prevPoint.y) !== null) {
+                                prevSectionStackHeight =
+                                    prevSectionStackHeight + currentPointStackHeight;
+                            }
+                            if ((nextPoint === null || nextPoint === void 0 ? void 0 : nextPoint.y) !== null) {
+                                nextSectionStackHeight =
+                                    nextSectionStackHeight + currentPointStackHeight;
+                            }
+                            negativeStackValues.set(x, {
+                                prev: prevSectionStackHeight,
+                                next: nextSectionStackHeight,
+                            });
                         }
                     }
-                    if (s.nullMode === 'connect' && yDataValue === null) {
-                        return pointsAcc;
+                    else {
+                        pointsAcc.push({
+                            y0: yAxisTop + yMin,
+                            x: xValue,
+                            y: null,
+                            data: d,
+                            series: s,
+                        });
                     }
-                    pointsAcc.push({
-                        y0,
-                        x: xValue,
-                        y,
-                        data: d,
-                        series: s,
-                    });
                     return pointsAcc;
                 }, []);
                 const labels = [];
@@ -197,7 +256,8 @@ export const prepareAreaData = async (args) => {
             }
             if (series.some((s) => s.stacking === 'percent')) {
                 xValues.forEach(([x], index) => {
-                    const stackHeight = positiveStackValues.get(x) || 0;
+                    var _a;
+                    const stackHeight = ((_a = positiveStackValues.get(x)) === null || _a === void 0 ? void 0 : _a.prev) || 0;
                     let acc = 0;
                     const ratio = plotHeight / stackHeight;
                     seriesStackData.forEach((item) => {

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

@@ -5,6 +5,7 @@ import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales/types';
 import type { PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
 import type { PreparedSplit } from '../useSplit/types';
+import type { ZoomState } from '../useZoom/types';
 import type { PreparedAreaData } from './area/types';
 import type { PreparedBarXData } from './bar-x';
 import type { PreparedBarYData } from './bar-y/types';
@@ -37,8 +38,10 @@ type Args = {
     isRangeSlider?: boolean;
     xScale?: ChartScale;
     yScale?: (ChartScale | undefined)[];
+    zoomState?: Partial<ZoomState>;
 };
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: ShapeData[];
+    shapesReady: boolean;
 };

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

@@ -20,6 +20,7 @@ import { prepareSankeyData } from './sankey/prepare-data';
 import { ScatterSeriesShape, prepareScatterData } from './scatter';
 import { TreemapSeriesShape } from './treemap';
 import { prepareTreemapData } from './treemap/prepare-data';
+import { getSeriesClipPathId } from './utils';
 import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
 import './styles.css';
 function IS_OUTSIDE_BOUNDS() {
@@ -30,9 +31,10 @@ function shouldUseClipPathId(seriesType, clipPathBySeriesType) {
     return (_a = clipPathBySeriesType === null || clipPathBySeriesType === void 0 ? void 0 : clipPathBySeriesType[seriesType]) !== null && _a !== void 0 ? _a : true;
 }
 export const useShapes = (args) => {
-    const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, isRangeSlider, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, } = args;
+    const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, isRangeSlider, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, zoomState, } = args;
     const [shapesElemens, setShapesElements] = React.useState([]);
     const [shapesElemensData, setShapesElemensData] = React.useState([]);
+    const shapesReadyRef = React.useRef(false);
     const countedRef = React.useRef(0);
     React.useEffect(() => {
         countedRef.current++;
@@ -44,7 +46,7 @@ export const useShapes = (args) => {
             const shapes = [];
             await Promise.all(
             // eslint-disable-next-line complexity
-            Array.from(groupedSeries).map(async (item) => {
+            Array.from(groupedSeries).map(async (item, index) => {
                 const [seriesType, chartSeries] = item;
                 switch (seriesType) {
                     case SERIES_TYPE.BarX: {
@@ -60,8 +62,8 @@ export const useShapes = (args) => {
                                 split,
                                 isRangeSlider,
                             });
-                            shapes.push(React.createElement(BarXSeriesShapes, { key: SERIES_TYPE.BarX, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                            shapesData.push(...preparedData);
+                            shapes[index] = (React.createElement(BarXSeriesShapes, { key: SERIES_TYPE.BarX, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.splice(index, 0, ...preparedData);
                         }
                         break;
                     }
@@ -77,8 +79,8 @@ export const useShapes = (args) => {
                                 yAxis,
                                 yScale,
                             });
-                            shapes.push(React.createElement(BarYSeriesShapes, { key: SERIES_TYPE.BarY, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                            shapesData.push(...preparedData.shapes);
+                            shapes[index] = (React.createElement(BarYSeriesShapes, { key: SERIES_TYPE.BarY, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.splice(index, 0, ...preparedData.shapes);
                         }
                         break;
                     }
@@ -92,8 +94,8 @@ export const useShapes = (args) => {
                                 yAxis,
                                 yScale,
                             });
-                            shapes.push(React.createElement(WaterfallSeriesShapes, { key: SERIES_TYPE.Waterfall, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                            shapesData.push(...preparedData);
+                            shapes[index] = (React.createElement(WaterfallSeriesShapes, { key: SERIES_TYPE.Waterfall, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.splice(index, 0, ...preparedData);
                         }
                         break;
                     }
@@ -109,8 +111,13 @@ export const useShapes = (args) => {
                                 isOutsideBounds,
                                 isRangeSlider,
                             });
-                            shapes.push(React.createElement(LineSeriesShapes, { key: SERIES_TYPE.Line, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                            shapesData.push(...preparedData);
+                            const resultClipPathId = getSeriesClipPathId({
+                                clipPathId,
+                                yAxis,
+                                zoomState,
+                            });
+                            shapes[index] = (React.createElement(LineSeriesShapes, { key: SERIES_TYPE.Line, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: resultClipPathId }));
+                            shapesData.splice(index, 0, ...preparedData);
                         }
                         break;
                     }
@@ -127,8 +134,8 @@ export const useShapes = (args) => {
                                 isOutsideBounds,
                                 isRangeSlider,
                             });
-                            shapes.push(React.createElement(AreaSeriesShapes, { key: SERIES_TYPE.Area, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                            shapesData.push(...preparedData);
+                            shapes[index] = (React.createElement(AreaSeriesShapes, { key: SERIES_TYPE.Area, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.splice(index, 0, ...preparedData);
                         }
                         break;
                     }
@@ -142,10 +149,10 @@ export const useShapes = (args) => {
                                 yScale,
                                 isOutsideBounds,
                             });
-                            shapes.push(React.createElement(ScatterSeriesShape, { key: SERIES_TYPE.Scatter, clipPathId: shouldUseClipPathId(SERIES_TYPE.Scatter, clipPathBySeriesType)
+                            shapes[index] = (React.createElement(ScatterSeriesShape, { key: SERIES_TYPE.Scatter, clipPathId: shouldUseClipPathId(SERIES_TYPE.Scatter, clipPathBySeriesType)
                                     ? clipPathId
                                     : undefined, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                            shapesData.push(...preparedData);
+                            shapesData.splice(index, 0, ...preparedData);
                         }
                         break;
                     }
@@ -155,8 +162,8 @@ export const useShapes = (args) => {
                             boundsWidth,
                             boundsHeight,
                         });
-                        shapes.push(React.createElement(PieSeriesShapes, { key: SERIES_TYPE.Pie, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                        shapesData.push(...preparedData);
+                        shapes[index] = (React.createElement(PieSeriesShapes, { key: SERIES_TYPE.Pie, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapesData.splice(index, 0, ...preparedData);
                         break;
                     }
                     case SERIES_TYPE.Treemap: {
@@ -167,8 +174,8 @@ export const useShapes = (args) => {
                             width: boundsWidth,
                             height: boundsHeight,
                         });
-                        shapes.push(React.createElement(TreemapSeriesShape, { key: SERIES_TYPE.Treemap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                        shapesData.push(preparedData);
+                        shapes[index] = (React.createElement(TreemapSeriesShape, { key: SERIES_TYPE.Treemap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapesData.splice(index, 0, preparedData);
                         break;
                     }
                     case SERIES_TYPE.Sankey: {
@@ -177,8 +184,8 @@ export const useShapes = (args) => {
                             width: boundsWidth,
                             height: boundsHeight,
                         });
-                        shapes.push(React.createElement(SankeySeriesShape, { key: SERIES_TYPE.Sankey, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                        shapesData.push(preparedData);
+                        shapes[index] = (React.createElement(SankeySeriesShape, { key: SERIES_TYPE.Sankey, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapesData.splice(index, 0, preparedData);
                         break;
                     }
                     case SERIES_TYPE.Radar: {
@@ -187,8 +194,8 @@ export const useShapes = (args) => {
                             boundsWidth,
                             boundsHeight,
                         });
-                        shapes.push(React.createElement(RadarSeriesShapes, { key: SERIES_TYPE.Radar, dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                        shapesData.push(...preparedData);
+                        shapes[index] = (React.createElement(RadarSeriesShapes, { key: SERIES_TYPE.Radar, dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapesData.splice(index, 0, ...preparedData);
                         break;
                     }
                     case SERIES_TYPE.Heatmap: {
@@ -200,8 +207,8 @@ export const useShapes = (args) => {
                                 yAxis: yAxis[0],
                                 yScale: yScale[0],
                             });
-                            shapes.push(React.createElement(HeatmapSeriesShapes, { key: SERIES_TYPE.Heatmap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                            shapesData.push(preparedData);
+                            shapes[index] = (React.createElement(HeatmapSeriesShapes, { key: SERIES_TYPE.Heatmap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                            shapesData.splice(index, 0, preparedData);
                         }
                         break;
                     }
@@ -211,8 +218,8 @@ export const useShapes = (args) => {
                             boundsWidth,
                             boundsHeight,
                         });
-                        shapes.push(React.createElement(FunnelSeriesShapes, { key: "funnel", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                        shapesData.push(preparedData);
+                        shapes[index] = (React.createElement(FunnelSeriesShapes, { key: "funnel", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapesData.splice(index, 0, preparedData);
                         break;
                     }
                     default: {
@@ -223,6 +230,7 @@ export const useShapes = (args) => {
                 }
             }));
             if (countedRef.current === currentRun) {
+                shapesReadyRef.current = true;
                 setShapesElements(shapes);
                 setShapesElemensData(shapesData);
             }
@@ -243,6 +251,11 @@ export const useShapes = (args) => {
         xScale,
         yAxis,
         yScale,
+        zoomState,
     ]);
-    return { shapes: shapesElemens, shapesData: shapesElemensData };
+    return {
+        shapes: shapesElemens,
+        shapesData: shapesElemensData,
+        shapesReady: shapesReadyRef.current,
+    };
 };

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

@@ -2,6 +2,7 @@ import type { BaseType } from 'd3';
 import type { BasicInactiveState } from '../../types';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales/types';
+import type { ZoomState } from '../useZoom/types';
 export declare function getXValue(args: {
     point: {
         x?: number | string | null;
@@ -46,3 +47,12 @@ export declare function getRectBorderPath(args: {
     borderWidth: number;
     borderRadius?: number | number[];
 }): string;
+export declare function getClipPathIdByBounds(args: {
+    clipPathId: string;
+    bounds?: 'horizontal';
+}): string;
+export declare function getSeriesClipPathId(args: {
+    clipPathId: string;
+    yAxis: PreparedYAxis[];
+    zoomState?: Partial<ZoomState>;
+}): string;

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

@@ -131,3 +131,18 @@ export function getRectBorderPath(args) {
     }).toString();
     return `${outerPath} ${innerPath}`;
 }
+export function getClipPathIdByBounds(args) {
+    const { bounds, clipPathId } = args;
+    return bounds ? `${clipPathId}-${bounds}` : clipPathId;
+}
+export function getSeriesClipPathId(args) {
+    const { clipPathId, yAxis, zoomState } = args;
+    const hasMinOrMax = yAxis.some((axis) => {
+        return typeof (axis === null || axis === void 0 ? void 0 : axis.min) === 'number' || typeof (axis === null || axis === void 0 ? void 0 : axis.max) === 'number';
+    });
+    const hasZoom = zoomState && Object.keys(zoomState).length > 0;
+    if (!hasZoom && !hasMinOrMax) {
+        return getClipPathIdByBounds({ clipPathId, bounds: 'horizontal' });
+    }
+    return getClipPathIdByBounds({ clipPathId });
+}

package/dist/esm/setup-jsdom.js

@@ -0,0 +1,19 @@
+"use strict";
+// Global mocks for jsdom environment.
+// Guarded by typeof checks so this file is safe to run in the `node` environment too.
+if (typeof document !== 'undefined') {
+    // jsdom does not implement document.fonts
+    if (!document.fonts) {
+        Object.defineProperty(document, 'fonts', {
+            value: { ready: Promise.resolve() },
+            configurable: true,
+        });
+    }
+}
+if (typeof HTMLCanvasElement !== 'undefined') {
+    // jsdom does not implement HTMLCanvasElement.prototype.getContext (used for text measurement)
+    HTMLCanvasElement.prototype.getContext = (() => ({
+        font: '',
+        measureText: () => ({ width: 0 }),
+    }));
+}

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

@@ -3,9 +3,9 @@ import type { ChartScale, PreparedAxis, PreparedAxisPlotBand, PreparedSplit } fr
 import type { ChartAxis } from '../../../types';
 import type { AxisDirection } from '../types';
 type Ticks = number[] | string[] | Date[];
-export declare function getTicksCount({ axis, range }: {
+export declare function getTicksCountByPixelInterval({ axis, axisWidth, }: {
     axis: PreparedAxis;
-    range: number;
+    axisWidth: number;
 }): number | undefined;
 export declare function isBandScale(scale?: ChartScale | AxisScale<AxisDomain>): scale is ScaleBand<string>;
 export declare function isTimeScale(scale?: ChartScale | AxisScale<AxisDomain>): scale is ScaleTime<number, number>;

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

@@ -1,9 +1,9 @@
 import { ascending, descending, reverse, sort } from 'd3';
 import clamp from 'lodash/clamp';
-export function getTicksCount({ axis, range }) {
+export function getTicksCountByPixelInterval({ axis, axisWidth, }) {
     let ticksCount;
     if (axis.ticks.pixelInterval) {
-        ticksCount = Math.ceil(range / axis.ticks.pixelInterval);
+        ticksCount = Math.ceil(axisWidth / axis.ticks.pixelInterval);
     }
     return ticksCount;
 }

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

@@ -1,12 +1,13 @@
-import type { ChartScale, PreparedAxis } from '../../../hooks';
-export declare function getXAxisTickValues({ scale, axis, labelLineHeight, }: {
-    scale: ChartScale;
+import type { ChartScale, PreparedAxis, PreparedSeries } from '../../../hooks';
+import type { ChartSeries } from '../../../types';
+type TickValue = {
+    x: number;
+    value: number | string | Date;
+};
+export declare function getXAxisTickValues({ axis, labelLineHeight, scale, series, }: {
     axis: PreparedAxis;
     labelLineHeight: number;
-}): {
-    x: number;
-    value: number | Date;
-}[] | {
-    x: number;
-    value: string;
-}[];
+    scale: ChartScale;
+    series?: ChartSeries[] | PreparedSeries[];
+}): TickValue[];
+export {};

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

@@ -1,13 +1,34 @@
 import { getMinSpaceBetween } from '../array';
-import { getTicksCount, isBandScale, thinOut } from './common';
-export function getXAxisTickValues({ scale, axis, labelLineHeight, }) {
+import { isSeriesWithNumericalXValues } from '../series-type-guards';
+import { getTicksCountByPixelInterval, isBandScale, thinOut } from './common';
+const DEFAULT_TICKS_COUNT = 10;
+function getTicksCount(args) {
+    const { axis, axisWidth, series } = args;
+    const result = getTicksCountByPixelInterval({ axis, axisWidth });
+    if (typeof result === 'number') {
+        return result;
+    }
+    if (series) {
+        const xDataSet = new Set();
+        series === null || series === void 0 ? void 0 : series.forEach((item) => {
+            if (isSeriesWithNumericalXValues(item)) {
+                item.data.forEach((data) => {
+                    xDataSet.add(data.x);
+                });
+            }
+        });
+        return xDataSet.size < DEFAULT_TICKS_COUNT ? xDataSet.size : DEFAULT_TICKS_COUNT;
+    }
+    return DEFAULT_TICKS_COUNT;
+}
+export function getXAxisTickValues({ axis, labelLineHeight, scale, series, }) {
     if ('ticks' in scale && typeof scale.ticks === 'function') {
         const range = scale.range();
         const axisWidth = Math.abs(range[0] - range[1]);
         if (!axisWidth) {
             return [];
         }
-        const scaleTicksCount = getTicksCount({ axis, range: axisWidth });
+        const scaleTicksCount = getTicksCount({ axis, axisWidth, series });
         const scaleTicks = scale.ticks(scaleTicksCount);
         const originalTickValues = scaleTicks.map((t) => ({
             x: scale(t),

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

@@ -1,4 +1,5 @@
 import type { BaseTextStyle, ChartSeries, ChartSeriesData } from '../../types';
+import type { UnknownSeries } from './series-type-guards';
 import type { AxisDirection } from './types';
 export * from './axis/common';
 export * from './array';
@@ -8,41 +9,13 @@ export * from './labels';
 export * from './legend';
 export * from './math';
 export * from './series';
+export * from './series-type-guards';
 export * from './symbol';
 export * from './text';
 export * from './time';
 export * from './zoom';
 export declare const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS: ChartSeries['type'][];
 export declare const CHART_SERIES_WITH_VOLUME_ON_X_AXIS: ChartSeries['type'][];
-type UnknownSeries = {
-    type: ChartSeries['type'];
-    data: unknown;
-};
-/**
- * Checks whether the series should be drawn with axes.
- *
- * @param series - The series object to check.
- * @returns `true` if the series should be drawn with axes, `false` otherwise.
- */
-export declare function isAxisRelatedSeries(series: UnknownSeries): boolean;
-export declare function isSeriesWithNumericalXValues(series: UnknownSeries): series is {
-    type: ChartSeries['type'];
-    data: {
-        x: number;
-    }[];
-};
-export declare function isSeriesWithNumericalYValues(series: UnknownSeries): series is {
-    type: ChartSeries['type'];
-    data: {
-        y: number;
-    }[];
-};
-export declare function isSeriesWithCategoryValues(series: UnknownSeries): series is {
-    type: ChartSeries['type'];
-    data: {
-        category: string;
-    }[];
-};
 export declare const getDomainDataXBySeries: (series: UnknownSeries[]) => ({} | undefined)[];
 export declare function getDefaultMaxXAxisValue(series: UnknownSeries[]): 0 | undefined;
 export declare function getDefaultMinXAxisValue(series: UnknownSeries[]): number | undefined;

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

@@ -5,6 +5,7 @@ import sortBy from 'lodash/sortBy';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE, SERIES_TYPE } from '../../constants';
 import { getSeriesStackId } from '../../hooks/useSeries/utils';
 import { getWaterfallPointSubtotal } from './series/waterfall';
+import { isSeriesWithNumericalXValues, isSeriesWithNumericalYValues } from './series-type-guards';
 export * from './axis/common';
 export * from './array';
 export * from './color';
@@ -13,35 +14,17 @@ export * from './labels';
 export * from './legend';
 export * from './math';
 export * from './series';
+export * from './series-type-guards';
 export * from './symbol';
 export * from './text';
 export * from './time';
 export * from './zoom';
-const CHARTS_WITHOUT_AXIS = ['pie', 'treemap', 'sankey', 'radar', 'funnel'];
 export const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS = [
     'bar-x',
     'area',
     'waterfall',
 ];
 export const CHART_SERIES_WITH_VOLUME_ON_X_AXIS = ['bar-y'];
-/**
- * Checks whether the series should be drawn with axes.
- *
- * @param series - The series object to check.
- * @returns `true` if the series should be drawn with axes, `false` otherwise.
- */
-export function isAxisRelatedSeries(series) {
-    return !CHARTS_WITHOUT_AXIS.includes(series.type);
-}
-export function isSeriesWithNumericalXValues(series) {
-    return isAxisRelatedSeries(series);
-}
-export function isSeriesWithNumericalYValues(series) {
-    return isAxisRelatedSeries(series);
-}
-export function isSeriesWithCategoryValues(series) {
-    return isAxisRelatedSeries(series);
-}
 function getDomainDataForStackedSeries(seriesList, keyAttr = 'x', valueAttr = 'y') {
     const acc = [];
     const stackedSeries = group(seriesList, getSeriesStackId);

package/dist/esm/utils/chart/series-type-guards.d.ts

@@ -0,0 +1,30 @@
+import type { ChartSeries } from '../../types';
+export type UnknownSeries = {
+    type: ChartSeries['type'];
+    data: unknown;
+};
+/**
+ * Checks whether the series should be drawn with axes.
+ *
+ * @param series - The series object to check.
+ * @returns `true` if the series should be drawn with axes, `false` otherwise.
+ */
+export declare function isAxisRelatedSeries(series: UnknownSeries): boolean;
+export declare function isSeriesWithNumericalXValues(series: UnknownSeries): series is {
+    type: ChartSeries['type'];
+    data: {
+        x: number;
+    }[];
+};
+export declare function isSeriesWithNumericalYValues(series: UnknownSeries): series is {
+    type: ChartSeries['type'];
+    data: {
+        y: number;
+    }[];
+};
+export declare function isSeriesWithCategoryValues(series: UnknownSeries): series is {
+    type: ChartSeries['type'];
+    data: {
+        category: string;
+    }[];
+};

package/dist/esm/utils/chart/series-type-guards.js

@@ -0,0 +1,19 @@
+const CHARTS_WITHOUT_AXIS = ['pie', 'treemap', 'sankey', 'radar', 'funnel'];
+/**
+ * Checks whether the series should be drawn with axes.
+ *
+ * @param series - The series object to check.
+ * @returns `true` if the series should be drawn with axes, `false` otherwise.
+ */
+export function isAxisRelatedSeries(series) {
+    return !CHARTS_WITHOUT_AXIS.includes(series.type);
+}
+export function isSeriesWithNumericalXValues(series) {
+    return isAxisRelatedSeries(series);
+}
+export function isSeriesWithNumericalYValues(series) {
+    return isAxisRelatedSeries(series);
+}
+export function isSeriesWithCategoryValues(series) {
+    return isAxisRelatedSeries(series);
+}