@gravity-ui/charts 1.5.1 → 1.6.0

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-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/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) => {
@@ -173,11 +194,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,6 +219,7 @@ export function preparePieData(args) {
             }
             const isLabelOverlapped = !dataLabels.allowOverlap && overlap;
             if (!isLabelOverlapped && label.maxWidth > 0 && !shouldStopLabelPlacement) {
+                labels.push(label);
                 if (shouldUseHtml) {
                     htmlLabels.push({
                         x: data.center[0] + label.x,
@@ -201,9 +229,6 @@ export function preparePieData(args) {
                         style: label.style,
                     });
                 }
-                else {
-                    labels.push(label);
-                }
                 const connector = {
                     path: line(getConnectorPoints(label.angle)),
                     color: relatedSegment.data.color,
@@ -212,12 +237,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,
@@ -251,7 +277,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 +293,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 +313,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/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;

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

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

package/dist/esm/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/esm/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/esm/constants/defaults/index.js

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

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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) => {
@@ -173,11 +194,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,6 +219,7 @@ export function preparePieData(args) {
             }
             const isLabelOverlapped = !dataLabels.allowOverlap && overlap;
             if (!isLabelOverlapped && label.maxWidth > 0 && !shouldStopLabelPlacement) {
+                labels.push(label);
                 if (shouldUseHtml) {
                     htmlLabels.push({
                         x: data.center[0] + label.x,
@@ -201,9 +229,6 @@ export function preparePieData(args) {
                         style: label.style,
                     });
                 }
-                else {
-                    labels.push(label);
-                }
                 const connector = {
                     path: line(getConnectorPoints(label.angle)),
                     color: relatedSegment.data.color,
@@ -212,12 +237,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,
@@ -251,7 +277,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 +293,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 +313,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/esm/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/esm/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/esm/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/esm/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/esm/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;

package/package.json

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