@gravity-ui/charts 1.4.0 → 1.5.1

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

@@ -1,7 +1,7 @@
 import { arc, group, line as lineGenerator } from 'd3';
 import { calculateNumericProperty, getLabelsSize, getLeftPosition, isLabelsOverlapping, } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
-import { getCurveFactory, pieGenerator } from './utils';
+import { getCurveFactory, getInscribedAngle, pieGenerator } from './utils';
 const FULL_CIRCLE = Math.PI * 2;
 const getCenter = (boundsWidth, boundsHeight, center) => {
     var _a, _b;
@@ -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 = [];
@@ -104,6 +103,7 @@ export function preparePieData(args) {
         const labelArcGenerator = arc()
             .innerRadius((d) => d.data.radius + distance + connectorPadding)
             .outerRadius((d) => d.data.radius + distance + connectorPadding);
+        let shouldStopLabelPlacement = false;
         series.forEach((d, index) => {
             const prevLabel = labels[labels.length - 1];
             const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.value }, d.dataLabels));
@@ -120,7 +120,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,11 +147,25 @@ 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);
+                const startAngle = relatedSegment.startAngle +
+                    (relatedSegment.endAngle - relatedSegment.startAngle) / 2;
                 if (overlap) {
-                    let shouldAdjustAngle = true;
+                    let shouldAdjustAngle = !shouldStopLabelPlacement;
+                    const connectorPoints = getConnectorPoints(startAngle);
+                    const pointA = connectorPoints[0];
+                    const pointB = connectorPoints[connectorPoints.length - 1];
                     const step = Math.PI / 180;
                     while (shouldAdjustAngle) {
                         const newAngle = label.angle + step;
@@ -164,6 +177,11 @@ export function preparePieData(args) {
                             const [newX, newY] = getLabelPosition(newAngle);
                             label.x = newX;
                             label.y = newY;
+                            const inscribedAngle = getInscribedAngle(pointA, pointB, [newX, newY]);
+                            if (inscribedAngle > 90) {
+                                shouldAdjustAngle = false;
+                                shouldStopLabelPlacement = true;
+                            }
                             if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
                                 shouldAdjustAngle = false;
                                 overlap = false;
@@ -172,21 +190,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 && !shouldStopLabelPlacement) {
                 if (shouldUseHtml) {
                     htmlLabels.push({
                         x: data.center[0] + label.x,
@@ -200,7 +205,7 @@ export function preparePieData(args) {
                     labels.push(label);
                 }
                 const connector = {
-                    path: line(getConnectorPoints(midAngle)),
+                    path: line(getConnectorPoints(label.angle)),
                     color: relatedSegment.data.color,
                 };
                 connectors.push(connector);
@@ -218,43 +223,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/pie/utils.d.ts

@@ -1,4 +1,14 @@
 import type { CurveFactory } from 'd3';
+import type { PointPosition } from '../../../types';
 import type { PreparedPieData, SegmentData } from './types';
 export declare const pieGenerator: import("d3-shape").Pie<any, SegmentData>;
 export declare function getCurveFactory(data: PreparedPieData): CurveFactory | undefined;
+/**
+ * Inscribed angle at vertex A (opposite side/chord BC): the angle between rays AB and AC.
+ *
+ * The order of B and C does not affect the result.
+ *
+ * @see: https://en.wikipedia.org/wiki/Inscribed_angle
+ * @returns The angle in degrees, in the range [0, 180].
+ */
+export declare function getInscribedAngle(a: PointPosition, b: PointPosition, c: PointPosition): number;

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

@@ -13,3 +13,21 @@ export function getCurveFactory(data) {
     }
     return undefined;
 }
+/**
+ * Inscribed angle at vertex A (opposite side/chord BC): the angle between rays AB and AC.
+ *
+ * The order of B and C does not affect the result.
+ *
+ * @see: https://en.wikipedia.org/wiki/Inscribed_angle
+ * @returns The angle in degrees, in the range [0, 180].
+ */
+export function getInscribedAngle(a, b, c) {
+    const ux = b[0] - a[0];
+    const uy = b[1] - a[1];
+    const vx = c[0] - a[0];
+    const vy = c[1] - a[1];
+    const dot = ux * vx + uy * vy;
+    const cross = ux * vy - uy * vx;
+    const radians = Math.atan2(Math.abs(cross), dot);
+    return (radians * 180) / Math.PI;
+}

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

@@ -1,16 +1,16 @@
-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';
 const DEFAULT_PADDING = 1;
 function getLabels(args) {
-    const { data, options: { html, padding, align }, } = args;
+    const { data, options: { html, padding, align, style }, } = args;
     return data.reduce((acc, d) => {
         const texts = Array.isArray(d.data.name) ? d.data.name : [d.data.name];
         texts.forEach((text, index) => {
             var _a;
             const label = getFormattedValue(Object.assign({ value: text }, args.options));
-            const { maxHeight: lineHeight, maxWidth: labelMaxWidth } = (_a = getLabelsSize({ labels: [label], html })) !== null && _a !== void 0 ? _a : {};
+            const { maxHeight: lineHeight, maxWidth: labelMaxWidth } = (_a = getLabelsSize({ labels: [label], style, html })) !== null && _a !== void 0 ? _a : {};
             const left = d.x0 + padding;
             const right = d.x1 - padding;
             const spaceWidth = Math.max(0, right - left);
@@ -35,6 +35,10 @@ function getLabels(args) {
                     break;
                 }
             }
+            const bottom = y + lineHeight;
+            if (bottom > d.y1) {
+                return;
+            }
             const item = html
                 ? {
                     content: label,
@@ -57,7 +61,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) {
@@ -102,7 +124,7 @@ export function prepareTreemapData(args) {
         const { html, style: dataLabelsStyle } = series.dataLabels;
         const labels = getLabels({ data: leaves, options: series.dataLabels });
         if (html) {
-            const htmlItems = labels.map((l) => (Object.assign({ style: dataLabelsStyle }, l)));
+            const htmlItems = labels.map((l) => (Object.assign({ style: Object.assign(Object.assign({}, dataLabelsStyle), { maxWidth: l.size.width, maxHeight: l.size.height, overflow: 'hidden' }) }, l)));
             htmlElements.push(...htmlItems);
         }
         else {
@@ -111,13 +133,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/cjs/utils/chart/text.js

@@ -64,7 +64,7 @@ function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
     return text;
 }
 export function getLabelsSize({ labels, style, rotation, html, }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (!labels.filter(Boolean).length) {
         return { maxHeight: 0, maxWidth: 0 };
     }
@@ -74,7 +74,12 @@ export function getLabelsSize({ labels, style, rotation, html, }) {
     const result = { maxHeight: 0, maxWidth: 0 };
     let labelWrapper;
     if (html) {
-        labelWrapper = container.append('div').style('position', 'absolute').node();
+        labelWrapper = container
+            .append('div')
+            .style('position', 'absolute')
+            .style('font-size', (_a = style === null || style === void 0 ? void 0 : style.fontSize) !== null && _a !== void 0 ? _a : '')
+            .style('font-weight', (_b = style === null || style === void 0 ? void 0 : style.fontWeight) !== null && _b !== void 0 ? _b : '')
+            .node();
         const { height, width } = labels.reduce((acc, l) => {
             var _a, _b;
             if (labelWrapper) {
@@ -97,9 +102,9 @@ export function getLabelsSize({ labels, style, rotation, html, }) {
                 .attr('text-anchor', rotation > 0 ? 'start' : 'end')
                 .style('transform', `rotate(${rotation}deg)`);
         }
-        const rect = (_a = svg.select('g').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        result.maxWidth = (_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0;
-        result.maxHeight = (_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0;
+        const rect = (_c = svg.select('g').node()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+        result.maxWidth = (_d = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _d !== void 0 ? _d : 0;
+        result.maxHeight = (_e = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _e !== void 0 ? _e : 0;
     }
     container.remove();
     return result;

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

@@ -1,7 +1,7 @@
 import { arc, group, line as lineGenerator } from 'd3';
 import { calculateNumericProperty, getLabelsSize, getLeftPosition, isLabelsOverlapping, } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
-import { getCurveFactory, pieGenerator } from './utils';
+import { getCurveFactory, getInscribedAngle, pieGenerator } from './utils';
 const FULL_CIRCLE = Math.PI * 2;
 const getCenter = (boundsWidth, boundsHeight, center) => {
     var _a, _b;
@@ -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 = [];
@@ -104,6 +103,7 @@ export function preparePieData(args) {
         const labelArcGenerator = arc()
             .innerRadius((d) => d.data.radius + distance + connectorPadding)
             .outerRadius((d) => d.data.radius + distance + connectorPadding);
+        let shouldStopLabelPlacement = false;
         series.forEach((d, index) => {
             const prevLabel = labels[labels.length - 1];
             const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.value }, d.dataLabels));
@@ -120,7 +120,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,11 +147,25 @@ 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);
+                const startAngle = relatedSegment.startAngle +
+                    (relatedSegment.endAngle - relatedSegment.startAngle) / 2;
                 if (overlap) {
-                    let shouldAdjustAngle = true;
+                    let shouldAdjustAngle = !shouldStopLabelPlacement;
+                    const connectorPoints = getConnectorPoints(startAngle);
+                    const pointA = connectorPoints[0];
+                    const pointB = connectorPoints[connectorPoints.length - 1];
                     const step = Math.PI / 180;
                     while (shouldAdjustAngle) {
                         const newAngle = label.angle + step;
@@ -164,6 +177,11 @@ export function preparePieData(args) {
                             const [newX, newY] = getLabelPosition(newAngle);
                             label.x = newX;
                             label.y = newY;
+                            const inscribedAngle = getInscribedAngle(pointA, pointB, [newX, newY]);
+                            if (inscribedAngle > 90) {
+                                shouldAdjustAngle = false;
+                                shouldStopLabelPlacement = true;
+                            }
                             if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
                                 shouldAdjustAngle = false;
                                 overlap = false;
@@ -172,21 +190,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 && !shouldStopLabelPlacement) {
                 if (shouldUseHtml) {
                     htmlLabels.push({
                         x: data.center[0] + label.x,
@@ -200,7 +205,7 @@ export function preparePieData(args) {
                     labels.push(label);
                 }
                 const connector = {
-                    path: line(getConnectorPoints(midAngle)),
+                    path: line(getConnectorPoints(label.angle)),
                     color: relatedSegment.data.color,
                 };
                 connectors.push(connector);
@@ -218,43 +223,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/pie/utils.d.ts

@@ -1,4 +1,14 @@
 import type { CurveFactory } from 'd3';
+import type { PointPosition } from '../../../types';
 import type { PreparedPieData, SegmentData } from './types';
 export declare const pieGenerator: import("d3-shape").Pie<any, SegmentData>;
 export declare function getCurveFactory(data: PreparedPieData): CurveFactory | undefined;
+/**
+ * Inscribed angle at vertex A (opposite side/chord BC): the angle between rays AB and AC.
+ *
+ * The order of B and C does not affect the result.
+ *
+ * @see: https://en.wikipedia.org/wiki/Inscribed_angle
+ * @returns The angle in degrees, in the range [0, 180].
+ */
+export declare function getInscribedAngle(a: PointPosition, b: PointPosition, c: PointPosition): number;

package/dist/esm/hooks/useShapes/pie/utils.js

@@ -13,3 +13,21 @@ export function getCurveFactory(data) {
     }
     return undefined;
 }
+/**
+ * Inscribed angle at vertex A (opposite side/chord BC): the angle between rays AB and AC.
+ *
+ * The order of B and C does not affect the result.
+ *
+ * @see: https://en.wikipedia.org/wiki/Inscribed_angle
+ * @returns The angle in degrees, in the range [0, 180].
+ */
+export function getInscribedAngle(a, b, c) {
+    const ux = b[0] - a[0];
+    const uy = b[1] - a[1];
+    const vx = c[0] - a[0];
+    const vy = c[1] - a[1];
+    const dot = ux * vx + uy * vy;
+    const cross = ux * vy - uy * vx;
+    const radians = Math.atan2(Math.abs(cross), dot);
+    return (radians * 180) / Math.PI;
+}

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

@@ -1,16 +1,16 @@
-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';
 const DEFAULT_PADDING = 1;
 function getLabels(args) {
-    const { data, options: { html, padding, align }, } = args;
+    const { data, options: { html, padding, align, style }, } = args;
     return data.reduce((acc, d) => {
         const texts = Array.isArray(d.data.name) ? d.data.name : [d.data.name];
         texts.forEach((text, index) => {
             var _a;
             const label = getFormattedValue(Object.assign({ value: text }, args.options));
-            const { maxHeight: lineHeight, maxWidth: labelMaxWidth } = (_a = getLabelsSize({ labels: [label], html })) !== null && _a !== void 0 ? _a : {};
+            const { maxHeight: lineHeight, maxWidth: labelMaxWidth } = (_a = getLabelsSize({ labels: [label], style, html })) !== null && _a !== void 0 ? _a : {};
             const left = d.x0 + padding;
             const right = d.x1 - padding;
             const spaceWidth = Math.max(0, right - left);
@@ -35,6 +35,10 @@ function getLabels(args) {
                     break;
                 }
             }
+            const bottom = y + lineHeight;
+            if (bottom > d.y1) {
+                return;
+            }
             const item = html
                 ? {
                     content: label,
@@ -57,7 +61,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) {
@@ -102,7 +124,7 @@ export function prepareTreemapData(args) {
         const { html, style: dataLabelsStyle } = series.dataLabels;
         const labels = getLabels({ data: leaves, options: series.dataLabels });
         if (html) {
-            const htmlItems = labels.map((l) => (Object.assign({ style: dataLabelsStyle }, l)));
+            const htmlItems = labels.map((l) => (Object.assign({ style: Object.assign(Object.assign({}, dataLabelsStyle), { maxWidth: l.size.width, maxHeight: l.size.height, overflow: 'hidden' }) }, l)));
             htmlElements.push(...htmlItems);
         }
         else {
@@ -111,13 +133,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/dist/esm/utils/chart/text.js

@@ -64,7 +64,7 @@ function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
     return text;
 }
 export function getLabelsSize({ labels, style, rotation, html, }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (!labels.filter(Boolean).length) {
         return { maxHeight: 0, maxWidth: 0 };
     }
@@ -74,7 +74,12 @@ export function getLabelsSize({ labels, style, rotation, html, }) {
     const result = { maxHeight: 0, maxWidth: 0 };
     let labelWrapper;
     if (html) {
-        labelWrapper = container.append('div').style('position', 'absolute').node();
+        labelWrapper = container
+            .append('div')
+            .style('position', 'absolute')
+            .style('font-size', (_a = style === null || style === void 0 ? void 0 : style.fontSize) !== null && _a !== void 0 ? _a : '')
+            .style('font-weight', (_b = style === null || style === void 0 ? void 0 : style.fontWeight) !== null && _b !== void 0 ? _b : '')
+            .node();
         const { height, width } = labels.reduce((acc, l) => {
             var _a, _b;
             if (labelWrapper) {
@@ -97,9 +102,9 @@ export function getLabelsSize({ labels, style, rotation, html, }) {
                 .attr('text-anchor', rotation > 0 ? 'start' : 'end')
                 .style('transform', `rotate(${rotation}deg)`);
         }
-        const rect = (_a = svg.select('g').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        result.maxWidth = (_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0;
-        result.maxHeight = (_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0;
+        const rect = (_c = svg.select('g').node()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+        result.maxWidth = (_d = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _d !== void 0 ? _d : 0;
+        result.maxHeight = (_e = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _e !== void 0 ? _e : 0;
     }
     container.remove();
     return result;

package/package.json

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