@gravity-ui/charts 1.12.0 → 1.13.0

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

@@ -95,36 +95,39 @@ export const prepareBarXData = async (args) => {
     const rectGap = Math.max(bandWidth * barPadding, MIN_BAR_GAP);
     const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(groupWidth / maxGroupSize - rectGap, barMaxWidth));
     const result = [];
-    await Promise.all(Object.entries(data).map(async ([xValue, val]) => {
+    const groupedData = Object.entries(data);
+    for (let groupedDataIndex = 0; groupedDataIndex < groupedData.length; groupedDataIndex++) {
+        const [xValue, val] = groupedData[groupedDataIndex];
         const stacks = Object.values(val);
         const currentGroupWidth = rectWidth * stacks.length + rectGap * (stacks.length - 1);
-        await Promise.all(stacks.map(async (yValues, groupItemIndex) => {
+        for (let groupItemIndex = 0; groupItemIndex < stacks.length; groupItemIndex++) {
+            const yValues = stacks[groupItemIndex];
             let stackHeight = 0;
             const stackItems = [];
             const sortedData = sortKey
                 ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
                 : yValues;
-            await Promise.all(sortedData.map(async (yValue, yValueIndex) => {
+            for (let yValueIndex = 0; yValueIndex < sortedData.length; yValueIndex++) {
+                const yValue = sortedData[yValueIndex];
                 const yAxisIndex = yValue.series.yAxis;
                 const seriesYScale = yScale[yAxisIndex];
                 let xCenter;
                 if (xAxis.type === 'category') {
                     const xBandScale = xScale;
-                    xCenter =
-                        (xBandScale(xValue) || 0) +
-                            xBandScale.bandwidth() / 2;
+                    xCenter = (xBandScale(xValue) || 0) + xBandScale.bandwidth() / 2;
                 }
                 else {
                     const xLinearScale = xScale;
                     xCenter = xLinearScale(Number(xValue));
                 }
-                const x = xCenter -
-                    currentGroupWidth / 2 +
-                    (rectWidth + rectGap) * groupItemIndex;
+                const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
                 const yDataValue = yValue.data.y;
                 const y = seriesYScale(yDataValue);
                 const base = seriesYScale(0);
                 const height = yDataValue > 0 ? base - y : y - base;
+                if (height <= 0) {
+                    continue;
+                }
                 const barData = {
                     x,
                     y: yDataValue > 0 ? y - stackHeight : seriesYScale(0),
@@ -151,7 +154,7 @@ export const prepareBarXData = async (args) => {
                 }
                 stackItems.push(barData);
                 stackHeight += height + 1;
-            }));
+            }
             if (series.some((s) => s.stacking === 'percent')) {
                 let acc = 0;
                 const ratio = plotHeight / (stackHeight - stackItems.length);
@@ -162,7 +165,7 @@ export const prepareBarXData = async (args) => {
                 });
             }
             result.push(...stackItems);
-        }));
-    }));
+        }
+    }
     return result;
 };

package/dist/esm/hooks/useShapes/bar-y/index.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedBarYData } from './types';
+import type { BarYShapesArgs } from './types';
 export { prepareBarYData } from './prepare-data';
 type Args = {
     dispatcher: Dispatch<object>;
-    preparedData: PreparedBarYData[];
+    preparedData: BarYShapesArgs;
     seriesOptions: PreparedSeriesOptions;
     htmlLayout: HTMLElement | null;
     clipPathId: string;

package/dist/esm/hooks/useShapes/bar-y/index.js

@@ -7,7 +7,7 @@ import { getRectPath } from '../utils';
 export { prepareBarYData } from './prepare-data';
 const b = block('bar-y');
 export const BarYSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
+    const { dispatcher, preparedData: { shapes: preparedData, labels: dataLabels, htmlElements }, seriesOptions, htmlLayout, clipPathId, } = args;
     const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -39,14 +39,10 @@ export const BarYSeriesShapes = (args) => {
             .attr('height', (d) => d.height)
             .attr('width', (d) => d.width)
             .attr('fill', (d) => d.color)
+            .attr('stroke', (d) => d.borderColor)
+            .attr('stroke-width', (d) => d.borderWidth)
             .attr('opacity', (d) => d.data.opacity || null)
             .attr('cursor', (d) => d.series.cursor);
-        const dataLabels = preparedData.reduce((acc, d) => {
-            if (d.label) {
-                acc.push(d.label);
-            }
-            return acc;
-        }, []);
         const labelSelection = svgElement
             .selectAll('text')
             .data(dataLabels)
@@ -97,8 +93,8 @@ export const BarYSeriesShapes = (args) => {
         return () => {
             dispatcher.on('hover-shape.bar-y', null);
         };
-    }, [dispatcher, preparedData, seriesOptions]);
+    }, [dataLabels, 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 })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements }, htmlLayout: htmlLayout })));
 };

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

