@gravity-ui/charts 1.5.1 → 1.6.1

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

@@ -59,8 +59,8 @@ export const ChartInner = (props) => {
             unpinTooltip === null || unpinTooltip === void 0 ? void 0 : unpinTooltip();
         }
     }, [prevWidth, width, prevHeight, height, tooltipPinned, unpinTooltip]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick },
+    return (React.createElement("div", { className: b() },
+        React.createElement("svg", { ref: svgRef, width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick },
             title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
             React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
                 return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
@@ -72,8 +72,6 @@ export const ChartInner = (props) => {
                         React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
                 shapes),
             preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip }))),
-        React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {
-                transform: `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
-            } }),
+        React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef }),
         React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0], onOutsideClick: unpinTooltip, tooltipPinned: tooltipPinned })));
 };

package/dist/cjs/constants/defaults/data-labels.d.ts

@@ -0,0 +1,2 @@
+import type { BaseTextStyle } from '../../types';
+export declare const DEFAULT_DATALABELS_STYLE: BaseTextStyle;

package/dist/cjs/constants/defaults/data-labels.js

@@ -0,0 +1,5 @@
+export const DEFAULT_DATALABELS_STYLE = {
+    fontSize: '11px',
+    fontWeight: 'bold',
+    fontColor: 'var(--gcharts-data-labels)',
+};

package/dist/cjs/constants/defaults/index.d.ts

@@ -1,3 +1,4 @@
 export * from './axis';
+export * from './data-labels';
 export * from './legend';
 export * from './series-options';

package/dist/cjs/constants/defaults/index.js

@@ -1,3 +1,4 @@
 export * from './axis';
+export * from './data-labels';
 export * from './legend';
 export * from './series-options';

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

@@ -1,8 +1,7 @@
-import type { BaseTextStyle, Halo } from '../../types';
+import type { Halo } from '../../types';
 import type { PointMarkerOptions } from '../../types/chart/marker';
 export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 8;
 export declare const DEFAULT_LEGEND_SYMBOL_PADDING = 5;
 export declare const DEFAULT_DATALABELS_PADDING = 5;
-export declare const DEFAULT_DATALABELS_STYLE: BaseTextStyle;
 export declare const DEFAULT_HALO_OPTIONS: Required<Halo>;
 export declare const DEFAULT_POINT_MARKER_OPTIONS: Omit<Required<PointMarkerOptions>, 'enabled'>;

package/dist/cjs/hooks/useSeries/constants.js

@@ -1,11 +1,6 @@
 export const DEFAULT_LEGEND_SYMBOL_SIZE = 8;
 export const DEFAULT_LEGEND_SYMBOL_PADDING = 5;
 export const DEFAULT_DATALABELS_PADDING = 5;
-export const DEFAULT_DATALABELS_STYLE = {
-    fontSize: '11px',
-    fontWeight: 'bold',
-    fontColor: 'var(--gcharts-data-labels)',
-};
 export const DEFAULT_HALO_OPTIONS = {
     enabled: true,
     opacity: 0.25,

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

@@ -1,7 +1,8 @@
 import get from 'lodash/get';
 import merge from 'lodash/merge';
+import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getUniqId } from '../../utils';
-import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
 import { getSeriesStackId, prepareLegendSymbol } from './utils';
 export const DEFAULT_LINE_WIDTH = 1;
 export const DEFAULT_MARKER = Object.assign(Object.assign({}, DEFAULT_POINT_MARKER_OPTIONS), { enabled: false });

package/dist/cjs/hooks/useSeries/prepare-bar-x.js

@@ -1,6 +1,7 @@
 import get from 'lodash/get';
+import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getUniqId } from '../../utils';
-import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
+import { DEFAULT_DATALABELS_PADDING } from './constants';
 import { getSeriesStackId, prepareLegendSymbol } from './utils';
 export function prepareBarXSeries(args) {
     const { colorScale, series: seriesList, seriesOptions, legend } = args;

package/dist/cjs/hooks/useSeries/prepare-bar-y.js

@@ -1,7 +1,7 @@
 import get from 'lodash/get';
+import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getLabelsSize, getUniqId } from '../../utils';
 import { getFormattedValue } from '../../utils/chart/format';
-import { DEFAULT_DATALABELS_STYLE } from './constants';
 import { getSeriesStackId, prepareLegendSymbol } from './utils';
 function prepareDataLabels(series) {
     var _a, _b;

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

@@ -133,7 +133,7 @@ export const getLegendComponents = (args) => {
             const limit = Math.floor(maxLegendHeight / preparedLegend.lineHeight) - 1;
             const maxPage = Math.ceil(items.length / limit);
             pagination = { limit, maxPage };
-            legendHeight = maxLegendHeight;
+            legendHeight = preparedLegend.lineHeight * (limit + 1);
         }
         preparedLegend.height = legendHeight;
     }

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

@@ -1,8 +1,8 @@
 import get from 'lodash/get';
 import merge from 'lodash/merge';
-import { DashStyle, LineCap } from '../../constants';
+import { DEFAULT_DATALABELS_STYLE, DashStyle, LineCap } from '../../constants';
 import { getUniqId } from '../../utils';
-import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_HALO_OPTIONS, DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_HALO_OPTIONS, DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
 export const DEFAULT_LEGEND_SYMBOL_SIZE = 16;
 export const DEFAULT_LINE_WIDTH = 1;
 export const DEFAULT_DASH_STYLE = DashStyle.Solid;

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

@@ -1,8 +1,8 @@
 import { scaleOrdinal } from 'd3';
 import get from 'lodash/get';
-import { DEFAULT_PALETTE } from '../../constants';
+import { DEFAULT_DATALABELS_STYLE, DEFAULT_PALETTE } from '../../constants';
 import { getUniqId } from '../../utils';
-import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
+import { DEFAULT_DATALABELS_PADDING } from './constants';
 import { prepareLegendSymbol } from './utils';
 export function preparePieSeries(args) {
     const { series, seriesOptions, legend } = args;
@@ -43,6 +43,7 @@ export function preparePieSeries(args) {
             borderWidth: (_d = series.borderWidth) !== null && _d !== void 0 ? _d : 1,
             radius: (_f = (_e = dataItem.radius) !== null && _e !== void 0 ? _e : series.radius) !== null && _f !== void 0 ? _f : '100%',
             innerRadius: series.innerRadius || 0,
+            minRadius: series.minRadius,
             stackId,
             states: {
                 hover: {

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

@@ -1,9 +1,9 @@
 import { scaleOrdinal } from 'd3';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
-import { DEFAULT_PALETTE } from '../../constants';
+import { DEFAULT_DATALABELS_STYLE, DEFAULT_PALETTE } from '../../constants';
 import { getUniqId } from '../../utils';
-import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
 import { prepareLegendSymbol } from './utils';
 export const DEFAULT_MARKER = Object.assign(Object.assign({}, DEFAULT_POINT_MARKER_OPTIONS), { enabled: true, radius: 2 });
 function prepareMarker(series, seriesOptions) {

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

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
+import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getUniqId } from '../../utils';
-import { DEFAULT_DATALABELS_STYLE } from './constants';
 import { prepareLegendSymbol } from './utils';
 export function prepareSankeySeries(args) {
     const { colorScale, legend, series } = args;

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

@@ -1,7 +1,7 @@
 import get from 'lodash/get';
-import { LayoutAlgorithm } from '../../constants';
+import { DEFAULT_DATALABELS_STYLE, LayoutAlgorithm } from '../../constants';
 import { getUniqId } from '../../utils';
-import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
+import { DEFAULT_DATALABELS_PADDING } from './constants';
 import { prepareLegendSymbol } from './utils';
 export function prepareTreemap(args) {
     const { colorScale, legend, series } = args;

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

@@ -1,7 +1,7 @@
 import get from 'lodash/get';
-import { DEFAULT_PALETTE } from '../../constants';
+import { DEFAULT_DATALABELS_STYLE, DEFAULT_PALETTE } from '../../constants';
 import { getUniqId } from '../../utils';
-import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
+import { DEFAULT_DATALABELS_PADDING } from './constants';
 import { prepareLegendSymbol } from './utils';
 export function prepareWaterfallSeries(args) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;

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

@@ -137,6 +137,7 @@ export type PreparedPieSeries = {
     center?: [string | number | null, string | number | null];
     radius?: string | number;
     innerRadius?: string | number;
+    minRadius?: string | number;
     stackId: string;
     label?: PieSeriesData['label'];
     dataLabels: {

package/dist/cjs/hooks/useShapes/HtmlLayer.js

@@ -17,7 +17,8 @@ export const HtmlLayer = (props) => {
         return null;
     }
     return (React.createElement(Portal, { container: htmlLayout }, items.map((item, index) => {
-        const style = Object.assign(Object.assign({}, item.style), { position: 'absolute', left: item.x, top: item.y });
+        var _a, _b, _c;
+        const style = Object.assign(Object.assign({}, item.style), { color: (_b = (_a = item.style) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : (_c = item.style) === null || _c === void 0 ? void 0 : _c.fontColor, position: 'absolute', left: item.x, top: item.y });
         return (React.createElement("div", { key: index, dangerouslySetInnerHTML: { __html: item.content }, style: style }));
     })));
 };

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

@@ -1,4 +1,6 @@
 import { arc, group, line as lineGenerator } from 'd3';
+import merge from 'lodash/merge';
+import { DEFAULT_DATALABELS_STYLE } from '../../../constants';
 import { calculateNumericProperty, getLabelsSize, getLeftPosition, isLabelsOverlapping, } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { getCurveFactory, getInscribedAngle, pieGenerator } from './utils';
@@ -16,17 +18,22 @@ const getCenter = (boundsWidth, boundsHeight, center) => {
     return [resultX, resultY];
 };
 export function preparePieData(args) {
+    var _a, _b;
     const { series: preparedSeries, boundsWidth, boundsHeight } = args;
     const haloSize = preparedSeries[0].states.hover.halo.enabled
         ? preparedSeries[0].states.hover.halo.size
         : 0;
     const maxRadius = Math.min(boundsWidth, boundsHeight) / 2 - haloSize;
-    const minRadius = maxRadius * 0.3;
+    const propsMinRadius = calculateNumericProperty({
+        value: preparedSeries[0].minRadius,
+        base: maxRadius,
+    });
+    const minRadius = typeof propsMinRadius === 'number' ? propsMinRadius : maxRadius * 0.3;
     const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
+    const dataLabelsStyle = merge({}, DEFAULT_DATALABELS_STYLE, (_b = (_a = preparedSeries[0]) === null || _a === void 0 ? void 0 : _a.dataLabels) === null || _b === void 0 ? void 0 : _b.style);
     const prepareItem = (stackId, items) => {
-        var _a;
         const series = items[0];
-        const { center, borderWidth, borderColor, borderRadius, innerRadius: seriesInnerRadius, dataLabels, } = series;
+        const { center, borderWidth, borderColor, borderRadius, dataLabels } = series;
         const data = {
             id: stackId,
             center: getCenter(boundsWidth, boundsHeight, center),
@@ -48,9 +55,8 @@ export function preparePieData(args) {
         };
         const { maxHeight: labelHeight } = getLabelsSize({
             labels: ['Some Label'],
-            style: dataLabels.style,
+            style: dataLabelsStyle,
         });
-        let segmentMaxRadius = 0;
         const segments = items.map((item) => {
             var _a;
             let maxSegmentRadius = maxRadius;
@@ -58,7 +64,6 @@ export function preparePieData(args) {
                 maxSegmentRadius -= dataLabels.distance + dataLabels.connectorPadding + labelHeight;
             }
             const segmentRadius = (_a = calculateNumericProperty({ value: item.radius, base: maxSegmentRadius })) !== null && _a !== void 0 ? _a : maxSegmentRadius;
-            segmentMaxRadius = Math.max(segmentMaxRadius, segmentRadius);
             return {
                 value: item.value,
                 color: item.color,
@@ -71,8 +76,6 @@ export function preparePieData(args) {
             };
         });
         data.segments = pieGenerator(segments);
-        data.innerRadius =
-            (_a = calculateNumericProperty({ value: seriesInnerRadius, base: segmentMaxRadius })) !== null && _a !== void 0 ? _a : 0;
         return data;
     };
     const prepareLabels = (prepareLabelsArgs) => {
@@ -84,13 +87,18 @@ export function preparePieData(args) {
         if (!dataLabels.enabled) {
             return { labels, htmlLabels, connectors };
         }
+        const shouldUseHtml = dataLabels.html;
         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 { maxHeight: labelHeight } = getLabelsSize({
+            labels: ['Some Label'],
+            style: dataLabelsStyle,
+            html: shouldUseHtml,
+        });
         const connectorStartPointGenerator = arc()
             .innerRadius((d) => d.data.radius)
             .outerRadius((d) => d.data.radius);
@@ -104,22 +112,35 @@ export function preparePieData(args) {
             .innerRadius((d) => d.data.radius + distance + connectorPadding)
             .outerRadius((d) => d.data.radius + distance + connectorPadding);
         let shouldStopLabelPlacement = false;
+        // eslint-disable-next-line complexity
         series.forEach((d, index) => {
             const prevLabel = labels[labels.length - 1];
             const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.value }, d.dataLabels));
-            const shouldUseHtml = dataLabels.html;
-            const labelSize = getLabelsSize({ labels: [text], style, html: shouldUseHtml });
+            const labelSize = getLabelsSize({
+                labels: [text],
+                style: dataLabelsStyle,
+                html: shouldUseHtml,
+            });
             const labelWidth = labelSize.maxWidth;
             const relatedSegment = data.segments[index];
+            /**
+             * Compute the label coordinates on the label arc for a given angle.
+             *
+             * For HTML labels, the function returns the top-left corner to account for
+             * element box positioning. It shifts left by the label width when the point is
+             * on the left side (x < 0) and shifts up by the label height when above the
+             * horizontal center (y < 0). For SVG text, only the vertical shift is applied
+             * to compensate for text baseline.
+             *
+             * @param {number} angle - Angle in radians at which the label should be placed.
+             * @returns {[number, number]} A tuple [x, y] relative to the pie center.
+             */
             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;
                 }
+                y = y < 0 ? y - labelHeight : y;
                 return [x, y];
             };
             const getConnectorPoints = (angle) => {
@@ -148,10 +169,14 @@ export function preparePieData(args) {
                 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);
+                const labelLeftPosition = shouldUseHtml ? label.x : getLeftPosition(label);
+                let newMaxWidth;
+                if (label.x > 0) {
+                    newMaxWidth = Math.min(boundsWidth - data.center[0] - labelLeftPosition, labelWidth);
+                }
+                else {
+                    newMaxWidth = Math.min(data.center[0] + labelLeftPosition + label.size.width, labelWidth);
+                }
                 if (newMaxWidth !== label.maxWidth) {
                     label.maxWidth = Math.max(0, newMaxWidth);
                 }
@@ -173,11 +198,17 @@ export function preparePieData(args) {
                             shouldAdjustAngle = false;
                         }
                         else {
-                            label.angle = newAngle;
                             const [newX, newY] = getLabelPosition(newAngle);
+                            label.angle = newAngle;
+                            label.textAnchor = newAngle < Math.PI ? 'start' : 'end';
                             label.x = newX;
                             label.y = newY;
-                            const inscribedAngle = getInscribedAngle(pointA, pointB, [newX, newY]);
+                            // See `getLabelPosition`: for HTML labels we return top-left,
+                            // so shift x by labelWidth when textAnchor is 'end'.
+                            const pointC = shouldUseHtml && label.textAnchor === 'end'
+                                ? [newX + labelWidth, newY]
+                                : [newX, newY];
+                            const inscribedAngle = getInscribedAngle(pointA, pointB, pointC);
                             if (inscribedAngle > 90) {
                                 shouldAdjustAngle = false;
                                 shouldStopLabelPlacement = true;
@@ -192,18 +223,19 @@ export function preparePieData(args) {
             }
             const isLabelOverlapped = !dataLabels.allowOverlap && overlap;
             if (!isLabelOverlapped && label.maxWidth > 0 && !shouldStopLabelPlacement) {
+                labels.push(label);
                 if (shouldUseHtml) {
+                    const htmlLabelX = data.center[0] + label.x;
                     htmlLabels.push({
-                        x: data.center[0] + label.x,
+                        x: Math.max(0, htmlLabelX),
                         y: Math.max(0, data.center[1] + label.y),
                         content: label.text,
                         size: label.size,
-                        style: label.style,
+                        style: Object.assign(Object.assign({}, label.style), { overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', maxWidth: Math.min(label.x > 0
+                                ? boundsWidth - htmlLabelX
+                                : htmlLabelX + label.size.width, label.size.width) }),
                     });
                 }
-                else {
-                    labels.push(label);
-                }
                 const connector = {
                     path: line(getConnectorPoints(label.angle)),
                     color: relatedSegment.data.color,
@@ -212,12 +244,13 @@ export function preparePieData(args) {
             }
         });
         return {
-            labels,
+            labels: shouldUseHtml ? [] : labels,
             htmlLabels,
             connectors,
         };
     };
     return Array.from(groupedPieSeries).map(([stackId, items]) => {
+        var _a;
         const data = prepareItem(stackId, items);
         const preparedLabels = prepareLabels({
             data,
@@ -237,6 +270,17 @@ export function preparePieData(args) {
             maxLeftRightFreeSpace = Math.max(0, Math.min(maxLeftRightFreeSpace, freeSpace));
             labelsOverflow = freeSpace < 0 ? Math.max(labelsOverflow, -freeSpace) : labelsOverflow;
         });
+        preparedLabels.htmlLabels.forEach((label) => {
+            let freeSpace = 0;
+            if (label.x < data.center[0]) {
+                freeSpace = Math.max(label.x, 0);
+            }
+            else {
+                freeSpace = boundsWidth - label.x - 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));
         if (labelsOverflow) {
             data.segments.forEach((s) => {
@@ -251,7 +295,7 @@ export function preparePieData(args) {
                 topFreeSpace = Math.min(topFreeSpace, data.center[1] - topSvgLabel);
             }
             if (preparedLabels.htmlLabels.length) {
-                const topHtmlLabel = Math.max(0, ...preparedLabels.htmlLabels.map((l) => l.y));
+                const topHtmlLabel = Math.min(...preparedLabels.htmlLabels.map((l) => l.y));
                 topFreeSpace = Math.min(topFreeSpace, topHtmlLabel);
             }
             let bottomFreeSpace = data.center[1] - segmentMaxRadius - haloSize;
@@ -267,14 +311,16 @@ export function preparePieData(args) {
             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;
+                    let nextPossibleRadius = s.data.radius + (topAdjustment + bottomAdjustment) / 2;
+                    nextPossibleRadius = Math.max(nextPossibleRadius, minRadius);
                     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;
+                    let nextPossibleRadius = s.data.radius + (topAdjustment + bottomAdjustment) / 2;
+                    nextPossibleRadius = Math.max(nextPossibleRadius, minRadius);
                     s.data.radius = Math.min(nextPossibleRadius, maxRadius);
                 });
                 data.center[1] += (bottomAdjustment - topAdjustment) / 2;
@@ -285,6 +331,14 @@ export function preparePieData(args) {
             series: items,
             allowOverlow: false,
         });
+        if (typeof ((_a = items[0]) === null || _a === void 0 ? void 0 : _a.innerRadius) !== 'undefined') {
+            const resultSegmentMaxRadius = Math.max(...data.segments.map((s) => s.data.radius));
+            const resultInnerRadius = calculateNumericProperty({
+                value: items[0].innerRadius,
+                base: resultSegmentMaxRadius,
+            }) || 0;
+            data.innerRadius = resultInnerRadius;
+        }
         data.labels = labels;
         data.htmlLabels = htmlLabels;
         data.connectors = connectors;

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

@@ -10,8 +10,9 @@ export function getCurveFactory(data) {
         case 'linear': {
             return curveLinear;
         }
+        default:
+            return undefined;
     }
-    return undefined;
 }
 /**
  * Inscribed angle at vertex A (opposite side/chord BC): the angle between rays AB and AC.

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

@@ -7,18 +7,24 @@ function getLabels(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) => {
+        const left = d.x0 + padding;
+        const right = d.x1 - padding;
+        const spaceWidth = Math.max(0, right - left);
+        let availableSpaceHeight = Math.max(0, d.y1 - d.y0 - padding);
+        let prevLabelsHeight = 0;
+        texts.forEach((text) => {
             var _a;
             const label = getFormattedValue(Object.assign({ value: text }, args.options));
-            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);
-            const spaceHeight = Math.max(0, d.y1 - d.y0 - padding);
+            const { maxHeight: labelMaxHeight, maxWidth: labelMaxWidth } = (_a = getLabelsSize({
+                labels: [label],
+                style: Object.assign(Object.assign({}, style), { maxWidth: `${spaceWidth}px`, maxHeight: `${availableSpaceHeight}px` }),
+                html,
+            })) !== null && _a !== void 0 ? _a : {};
             let x = left;
-            const y = index * lineHeight + d.y0 + padding;
+            const y = prevLabelsHeight + d.y0 + padding;
             const labelWidth = Math.min(labelMaxWidth, spaceWidth);
-            if (!labelWidth || lineHeight > spaceHeight) {
+            const labelHeight = Math.min(labelMaxHeight, availableSpaceHeight);
+            if (!labelWidth || y > d.y1) {
                 return;
             }
             switch (align) {
@@ -35,8 +41,8 @@ function getLabels(args) {
                     break;
                 }
             }
-            const bottom = y + lineHeight;
-            if (bottom > d.y1) {
+            const bottom = y + labelMaxHeight;
+            if (!html && bottom > d.y1) {
                 return;
             }
             const item = html
@@ -44,7 +50,7 @@ function getLabels(args) {
                     content: label,
                     x,
                     y,
-                    size: { width: labelWidth, height: lineHeight },
+                    size: { width: labelWidth, height: labelHeight },
                 }
                 : {
                     text: label,
@@ -54,6 +60,8 @@ function getLabels(args) {
                     nodeData: d.data,
                 };
             acc.push(item);
+            prevLabelsHeight += labelHeight;
+            availableSpaceHeight = Math.max(0, availableSpaceHeight - labelHeight);
         });
         return acc;
     }, []);

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

@@ -46,6 +46,14 @@ export interface PieSeries<T = MeaningfulAny> extends BaseSeries {
     innerRadius?: string | number;
     /** The radius of the pie relative to the chart area. The default behaviour is to scale to the chart area. */
     radius?: string | number;
+    /**
+     * The minimum allowable radius of the pie.
+     *
+     * If specified as a percentage, the base for calculation is the height or width of the chart (the minimum value is taken) minus the halo effect.
+     *
+     * If not specified, the minimum radius is calculated as 30% of the height or width of the chart (the minimum value is taken) minus the halo effect.
+     */
+    minRadius?: string | number;
     /** Individual series legend options. Has higher priority than legend options in widget data */
     legend?: ChartLegend & {
         symbol?: RectLegendSymbolOptions;

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

@@ -22,7 +22,7 @@ export interface HtmlItem {
         width: number;
         height: number;
     };
-    style?: BaseTextStyle;
+    style?: BaseTextStyle & React.CSSProperties;
 }
 export interface ShapeDataWithHtmlItems {
     htmlElements: HtmlItem[];

package/dist/cjs/utils/chart/text.d.ts

@@ -11,7 +11,7 @@ export declare function hasOverlappingLabels({ width, labels, padding, style, }:
 }): boolean;
 export declare function getLabelsSize({ labels, style, rotation, html, }: {
     labels: string[];
-    style?: BaseTextStyle;
+    style?: BaseTextStyle & React.CSSProperties;
     rotation?: number;
     html?: boolean;
 }): {

package/dist/cjs/utils/chart/text.js

@@ -14,12 +14,17 @@ export function handleOverflowingText(tSpan, maxWidth) {
     revertRotation.setRotate(-angle, 0, 0);
     textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal.appendItem(revertRotation);
     let text = tSpan.textContent || '';
-    let textLength = ((_b = tSpan.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0;
+    // We believe that if the text goes beyond the boundaries of less than a pixel, it's not a big deal.
+    // Math.floor helps to solve the problem with the difference in rounding when comparing textLength with maxWidth.
+    let textLength = Math.floor(((_b = tSpan.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0);
     while (textLength > maxWidth && text.length > 1) {
         text = text.slice(0, -1);
         tSpan.textContent = text + '…';
         textLength = ((_c = tSpan.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.width) || 0;
     }
+    if (textLength > maxWidth) {
+        tSpan.textContent = '';
+    }
     textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal.removeItem((textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal.length) - 1);
 }
 export function setEllipsisForOverflowText(selection, maxWidth) {
@@ -64,21 +69,22 @@ function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
     return text;
 }
 export function getLabelsSize({ labels, style, rotation, html, }) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     if (!labels.filter(Boolean).length) {
         return { maxHeight: 0, maxWidth: 0 };
     }
     const container = select(document.body).append('div');
-    // TODO: Why do we need this styles?
-    // .attr('class', 'chartkit chartkit-theme_common');
     const result = { maxHeight: 0, maxWidth: 0 };
     let labelWrapper;
     if (html) {
         labelWrapper = container
             .append('div')
             .style('position', 'absolute')
+            .style('display', 'inline-block')
             .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 : '')
+            .style('max-width', (_c = style === null || style === void 0 ? void 0 : style.maxWidth) !== null && _c !== void 0 ? _c : '')
+            .style('max-height', (_d = style === null || style === void 0 ? void 0 : style.maxHeight) !== null && _d !== void 0 ? _d : '')
             .node();
         const { height, width } = labels.reduce((acc, l) => {
             var _a, _b;
@@ -102,9 +108,9 @@ export function getLabelsSize({ labels, style, rotation, html, }) {
                 .attr('text-anchor', rotation > 0 ? 'start' : 'end')
                 .style('transform', `rotate(${rotation}deg)`);
         }
-        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;
+        const rect = (_e = svg.select('g').node()) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
+        result.maxWidth = (_f = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _f !== void 0 ? _f : 0;
+        result.maxHeight = (_g = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _g !== void 0 ? _g : 0;
     }
     container.remove();
     return result;