@gravity-ui/charts 1.34.1 → 1.34.3

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;

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

package/dist/esm/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/esm/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,8 +95,34 @@ 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 tickStep = getMinSpaceBetween(values, (d) => Number(d.value));
+        let values = getXAxisTickValues({ scale, axis, labelLineHeight, series });
+        let tickStep = getMinSpaceBetween(values, (d) => Number(d.value));
+        if (axis.labels.enabled &&
+            axis.labels.rotation === 0 &&
+            !axis.labels.html &&
+            axis.type === 'datetime' &&
+            values.length > 1) {
+            let maxLabelWidth = 0;
+            for (let i = 0; i < values.length; i++) {
+                const label = formatAxisTickLabel({
+                    value: values[i].value,
+                    axis,
+                    step: tickStep,
+                });
+                const size = await getTextSize(label);
+                maxLabelWidth = Math.max(maxLabelWidth, size.width);
+            }
+            const currentSpacing = Math.abs(values[0].x - values[1].x) - axis.labels.padding * 2;
+            if (maxLabelWidth > currentSpacing) {
+                values = getXAxisTickValues({
+                    scale,
+                    axis,
+                    labelLineHeight: maxLabelWidth,
+                    series,
+                });
+                tickStep = getMinSpaceBetween(values, (d) => Number(d.value));
+            }
+        }
         const labelMaxWidth = values.length > 1
             ? Math.abs(values[0].x - values[1].x) - axis.labels.padding * 2
             : axisWidth;

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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);
@@ -37,7 +37,7 @@ async function setLabelSettings({ axis, seriesData, width, axisLabels, }) {
         }
         return false;
     };
-    const autoRotation = (_a = axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.autoRotation) !== null && _a !== void 0 ? _a : true;
+    const autoRotation = (_a = axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.autoRotation) !== null && _a !== void 0 ? _a : axis.type !== 'datetime';
     const overlapping = axis.labels.html ? false : await hasOverlappingLabels();
     const defaultRotation = overlapping && autoRotation ? -45 : 0;
     const rotation = axis.labels.html ? 0 : ((_b = axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.rotation) !== null && _b !== void 0 ? _b : defaultRotation);

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

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