@gravity-ui/charts 1.34.1 → 1.34.2

package/dist/cjs/components/AxisX/prepare-axis-data.d.ts

@@ -1,12 +1,13 @@
-import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
+import type { ChartScale, PreparedAxis, PreparedSeries, PreparedSplit } from '../../hooks';
 import type { AxisXData } from './types';
-export declare function prepareXAxisData({ axis, yAxis, scale, boundsWidth, boundsOffsetLeft, boundsOffsetRight, height, split, }: {
+export declare function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, height, scale, series, split, yAxis, }: {
     axis: PreparedAxis;
-    yAxis: PreparedAxis[];
-    scale: ChartScale;
-    boundsWidth: number;
     boundsOffsetLeft: number;
     boundsOffsetRight: number;
+    boundsWidth: number;
     height: number;
+    scale: ChartScale;
+    series: PreparedSeries[];
     split: PreparedSplit;
+    yAxis: PreparedAxis[];
 }): Promise<AxisXData[]>;

package/dist/cjs/components/AxisX/prepare-axis-data.js

@@ -68,7 +68,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
     return svgLabel;
 }
 // eslint-disable-next-line complexity
-export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, boundsOffsetLeft, boundsOffsetRight, height, split, }) {
+export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, height, scale, series, split, yAxis, }) {
     var _a, _b, _c, _d, _e, _f;
     const xAxisItems = [];
     for (let plotIndex = 0; plotIndex < split.plots.length; plotIndex++) {
@@ -95,7 +95,7 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
         const ticks = [];
         const getTextSize = getTextSizeFn({ style: axis.labels.style });
         const labelLineHeight = (await getTextSize('Tmp')).height;
-        const values = getXAxisTickValues({ scale, axis, labelLineHeight });
+        const values = getXAxisTickValues({ scale, axis, labelLineHeight, series });
         const tickStep = getMinSpaceBetween(values, (d) => Number(d.value));
         const labelMaxWidth = values.length > 1
             ? Math.abs(values[0].x - values[1].x) - axis.labels.padding * 2

package/dist/cjs/components/AxisY/utils.js

@@ -1,4 +1,4 @@
-import { getDomainDataYBySeries, getMinSpaceBetween, getTicksCount, isBandScale, thinOut, } from '../../utils';
+import { getDomainDataYBySeries, getMinSpaceBetween, getTicksCountByPixelInterval, isBandScale, thinOut, } from '../../utils';
 export function getTickValues({ scale, axis, labelLineHeight, series, }) {
     if ('ticks' in scale && typeof scale.ticks === 'function') {
         const range = scale.range();
@@ -13,10 +13,10 @@ export function getTickValues({ scale, axis, labelLineHeight, series, }) {
                 if (domainData.length < 3) {
                     return domainData;
                 }
-                const ticksCount = (_a = getTicksCount({ axis, range: height })) !== null && _a !== void 0 ? _a : domainData.length;
+                const ticksCount = (_a = getTicksCountByPixelInterval({ axis, axisWidth: height })) !== null && _a !== void 0 ? _a : domainData.length;
                 return scale.ticks(Math.min(ticksCount, domainData.length));
             }
-            const ticksCount = getTicksCount({ axis, range: height });
+            const ticksCount = getTicksCountByPixelInterval({ axis, axisWidth: height });
             return scale.ticks(ticksCount);
         };
         const scaleTicks = getScaleTicks();

package/dist/cjs/components/ChartInner/index.js

@@ -64,7 +64,7 @@ export const ChartInner = (props) => {
         preparedRangeSlider,
         tooltip: preparedTooltip,
     });
-    const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, prevHeight, prevWidth, shapes, shapesData, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
+    const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, prevHeight, prevWidth, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, preparedChart, rangeSliderDomain: (_a = rangeSliderRef.current) === null || _a === void 0 ? void 0 : _a.getDomain(), rangeSliderState, svgContainer: svgRef.current, updateZoomState,
         zoomState }));
