@gravity-ui/charts 1.3.1 → 1.5.0

package/dist/cjs/components/Tooltip/DefaultContent.js

@@ -58,8 +58,9 @@ function getDefaultValueFormat({ axis }) {
 }
 export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
     const measureValue = getMeasureValue({ data: hovered, xAxis, yAxis });
-    return (React.createElement(React.Fragment, null,
-        measureValue && React.createElement("div", null, measureValue),
+    return (React.createElement("div", { className: b('content') },
+        measureValue && React.createElement("div", { className: b('series-name') }, measureValue),
+        // eslint-disable-next-line complexity
         hovered.map((seriesItem, i) => {
             var _a;
             const { data, series, closest } = seriesItem;
@@ -79,9 +80,10 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                         series.name,
                         ": ",
                         formattedValue));
-                    return (React.createElement("div", { key: id, className: b('content-row') },
+                    const active = closest && hovered.length > 1;
+                    return (React.createElement("div", { key: id, className: b('content-row', { active }) },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
+                        React.createElement("div", null, value)));
                 }
                 case 'waterfall': {
                     const isTotal = get(data, 'total', false);
@@ -119,9 +121,10 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                         series.name,
                         ": ",
                         formattedValue));
-                    return (React.createElement("div", { key: id, className: b('content-row') },
+                    const active = closest && hovered.length > 1;
+                    return (React.createElement("div", { key: id, className: b('content-row', { active }) },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
+                        React.createElement("div", null, value)));
                 }
                 case 'pie':
                 case 'treemap': {
@@ -152,7 +155,8 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                             React.createElement("span", null, "\u2192"),
                             " ", target === null || target === void 0 ? void 0 :
                             target.name,
-                            ": ",
+                            ":",
+                            ' ',
                             formattedValue)));
                 }
                 case 'radar': {
@@ -167,9 +171,10 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                             radarSeries.name || radarSeries.id,
                             "\u00A0"),
                         React.createElement("span", null, formattedValue)));
-                    return (React.createElement("div", { key: id, className: b('content-row') },
+                    const active = closest && hovered.length > 1;
+                    return (React.createElement("div", { key: id, className: b('content-row', { active }) },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
+                        React.createElement("div", null, value)));
                 }
                 default: {
                     return null;

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

@@ -22,6 +22,6 @@ export const Tooltip = (props) => {
         window.dispatchEvent(new CustomEvent('scroll'));
     }, [left, top]);
     return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { anchorElement: anchor, className: b({ pinned: tooltipPinned }), disableTransition: true, floatingStyles: tooltipPinned ? undefined : { pointerEvents: 'none' }, offset: { mainAxis: 20 }, onOpenChange: tooltipPinned ? handleOnOpenChange : undefined, open: true, placement: ['right', 'left', 'top', 'bottom'] },
-        React.createElement("div", { className: b('content') },
+        React.createElement("div", { className: b('popup-content') },
             React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer, valueFormat: tooltip.valueFormat })))) : null;
 };

package/dist/cjs/components/Tooltip/styles.css

@@ -1,15 +1,28 @@
 .gcharts-tooltip {
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
 }