@@ -1,7 +1,7 @@
 import type { ChartScale } from '../../useAxisScales';
 import type { PreparedAxis } from '../../useChartOptions/types';
 import type { PreparedBarYSeries, PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedBarYData } from './types';
+import type { BarYShapesArgs } from './types';
 export declare const prepareBarYData: (args: {
     series: PreparedBarYSeries[];
     seriesOptions: PreparedSeriesOptions;
@@ -9,4 +9,4 @@ export declare const prepareBarYData: (args: {
     xScale: ChartScale;
     yAxis: PreparedAxis[];
     yScale: ChartScale[];
-}) => Promise<PreparedBarYData[]>;
+}) => Promise<BarYShapesArgs>;

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

@@ -1,47 +1,11 @@
 import { ascending, descending, sort } from 'd3';
 import get from 'lodash/get';
-import { getLabelsSize } from '../../../utils';
+import { filterOverlappingLabels, getLabelsSize, getTextSizeFn } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { getBarYLayoutForCategoryScale, getBarYLayoutForNumericScale, groupBarYDataByYValue, } from '../../utils';
 const DEFAULT_LABEL_PADDING = 7;
-async function setLabel(prepared) {
-    const dataLabels = prepared.series.dataLabels;
-    if (!dataLabels.enabled) {
-        return;
-    }
-    const data = prepared.data;
-    const content = getFormattedValue(Object.assign({ value: data.label || data.x }, dataLabels));
-    const { maxHeight: height, maxWidth: width } = await getLabelsSize({
-        labels: [content],
-        style: dataLabels.style,
-        html: dataLabels.html,
-    });
-    const x = dataLabels.inside
-        ? prepared.x + prepared.width / 2
-        : prepared.x + prepared.width + DEFAULT_LABEL_PADDING;
-    const y = prepared.y + prepared.height / 2;
-    if (dataLabels.html) {
-        prepared.htmlElements.push({
-            x,
-            y: y - height / 2,
-            content,
-            size: { width, height },
-            style: dataLabels.style,
-        });
-    }
-    else {
-        prepared.label = {
-            x,
-            y: y + height / 2,
-            text: content,
-            textAnchor: dataLabels.inside ? 'middle' : 'right',
-            style: dataLabels.style,
-            series: prepared.series,
-            size: { width, height },
-        };
-    }
-}
 export const prepareBarYData = async (args) => {
+    var _a;
     const { series, seriesOptions, yAxis, xScale, yScale: [yScale], } = args;
     const xLinearScale = xScale;
     const yLinearScale = yScale;
@@ -66,16 +30,17 @@ export const prepareBarYData = async (args) => {
     const { bandSize, barGap, barSize } = yAxis[0].type === 'category'
         ? getBarYLayoutForCategoryScale({ groupedData, seriesOptions, yScale })
         : getBarYLayoutForNumericScale({
-            series,
+            groupedData,
             seriesOptions,
             plotHeight: plotHeight - plotHeight * yAxis[0].maxPadding,
         });
     const result = [];
+    const baseRangeValue = xLinearScale.range()[0];
     Object.entries(groupedData).forEach(([yValue, val]) => {
         const stacks = Object.values(val);
         const currentBarHeight = barSize * stacks.length + barGap * (stacks.length - 1);
         stacks.forEach((measureValues, groupItemIndex) => {
-            const base = xLinearScale(0);
+            const base = xLinearScale(0 - measureValues[0].series.borderWidth);
             let stackSum = base;
             const stackItems = [];
             const sortedData = sortKey
@@ -93,17 +58,21 @@ export const prepareBarYData = async (args) => {
                 }
                 const y = center - currentBarHeight / 2 + (barSize + barGap) * groupItemIndex;
                 const xValue = Number(data.x);
-                const width = xValue > 0 ? xLinearScale(xValue) - base : base - xLinearScale(xValue);
+                const width = Math.abs(xLinearScale(xValue) - base);
+                if (width <= 0) {
+                    return;
+                }
                 const item = {
-                    x: xValue > 0 ? stackSum : stackSum - width,
+                    x: xValue > baseRangeValue ? stackSum : stackSum - width,
                     y,
                     width,
                     height: barSize,
                     color: data.color || s.color,
+                    borderColor: s.borderColor,
+                    borderWidth: s.borderWidth,
                     opacity: get(data, 'opacity', null),
                     data,
                     series: s,
-                    htmlElements: [],
                     isLastStackItem: xValueIndex === sortedData.length - 1,
                 };
                 stackItems.push(item);
@@ -121,8 +90,57 @@ export const prepareBarYData = async (args) => {
             result.push(...stackItems);
         });
     });
-    await Promise.all(result.map(async (d) => {
-        await setLabel(d);
-    }));
-    return result;
+    let labels = [];
+    const htmlElements = [];
+    const map = new Map();
+    for (let i = 0; i < result.length; i++) {
+        const prepared = result[i];
+        const dataLabels = prepared.series.dataLabels;
+        if (dataLabels.enabled) {
+            const data = prepared.data;
+            const content = getFormattedValue(Object.assign({ value: data.label || data.x }, dataLabels));
+            const x = dataLabels.inside
+                ? prepared.x + prepared.width / 2
+                : prepared.x + prepared.width + DEFAULT_LABEL_PADDING;
+            const y = prepared.y + prepared.height / 2;
+            if (dataLabels.html) {
+                const { maxHeight: height, maxWidth: width } = await getLabelsSize({
+                    labels: [content],
+                    style: dataLabels.style,
+                    html: dataLabels.html,
+                });
+                htmlElements.push({
+                    x,
+                    y: y - height / 2,
+                    content,
+                    size: { width, height },
+                    style: dataLabels.style,
+                });
+            }
+            else {
+                if (!map.has(dataLabels.style)) {
+                    map.set(dataLabels.style, getTextSizeFn({ style: dataLabels.style }));
+                }
+                const getTextSize = map.get(dataLabels.style);
+                const { width, height } = await getTextSize(content);
+                labels.push({
+                    x,
+                    y: y + height / 2,
+                    text: content,
+                    textAnchor: dataLabels.inside ? 'middle' : 'right',
+                    style: dataLabels.style,
+                    series: prepared.series,
+                    size: { width, height },
+                });
+            }
+        }
+    }
+    if (!((_a = result[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+        labels = filterOverlappingLabels(labels);
+    }
+    return {
+        shapes: result,
+        labels,
+        htmlElements,
+    };
 };

package/dist/esm/hooks/useShapes/bar-y/types.d.ts

@@ -6,9 +6,14 @@ export type PreparedBarYData = Omit<TooltipDataChunkBarX, 'series'> & {
     width: number;
     height: number;
     color: string;
+    borderWidth: number;
+    borderColor: string;
     opacity: number | null;
     series: PreparedBarYSeries;
-    label?: LabelData;
-    htmlElements: HtmlItem[];
     isLastStackItem: boolean;
 };
+export type BarYShapesArgs = {
+    shapes: PreparedBarYData[];
+    labels: LabelData[];
+    htmlElements: HtmlItem[];
+};

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

@@ -64,7 +64,7 @@ export const useShapes = (args) => {
                                 yScale,
                             });
                             shapes.push(React.createElement(BarYSeriesShapes, { key: "bar-y", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                            shapesData.push(...preparedData);
+                            shapesData.push(...preparedData.shapes);
                         }
                         break;
                     }

package/dist/esm/hooks/utils/bar-y.d.ts

@@ -2,14 +2,14 @@ import type { BarYSeries, BarYSeriesData } from '../../types';
 import type { ChartScale } from '../useAxisScales';
 import type { PreparedAxis } from '../useChartOptions/types';
 import type { PreparedBarYSeries, PreparedSeriesOptions } from '../useSeries/types';
-export declare function groupBarYDataByYValue(series: PreparedBarYSeries[], yAxis: PreparedAxis[]): Record<string | number, Record<string, {
+export declare function groupBarYDataByYValue<T extends BarYSeries | PreparedBarYSeries>(series: T[], yAxis: PreparedAxis[]): Record<string | number, Record<string, {
     data: BarYSeriesData;
-    series: PreparedBarYSeries;
+    series: T;
 }[]>>;
 export declare function getBarYLayoutForNumericScale(args: {
     plotHeight: number;
-    series: (BarYSeries | PreparedBarYSeries)[];
     seriesOptions: PreparedSeriesOptions;
+    groupedData: ReturnType<typeof groupBarYDataByYValue>;
 }): {
     bandSize: number;
     barGap: number;

package/dist/esm/hooks/utils/bar-y.js

@@ -2,6 +2,7 @@ import { max } from 'd3';
 import get from 'lodash/get';
 import { getDataCategoryValue } from '../../utils';
 import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
+import { getSeriesStackId } from '../useSeries/utils';
 export function groupBarYDataByYValue(series, yAxis) {
     const data = {};
     series.forEach((s) => {
@@ -16,37 +17,22 @@ export function groupBarYDataByYValue(series, yAxis) {
                 if (!data[key]) {
                     data[key] = {};
                 }
-                if (!data[key][s.stackId]) {
-                    data[key][s.stackId] = [];
+                const stackId = getSeriesStackId(s);
+                if (!data[key][stackId]) {
+                    data[key][stackId] = [];
                 }
-                data[key][s.stackId].push({ data: d, series: s });
+                data[key][stackId].push({ data: d, series: s });
             }
         });
     });
     return data;
 }
 export function getBarYLayoutForNumericScale(args) {
-    const { plotHeight, series, seriesOptions } = args;
+    const { plotHeight, groupedData, seriesOptions } = args;
     const barMaxWidth = get(seriesOptions, 'bar-y.barMaxWidth');
     const barPadding = get(seriesOptions, 'bar-y.barPadding');
     const groupPadding = get(seriesOptions, 'bar-y.groupPadding');
-    let yValuesWithoutStacking = 0;
-    const yValuesByStackingIdMap = {};
-    series.forEach((s) => {
-        s.data.forEach((d) => {
-            if (s.stackId) {
-                if (!yValuesByStackingIdMap[s.stackId]) {
-                    yValuesByStackingIdMap[s.stackId] = new Set();
-                }
-                yValuesByStackingIdMap[s.stackId].add(Number(d.y));
-            }
-            else {
-                yValuesWithoutStacking += 1;
-            }
-        });
-    });
-    const stackedSeriesLength = Object.values(yValuesByStackingIdMap).reduce((acc, set) => acc + set.size, 0);
-    const dataLength = yValuesWithoutStacking + stackedSeriesLength;
+    const dataLength = Object.values(groupedData).reduce((sum, items) => sum + Object.keys(items).length, 0);
     const bandSize = plotHeight / dataLength;
     const groupGap = Math.max(bandSize * groupPadding, MIN_BAR_GROUP_GAP);
     const groupSize = bandSize - groupGap;

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

@@ -78,6 +78,10 @@ export interface ChartAxis {
     plotBands?: AxisPlotBand[];
     /** Whether axis, including axis title, line, ticks and labels, should be visible. */
     visible?: boolean;
+    /** Setting the order of the axis values. It is not applied by default.
+     * the "reverse" value is needed to use the reverse order without sorting
+     */
+    order?: 'sortAsc' | 'sortDesc' | 'reverse';
 }
 export interface ChartXAxis extends ChartAxis {
 }
@@ -92,6 +96,14 @@ export interface AxisPlot {
      * @default 1
      * */
     opacity?: number;
+    label?: {
+        text: string;
+        style?: Partial<BaseTextStyle>;
+        /** The pixel padding for label.
+         * @default 5
+         */
+        padding?: number;
+    };
 }
 export interface AxisPlotLine extends AxisPlot {
     /** The position of the line in axis units. */
@@ -121,7 +133,7 @@ export interface AxisPlotBand extends AxisPlot {
      */
     to: number | string;
 }
-export interface AxisCrosshair extends Omit<AxisPlotLine, 'value'> {
+export interface AxisCrosshair extends Omit<AxisPlotLine, 'value' | 'label'> {
     /** Whether the crosshair should snap to the point or follow the pointer independent of points.
      * @default true
      */

package/dist/esm/types/chart/bar-y.d.ts

@@ -29,6 +29,16 @@ export interface BarYSeries<T = MeaningfulAny> extends BaseSeries {
     name: string;
     /** The main color of the series (hex, rgba) */
     color?: string;
+    /**
+     * The width of the border surrounding each bar.
+     *
+     * @default 0
+     */
+    borderWidth?: number;
+    /**
+     * The color of the border surrounding each bar.
+     */
+    borderColor?: string;
     /**
      * The corner radius of the border surrounding each bar.
      * @default 0

package/dist/esm/types/chart/series.d.ts

@@ -115,6 +115,16 @@ export interface ChartSeriesOptions {
          * @default 0.2
          */
         groupPadding?: number;
+        /**
+         * The width of the border surrounding each bar.
+         *
+         * @default 0
+         */
+        borderWidth?: number;
+        /**
+         * The color of the border surrounding each bar.
+         */
+        borderColor?: string;
         /**
          * The corner radius of the border surrounding each bar.
          * @default 0

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

@@ -93,18 +93,31 @@ export async function axisBottom(args) {
             let elementX = 0;
             // add an ellipsis to the labels that go beyond the boundaries of the chart
             // and remove overlapping labels
-            labels.each(function (_d, i, nodes) {
-                var _a, _b;
-                const currentElement = this;
-                const currentElementPosition = currentElement.getBoundingClientRect();
+            labels
+                .nodes()
+                .map((element) => {
+                const r = element.getBoundingClientRect();
+                return {
+                    left: r.left,
+                    right: r.right,
+                    node: element,
+                };
+            }, {})
+                .sort((a, b) => {
+                return a.left - b.left;
+            })
+                .forEach(function (item, i, nodes) {
+                var _a, _b, _c, _d;
+                const { node, left, right: currentElementPositionRigth } = item;
+                const currentElement = node;
                 if (i === 0) {
                     const text = select(currentElement);
-                    const nextElement = nodes[i + 1];
+                    const nextElement = (_a = nodes[i + 1]) === null || _a === void 0 ? void 0 : _a.node;
                     const nextElementPosition = nextElement === null || nextElement === void 0 ? void 0 : nextElement.getBoundingClientRect();
-                    if (currentElementPosition.left < leftmostLimit) {
-                        const rightmostPossiblePoint = (_a = nextElementPosition === null || nextElementPosition === void 0 ? void 0 : nextElementPosition.left) !== null && _a !== void 0 ? _a : right;
+                    if (left < leftmostLimit) {
+                        const rightmostPossiblePoint = (_b = nextElementPosition === null || nextElementPosition === void 0 ? void 0 : nextElementPosition.left) !== null && _b !== void 0 ? _b : right;
                         const remainSpace = rightmostPossiblePoint -
-                            currentElementPosition.right +
+                            currentElementPositionRigth +
                             x -
                             labelsMargin;
                         text.attr('text-anchor', 'start');
@@ -112,16 +125,16 @@ export async function axisBottom(args) {
                     }
                 }
                 else {
-                    if (currentElementPosition.left < elementX) {
-                        (_b = currentElement.closest('.tick')) === null || _b === void 0 ? void 0 : _b.remove();
+                    if (left < elementX) {
+                        (_c = currentElement.closest('.tick')) === null || _c === void 0 ? void 0 : _c.remove();
                         return;
                     }
-                    elementX = currentElementPosition.right + labelsPaddings;
+                    elementX = currentElementPositionRigth + labelsPaddings;
                     if (i === nodes.length - 1) {
-                        const prevElement = nodes[i - 1];
+                        const prevElement = (_d = nodes[i - 1]) === null || _d === void 0 ? void 0 : _d.node;
                         const text = select(currentElement);
                         const prevElementPosition = prevElement === null || prevElement === void 0 ? void 0 : prevElement.getBoundingClientRect();
-                        const lackingSpace = Math.max(0, currentElementPosition.right - right);
+                        const lackingSpace = Math.max(0, currentElementPositionRigth - right);
                         if (lackingSpace) {
                             const remainSpace = right - ((prevElementPosition === null || prevElementPosition === void 0 ? void 0 : prevElementPosition.right) || 0) - labelsPaddings;
                             const translateX = -lackingSpace;

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

@@ -49,7 +49,7 @@ export function getClosestPoints(args) {
     const groups = groupBy(shapesData, getSeriesType);
     // eslint-disable-next-line complexity
     Object.entries(groups).forEach(([seriesType, list]) => {
-        var _a, _b;
+        var _a, _b, _c;
         switch (seriesType) {
             case 'bar-x': {
                 const points = list.map((d) => ({
@@ -106,26 +106,27 @@ export function getClosestPoints(args) {
                 const points = list;
                 const sorted = sort(points, (p) => p.y);
                 const closestYIndex = bisector((p) => p.y).center(sorted, pointerY);
-                let closestPoints = [];
-                let closestXIndex = -1;
-                if (closestYIndex !== -1) {
-                    const closestY = sorted[closestYIndex].y;
-                    closestPoints = sort(points.filter((p) => p.y === closestY), (p) => p.x);
+                const closestYPoint = sorted[closestYIndex];
+                let selectedPoints = [];
+                let closestPointXValue = -1;
+                if (closestYPoint) {
+                    selectedPoints = points.filter((p) => p.data.y === closestYPoint.data.y);
+                    const closestPoints = sort(selectedPoints.filter((p) => p.y === closestYPoint.y), (p) => p.x);
                     const lastPoint = closestPoints[closestPoints.length - 1];
                     if (pointerX < ((_a = closestPoints[0]) === null || _a === void 0 ? void 0 : _a.x)) {
-                        closestXIndex = 0;
+                        closestPointXValue = closestPoints[0].x;
                     }
                     else if (lastPoint && pointerX > lastPoint.x + lastPoint.width) {
-                        closestXIndex = closestPoints.length - 1;
+                        closestPointXValue = lastPoint.x;
                     }
                     else {
-                        closestXIndex = closestPoints.findIndex((p) => pointerX > p.x && pointerX < p.x + p.width);
+                        closestPointXValue = (_b = closestPoints.find((p) => pointerX > p.x && pointerX < p.x + p.width)) === null || _b === void 0 ? void 0 : _b.x;
                     }
                 }
-                result.push(...closestPoints.map((p, i) => ({
+                result.push(...selectedPoints.map((p) => ({
                     data: p.data,
                     series: p.series,
-                    closest: i === closestXIndex,
+                    closest: p.x === closestPointXValue && p.y === closestYPoint.y,
                 })));
                 break;
             }
@@ -164,7 +165,7 @@ export function getClosestPoints(args) {
             }
             case 'treemap': {
                 const data = list;
-                const closestPoint = (_b = data[0]) === null || _b === void 0 ? void 0 : _b.leaves.find((l) => {
+                const closestPoint = (_c = data[0]) === null || _c === void 0 ? void 0 : _c.leaves.find((l) => {
                     return (pointerX >= l.x0 && pointerX <= l.x1 && pointerY >= l.y0 && pointerY <= l.y1);
                 });
                 if (closestPoint) {

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

@@ -238,5 +238,5 @@ export function getClosestPointsRange(axis, points) {
     if (axis.type === 'category') {
         return undefined;
     }
-    return points[1] - points[0];
+    return Math.abs(points[1] - points[0]);
 }

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

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

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

@@ -1,12 +1,37 @@
 import { sort } from 'd3';
+import { isEmpty } from 'lodash';
+import get from 'lodash/get';
 import { SeriesType } from '../../../constants';
-export function getSortedSeriesData(seriesData) {
+import { getAxisCategories } from '../../../hooks/useChartOptions/utils';
+function applyAxisCategoriesOrder({ series, axis, key, }) {
+    var _a, _b;
+    const originalCategories = (_a = axis === null || axis === void 0 ? void 0 : axis.categories) !== null && _a !== void 0 ? _a : [];
+    if (isEmpty(originalCategories)) {
+        return series;
+    }
+    const axisCategories = (_b = getAxisCategories(axis)) !== null && _b !== void 0 ? _b : [];
+    const order = Object.fromEntries(axisCategories.map((value, index) => [value, index]));
+    const newSeriesData = series.data.map((d) => {
+        const value = get(d, key);
+        if (typeof value === 'number') {
+            return Object.assign(Object.assign({}, d), { [key]: order[originalCategories[value]] });
+        }
+        return d;
+    });
+    return Object.assign(Object.assign({}, series), { data: newSeriesData });
+}
+export function getSortedSeriesData({ seriesData, yAxes, xAxis, }) {
     return seriesData.map((s) => {
-        switch (s.type) {
+        const yAxis = yAxes === null || yAxes === void 0 ? void 0 : yAxes[0];
+        let sortedSeries = s;
+        sortedSeries = applyAxisCategoriesOrder({ series: sortedSeries, axis: yAxis, key: 'y' });
+        sortedSeries = applyAxisCategoriesOrder({ series: sortedSeries, axis: xAxis, key: 'x' });
+        switch (sortedSeries.type) {
             case SeriesType.Area: {
-                s.data = sort(s.data, (d) => d.x);
+                sortedSeries = Object.assign(Object.assign({}, sortedSeries), { data: sort(sortedSeries.data, (d) => d.x) });
+                break;
             }
         }
-        return s;
+        return sortedSeries;
     });
 }

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

@@ -1,4 +1,5 @@
 import { SeriesType } from '../../constants';
+import { getAxisCategories } from '../../hooks/useChartOptions/utils';
 const SERIES_TYPE_WITH_HIDDEN_POINTS = [SeriesType.Area, SeriesType.Line];
 // eslint-disable-next-line complexity
 function isValueInRange(args) {
@@ -20,7 +21,7 @@ function isValueInRange(args) {
             return numValue >= numMin && numValue <= numMax;
         }
         case 'category': {
-            const categories = (axis === null || axis === void 0 ? void 0 : axis.categories) || [];
+            const categories = getAxisCategories(axis) || [];
             if (typeof value === 'string' && typeof min === 'number' && typeof max === 'number') {
                 const valueIndex = categories.indexOf(value);
                 if (min === -1 || max === -1 || valueIndex === -1) {