@@ -160,18 +160,29 @@ export const ChartInner = (props) => {
         if (axis && scale) {
             const axisData = await prepareXAxisData({
                 axis,
-                yAxis,
-                scale,
-                boundsWidth,
                 boundsOffsetLeft: boundsOffsetLeft,
                 boundsOffsetRight: width - boundsWidth - boundsOffsetLeft,
+                boundsWidth,
                 height: boundsHeight,
+                scale,
+                series: preparedSeries.filter((s) => s.visible),
                 split: preparedSplit,
+                yAxis,
             });
             items.push(...axisData);
         }
         return items;
-    }, [xAxis, xScale, yAxis, boundsWidth, boundsOffsetLeft, width, boundsHeight, preparedSplit]);
+    }, [
+        boundsHeight,
+        boundsOffsetLeft,
+        boundsWidth,
+        preparedSeries,
+        preparedSplit,
+        width,
+        xAxis,
+        xScale,
+        yAxis,
+    ]);
     const xAxisDataItems = useAsyncState([], setXAxisDataItems);
     React.useEffect(() => {
         if (!initialized && xScale) {
@@ -207,12 +218,11 @@ export const ChartInner = (props) => {
         updateRangeSliderState,
         xScale,
     ]);
-    const areShapesReady = shapes.length > 0;
     React.useEffect(() => {
-        if (areShapesReady) {
+        if (shapesReady) {
             onReady === null || onReady === void 0 ? void 0 : onReady({ dimensions: { width, height } });
         }
-    }, [height, areShapesReady, onReady, width]);
+    }, [height, shapesReady, onReady, width]);
     const chartContent = (React.createElement(React.Fragment, null,
         React.createElement("defs", null,
             React.createElement("clipPath", { id: getClipPathIdByBounds({ clipPathId }) },

package/dist/cjs/components/ChartInner/useChartInnerProps.d.ts

@@ -44,6 +44,7 @@ export declare function useChartInnerProps(props: Props): {
     prevWidth: number | undefined;
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: import("../../hooks").ShapeData[];
+    shapesReady: boolean;
     svgXPos: number | undefined;
     xAxis: import("../../hooks").PreparedXAxis | null;
     xScale: import("../../hooks").ChartScale | undefined;

package/dist/cjs/components/ChartInner/useChartInnerProps.js

@@ -111,7 +111,7 @@ export function useChartInnerProps(props) {
     const isOutsideBounds = React.useCallback((x, y) => {
         return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
     }, [boundsHeight, boundsWidth]);
-    const { shapes, shapesData } = useShapes({
+    const { shapes, shapesData, shapesReady } = useShapes({
         boundsWidth,
         boundsHeight,
         clipPathBySeriesType: CLIP_PATH_BY_SERIES_TYPE,
@@ -183,6 +183,7 @@ export function useChartInnerProps(props) {
         prevWidth,
         shapes,
         shapesData,
+        shapesReady,
         svgXPos: x,
         xAxis,
         xScale,

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

@@ -15,7 +15,7 @@ async function setLabelSettings({ axis, seriesData, width, axisLabels, }) {
     }
     const getTextSize = getTextSizeFn({ style: axis.labels.style });
     const labelLineHeight = (await getTextSize('Tmp')).height;
-    const tickValues = getXAxisTickValues({ axis, scale, labelLineHeight });
+    const tickValues = getXAxisTickValues({ axis, scale, labelLineHeight, series: seriesData });
     const tickStep = getMinSpaceBetween(tickValues, (d) => Number(d.value));
     if (axis.type === 'datetime' && !(axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.dateFormat)) {
         axis.labels.dateFormat = getDefaultDateFormat(tickStep);

package/dist/cjs/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/cjs/hooks/useShapes/index.d.ts

@@ -43,4 +43,5 @@ type Args = {
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: ShapeData[];
+    shapesReady: boolean;
 };

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

@@ -34,6 +34,7 @@ export const useShapes = (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++;
@@ -45,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: {
@@ -61,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;
                     }
@@ -78,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;
                     }
@@ -93,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;
                     }
@@ -115,8 +116,8 @@ export const useShapes = (args) => {
                                 yAxis,
                                 zoomState,
                             });
-                            shapes.push(React.createElement(LineSeriesShapes, { key: SERIES_TYPE.Line, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: resultClipPathId }));
-                            shapesData.push(...preparedData);
+                            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;
                     }
@@ -133,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;
                     }
@@ -148,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;
                     }
@@ -161,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: {
@@ -173,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: {
@@ -183,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: {
@@ -193,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: {
@@ -206,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;
                     }
@@ -217,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: {
@@ -229,6 +230,7 @@ export const useShapes = (args) => {
                 }
             }));
             if (countedRef.current === currentRun) {
+                shapesReadyRef.current = true;
                 setShapesElements(shapes);
                 setShapesElemensData(shapesData);
             }
@@ -251,5 +253,9 @@ export const useShapes = (args) => {
         yScale,
         zoomState,
     ]);
-    return { shapes: shapesElemens, shapesData: shapesElemensData };
+    return {
+        shapes: shapesElemens,
+        shapesData: shapesElemensData,
+        shapesReady: shapesReadyRef.current,
+    };
 };

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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;