@gravity-ui/charts 0.6.0 → 0.6.1

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

@@ -4,7 +4,7 @@ import { useTooltip } from '../../hooks';
 import { block } from '../../utils';
 import { ChartTooltipContent } from './ChartTooltipContent';
 import './styles.css';
-const b = block('d3-tooltip');
+const b = block('tooltip');
 export const Tooltip = (props) => {
     const { tooltip, xAxis, yAxis, svgContainer, dispatcher, tooltipPinned, onOutsideClick } = props;
     const { hovered, pointerPosition } = useTooltip({ dispatcher, tooltip });
@@ -21,7 +21,7 @@ export const Tooltip = (props) => {
     React.useEffect(() => {
         window.dispatchEvent(new CustomEvent('scroll'));
     }, [left, top]);
-    return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { className: b({ pinned: tooltipPinned }), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }], onOutsideClick: tooltipPinned ? handleOutsideClick : undefined },
+    return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { className: b({ pinned: tooltipPinned }), contentClassName: b('popup-content'), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }], onOutsideClick: tooltipPinned ? handleOutsideClick : undefined },
         React.createElement("div", { className: b('content') },
             React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer })))) : null;
 };

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

@@ -1,28 +1,30 @@
-.gcharts-d3-tooltip[class] {
+.gcharts-tooltip[class] {
   --g-popup-border-width: 0;
   pointer-events: none;
 }
-.gcharts-d3-tooltip[class] > div {
+.gcharts-tooltip[class] > div {
   animation-duration: unset;
   animation-timing-function: unset;
   animation-fill-mode: unset;
 }
-.gcharts-d3-tooltip[class].gcharts-d3-tooltip_pinned {
+.gcharts-tooltip[class].gcharts-tooltip_pinned {
   pointer-events: inherit;
 }
-.gcharts-d3-tooltip__content {
-  padding: 10px 14px;
+.gcharts-tooltip__popup-content {
+  box-shadow: none;
+}
+.gcharts-tooltip__content {
+  padding: 8px 14px;
   text-wrap: nowrap;
-  border: 1px solid var(--g-color-line-generic);
-  border-radius: 3px;
+  border-radius: 4px;
   background-color: var(--g-color-infographics-tooltip-bg);
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
 }
-.gcharts-d3-tooltip__content-row {
+.gcharts-tooltip__content-row {
   display: flex;
   align-items: center;
 }
-.gcharts-d3-tooltip__color {
+.gcharts-tooltip__color {
   display: inline-block;
   width: 16px;
   height: 8px;

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

@@ -102,10 +102,14 @@ export const prepareAreaData = (args) => {
                 const labelItems = points.map((p) => getLabelData(p, s, xMax));
                 if (s.dataLabels.html) {
                     const htmlLabels = labelItems.map((l) => {
+                        var _a;
+                        const style = (_a = l.style) !== null && _a !== void 0 ? _a : s.dataLabels.style;
+                        const labelSize = getLabelsSize({ labels: [l.text], style, html: true });
                         return {
                             x: l.x - l.size.width / 2,
                             y: l.y,
                             content: l.text,
+                            size: { width: labelSize.maxWidth, height: labelSize.maxHeight },
                         };
                     });
                     htmlElements.push(...htmlLabels);

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

@@ -136,6 +136,7 @@ export const prepareBarXData = (args) => {
                         x: label.x,
                         y: label.y,
                         content: label.text,
+                        size: label.size,
                     });
                 }
                 else {

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

@@ -69,6 +69,7 @@ function setLabel(prepared) {
             x,
             y: y - height / 2,
             content,
+            size: { width, height },
         });
     }
     else {

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

@@ -33,6 +33,7 @@ function getHtmlLabel(point, series, xMax) {
         x: Math.min(xMax - size.maxWidth, Math.max(0, point.x)),
         y: Math.max(0, point.y - series.dataLabels.padding - size.maxHeight),
         content,
+        size: { width: size.maxWidth, height: size.maxHeight },
     };
 }
 export const prepareLineData = (args) => {

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

@@ -165,7 +165,8 @@ export function PieSeriesShapes(args) {
             dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
+    const htmlElements = preparedData.map((d) => d.htmlLabels).flat();
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), style: { zIndex: 9 } }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements }, htmlLayout: htmlLayout })));
 }

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