-.gcharts-tooltip__content {
-  padding: 8px 14px;
+.gcharts-tooltip__popup-content {
   text-wrap: nowrap;
   border-radius: 4px;
   background-color: var(--g-color-infographics-tooltip-bg);
 }
+.gcharts-tooltip__content {
+  padding: var(--gcharts-tooltip-content-padding, 8px 0);
+}
+.gcharts-tooltip__series-name {
+  padding: 2px 14px 6px;
+  font-size: 13px;
+  font-weight: 600;
+}
 .gcharts-tooltip__content-row {
   display: flex;
   align-items: center;
+  padding: 2px 14px;
+  font-size: 12px;
+}
+.gcharts-tooltip__content-row_active {
+  font-weight: 600;
+  background-color: var(--g-color-base-info-medium);
 }
 .gcharts-tooltip__color {
   display: inline-block;

package/dist/cjs/hooks/useSeries/prepare-treemap.js

@@ -6,7 +6,7 @@ import { prepareLegendSymbol } from './utils';
 export function prepareTreemap(args) {
     const { colorScale, legend, series } = args;
     return series.map((s) => {
-        var _a, _b;
+        var _a, _b, _c;
         const id = getUniqId();
         const name = s.name || '';
         const color = s.color || colorScale(name);
@@ -30,9 +30,10 @@ export function prepareTreemap(args) {
                 enabled: get(s, 'legend.enabled', legend.enabled),
                 symbol: prepareLegendSymbol(s),
             },
-            levels: s.levels,
+            levels: (_c = s.levels) !== null && _c !== void 0 ? _c : [],
             layoutAlgorithm: get(s, 'layoutAlgorithm', LayoutAlgorithm.Binary),
             cursor: get(s, 'cursor', null),
+            sorting: Object.assign({ enabled: false, direction: 'desc' }, s.sorting),
         };
         return preparedSeries;
     });

package/dist/cjs/hooks/useSeries/types.d.ts

@@ -242,7 +242,8 @@ export type PreparedTreemapSeries = {
         format?: ValueFormat;
     };
     layoutAlgorithm: `${LayoutAlgorithm}`;
-} & BasePreparedSeries & Omit<TreemapSeries, keyof BasePreparedSeries>;
+    sorting: Required<TreemapSeries['sorting']>;
+} & BasePreparedSeries & Required<Omit<TreemapSeries, keyof BasePreparedSeries>>;
 export type PreparedWaterfallSeriesData = WaterfallSeriesData & {
     index: number;
 };

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

