@gravity-ui/charts 1.5.0 → 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,7 +1,9 @@
 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, pieGenerator } from './utils';
+import { getCurveFactory, getInscribedAngle, pieGenerator } from './utils';
 const FULL_CIRCLE = Math.PI * 2;
 const getCenter = (boundsWidth, boundsHeight, center) => {
     var _a, _b;
@@ -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);
@@ -103,22 +111,36 @@ export function preparePieData(args) {
         const labelArcGenerator = arc()
             .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) => {
@@ -158,8 +180,13 @@ export function preparePieData(args) {
             let overlap = false;
             if (prevLabel) {
                 overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
+                const startAngle = relatedSegment.startAngle +
+                    (relatedSegment.endAngle - relatedSegment.startAngle) / 2;
                 if (overlap) {
-                    let shouldAdjustAngle = true;
+                    let shouldAdjustAngle = !shouldStopLabelPlacement;
+                    const connectorPoints = getConnectorPoints(startAngle);
+                    const pointA = connectorPoints[0];
+                    const pointB = connectorPoints[connectorPoints.length - 1];
                     const step = Math.PI / 180;
                     while (shouldAdjustAngle) {
                         const newAngle = label.angle + step;
@@ -167,10 +194,21 @@ 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;
+                            // 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;
+                            }
                             if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
                                 shouldAdjustAngle = false;
                                 overlap = false;
@@ -180,7 +218,8 @@ export function preparePieData(args) {
                 }
             }
             const isLabelOverlapped = !dataLabels.allowOverlap && overlap;
-            if (!isLabelOverlapped && label.maxWidth > 0) {
+            if (!isLabelOverlapped && label.maxWidth > 0 && !shouldStopLabelPlacement) {
+                labels.push(label);
                 if (shouldUseHtml) {
                     htmlLabels.push({
                         x: data.center[0] + label.x,
@@ -190,23 +229,21 @@ export function preparePieData(args) {
                         style: label.style,
                     });
                 }
-                else {
-                    labels.push(label);
-                }
                 const connector = {
-                    path: line(getConnectorPoints(midAngle)),
+                    path: line(getConnectorPoints(label.angle)),
                     color: relatedSegment.data.color,
                 };
                 connectors.push(connector);
             }
         });
         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,
@@ -240,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;
@@ -256,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;
@@ -274,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.d.ts

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

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

@@ -10,6 +10,25 @@ 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.
+ *
+ * The order of B and C does not affect the result.
+ *
+ * @see: https://en.wikipedia.org/wiki/Inscribed_angle
+ * @returns The angle in degrees, in the range [0, 180].
+ */
+export function getInscribedAngle(a, b, c) {
+    const ux = b[0] - a[0];
+    const uy = b[1] - a[1];
+    const vx = c[0] - a[0];
+    const vy = c[1] - a[1];
+    const dot = ux * vx + uy * vy;
+    const cross = ux * vy - uy * vx;
+    const radians = Math.atan2(Math.abs(cross), dot);
+    return (radians * 180) / Math.PI;
 }

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

@@ -4,21 +4,27 @@ import { getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 const DEFAULT_PADDING = 1;
 function getLabels(args) {
-    const { data, options: { html, padding, align }, } = args;
+    const { data, options: { html, padding, align, style }, } = args;
     return data.reduce((acc, d) => {
         const texts = Array.isArray(d.data.name) ? d.data.name : [d.data.name];
-        texts.forEach((text, index) => {
+        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], 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,12 +41,16 @@ function getLabels(args) {
                     break;
                 }
             }
+            const bottom = y + labelMaxHeight;
+            if (!html && bottom > d.y1) {
+                return;
+            }
             const item = html
                 ? {
                     content: label,
                     x,
                     y,
-                    size: { width: labelWidth, height: lineHeight },
+                    size: { width: labelWidth, height: labelHeight },
                 }
                 : {
                     text: label,
@@ -50,6 +60,8 @@ function getLabels(args) {
                     nodeData: d.data,
                 };
             acc.push(item);
+            prevLabelsHeight += labelHeight;
+            availableSpaceHeight = Math.max(0, availableSpaceHeight - labelHeight);
         });
         return acc;
     }, []);
@@ -120,7 +132,7 @@ export function prepareTreemapData(args) {
         const { html, style: dataLabelsStyle } = series.dataLabels;
         const labels = getLabels({ data: leaves, options: series.dataLabels });
         if (html) {
-            const htmlItems = labels.map((l) => (Object.assign({ style: dataLabelsStyle }, l)));
+            const htmlItems = labels.map((l) => (Object.assign({ style: Object.assign(Object.assign({}, dataLabelsStyle), { maxWidth: l.size.width, maxHeight: l.size.height, overflow: 'hidden' }) }, l)));
             htmlElements.push(...htmlItems);
         }
         else {

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,17 +69,23 @@ function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
     return text;
 }
 export function getLabelsSize({ labels, style, rotation, html, }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _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').node();
+        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;
             if (labelWrapper) {
@@ -97,9 +108,9 @@ export function getLabelsSize({ labels, style, rotation, html, }) {
                 .attr('text-anchor', rotation > 0 ? 'start' : 'end')
                 .style('transform', `rotate(${rotation}deg)`);
         }
-        const rect = (_a = svg.select('g').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        result.maxWidth = (_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0;
-        result.maxHeight = (_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0;
+        const rect = (_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';