@gravity-ui/charts 1.11.0 → 1.11.2

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

@@ -23,160 +23,167 @@ export const useShapes = (args) => {
     const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, split, htmlLayout, clipPathId, isOutsideBounds, } = args;
     const [shapesElemens, setShapesElements] = React.useState([]);
     const [shapesElemensData, setShapesElemensData] = React.useState([]);
-    const setShapes = React.useCallback(async () => {
-        const visibleSeries = getOnlyVisibleSeries(series);
-        const groupedSeries = group(visibleSeries, (item) => item.type);
-        const shapesData = [];
-        const shapes = [];
-        await Promise.all(
-        // eslint-disable-next-line complexity
-        Array.from(groupedSeries).map(async (item) => {
-            const [seriesType, chartSeries] = item;
-            switch (seriesType) {
-                case 'bar-x': {
-                    if (xAxis && xScale && yScale) {
-                        const preparedData = await prepareBarXData({
-                            series: chartSeries,
-                            seriesOptions,
-                            xAxis,
-                            xScale,
-                            yAxis,
-                            yScale,
-                            boundsHeight,
-                        });
-                        shapes.push(React.createElement(BarXSeriesShapes, { key: "bar-x", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                        shapesData.push(...preparedData);
+    const countedRef = React.useRef(0);
+    React.useEffect(() => {
+        countedRef.current++;
+        (async () => {
+            const currentRun = countedRef.current;
+            const visibleSeries = getOnlyVisibleSeries(series);
+            const groupedSeries = group(visibleSeries, (item) => item.type);
+            const shapesData = [];
+            const shapes = [];
+            await Promise.all(
+            // eslint-disable-next-line complexity
+            Array.from(groupedSeries).map(async (item) => {
+                const [seriesType, chartSeries] = item;
+                switch (seriesType) {
+                    case 'bar-x': {
+                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                            const preparedData = await prepareBarXData({
+                                series: chartSeries,
+                                seriesOptions,
+                                xAxis,
+                                xScale,
+                                yAxis,
+                                yScale,
+                                boundsHeight,
+                            });
+                            shapes.push(React.createElement(BarXSeriesShapes, { key: "bar-x", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.push(...preparedData);
+                        }
+                        break;
                     }
-                    break;
-                }
-                case 'bar-y': {
-                    if (xAxis && xScale && yScale) {
-                        const preparedData = await prepareBarYData({
+                    case 'bar-y': {
+                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                            const preparedData = await prepareBarYData({
+                                series: chartSeries,
+                                seriesOptions,
+                                xAxis,
+                                xScale,
+                                yAxis,
+                                yScale,
+                            });
+                            shapes.push(React.createElement(BarYSeriesShapes, { key: "bar-y", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.push(...preparedData);
+                        }
+                        break;
+                    }
+                    case 'waterfall': {
+                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                            const preparedData = await prepareWaterfallData({
+                                series: chartSeries,
+                                seriesOptions,
+                                xAxis,
+                                xScale,
+                                yAxis,
+                                yScale,
+                            });
+                            shapes.push(React.createElement(WaterfallSeriesShapes, { key: "waterfall", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.push(...preparedData);
+                        }
+                        break;
+                    }
+                    case 'line': {
+                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                            const preparedData = await prepareLineData({
+                                series: chartSeries,
+                                xAxis,
+                                xScale,
+                                yAxis,
+                                yScale,
+                                split,
+                                isOutsideBounds,
+                            });
+                            shapes.push(React.createElement(LineSeriesShapes, { key: "line", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.push(...preparedData);
+                        }
+                        break;
+                    }
+                    case 'area': {
+                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                            const preparedData = await prepareAreaData({
+                                series: chartSeries,
+                                xAxis,
+                                xScale,
+                                yAxis,
+                                yScale,
+                                boundsHeight,
+                                isOutsideBounds,
+                            });
+                            shapes.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.push(...preparedData);
+                        }
+                        break;
+                    }
+                    case 'scatter': {
+                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                            const preparedData = prepareScatterData({
+                                series: chartSeries,
+                                xAxis,
+                                xScale,
+                                yAxis,
+                                yScale,
+                                isOutsideBounds,
+                            });
+                            shapes.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                            shapesData.push(...preparedData);
+                        }
+                        break;
+                    }
+                    case 'pie': {
+                        const preparedData = await preparePieData({
                             series: chartSeries,
-                            seriesOptions,
-                            xAxis,
-                            xScale,
-                            yAxis,
-                            yScale,
+                            boundsWidth,
+                            boundsHeight,
                         });
-                        shapes.push(React.createElement(BarYSeriesShapes, { key: "bar-y", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                        shapes.push(React.createElement(PieSeriesShapes, { key: "pie", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
+                        break;
                     }
-                    break;
-                }
-                case 'waterfall': {
-                    if (xAxis && xScale && yScale) {
-                        const preparedData = await prepareWaterfallData({
-                            series: chartSeries,
-                            seriesOptions,
-                            xAxis,
-                            xScale,
-                            yAxis,
-                            yScale,
+                    case 'treemap': {
+                        const preparedData = await prepareTreemapData({
+                            // We should have exactly one series with "treemap" type
+                            // Otherwise data validation should emit an error
+                            series: chartSeries[0],
+                            width: boundsWidth,
+                            height: boundsHeight,
                         });
-                        shapes.push(React.createElement(WaterfallSeriesShapes, { key: "waterfall", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                        shapesData.push(...preparedData);
+                        shapes.push(React.createElement(TreemapSeriesShape, { key: "treemap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapesData.push(preparedData);
+                        break;
                     }
-                    break;
-                }
-                case 'line': {
-                    if (xAxis && xScale && yScale) {
-                        const preparedData = await prepareLineData({
-                            series: chartSeries,
-                            xAxis,
-                            xScale,
-                            yAxis,
-                            yScale,
-                            split,
-                            isOutsideBounds,
+                    case 'sankey': {
+                        const preparedData = prepareSankeyData({
+                            series: chartSeries[0],
+                            width: boundsWidth,
+                            height: boundsHeight,
                         });
-                        shapes.push(React.createElement(LineSeriesShapes, { key: "line", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                        shapesData.push(...preparedData);
+                        shapes.push(React.createElement(SankeySeriesShape, { key: "sankey", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapesData.push(preparedData);
+                        break;
                     }
-                    break;
-                }
-                case 'area': {
-                    if (xAxis && xScale && yScale) {
-                        const preparedData = await prepareAreaData({
+                    case 'radar': {
+                        const preparedData = await prepareRadarData({
                             series: chartSeries,
-                            xAxis,
-                            xScale,
-                            yAxis,
-                            yScale,
+                            boundsWidth,
                             boundsHeight,
-                            isOutsideBounds,
                         });
-                        shapes.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                        shapes.push(React.createElement(RadarSeriesShapes, { key: "radar", dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
+                        break;
                     }
-                    break;
-                }
-                case 'scatter': {
-                    if (xAxis && xScale && yScale) {
-                        const preparedData = prepareScatterData({
-                            series: chartSeries,
-                            xAxis,
-                            xScale,
-                            yAxis,
-                            yScale,
-                            isOutsideBounds,
+                    default: {
+                        throw new ChartError({
+                            message: `The display method is not defined for a series with type "${seriesType}"`,
                         });
-                        shapes.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                        shapesData.push(...preparedData);
                     }
-                    break;
-                }
-                case 'pie': {
-                    const preparedData = await preparePieData({
-                        series: chartSeries,
-                        boundsWidth,
-                        boundsHeight,
-                    });
-                    shapes.push(React.createElement(PieSeriesShapes, { key: "pie", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                    shapesData.push(...preparedData);
-                    break;
-                }
-                case 'treemap': {
-                    const preparedData = await prepareTreemapData({
-                        // We should have exactly one series with "treemap" type
-                        // Otherwise data validation should emit an error
-                        series: chartSeries[0],
-                        width: boundsWidth,
-                        height: boundsHeight,
-                    });
-                    shapes.push(React.createElement(TreemapSeriesShape, { key: "treemap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                    shapesData.push(preparedData);
-                    break;
-                }
-                case 'sankey': {
-                    const preparedData = prepareSankeyData({
-                        series: chartSeries[0],
-                        width: boundsWidth,
-                        height: boundsHeight,
-                    });
-                    shapes.push(React.createElement(SankeySeriesShape, { key: "sankey", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                    shapesData.push(preparedData);
-                    break;
-                }
-                case 'radar': {
-                    const preparedData = await prepareRadarData({
-                        series: chartSeries,
-                        boundsWidth,
-                        boundsHeight,
-                    });
-                    shapes.push(React.createElement(RadarSeriesShapes, { key: "radar", dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                    shapesData.push(...preparedData);
-                    break;
-                }
-                default: {
-                    throw new ChartError({
-                        message: `The display method is not defined for a series with type "${seriesType}"`,
-                    });
                 }
+            }));
+            if (countedRef.current === currentRun) {
+                setShapesElements(shapes);
+                setShapesElemensData(shapesData);
             }
-        }));
-        setShapesElements(shapes);
-        setShapesElemensData(shapesData);
+        })();
     }, [
         boundsHeight,
         boundsWidth,
@@ -192,8 +199,5 @@ export const useShapes = (args) => {
         clipPathId,
         isOutsideBounds,
     ]);
-    React.useEffect(() => {
-        setShapes();
-    }, [setShapes]);
     return { shapes: shapesElemens, shapesData: shapesElemensData };
 };

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

@@ -51,8 +51,9 @@ export const prepareLineData = async (args) => {
         const yAxisTop = ((_a = split.plots[seriesYAxis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
         const seriesYScale = yScale[s.yAxis];
         const points = s.data.map((d) => ({
-            x: getXValue({ point: d, xAxis, xScale }),
-            y: yAxisTop + getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale }),
+            x: getXValue({ point: d, points: s.data, xAxis, xScale }),
+            y: yAxisTop +
+                getYValue({ point: d, points: s.data, yAxis: seriesYAxis, yScale: seriesYScale }),
             active: true,
             data: d,
             series: s,

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

@@ -6,6 +6,9 @@ export declare function getXValue(args: {
     point: {
         x?: number | string;
     };
+    points?: {
+        x?: number | string;
+    }[];
     xAxis: PreparedAxis;
     xScale: ChartScale;
 }): number;
@@ -13,6 +16,9 @@ export declare function getYValue(args: {
     point: {
         y?: number | string;
     };
+    points?: {
+        y?: number | string;
+    }[];
     yAxis: PreparedAxis;
     yScale: ChartScale;
 }): number;

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

@@ -1,26 +1,51 @@
 import { path, select } from 'd3';
 import get from 'lodash/get';
 import { getDataCategoryValue } from '../../utils';
+const ONE_POINT_DOMAIN_DATA_CAPACITY = 3;
 export function getXValue(args) {
-    const { point, xAxis, xScale } = args;
+    const { point, points, xAxis, xScale } = args;
     if (xAxis.type === 'category') {
         const xBandScale = xScale;
         const categories = get(xAxis, 'categories', []);
         const dataCategory = getDataCategoryValue({ axisDirection: 'x', categories, data: point });
         return (xBandScale(dataCategory) || 0) + xBandScale.step() / 2;
     }
-    const xLinearScale = xScale;
+    let xLinearScale = xScale;
+    const [xMinDomain, xMaxDomain] = xLinearScale.domain();
+    if (Number(xMinDomain) === Number(xMaxDomain) &&
+        (points === null || points === void 0 ? void 0 : points.length) === ONE_POINT_DOMAIN_DATA_CAPACITY) {
+        const x1 = points[0].x;
+        const xTarget = points[1].x;
+        const x3 = points[2].x;
+        const xMin = Math.min(x1, xTarget, x3);
+        const xMax = Math.max(x1, xTarget, x3);
+        xLinearScale = xLinearScale
+            .copy()
+            .domain([xMin + (xTarget - xMin) / 2, xMax - (xMax - xTarget) / 2]);
+    }
     return xLinearScale(point.x);
 }
 export function getYValue(args) {
-    const { point, yAxis, yScale } = args;
+    const { point, points, yAxis, yScale } = args;
     if (yAxis.type === 'category') {
         const yBandScale = yScale;
         const categories = get(yAxis, 'categories', []);
         const dataCategory = getDataCategoryValue({ axisDirection: 'y', categories, data: point });
         return (yBandScale(dataCategory) || 0) + yBandScale.step() / 2;
     }
-    const yLinearScale = yScale;
+    let yLinearScale = yScale;
+    const [yMinDomain, yMaxDomain] = yLinearScale.domain();
+    if (Number(yMinDomain) === Number(yMaxDomain) &&
+        (points === null || points === void 0 ? void 0 : points.length) === ONE_POINT_DOMAIN_DATA_CAPACITY) {
+        const y1 = points[0].y;
+        const yTarget = points[1].y;
+        const y2 = points[2].y;
+        const yMin = Math.min(y1, yTarget, y2);
+        const yMax = Math.max(y1, yTarget, y2);
+        yLinearScale = yLinearScale
+            .copy()
+            .domain([yMin + (yTarget - yMin) / 2, yMax - (yMax - yTarget) / 2]);
+    }
     return yLinearScale(point.y);
 }
 export function shapeKey(d) {

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

@@ -125,7 +125,7 @@ export const WaterfallSeriesShapes = (args) => {
         return () => {
             dispatcher.on('hover-shape.waterfall', null);
         };
-    }, [dispatcher, preparedData, seriesOptions]);
+    }, [connectorSelector, dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));

package/dist/cjs/libs/format-number/index.d.ts

@@ -1,5 +1,9 @@
 import type { FormatNumberOptions, FormatOptions } from './types';
-export declare const formatBytes: (value: number, options?: FormatOptions) => string;
-export declare const formatDuration: (value: number, options?: FormatOptions) => string;
-export declare const getNumberUnitRate: (value: number) => number;
+export declare const formatBytes: (value: number, options?: FormatOptions & {
+    unitRate?: number;
+}) => string;
+export declare const formatDuration: (value: number, options?: FormatOptions & {
+    unitRate?: number;
+}) => string;
+export declare const getDefaultUnit: (value: number) => string | undefined;
 export declare const formatNumber: (value: number | string, options?: FormatNumberOptions) => string;

package/dist/cjs/libs/format-number/index.js

@@ -59,7 +59,6 @@ const baseFormatNumber = unitFormatter({
     unitDelimiterI18nKey: 'value_number-delimiter',
     unitsI18nKeys: BASE_NUMBER_FORMAT_UNIT_KEYS,
 });
-export const getNumberUnitRate = (value) => getUnitRate(value, 1000, BASE_NUMBER_FORMAT_UNIT_KEYS);
 const NUMBER_UNIT_RATE_BY_UNIT = {
     default: 0,
     auto: undefined,
@@ -68,11 +67,17 @@ const NUMBER_UNIT_RATE_BY_UNIT = {
     b: 3,
     t: 4,
 };
+export const getDefaultUnit = (value) => {
+    var _a;
+    const unitRate = getUnitRate(value, 1000, BASE_NUMBER_FORMAT_UNIT_KEYS);
+    const [unit] = (_a = Object.entries(NUMBER_UNIT_RATE_BY_UNIT).find(([_key, val]) => val === unitRate)) !== null && _a !== void 0 ? _a : [];
+    return unit;
+};
 export const formatNumber = (value, options = {}) => {
     if (Number.isNaN(value) || Number.isNaN(Number(value))) {
         return new Intl.NumberFormat('en').format(Number(value));
     }
-    const { format = 'number', multiplier = 1, prefix = '', postfix = '', unit, unitRate, labelMode, } = options;
+    const { format = 'number', multiplier = 1, prefix = '', postfix = '', unit, labelMode } = options;
     let changedMultiplier = multiplier;
     let prePostfix = '';
     if (format === 'percent') {
@@ -82,6 +87,6 @@ export const formatNumber = (value, options = {}) => {
     if (labelMode === 'percent') {
         prePostfix = '%';
     }
-    const formattedValue = baseFormatNumber(Number(value) * changedMultiplier, Object.assign(Object.assign({}, options), { unitRate: unitRate !== null && unitRate !== void 0 ? unitRate : NUMBER_UNIT_RATE_BY_UNIT[unit !== null && unit !== void 0 ? unit : 'default'] }));
+    const formattedValue = baseFormatNumber(Number(value) * changedMultiplier, Object.assign(Object.assign({}, options), { unitRate: NUMBER_UNIT_RATE_BY_UNIT[unit !== null && unit !== void 0 ? unit : 'default'] }));
     return `${prefix}${formattedValue}${prePostfix}${postfix}`;
 };

package/dist/cjs/libs/format-number/types.d.ts

@@ -1,6 +1,5 @@
 export type FormatOptions = {
     precision?: number | 'auto';
-    unitRate?: number;
     showRankDelimiter?: boolean;
     lang?: string;
     labelMode?: string;

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

@@ -63,6 +63,7 @@ export interface TooltipDataChunkSankey<T = MeaningfulAny> {
 export interface TooltipDataChunkWaterfall<T = MeaningfulAny> {
     data: WaterfallSeriesData<T>;
     series: WaterfallSeries<T>;
+    subTotal?: number;
 }
 export interface TooltipDataChunkRadar<T = MeaningfulAny> {
     data: RadarSeriesData<T>;

package/dist/cjs/types/formatter.d.ts

@@ -1,6 +1,5 @@
 export interface FormatOptions {
     precision?: number | 'auto';
-    unitRate?: number;
     showRankDelimiter?: boolean;
     lang?: string;
     labelMode?: string;

package/dist/cjs/utils/chart/get-closest-data.d.ts

@@ -12,6 +12,7 @@ export type ShapePoint = {
     y1: number;
     data: ChartSeriesData;
     series: ChartSeries;
+    subTotal?: number;
 };
 export declare function getClosestPoints(args: GetClosestPointsArgs): TooltipDataChunk[];
 export {};

package/dist/cjs/utils/chart/get-closest-data.js

@@ -35,11 +35,7 @@ function getClosestPointsByXValue(x, y, points) {
     });
     const closestPoints = sort(groupedBySeries, (p) => p.y0);
     const closestYIndex = getClosestYIndex(closestPoints, y);
-    return closestPoints.map((p, i) => ({
-        data: p.data,
-        series: p.series,
-        closest: i === closestYIndex,
-    }));
+    return closestPoints.map((p, i) => (Object.assign(Object.assign({}, p), { closest: i === closestYIndex })));
 }
 function getSeriesType(shapeData) {
     return (get(shapeData, 'series.type') ||
@@ -73,6 +69,7 @@ export function getClosestPoints(args) {
                     x: d.x + d.width / 2,
                     y0: d.y,
                     y1: d.y + d.height,
+                    subTotal: d.subTotal,
                 }));
                 result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
                 break;

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

@@ -11,6 +11,7 @@ export * from './legend';
 export * from './symbol';
 export * from './series';
 export * from './color';
+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 = {

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

@@ -5,7 +5,7 @@ import isNil from 'lodash/isNil';
 import sortBy from 'lodash/sortBy';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../../constants';
 import { getSeriesStackId } from '../../hooks/useSeries/utils';
-import { formatNumber, getNumberUnitRate } from '../../libs/format-number';
+import { formatNumber, getDefaultUnit } from '../../libs/format-number';
 import { getWaterfallPointSubtotal } from './series/waterfall';
 import { getDefaultDateFormat } from './time';
 export * from './math';
@@ -17,6 +17,7 @@ export * from './legend';
 export * from './symbol';
 export * from './series';
 export * from './color';
+export * from './zoom';
 const CHARTS_WITHOUT_AXIS = ['pie', 'treemap', 'sankey', 'radar'];
 export const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS = [
     'bar-x',
@@ -184,7 +185,7 @@ export const formatAxisTickLabel = (args) => {
         }
         case 'linear':
         default: {
-            const numberFormat = Object.assign({ unitRate: value && step ? getNumberUnitRate(step) : undefined }, axis.labels.numberFormat);
+            const numberFormat = Object.assign({ unit: value && step ? getDefaultUnit(step) : undefined }, axis.labels.numberFormat);
             return formatNumber(value, numberFormat);
         }
     }

package/dist/cjs/utils/chart/series/index.d.ts

@@ -1,2 +1,3 @@
 export * from './line';
+export * from './sorting';
 export * from './waterfall';

package/dist/cjs/utils/chart/series/index.js

@@ -1,2 +1,3 @@
 export * from './line';
+export * from './sorting';
 export * from './waterfall';

package/dist/cjs/utils/chart/series/sorting.d.ts

@@ -0,0 +1,2 @@
+import type { ChartSeries } from '../../../types';
+export declare function getSortedSeriesData(seriesData: ChartSeries[]): ChartSeries[];

package/dist/cjs/utils/chart/series/sorting.js

@@ -0,0 +1,12 @@
+import { sort } from 'd3';
+import { SeriesType } from '../../../constants';
+export function getSortedSeriesData(seriesData) {
+    return seriesData.map((s) => {
+        switch (s.type) {
+            case SeriesType.Area: {
+                s.data = sort(s.data, (d) => d.x);
+            }
+        }
+        return s;
+    });
+}

package/dist/{esm/hooks/hooks-utils → cjs/utils/chart}/zoom.d.ts

@@ -1,8 +1,11 @@
+import type { ZoomState } from '../../hooks/useZoom/types';
 import type { ChartSeries, ChartXAxis, ChartYAxis } from '../../types';
-import type { ZoomState } from '../useZoom/types';
 export declare function getZoomedSeriesData(args: {
     seriesData: ChartSeries[];
     zoomState: Partial<ZoomState>;
     xAxis?: ChartXAxis;
     yAxes?: ChartYAxis[];
-}): ChartSeries[];
+}): {
+    zoomedSeriesData: ChartSeries[];
+    zoomedShapesSeriesData: ChartSeries[];
+};