@@ -18,7 +18,7 @@ export function preparePieData(args) {
     const { series: preparedSeries, boundsWidth, boundsHeight } = args;
     const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;
     const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
-    return Array.from(groupedPieSeries).map(([stackId, items]) => {
+    const prepareItem = (stackId, items) => {
         var _a, _b, _c;
         const series = items[0];
         const { center, borderWidth, borderColor, borderRadius, radius: seriesRadius, innerRadius: seriesInnerRadius, dataLabels, } = series;
@@ -30,6 +30,7 @@ export function preparePieData(args) {
             radius,
             segments: [],
             labels: [],
+            htmlLabels: [],
             connectors: [],
             borderColor,
             borderWidth,
@@ -41,7 +42,6 @@ export function preparePieData(args) {
                 opacity: series.states.hover.halo.opacity,
                 size: series.states.hover.halo.size,
             },
-            htmlElements: [],
         };
         const segments = items.map((item) => {
             return {
@@ -55,132 +55,180 @@ export function preparePieData(args) {
             };
         });
         data.segments = pieGenerator(segments);
-        let line = lineGenerator();
-        const curveFactory = getCurveFactory(data);
-        if (curveFactory) {
-            line = line.curve(curveFactory);
-        }
         if (dataLabels.enabled) {
             const { style, connectorPadding, distance } = dataLabels;
             const { maxHeight: labelHeight } = getLabelsSize({ labels: ['Some Label'], style });
-            const minSegmentRadius = maxRadius - connectorPadding - distance - labelHeight;
+            const minSegmentRadius = maxRadius - distance - connectorPadding - labelHeight;
             if (data.radius > minSegmentRadius) {
                 data.radius = minSegmentRadius;
                 data.innerRadius =
                     (_c = calculateNumericProperty({ value: seriesInnerRadius, base: data.radius })) !== null && _c !== void 0 ? _c : 0;
             }
-            const connectorStartPointGenerator = arc()
-                .innerRadius(data.radius)
-                .outerRadius(data.radius);
-            const connectorMidPointRadius = data.radius + distance / 2;
-            const connectorMidPointGenerator = arc()
-                .innerRadius(connectorMidPointRadius)
-                .outerRadius(connectorMidPointRadius);
-            const connectorArcRadius = data.radius + distance;
-            const connectorEndPointGenerator = arc()
-                .innerRadius(connectorArcRadius)
-                .outerRadius(connectorArcRadius);
-            const labelArcRadius = connectorArcRadius + connectorPadding;
-            const labelArcGenerator = arc()
-                .innerRadius(labelArcRadius)
-                .outerRadius(labelArcRadius);
-            const labels = [];
-            items.forEach((d, index) => {
-                const prevLabel = labels[labels.length - 1];
-                const text = String(d.data.label || d.data.value);
-                const shouldUseHtml = dataLabels.html;
-                const labelSize = getLabelsSize({ labels: [text], style, html: shouldUseHtml });
-                const labelWidth = labelSize.maxWidth;
-                const relatedSegment = data.segments[index];
-                const getLabelPosition = (angle) => {
-                    let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+        }
+        return data;
+    };
+    const prepareLabels = (prepareLabelsArgs) => {
+        const { data, series } = prepareLabelsArgs;
+        const { dataLabels } = series[0];
+        const labels = [];
+        const htmlLabels = [];
+        const connectors = [];
+        if (!dataLabels.enabled) {
+            return { labels, htmlLabels, connectors };
+        }
+        let line = lineGenerator();
+        const curveFactory = getCurveFactory(data);
+        if (curveFactory) {
+            line = line.curve(curveFactory);
+        }
+        const { style, connectorPadding, distance } = dataLabels;
+        const { maxHeight: labelHeight } = getLabelsSize({ labels: ['Some Label'], style });
+        const connectorStartPointGenerator = arc()
+            .innerRadius(data.radius)
+            .outerRadius(data.radius);
+        const connectorMidPointRadius = data.radius + distance / 2;
+        const connectorMidPointGenerator = arc()
+            .innerRadius(connectorMidPointRadius)
+            .outerRadius(connectorMidPointRadius);
+        const connectorArcRadius = data.radius + distance;
+        const connectorEndPointGenerator = arc()
+            .innerRadius(connectorArcRadius)
+            .outerRadius(connectorArcRadius);
+        const labelArcRadius = connectorArcRadius + connectorPadding;
+        const labelArcGenerator = arc()
+            .innerRadius(labelArcRadius)
+            .outerRadius(labelArcRadius);
+        series.forEach((d, index) => {
+            const prevLabel = labels[labels.length - 1];
+            const text = String(d.data.label || d.data.value);
+            const shouldUseHtml = dataLabels.html;
+            const labelSize = getLabelsSize({ labels: [text], style, html: shouldUseHtml });
+            const labelWidth = labelSize.maxWidth;
+            const relatedSegment = data.segments[index];
+            const getLabelPosition = (angle) => {
+                let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+                if (shouldUseHtml) {
+                    x = x < 0 ? x - labelWidth : x;
+                    y = y - labelSize.maxHeight;
+                }
+                else {
                     y = y < 0 ? y - labelHeight : y;
-                    if (shouldUseHtml) {
-                        x = x < 0 ? x - labelWidth : x;
-                    }
-                    x = Math.max(-boundsWidth / 2, x);
-                    return [x, y];
-                };
-                const getConnectorPoints = (angle) => {
-                    const connectorStartPoint = connectorStartPointGenerator.centroid(relatedSegment);
-                    const connectorEndPoint = connectorEndPointGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
-                    if (dataLabels.connectorShape === 'straight-line') {
-                        return [connectorStartPoint, connectorEndPoint];
-                    }
-                    const connectorMidPoint = connectorMidPointGenerator.centroid(relatedSegment);
-                    return [connectorStartPoint, connectorMidPoint, connectorEndPoint];
-                };
-                const midAngle = Math.max((prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.angle) || 0, relatedSegment.startAngle +
-                    (relatedSegment.endAngle - relatedSegment.startAngle) / 2);
-                const [x, y] = getLabelPosition(midAngle);
-                const label = {
-                    text,
-                    x,
-                    y,
-                    style,
-                    size: { width: labelWidth, height: labelHeight },
-                    maxWidth: labelWidth,
-                    textAnchor: midAngle < Math.PI ? 'start' : 'end',
-                    series: { id: d.id },
-                    active: true,
-                    segment: relatedSegment.data,
-                    angle: midAngle,
-                };
-                let overlap = false;
-                if (prevLabel) {
-                    overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
-                    if (overlap) {
-                        let shouldAdjustAngle = true;
-                        const step = Math.PI / 180;
-                        while (shouldAdjustAngle) {
-                            const newAngle = label.angle + step;
-                            if (newAngle > FULL_CIRCLE &&
-                                newAngle % FULL_CIRCLE > labels[0].angle) {
+                }
+                x = Math.max(-boundsWidth / 2, x);
+                return [x, y];
+            };
+            const getConnectorPoints = (angle) => {
+                const connectorStartPoint = connectorStartPointGenerator.centroid(relatedSegment);
+                const connectorEndPoint = connectorEndPointGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+                if (dataLabels.connectorShape === 'straight-line') {
+                    return [connectorStartPoint, connectorEndPoint];
+                }
+                const connectorMidPoint = connectorMidPointGenerator.centroid(relatedSegment);
+                return [connectorStartPoint, connectorMidPoint, connectorEndPoint];
+            };
+            const midAngle = Math.max((prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.angle) || 0, relatedSegment.startAngle +
+                (relatedSegment.endAngle - relatedSegment.startAngle) / 2);
+            const [x, y] = getLabelPosition(midAngle);
+            const label = {
+                text,
+                x,
+                y,
+                style,
+                size: { width: labelWidth, height: labelHeight },
+                maxWidth: labelWidth,
+                textAnchor: midAngle < Math.PI ? 'start' : 'end',
+                series: { id: d.id },
+                active: true,
+                segment: relatedSegment.data,
+                angle: midAngle,
+            };
+            let overlap = false;
+            if (prevLabel) {
+                overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
+                if (overlap) {
+                    let shouldAdjustAngle = true;
+                    const step = Math.PI / 180;
+                    while (shouldAdjustAngle) {
+                        const newAngle = label.angle + step;
+                        if (newAngle > FULL_CIRCLE && newAngle % FULL_CIRCLE > labels[0].angle) {
+                            shouldAdjustAngle = false;
+                        }
+                        else {
+                            label.angle = newAngle;
+                            const [newX, newY] = getLabelPosition(newAngle);
+                            label.x = newX;
+                            label.y = newY;
+                            if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
                                 shouldAdjustAngle = false;
-                            }
-                            else {
-                                label.angle = newAngle;
-                                const [newX, newY] = getLabelPosition(newAngle);
-                                label.x = newX;
-                                label.y = newY;
-                                if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
-                                    shouldAdjustAngle = false;
-                                    overlap = false;
-                                }
+                                overlap = false;
                             }
                         }
                     }
                 }
-                if (dataLabels.allowOverlap || !overlap) {
-                    const left = getLeftPosition(label);
-                    if (Math.abs(left) > boundsWidth / 2) {
-                        label.maxWidth = label.size.width - (Math.abs(left) - boundsWidth / 2);
-                    }
-                    else {
-                        const right = left + label.size.width;
-                        if (right > boundsWidth / 2) {
-                            label.maxWidth = label.size.width - (right - boundsWidth / 2);
-                        }
-                    }
-                    if (shouldUseHtml) {
-                        data.htmlElements.push({
-                            x: boundsWidth / 2 + label.x,
-                            y: boundsHeight / 2 + label.y,
-                            content: label.text,
-                        });
-                    }
-                    else {
-                        labels.push(label);
+            }
+            if (dataLabels.allowOverlap || !overlap) {
+                const left = getLeftPosition(label);
+                if (Math.abs(left) > boundsWidth / 2) {
+                    label.maxWidth = label.size.width - (Math.abs(left) - boundsWidth / 2);
+                }
+                else {
+                    const right = left + label.size.width;
+                    if (right > boundsWidth / 2) {
+                        label.maxWidth = label.size.width - (right - boundsWidth / 2);
                     }
-                    const connector = {
-                        path: line(getConnectorPoints(midAngle)),
-                        color: relatedSegment.data.color,
-                    };
-                    data.connectors.push(connector);
                 }
-            });
-            data.labels = labels;
+                if (shouldUseHtml) {
+                    htmlLabels.push({
+                        x: boundsWidth / 2 + label.x,
+                        y: boundsHeight / 2 + label.y,
+                        content: label.text,
+                        size: label.size,
+                    });
+                }
+                else {
+                    labels.push(label);
+                }
+                const connector = {
+                    path: line(getConnectorPoints(midAngle)),
+                    color: relatedSegment.data.color,
+                };
+                connectors.push(connector);
+            }
+        });
+        return {
+            labels,
+            htmlLabels,
+            connectors,
+        };
+    };
+    return Array.from(groupedPieSeries).map(([stackId, items]) => {
+        const data = prepareItem(stackId, items);
+        const preparedLabels = prepareLabels({
+            data,
+            series: items,
+        });
+        const allPreparedLabels = [...preparedLabels.labels, ...preparedLabels.htmlLabels];
+        const top = Math.min(data.center[1] - data.radius, ...allPreparedLabels.map((l) => l.y + data.center[1]));
+        const bottom = Math.max(data.center[1] + data.radius, ...allPreparedLabels.map((l) => data.center[1] + l.y + l.size.height));
+        const topAdjustment = Math.floor(top - data.halo.size);
+        if (topAdjustment > 0) {
+            // should adjust top position and height
+            data.radius += topAdjustment / 2;
+            data.center[1] -= topAdjustment / 2;
         }
+        const bottomAdjustment = Math.floor(boundsHeight - bottom - data.halo.size);
+        if (bottomAdjustment > 0) {
+            // should adjust position and radius
+            data.radius += bottomAdjustment / 2;
+            data.center[1] += bottomAdjustment / 2;
+        }
+        const { labels, htmlLabels, connectors } = prepareLabels({
+            data,
+            series: items,
+        });
+        data.labels = labels;
+        data.htmlLabels = htmlLabels;
+        data.connectors = connectors;
         return data;
     });
 }

package/dist/cjs/hooks/useShapes/pie/types.d.ts

@@ -37,5 +37,5 @@ export type PreparedPieData = {
         opacity: number;
         size: number;
     };
-    htmlElements: HtmlItem[];
+    htmlLabels: HtmlItem[];
 };

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

@@ -33,6 +33,7 @@ function getLabels(args) {
                     content: text,
                     x,
                     y,
+                    size: { width, height: lineHeight },
                 }
                 : {
                     text,

package/dist/cjs/types/chart-ui.d.ts

@@ -18,6 +18,10 @@ export type HtmlItem = {
     x: number;
     y: number;
     content: string;
+    size: {
+        width: number;
+        height: number;
+    };
 };
 export type ShapeDataWithHtmlItems = {
     htmlElements: HtmlItem[];

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

@@ -4,7 +4,7 @@ import { useTooltip } from '../../hooks';
 import { block } from '../../utils';
 import { ChartTooltipContent } from './ChartTooltipContent';
 import './styles.css';
-const b = block('d3-tooltip');
+const b = block('tooltip');
 export const Tooltip = (props) => {
     const { tooltip, xAxis, yAxis, svgContainer, dispatcher, tooltipPinned, onOutsideClick } = props;
     const { hovered, pointerPosition } = useTooltip({ dispatcher, tooltip });
@@ -21,7 +21,7 @@ export const Tooltip = (props) => {
     React.useEffect(() => {
         window.dispatchEvent(new CustomEvent('scroll'));
     }, [left, top]);
-    return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { className: b({ pinned: tooltipPinned }), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }], onOutsideClick: tooltipPinned ? handleOutsideClick : undefined },
+    return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { className: b({ pinned: tooltipPinned }), contentClassName: b('popup-content'), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }], onOutsideClick: tooltipPinned ? handleOutsideClick : undefined },
         React.createElement("div", { className: b('content') },
             React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer })))) : null;
 };

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

@@ -1,28 +1,30 @@
-.gcharts-d3-tooltip[class] {
+.gcharts-tooltip[class] {
   --g-popup-border-width: 0;
   pointer-events: none;
 }
-.gcharts-d3-tooltip[class] > div {
+.gcharts-tooltip[class] > div {
   animation-duration: unset;
   animation-timing-function: unset;
   animation-fill-mode: unset;
 }
-.gcharts-d3-tooltip[class].gcharts-d3-tooltip_pinned {
+.gcharts-tooltip[class].gcharts-tooltip_pinned {
   pointer-events: inherit;
 }
-.gcharts-d3-tooltip__content {
-  padding: 10px 14px;
+.gcharts-tooltip__popup-content {
+  box-shadow: none;
+}
+.gcharts-tooltip__content {
+  padding: 8px 14px;
   text-wrap: nowrap;
-  border: 1px solid var(--g-color-line-generic);
-  border-radius: 3px;
+  border-radius: 4px;
   background-color: var(--g-color-infographics-tooltip-bg);
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
 }
-.gcharts-d3-tooltip__content-row {
+.gcharts-tooltip__content-row {
   display: flex;
   align-items: center;
 }
-.gcharts-d3-tooltip__color {
+.gcharts-tooltip__color {
   display: inline-block;
   width: 16px;
   height: 8px;

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

@@ -102,10 +102,14 @@ export const prepareAreaData = (args) => {
                 const labelItems = points.map((p) => getLabelData(p, s, xMax));
                 if (s.dataLabels.html) {
                     const htmlLabels = labelItems.map((l) => {
+                        var _a;
+                        const style = (_a = l.style) !== null && _a !== void 0 ? _a : s.dataLabels.style;
+                        const labelSize = getLabelsSize({ labels: [l.text], style, html: true });
                         return {
                             x: l.x - l.size.width / 2,
                             y: l.y,
                             content: l.text,
+                            size: { width: labelSize.maxWidth, height: labelSize.maxHeight },
                         };
                     });
                     htmlElements.push(...htmlLabels);

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

@@ -136,6 +136,7 @@ export const prepareBarXData = (args) => {
                         x: label.x,
                         y: label.y,
                         content: label.text,
+                        size: label.size,
                     });
                 }
                 else {

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

@@ -69,6 +69,7 @@ function setLabel(prepared) {
             x,
             y: y - height / 2,
             content,
+            size: { width, height },
         });
     }
     else {

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

@@ -33,6 +33,7 @@ function getHtmlLabel(point, series, xMax) {
         x: Math.min(xMax - size.maxWidth, Math.max(0, point.x)),
         y: Math.max(0, point.y - series.dataLabels.padding - size.maxHeight),
         content,
+        size: { width: size.maxWidth, height: size.maxHeight },
     };
 }
 export const prepareLineData = (args) => {

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

@@ -165,7 +165,8 @@ export function PieSeriesShapes(args) {
             dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
+    const htmlElements = preparedData.map((d) => d.htmlLabels).flat();
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), style: { zIndex: 9 } }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements }, htmlLayout: htmlLayout })));
 }

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

@@ -18,7 +18,7 @@ export function preparePieData(args) {
     const { series: preparedSeries, boundsWidth, boundsHeight } = args;
     const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;
     const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
-    return Array.from(groupedPieSeries).map(([stackId, items]) => {
+    const prepareItem = (stackId, items) => {
         var _a, _b, _c;
         const series = items[0];
         const { center, borderWidth, borderColor, borderRadius, radius: seriesRadius, innerRadius: seriesInnerRadius, dataLabels, } = series;
@@ -30,6 +30,7 @@ export function preparePieData(args) {
             radius,
             segments: [],
             labels: [],
+            htmlLabels: [],
             connectors: [],
             borderColor,
             borderWidth,
@@ -41,7 +42,6 @@ export function preparePieData(args) {
                 opacity: series.states.hover.halo.opacity,
                 size: series.states.hover.halo.size,
             },
-            htmlElements: [],
         };
         const segments = items.map((item) => {
             return {
@@ -55,132 +55,180 @@ export function preparePieData(args) {
             };
         });
         data.segments = pieGenerator(segments);
-        let line = lineGenerator();
-        const curveFactory = getCurveFactory(data);
-        if (curveFactory) {
-            line = line.curve(curveFactory);
-        }
         if (dataLabels.enabled) {
             const { style, connectorPadding, distance } = dataLabels;
             const { maxHeight: labelHeight } = getLabelsSize({ labels: ['Some Label'], style });
-            const minSegmentRadius = maxRadius - connectorPadding - distance - labelHeight;
+            const minSegmentRadius = maxRadius - distance - connectorPadding - labelHeight;
             if (data.radius > minSegmentRadius) {
                 data.radius = minSegmentRadius;
                 data.innerRadius =
                     (_c = calculateNumericProperty({ value: seriesInnerRadius, base: data.radius })) !== null && _c !== void 0 ? _c : 0;
             }
-            const connectorStartPointGenerator = arc()
-                .innerRadius(data.radius)
-                .outerRadius(data.radius);
-            const connectorMidPointRadius = data.radius + distance / 2;
-            const connectorMidPointGenerator = arc()
-                .innerRadius(connectorMidPointRadius)
-                .outerRadius(connectorMidPointRadius);
-            const connectorArcRadius = data.radius + distance;
-            const connectorEndPointGenerator = arc()
-                .innerRadius(connectorArcRadius)
-                .outerRadius(connectorArcRadius);
-            const labelArcRadius = connectorArcRadius + connectorPadding;
-            const labelArcGenerator = arc()
-                .innerRadius(labelArcRadius)
-                .outerRadius(labelArcRadius);
-            const labels = [];
-            items.forEach((d, index) => {
-                const prevLabel = labels[labels.length - 1];
-                const text = String(d.data.label || d.data.value);
-                const shouldUseHtml = dataLabels.html;
-                const labelSize = getLabelsSize({ labels: [text], style, html: shouldUseHtml });
-                const labelWidth = labelSize.maxWidth;
-                const relatedSegment = data.segments[index];
-                const getLabelPosition = (angle) => {
-                    let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+        }
+        return data;
+    };
+    const prepareLabels = (prepareLabelsArgs) => {
+        const { data, series } = prepareLabelsArgs;
+        const { dataLabels } = series[0];
+        const labels = [];
+        const htmlLabels = [];
+        const connectors = [];
+        if (!dataLabels.enabled) {
+            return { labels, htmlLabels, connectors };
+        }
+        let line = lineGenerator();
+        const curveFactory = getCurveFactory(data);
+        if (curveFactory) {
+            line = line.curve(curveFactory);
+        }
+        const { style, connectorPadding, distance } = dataLabels;
+        const { maxHeight: labelHeight } = getLabelsSize({ labels: ['Some Label'], style });
+        const connectorStartPointGenerator = arc()
+            .innerRadius(data.radius)
+            .outerRadius(data.radius);
+        const connectorMidPointRadius = data.radius + distance / 2;
+        const connectorMidPointGenerator = arc()
+            .innerRadius(connectorMidPointRadius)
+            .outerRadius(connectorMidPointRadius);
+        const connectorArcRadius = data.radius + distance;
+        const connectorEndPointGenerator = arc()
+            .innerRadius(connectorArcRadius)
+            .outerRadius(connectorArcRadius);
+        const labelArcRadius = connectorArcRadius + connectorPadding;
+        const labelArcGenerator = arc()
+            .innerRadius(labelArcRadius)
+            .outerRadius(labelArcRadius);
+        series.forEach((d, index) => {
+            const prevLabel = labels[labels.length - 1];
+            const text = String(d.data.label || d.data.value);
+            const shouldUseHtml = dataLabels.html;
+            const labelSize = getLabelsSize({ labels: [text], style, html: shouldUseHtml });
+            const labelWidth = labelSize.maxWidth;
+            const relatedSegment = data.segments[index];
+            const getLabelPosition = (angle) => {
+                let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+                if (shouldUseHtml) {
+                    x = x < 0 ? x - labelWidth : x;
+                    y = y - labelSize.maxHeight;
+                }
+                else {
                     y = y < 0 ? y - labelHeight : y;
-                    if (shouldUseHtml) {
-                        x = x < 0 ? x - labelWidth : x;
-                    }
-                    x = Math.max(-boundsWidth / 2, x);
-                    return [x, y];
-                };
-                const getConnectorPoints = (angle) => {
-                    const connectorStartPoint = connectorStartPointGenerator.centroid(relatedSegment);
-                    const connectorEndPoint = connectorEndPointGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
-                    if (dataLabels.connectorShape === 'straight-line') {
-                        return [connectorStartPoint, connectorEndPoint];
-                    }
-                    const connectorMidPoint = connectorMidPointGenerator.centroid(relatedSegment);
-                    return [connectorStartPoint, connectorMidPoint, connectorEndPoint];
-                };
-                const midAngle = Math.max((prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.angle) || 0, relatedSegment.startAngle +
-                    (relatedSegment.endAngle - relatedSegment.startAngle) / 2);
-                const [x, y] = getLabelPosition(midAngle);
-                const label = {
-                    text,
-                    x,
-                    y,
-                    style,
-                    size: { width: labelWidth, height: labelHeight },
-                    maxWidth: labelWidth,
-                    textAnchor: midAngle < Math.PI ? 'start' : 'end',
-                    series: { id: d.id },
-                    active: true,
-                    segment: relatedSegment.data,
-                    angle: midAngle,
-                };
-                let overlap = false;
-                if (prevLabel) {
-                    overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
-                    if (overlap) {
-                        let shouldAdjustAngle = true;
-                        const step = Math.PI / 180;
-                        while (shouldAdjustAngle) {
-                            const newAngle = label.angle + step;
-                            if (newAngle > FULL_CIRCLE &&
-                                newAngle % FULL_CIRCLE > labels[0].angle) {
+                }
+                x = Math.max(-boundsWidth / 2, x);
+                return [x, y];
+            };
+            const getConnectorPoints = (angle) => {
+                const connectorStartPoint = connectorStartPointGenerator.centroid(relatedSegment);
+                const connectorEndPoint = connectorEndPointGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+                if (dataLabels.connectorShape === 'straight-line') {
+                    return [connectorStartPoint, connectorEndPoint];
+                }
+                const connectorMidPoint = connectorMidPointGenerator.centroid(relatedSegment);
+                return [connectorStartPoint, connectorMidPoint, connectorEndPoint];
+            };
+            const midAngle = Math.max((prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.angle) || 0, relatedSegment.startAngle +
+                (relatedSegment.endAngle - relatedSegment.startAngle) / 2);
+            const [x, y] = getLabelPosition(midAngle);
+            const label = {
+                text,
+                x,
+                y,
+                style,
+                size: { width: labelWidth, height: labelHeight },
+                maxWidth: labelWidth,
+                textAnchor: midAngle < Math.PI ? 'start' : 'end',
+                series: { id: d.id },
+                active: true,
+                segment: relatedSegment.data,
+                angle: midAngle,
+            };
+            let overlap = false;
+            if (prevLabel) {
+                overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
+                if (overlap) {
+                    let shouldAdjustAngle = true;
+                    const step = Math.PI / 180;
+                    while (shouldAdjustAngle) {
+                        const newAngle = label.angle + step;
+                        if (newAngle > FULL_CIRCLE && newAngle % FULL_CIRCLE > labels[0].angle) {
+                            shouldAdjustAngle = false;
+                        }
+                        else {
+                            label.angle = newAngle;
+                            const [newX, newY] = getLabelPosition(newAngle);
+                            label.x = newX;
+                            label.y = newY;
+                            if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
                                 shouldAdjustAngle = false;
-                            }
-                            else {
-                                label.angle = newAngle;
-                                const [newX, newY] = getLabelPosition(newAngle);
-                                label.x = newX;
-                                label.y = newY;
-                                if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
-                                    shouldAdjustAngle = false;
-                                    overlap = false;
-                                }
+                                overlap = false;
                             }
                         }
                     }
                 }
-                if (dataLabels.allowOverlap || !overlap) {
-                    const left = getLeftPosition(label);
-                    if (Math.abs(left) > boundsWidth / 2) {
-                        label.maxWidth = label.size.width - (Math.abs(left) - boundsWidth / 2);
-                    }
-                    else {
-                        const right = left + label.size.width;
-                        if (right > boundsWidth / 2) {
-                            label.maxWidth = label.size.width - (right - boundsWidth / 2);
-                        }
-                    }
-                    if (shouldUseHtml) {
-                        data.htmlElements.push({
-                            x: boundsWidth / 2 + label.x,
-                            y: boundsHeight / 2 + label.y,
-                            content: label.text,
-                        });
-                    }
-                    else {
-                        labels.push(label);
+            }
+            if (dataLabels.allowOverlap || !overlap) {
+                const left = getLeftPosition(label);
+                if (Math.abs(left) > boundsWidth / 2) {
+                    label.maxWidth = label.size.width - (Math.abs(left) - boundsWidth / 2);
+                }
+                else {
+                    const right = left + label.size.width;
+                    if (right > boundsWidth / 2) {
+                        label.maxWidth = label.size.width - (right - boundsWidth / 2);
                     }
-                    const connector = {
-                        path: line(getConnectorPoints(midAngle)),
-                        color: relatedSegment.data.color,
-                    };
-                    data.connectors.push(connector);
                 }
-            });
-            data.labels = labels;
+                if (shouldUseHtml) {
+                    htmlLabels.push({
+                        x: boundsWidth / 2 + label.x,
+                        y: boundsHeight / 2 + label.y,
+                        content: label.text,
+                        size: label.size,
+                    });
+                }
+                else {
+                    labels.push(label);
+                }
+                const connector = {
+                    path: line(getConnectorPoints(midAngle)),
+                    color: relatedSegment.data.color,
+                };
+                connectors.push(connector);
+            }
+        });
+        return {
+            labels,
+            htmlLabels,
+            connectors,
+        };
+    };
+    return Array.from(groupedPieSeries).map(([stackId, items]) => {
+        const data = prepareItem(stackId, items);
+        const preparedLabels = prepareLabels({
+            data,
+            series: items,
+        });
+        const allPreparedLabels = [...preparedLabels.labels, ...preparedLabels.htmlLabels];
+        const top = Math.min(data.center[1] - data.radius, ...allPreparedLabels.map((l) => l.y + data.center[1]));
+        const bottom = Math.max(data.center[1] + data.radius, ...allPreparedLabels.map((l) => data.center[1] + l.y + l.size.height));
+        const topAdjustment = Math.floor(top - data.halo.size);
+        if (topAdjustment > 0) {
+            // should adjust top position and height
+            data.radius += topAdjustment / 2;
+            data.center[1] -= topAdjustment / 2;
         }
+        const bottomAdjustment = Math.floor(boundsHeight - bottom - data.halo.size);
+        if (bottomAdjustment > 0) {
+            // should adjust position and radius
+            data.radius += bottomAdjustment / 2;
+            data.center[1] += bottomAdjustment / 2;
+        }
+        const { labels, htmlLabels, connectors } = prepareLabels({
+            data,
+            series: items,
+        });
+        data.labels = labels;
+        data.htmlLabels = htmlLabels;
+        data.connectors = connectors;
         return data;
     });
 }

package/dist/esm/hooks/useShapes/pie/types.d.ts

@@ -37,5 +37,5 @@ export type PreparedPieData = {
         opacity: number;
         size: number;
     };
-    htmlElements: HtmlItem[];
+    htmlLabels: HtmlItem[];
 };

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

@@ -33,6 +33,7 @@ function getLabels(args) {
                     content: text,
                     x,
                     y,
+                    size: { width, height: lineHeight },
                 }
                 : {
                     text,

package/dist/esm/types/chart-ui.d.ts

@@ -18,6 +18,10 @@ export type HtmlItem = {
     x: number;
     y: number;
     content: string;
+    size: {
+        width: number;
+        height: number;
+    };
 };
 export type ShapeDataWithHtmlItems = {
     htmlElements: HtmlItem[];

package/package.json

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