@@ -23,7 +23,6 @@ export function preparePieData(args) {
     const maxRadius = Math.min(boundsWidth, boundsHeight) / 2 - haloSize;
     const minRadius = maxRadius * 0.3;
     const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
-    let maxMissingWidth = 0;
     const prepareItem = (stackId, items) => {
         var _a;
         const series = items[0];
@@ -77,7 +76,7 @@ export function preparePieData(args) {
         return data;
     };
     const prepareLabels = (prepareLabelsArgs) => {
-        const { data, series } = prepareLabelsArgs;
+        const { data, series, allowOverlow = true } = prepareLabelsArgs;
         const { dataLabels } = series[0];
         const labels = [];
         const htmlLabels = [];
@@ -120,7 +119,6 @@ export function preparePieData(args) {
                 else {
                     y = y < 0 ? y - labelHeight : y;
                 }
-                x = Math.max(-boundsWidth / 2, x);
                 return [x, y];
             };
             const getConnectorPoints = (angle) => {
@@ -148,6 +146,15 @@ export function preparePieData(args) {
                 segment: relatedSegment.data,
                 angle: midAngle,
             };
+            if (!allowOverlow) {
+                const labelLeftPosition = getLeftPosition(label);
+                const newMaxWidth = labelLeftPosition > 0
+                    ? Math.min(boundsWidth / 2 - labelLeftPosition, labelWidth)
+                    : Math.min(labelWidth - (-labelLeftPosition - boundsWidth / 2), labelWidth);
+                if (newMaxWidth !== label.maxWidth) {
+                    label.maxWidth = Math.max(0, newMaxWidth);
+                }
+            }
             let overlap = false;
             if (prevLabel) {
                 overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
@@ -172,21 +179,8 @@ export function preparePieData(args) {
                     }
                 }
             }
-            if (dataLabels.allowOverlap || !overlap) {
-                const left = getLeftPosition(label);
-                if (Math.abs(left) > boundsWidth / 2) {
-                    const overflow = Math.abs(left) - boundsWidth / 2;
-                    label.maxWidth = label.size.width - overflow;
-                    maxMissingWidth = Math.max(maxMissingWidth, overflow);
-                }
-                else {
-                    const right = left + label.size.width;
-                    if (right > boundsWidth / 2) {
-                        const overflow = right - boundsWidth / 2;
-                        label.maxWidth = label.size.width - overflow;
-                        maxMissingWidth = Math.max(maxMissingWidth, overflow);
-                    }
-                }
+            const isLabelOverlapped = !dataLabels.allowOverlap && overlap;
+            if (!isLabelOverlapped && label.maxWidth > 0) {
                 if (shouldUseHtml) {
                     htmlLabels.push({
                         x: data.center[0] + label.x,
@@ -218,43 +212,71 @@ export function preparePieData(args) {
             data,
             series: items,
         });
+        let maxLeftRightFreeSpace = Infinity;
+        let labelsOverflow = 0;
+        preparedLabels.labels.forEach((label) => {
+            const left = getLeftPosition(label);
+            let freeSpace = 0;
+            if (left < 0) {
+                freeSpace = boundsWidth / 2 - Math.abs(left);
+            }
+            else {
+                freeSpace = boundsWidth / 2 - (left + label.size.width);
+            }
+            maxLeftRightFreeSpace = Math.max(0, Math.min(maxLeftRightFreeSpace, freeSpace));
+            labelsOverflow = freeSpace < 0 ? Math.max(labelsOverflow, -freeSpace) : labelsOverflow;
+        });
         const segmentMaxRadius = Math.max(...data.segments.map((s) => s.data.radius));
-        const topAdjustment = Math.min(data.center[1] - segmentMaxRadius, ...preparedLabels.labels.map((l) => l.y + data.center[1]), ...preparedLabels.htmlLabels.map((l) => l.y));
-        const bottom = Math.max(data.center[1] + segmentMaxRadius, ...preparedLabels.labels.map((l) => l.y + data.center[1] + l.size.height), ...preparedLabels.htmlLabels.map((l) => l.y + l.size.height));
-        if (topAdjustment > 0) {
+        if (labelsOverflow) {
             data.segments.forEach((s) => {
-                const nextPossibleRadius = s.data.radius + topAdjustment / 2;
-                s.data.radius = Math.min(nextPossibleRadius, maxRadius);
+                const neeSegmentRadius = Math.max(minRadius, s.data.radius - labelsOverflow);
+                s.data.radius = neeSegmentRadius;
             });
-            data.center[1] -= topAdjustment / 2;
         }
-        const bottomAdjustment = Math.floor(boundsHeight - bottom);
-        if (bottomAdjustment > 0) {
-            data.segments.forEach((s) => {
-                const nextPossibleRadius = s.data.radius + bottomAdjustment / 2;
-                s.data.radius = Math.min(nextPossibleRadius, maxRadius);
-            });
-            data.center[1] += bottomAdjustment / 2;
+        else {
+            let topFreeSpace = data.center[1] - segmentMaxRadius - haloSize;
+            if (preparedLabels.labels.length) {
+                const topSvgLabel = Math.max(0, ...preparedLabels.labels.map((l) => -l.y));
+                topFreeSpace = Math.min(topFreeSpace, data.center[1] - topSvgLabel);
+            }
+            if (preparedLabels.htmlLabels.length) {
+                const topHtmlLabel = Math.max(0, ...preparedLabels.htmlLabels.map((l) => l.y));
+                topFreeSpace = Math.min(topFreeSpace, topHtmlLabel);
+            }
+            let bottomFreeSpace = data.center[1] - segmentMaxRadius - haloSize;
+            if (preparedLabels.labels.length) {
+                const bottomSvgLabel = Math.max(0, ...preparedLabels.labels.map((l) => l.y + l.size.height));
+                bottomFreeSpace = Math.min(bottomFreeSpace, data.center[1] - bottomSvgLabel);
+            }
+            if (preparedLabels.htmlLabels.length) {
+                const bottomHtmlLabel = Math.max(0, ...preparedLabels.htmlLabels.map((l) => l.y + l.size.height));
+                bottomFreeSpace = Math.min(bottomFreeSpace, data.center[1] * 2 - bottomHtmlLabel);
+            }
+            const topAdjustment = Math.max(0, Math.min(topFreeSpace, maxLeftRightFreeSpace));
+            const bottomAdjustment = Math.max(0, Math.min(bottomFreeSpace, maxLeftRightFreeSpace));
+            if (topAdjustment && topAdjustment >= bottomAdjustment) {
+                data.segments.forEach((s) => {
+                    const nextPossibleRadius = s.data.radius + (topAdjustment + bottomAdjustment) / 2;
+                    s.data.radius = Math.min(nextPossibleRadius, maxRadius);
+                });
+                data.center[1] -= (topAdjustment - bottomAdjustment) / 2;
+            }
+            else if (bottomAdjustment) {
+                data.segments.forEach((s) => {
+                    const nextPossibleRadius = s.data.radius + (topAdjustment + bottomAdjustment) / 2;
+                    s.data.radius = Math.min(nextPossibleRadius, maxRadius);
+                });
+                data.center[1] += (bottomAdjustment - topAdjustment) / 2;
+            }
         }
         const { labels, htmlLabels, connectors } = prepareLabels({
             data,
             series: items,
+            allowOverlow: false,
         });
         data.labels = labels;
         data.htmlLabels = htmlLabels;
         data.connectors = connectors;
-        if (maxMissingWidth > 0) {
-            const { dataLabels } = items[0];
-            if (dataLabels.enabled) {
-                data.segments.forEach((s) => {
-                    s.data.radius = Math.max(minRadius, s.data.radius - maxMissingWidth);
-                });
-                const finalLabels = prepareLabels({ data, series: items });
-                data.labels = finalLabels.labels;
-                data.htmlLabels = finalLabels.htmlLabels;
-                data.connectors = finalLabels.connectors;
-            }
-        }
         return data;
     });
 }

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

@@ -1,4 +1,4 @@
-import { stratify, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3';
+import { ascending, descending, sort, stratify, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3';
 import { LayoutAlgorithm } from '../../../constants';
 import { getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
@@ -57,7 +57,25 @@ function getLabels(args) {
 export function prepareTreemapData(args) {
     var _a;
     const { series, width, height } = args;
-    const dataWithRootNode = getSeriesDataWithRootNode(series);
+    const parentNodeValues = {};
+    let dataWithRootNode = series.data.reduce((acc, d) => {
+        var _a, _b;
+        const dataChunk = Object.assign({}, d);
+        if (!dataChunk.parentId) {
+            dataChunk.parentId = series.id;
+        }
+        if (dataChunk.parentId) {
+            parentNodeValues[dataChunk.parentId] =
+                ((_a = parentNodeValues[dataChunk.parentId]) !== null && _a !== void 0 ? _a : 0) + ((_b = dataChunk.value) !== null && _b !== void 0 ? _b : 0);
+        }
+        acc.push(dataChunk);
+        return acc;
+    }, [{ name: series.name, id: series.id }]);
+    if (series.sorting.enabled) {
+        const getSortingValue = (d) => { var _a, _b; return (_a = d.value) !== null && _a !== void 0 ? _a : parentNodeValues[(_b = d.id) !== null && _b !== void 0 ? _b : '']; };
+        const comparator = series.sorting.direction === 'desc' ? descending : ascending;
+        dataWithRootNode = sort(dataWithRootNode, (a, b) => comparator(getSortingValue(a), getSortingValue(b)));
+    }
     const hierarchy = stratify()
         .id((d) => {
         if (d.id) {
@@ -111,13 +129,3 @@ export function prepareTreemapData(args) {
     }
     return { labelData, leaves, series, htmlElements };
 }
-function getSeriesDataWithRootNode(series) {
-    return series.data.reduce((acc, d) => {
-        const dataChunk = Object.assign({}, d);
-        if (!dataChunk.parentId) {
-            dataChunk.parentId = series.id;
-        }
-        acc.push(dataChunk);
-        return acc;
-    }, [{ name: series.name, id: series.id }]);
-}

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

@@ -43,4 +43,15 @@ export interface TreemapSeries<T = MeaningfulAny> extends BaseSeries {
         /** Horizontal alignment of the data label inside the tile. */
         align?: 'left' | 'center' | 'right';
     };
+    /** Data sorting settings (affects the order in which blocks are displayed inside the chart).
+     * If the option is not specified, the data is displayed in the order defined by the user. */
+    sorting?: {
+        /** Enable or disable sorting. */
+        enabled?: boolean;
+        /** The sorting direction.
+         *
+         * @default: 'desc'
+         */
+        direction?: 'asc' | 'desc';
+    };
 }

package/dist/esm/components/Tooltip/DefaultContent.js

@@ -58,8 +58,9 @@ function getDefaultValueFormat({ axis }) {
 }
 export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
     const measureValue = getMeasureValue({ data: hovered, xAxis, yAxis });
-    return (React.createElement(React.Fragment, null,
-        measureValue && React.createElement("div", null, measureValue),
+    return (React.createElement("div", { className: b('content') },
+        measureValue && React.createElement("div", { className: b('series-name') }, measureValue),
+        // eslint-disable-next-line complexity
         hovered.map((seriesItem, i) => {
             var _a;
             const { data, series, closest } = seriesItem;
@@ -79,9 +80,10 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                         series.name,
                         ": ",
                         formattedValue));
-                    return (React.createElement("div", { key: id, className: b('content-row') },
+                    const active = closest && hovered.length > 1;
+                    return (React.createElement("div", { key: id, className: b('content-row', { active }) },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
+                        React.createElement("div", null, value)));
                 }
                 case 'waterfall': {
                     const isTotal = get(data, 'total', false);
@@ -119,9 +121,10 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                         series.name,
                         ": ",
                         formattedValue));
-                    return (React.createElement("div", { key: id, className: b('content-row') },
+                    const active = closest && hovered.length > 1;
+                    return (React.createElement("div", { key: id, className: b('content-row', { active }) },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
+                        React.createElement("div", null, value)));
                 }
                 case 'pie':
                 case 'treemap': {
@@ -152,7 +155,8 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                             React.createElement("span", null, "\u2192"),
                             " ", target === null || target === void 0 ? void 0 :
                             target.name,
-                            ": ",
+                            ":",
+                            ' ',
                             formattedValue)));
                 }
                 case 'radar': {
@@ -167,9 +171,10 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                             radarSeries.name || radarSeries.id,
                             "\u00A0"),
                         React.createElement("span", null, formattedValue)));
-                    return (React.createElement("div", { key: id, className: b('content-row') },
+                    const active = closest && hovered.length > 1;
+                    return (React.createElement("div", { key: id, className: b('content-row', { active }) },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
+                        React.createElement("div", null, value)));
                 }
                 default: {
                     return null;

package/dist/esm/components/Tooltip/index.js

@@ -22,6 +22,6 @@ export const Tooltip = (props) => {
         window.dispatchEvent(new CustomEvent('scroll'));
     }, [left, top]);
     return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { anchorElement: anchor, className: b({ pinned: tooltipPinned }), disableTransition: true, floatingStyles: tooltipPinned ? undefined : { pointerEvents: 'none' }, offset: { mainAxis: 20 }, onOpenChange: tooltipPinned ? handleOnOpenChange : undefined, open: true, placement: ['right', 'left', 'top', 'bottom'] },
-        React.createElement("div", { className: b('content') },
+        React.createElement("div", { className: b('popup-content') },
             React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer, valueFormat: tooltip.valueFormat })))) : null;
 };

package/dist/esm/components/Tooltip/styles.css

@@ -1,15 +1,28 @@
 .gcharts-tooltip {
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
 }
-.gcharts-tooltip__content {
-  padding: 8px 14px;
+.gcharts-tooltip__popup-content {
   text-wrap: nowrap;
   border-radius: 4px;
   background-color: var(--g-color-infographics-tooltip-bg);
 }
+.gcharts-tooltip__content {
+  padding: var(--gcharts-tooltip-content-padding, 8px 0);
+}
+.gcharts-tooltip__series-name {
+  padding: 2px 14px 6px;
+  font-size: 13px;
+  font-weight: 600;
+}
 .gcharts-tooltip__content-row {
   display: flex;
   align-items: center;
+  padding: 2px 14px;
+  font-size: 12px;
+}
+.gcharts-tooltip__content-row_active {
+  font-weight: 600;
+  background-color: var(--g-color-base-info-medium);
 }
 .gcharts-tooltip__color {
   display: inline-block;

package/dist/esm/hooks/useSeries/prepare-treemap.js

@@ -6,7 +6,7 @@ import { prepareLegendSymbol } from './utils';
 export function prepareTreemap(args) {
     const { colorScale, legend, series } = args;
     return series.map((s) => {
-        var _a, _b;
+        var _a, _b, _c;
         const id = getUniqId();
         const name = s.name || '';
         const color = s.color || colorScale(name);
@@ -30,9 +30,10 @@ export function prepareTreemap(args) {
                 enabled: get(s, 'legend.enabled', legend.enabled),
                 symbol: prepareLegendSymbol(s),
             },
-            levels: s.levels,
+            levels: (_c = s.levels) !== null && _c !== void 0 ? _c : [],
             layoutAlgorithm: get(s, 'layoutAlgorithm', LayoutAlgorithm.Binary),
             cursor: get(s, 'cursor', null),
+            sorting: Object.assign({ enabled: false, direction: 'desc' }, s.sorting),
         };
         return preparedSeries;
     });

package/dist/esm/hooks/useSeries/types.d.ts

@@ -242,7 +242,8 @@ export type PreparedTreemapSeries = {
         format?: ValueFormat;
     };
     layoutAlgorithm: `${LayoutAlgorithm}`;
-} & BasePreparedSeries & Omit<TreemapSeries, keyof BasePreparedSeries>;
+    sorting: Required<TreemapSeries['sorting']>;
+} & BasePreparedSeries & Required<Omit<TreemapSeries, keyof BasePreparedSeries>>;
 export type PreparedWaterfallSeriesData = WaterfallSeriesData & {
     index: number;
 };

package/dist/esm/hooks/useShapes/pie/prepare-data.js

@@ -23,7 +23,6 @@ export function preparePieData(args) {
     const maxRadius = Math.min(boundsWidth, boundsHeight) / 2 - haloSize;
     const minRadius = maxRadius * 0.3;
     const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
-    let maxMissingWidth = 0;
     const prepareItem = (stackId, items) => {
         var _a;
         const series = items[0];
@@ -77,7 +76,7 @@ export function preparePieData(args) {
         return data;
     };
     const prepareLabels = (prepareLabelsArgs) => {
-        const { data, series } = prepareLabelsArgs;
+        const { data, series, allowOverlow = true } = prepareLabelsArgs;
         const { dataLabels } = series[0];
         const labels = [];
         const htmlLabels = [];
@@ -120,7 +119,6 @@ export function preparePieData(args) {
                 else {
                     y = y < 0 ? y - labelHeight : y;
                 }
-                x = Math.max(-boundsWidth / 2, x);
                 return [x, y];
             };
             const getConnectorPoints = (angle) => {
@@ -148,6 +146,15 @@ export function preparePieData(args) {
                 segment: relatedSegment.data,
                 angle: midAngle,
             };
+            if (!allowOverlow) {
+                const labelLeftPosition = getLeftPosition(label);
+                const newMaxWidth = labelLeftPosition > 0
+                    ? Math.min(boundsWidth / 2 - labelLeftPosition, labelWidth)
+                    : Math.min(labelWidth - (-labelLeftPosition - boundsWidth / 2), labelWidth);
+                if (newMaxWidth !== label.maxWidth) {
+                    label.maxWidth = Math.max(0, newMaxWidth);
+                }
+            }
             let overlap = false;
             if (prevLabel) {
                 overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
@@ -172,21 +179,8 @@ export function preparePieData(args) {
                     }
                 }
             }
-            if (dataLabels.allowOverlap || !overlap) {
-                const left = getLeftPosition(label);
-                if (Math.abs(left) > boundsWidth / 2) {
-                    const overflow = Math.abs(left) - boundsWidth / 2;
-                    label.maxWidth = label.size.width - overflow;
-                    maxMissingWidth = Math.max(maxMissingWidth, overflow);
-                }
-                else {
-                    const right = left + label.size.width;
-                    if (right > boundsWidth / 2) {
-                        const overflow = right - boundsWidth / 2;
-                        label.maxWidth = label.size.width - overflow;
-                        maxMissingWidth = Math.max(maxMissingWidth, overflow);
-                    }
-                }
+            const isLabelOverlapped = !dataLabels.allowOverlap && overlap;
+            if (!isLabelOverlapped && label.maxWidth > 0) {
                 if (shouldUseHtml) {
                     htmlLabels.push({
                         x: data.center[0] + label.x,
@@ -218,43 +212,71 @@ export function preparePieData(args) {
             data,
             series: items,
         });
+        let maxLeftRightFreeSpace = Infinity;
+        let labelsOverflow = 0;
+        preparedLabels.labels.forEach((label) => {
+            const left = getLeftPosition(label);
+            let freeSpace = 0;
+            if (left < 0) {
+                freeSpace = boundsWidth / 2 - Math.abs(left);
+            }
+            else {
+                freeSpace = boundsWidth / 2 - (left + label.size.width);
+            }
+            maxLeftRightFreeSpace = Math.max(0, Math.min(maxLeftRightFreeSpace, freeSpace));
+            labelsOverflow = freeSpace < 0 ? Math.max(labelsOverflow, -freeSpace) : labelsOverflow;
+        });
         const segmentMaxRadius = Math.max(...data.segments.map((s) => s.data.radius));
-        const topAdjustment = Math.min(data.center[1] - segmentMaxRadius, ...preparedLabels.labels.map((l) => l.y + data.center[1]), ...preparedLabels.htmlLabels.map((l) => l.y));
-        const bottom = Math.max(data.center[1] + segmentMaxRadius, ...preparedLabels.labels.map((l) => l.y + data.center[1] + l.size.height), ...preparedLabels.htmlLabels.map((l) => l.y + l.size.height));
-        if (topAdjustment > 0) {
+        if (labelsOverflow) {
             data.segments.forEach((s) => {
-                const nextPossibleRadius = s.data.radius + topAdjustment / 2;
-                s.data.radius = Math.min(nextPossibleRadius, maxRadius);
+                const neeSegmentRadius = Math.max(minRadius, s.data.radius - labelsOverflow);
+                s.data.radius = neeSegmentRadius;
             });
-            data.center[1] -= topAdjustment / 2;
         }
-        const bottomAdjustment = Math.floor(boundsHeight - bottom);
-        if (bottomAdjustment > 0) {
-            data.segments.forEach((s) => {
-                const nextPossibleRadius = s.data.radius + bottomAdjustment / 2;
-                s.data.radius = Math.min(nextPossibleRadius, maxRadius);
-            });
-            data.center[1] += bottomAdjustment / 2;
+        else {
+            let topFreeSpace = data.center[1] - segmentMaxRadius - haloSize;
+            if (preparedLabels.labels.length) {
+                const topSvgLabel = Math.max(0, ...preparedLabels.labels.map((l) => -l.y));
+                topFreeSpace = Math.min(topFreeSpace, data.center[1] - topSvgLabel);
+            }
+            if (preparedLabels.htmlLabels.length) {
+                const topHtmlLabel = Math.max(0, ...preparedLabels.htmlLabels.map((l) => l.y));
+                topFreeSpace = Math.min(topFreeSpace, topHtmlLabel);
+            }
+            let bottomFreeSpace = data.center[1] - segmentMaxRadius - haloSize;
+            if (preparedLabels.labels.length) {
+                const bottomSvgLabel = Math.max(0, ...preparedLabels.labels.map((l) => l.y + l.size.height));
+                bottomFreeSpace = Math.min(bottomFreeSpace, data.center[1] - bottomSvgLabel);
+            }
+            if (preparedLabels.htmlLabels.length) {
+                const bottomHtmlLabel = Math.max(0, ...preparedLabels.htmlLabels.map((l) => l.y + l.size.height));
+                bottomFreeSpace = Math.min(bottomFreeSpace, data.center[1] * 2 - bottomHtmlLabel);
+            }
+            const topAdjustment = Math.max(0, Math.min(topFreeSpace, maxLeftRightFreeSpace));
+            const bottomAdjustment = Math.max(0, Math.min(bottomFreeSpace, maxLeftRightFreeSpace));
+            if (topAdjustment && topAdjustment >= bottomAdjustment) {
+                data.segments.forEach((s) => {
+                    const nextPossibleRadius = s.data.radius + (topAdjustment + bottomAdjustment) / 2;
+                    s.data.radius = Math.min(nextPossibleRadius, maxRadius);
+                });
+                data.center[1] -= (topAdjustment - bottomAdjustment) / 2;
+            }
+            else if (bottomAdjustment) {
+                data.segments.forEach((s) => {
+                    const nextPossibleRadius = s.data.radius + (topAdjustment + bottomAdjustment) / 2;
+                    s.data.radius = Math.min(nextPossibleRadius, maxRadius);
+                });
+                data.center[1] += (bottomAdjustment - topAdjustment) / 2;
+            }
         }
         const { labels, htmlLabels, connectors } = prepareLabels({
             data,
             series: items,
+            allowOverlow: false,
         });
         data.labels = labels;
         data.htmlLabels = htmlLabels;
         data.connectors = connectors;
-        if (maxMissingWidth > 0) {
-            const { dataLabels } = items[0];
-            if (dataLabels.enabled) {
-                data.segments.forEach((s) => {
-                    s.data.radius = Math.max(minRadius, s.data.radius - maxMissingWidth);
-                });
-                const finalLabels = prepareLabels({ data, series: items });
-                data.labels = finalLabels.labels;
-                data.htmlLabels = finalLabels.htmlLabels;
-                data.connectors = finalLabels.connectors;
-            }
-        }
         return data;
     });
 }

package/dist/esm/hooks/useShapes/treemap/prepare-data.js

@@ -1,4 +1,4 @@
-import { stratify, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3';
+import { ascending, descending, sort, stratify, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3';
 import { LayoutAlgorithm } from '../../../constants';
 import { getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
@@ -57,7 +57,25 @@ function getLabels(args) {
 export function prepareTreemapData(args) {
     var _a;
     const { series, width, height } = args;
-    const dataWithRootNode = getSeriesDataWithRootNode(series);
+    const parentNodeValues = {};
+    let dataWithRootNode = series.data.reduce((acc, d) => {
+        var _a, _b;
+        const dataChunk = Object.assign({}, d);
+        if (!dataChunk.parentId) {
+            dataChunk.parentId = series.id;
+        }
+        if (dataChunk.parentId) {
+            parentNodeValues[dataChunk.parentId] =
+                ((_a = parentNodeValues[dataChunk.parentId]) !== null && _a !== void 0 ? _a : 0) + ((_b = dataChunk.value) !== null && _b !== void 0 ? _b : 0);
+        }
+        acc.push(dataChunk);
+        return acc;
+    }, [{ name: series.name, id: series.id }]);
+    if (series.sorting.enabled) {
+        const getSortingValue = (d) => { var _a, _b; return (_a = d.value) !== null && _a !== void 0 ? _a : parentNodeValues[(_b = d.id) !== null && _b !== void 0 ? _b : '']; };
+        const comparator = series.sorting.direction === 'desc' ? descending : ascending;
+        dataWithRootNode = sort(dataWithRootNode, (a, b) => comparator(getSortingValue(a), getSortingValue(b)));
+    }
     const hierarchy = stratify()
         .id((d) => {
         if (d.id) {
@@ -111,13 +129,3 @@ export function prepareTreemapData(args) {
     }
     return { labelData, leaves, series, htmlElements };
 }
-function getSeriesDataWithRootNode(series) {
-    return series.data.reduce((acc, d) => {
-        const dataChunk = Object.assign({}, d);
-        if (!dataChunk.parentId) {
-            dataChunk.parentId = series.id;
-        }
-        acc.push(dataChunk);
-        return acc;
-    }, [{ name: series.name, id: series.id }]);
-}

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

@@ -43,4 +43,15 @@ export interface TreemapSeries<T = MeaningfulAny> extends BaseSeries {
         /** Horizontal alignment of the data label inside the tile. */
         align?: 'left' | 'center' | 'right';
     };
+    /** Data sorting settings (affects the order in which blocks are displayed inside the chart).
+     * If the option is not specified, the data is displayed in the order defined by the user. */
+    sorting?: {
+        /** Enable or disable sorting. */
+        enabled?: boolean;
+        /** The sorting direction.
+         *
+         * @default: 'desc'
+         */
+        direction?: 'asc' | 'desc';
+    };
 }

package/package.json

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