@gravity-ui/charts 1.12.0 → 1.13.1

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

@@ -79,6 +79,11 @@ export interface ChartSeriesOptions {
          * @default 0
          */
         borderRadius?: number;
+        /**
+         * The distance between the shapes of the stacked values, in pixels.
+         * @default 1
+         */
+        stackGap?: number;
         dataSorting?: {
             /** Determines what data value should be used to sort by.
              * Possible values are undefined to disable, "name" to sort by series name or "y"
@@ -115,11 +120,26 @@ 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
          */
         borderRadius?: number;
+        /**
+         * The distance between the shapes of the stacked values, in pixels.
+         * @default 1
+         */
+        stackGap?: number;
         dataSorting?: {
             /** Determines what data value should be used to sort by.
              * Possible values are undefined to disable, "name" to sort by series name or "x"

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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.12.0",
+  "version": "1.13.1",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",