@gravity-ui/charts 1.6.4 → 1.6.6

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

@@ -3,15 +3,15 @@
 }
 .gcharts-axis .tick text {
   color: var(--g-color-text-secondary);
-  alignment-baseline: after-edge;
+  dominant-baseline: text-after-edge;
 }
 .gcharts-axis .tick line, .gcharts-axis .tick path {
   stroke: var(--g-color-line-generic);
 }
 .gcharts-axis__title {
-  alignment-baseline: after-edge;
+  dominant-baseline: text-after-edge;
   fill: var(--g-color-text-secondary);
 }
 .gcharts-axis__title tspan {
-  alignment-baseline: after-edge;
+  dominant-baseline: text-after-edge;
 }

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

@@ -294,7 +294,7 @@ export const Legend = (props) => {
                 .attr('font-weight', (_c = legend.title.style.fontWeight) !== null && _c !== void 0 ? _c : null)
                 .attr('font-size', (_d = legend.title.style.fontSize) !== null && _d !== void 0 ? _d : null)
                 .attr('fill', (_e = legend.title.style.fontColor) !== null && _e !== void 0 ? _e : null)
-                .style('alignment-baseline', 'before-edge')
+                .style('dominant-baseline', 'text-before-edge')
                 .html(legend.title.text);
         }
         const { left } = getLegendPosition({

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

@@ -19,7 +19,7 @@
 }
 .gcharts-legend__item-text {
   fill: var(--g-color-text-secondary);
-  alignment-baseline: before-edge;
+  dominant-baseline: text-before-edge;
 }
 .gcharts-legend__item-text_unselected {
   fill: var(--g-color-text-hint);
@@ -32,7 +32,7 @@
   fill: var(--g-color-text-primary);
 }
 .gcharts-legend__pagination-counter, .gcharts-legend__pagination-arrow {
-  alignment-baseline: middle;
+  dominant-baseline: middle;
 }
 .gcharts-legend__pagination-arrow {
   cursor: pointer;

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

@@ -147,7 +147,7 @@ export function PieSeriesShapes(args) {
                     });
                     return d;
                 });
-                const labelSelection = pieSelection.selectAll('tspan');
+                const labelSelection = pieSelection.selectAll(`.${b('label')} tspan`);
                 const connectorSelection = pieSelection.selectAll(connectorSelector);
                 labelSelection.merge(connectorSelection).datum((d, i, elements) => {
                     return setActiveState({

package/dist/cjs/hooks/useShapes/styles.css

@@ -9,11 +9,11 @@
   font-size: 11px;
   font-weight: bold;
   fill: var(--g-color-text-complementary);
-  alignment-baseline: before-edge;
+  dominant-baseline: text-before-edge;
 }
 
 .gcharts-radar__label {
-  alignment-baseline: before-edge;
+  dominant-baseline: text-before-edge;
 }
 
 .gcharts-bar-x__label {
@@ -24,14 +24,14 @@
 .gcharts-bar-y__label {
   user-select: none;
   fill: var(--g-color-text-complementary);
-  alignment-baseline: after-edge;
+  dominant-baseline: text-after-edge;
 }
 
 .gcharts-treemap__label {
   user-select: none;
   pointer-events: none;
   fill: var(--g-color-text-complementary);
-  alignment-baseline: text-before-edge;
+  dominant-baseline: text-before-edge;
 }
 
 .gcharts-waterfall__connector {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { color, select } from 'd3';
 import get from 'lodash/get';
-import { block, setEllipsisForOverflowTexts } from '../../../utils';
+import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
 const b = block('treemap');
 export const TreemapSeriesShape = (props) => {
@@ -44,8 +44,7 @@ export const TreemapSeriesShape = (props) => {
             .attr('y', (d) => d.y)
             .style('font-size', () => series.dataLabels.style.fontSize)
             .style('font-weight', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontWeight) || null; })
-            .style('fill', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontColor) || null; })
-            .call(setEllipsisForOverflowTexts, (d) => d.width);
+            .style('fill', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontColor) || null; });
         const eventName = `hover-shape.treemap`;
         const hoverOptions = get(seriesOptions, 'treemap.states.hover');
         const inactiveOptions = get(seriesOptions, 'treemap.states.inactive');

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

@@ -1,10 +1,11 @@
 import { ascending, descending, sort, stratify, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3';
 import { LayoutAlgorithm } from '../../../constants';
-import { getLabelsSize } from '../../../utils';
+import { getLabelsSize, getTextSizeFn, getTextWithElipsis } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 const DEFAULT_PADDING = 1;
 function getLabels(args) {
     const { data, options: { html, padding, align, style }, } = args;
+    const getTextSize = getTextSizeFn({ style });
     return data.reduce((acc, d) => {
         const texts = Array.isArray(d.data.name) ? d.data.name : [d.data.name];
         const left = d.x0 + padding;
@@ -15,11 +16,22 @@ function getLabels(args) {
         texts.forEach((text) => {
             var _a;
             const label = getFormattedValue(Object.assign({ value: text }, args.options));
-            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 labelMaxHeight = 0;
+            let labelMaxWidth = 0;
+            if (html) {
+                const size = (_a = getLabelsSize({
+                    labels: [label],
+                    style: Object.assign(Object.assign({}, style), { maxWidth: `${spaceWidth}px`, maxHeight: `${availableSpaceHeight}px` }),
+                    html,
+                })) !== null && _a !== void 0 ? _a : {};
+                labelMaxHeight = size.maxHeight;
+                labelMaxWidth = size.maxWidth;
+            }
+            else {
+                const size = getTextSize(label);
+                labelMaxHeight = size.height;
+                labelMaxWidth = size.width;
+            }
             let x = left;
             const y = prevLabelsHeight + d.y0 + padding;
             const labelWidth = Math.min(labelMaxWidth, spaceWidth);
@@ -53,10 +65,13 @@ function getLabels(args) {
                     size: { width: labelWidth, height: labelHeight },
                 }
                 : {
-                    text: label,
+                    text: getTextWithElipsis({
+                        text: label,
+                        getTextWidth: (s) => getTextSize(s).width,
+                        maxWidth: labelWidth,
+                    }),
                     x,
                     y,
-                    width: labelWidth,
                     nodeData: d.data,
                 };
             acc.push(item);

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

@@ -5,7 +5,6 @@ export type TreemapLabelData = {
     text: string;
     x: number;
     y: number;
-    width: number;
     nodeData: TreemapSeriesData;
 };
 export type PreparedTreemapData = {

package/dist/cjs/hooks/useSplit/index.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import get from 'lodash/get';
 import { calculateNumericProperty, getHorisontalSvgTextHeight } from '../../utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
@@ -31,27 +32,29 @@ export function getPlotHeight(args) {
     return boundsHeight;
 }
 export const useSplit = (args) => {
-    var _a;
     const { split, boundsHeight, chartWidth } = args;
-    const splitGap = (_a = calculateNumericProperty({ value: split === null || split === void 0 ? void 0 : split.gap, base: boundsHeight })) !== null && _a !== void 0 ? _a : 0;
-    const plotHeight = getPlotHeight({ split: split, boundsHeight, gap: splitGap });
-    const plots = (split === null || split === void 0 ? void 0 : split.plots) || [];
-    return {
-        plots: plots.map((p, index) => {
-            const title = preparePlotTitle({
-                title: p.title,
-                plotIndex: index,
-                gap: splitGap,
-                plotHeight,
-                chartWidth,
-            });
-            const top = index * (plotHeight + splitGap);
-            return {
-                top: top + title.height,
-                height: plotHeight - title.height,
-                title,
-            };
-        }),
-        gap: splitGap,
-    };
+    return React.useMemo(() => {
+        var _a;
+        const splitGap = (_a = calculateNumericProperty({ value: split === null || split === void 0 ? void 0 : split.gap, base: boundsHeight })) !== null && _a !== void 0 ? _a : 0;
+        const plotHeight = getPlotHeight({ split: split, boundsHeight, gap: splitGap });
+        const plots = (split === null || split === void 0 ? void 0 : split.plots) || [];
+        return {
+            plots: plots.map((p, index) => {
+                const title = preparePlotTitle({
+                    title: p.title,
+                    plotIndex: index,
+                    gap: splitGap,
+                    plotHeight,
+                    chartWidth,
+                });
+                const top = index * (plotHeight + splitGap);
+                return {
+                    top: top + title.height,
+                    height: plotHeight - title.height,
+                    title,
+                };
+            }),
+            gap: splitGap,
+        };
+    }, [split, boundsHeight, chartWidth]);
 };

package/dist/cjs/utils/chart/axis-generators/bottom.js

@@ -63,7 +63,7 @@ export function axisBottom(args) {
                 return 'middle';
             })
                 .style('transform', transform)
-                .style('alignment-baseline', 'after-edge');
+                .style('dominant-baseline', 'text-after-edge');
             return tick;
         })
             .attr('transform', function (d) {

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

@@ -173,7 +173,7 @@ export const getHorisontalSvgTextHeight = (args) => {
     const textSelection = container.append('text').text(text);
     const fontSize = get(style, 'fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE);
     if (fontSize) {
-        textSelection.style('font-size', fontSize).style('alignment-baseline', 'after-edge');
+        textSelection.style('font-size', fontSize).style('dominant-baseline', 'text-after-edge');
     }
     const height = ((_a = textSelection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
     container.remove();

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

@@ -1,8 +1,8 @@
 import type { Selection } from 'd3';
 import type { BaseTextStyle, MeaningfulAny } from '../../types';
-export declare function handleOverflowingText(tSpan: SVGTSpanElement | null, maxWidth: number): void;
-export declare function setEllipsisForOverflowText<T>(selection: Selection<SVGTextElement, T, null, unknown>, maxWidth: number): void;
-export declare function setEllipsisForOverflowTexts<T>(selection: Selection<SVGTextElement, T, MeaningfulAny, unknown>, maxWidth: ((datum: T) => number) | number): void;
+export declare function handleOverflowingText(tSpan: SVGTSpanElement | null, maxWidth: number, textWidth?: number): void;
+export declare function setEllipsisForOverflowText<T>(selection: Selection<SVGTextElement, T, null, unknown>, maxWidth: number, textWidth?: number): void;
+export declare function setEllipsisForOverflowTexts<T>(selection: Selection<SVGTextElement, T, MeaningfulAny, unknown>, maxWidth: ((datum: T) => number) | number, currentWidth?: (datum: T) => number): void;
 export declare function hasOverlappingLabels({ width, labels, padding, style, }: {
     width: number;
     labels: string[];
@@ -27,3 +27,14 @@ export declare function wrapText(args: {
     style?: BaseTextStyle;
     width: number;
 }): TextRow[];
+export declare function getTextSizeFn({ style }: {
+    style: BaseTextStyle;
+}): (str: string) => {
+    width: number;
+    height: number;
+};
+export declare function getTextWithElipsis({ text: originalText, getTextWidth, maxWidth, }: {
+    text: string;
+    getTextWidth: (s: string) => number;
+    maxWidth: number;
+}): string;

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

@@ -1,5 +1,5 @@
 import { select } from 'd3-selection';
-export function handleOverflowingText(tSpan, maxWidth) {
+export function handleOverflowingText(tSpan, maxWidth, textWidth) {
     var _a, _b, _c;
     if (!tSpan) {
         return;
@@ -8,15 +8,20 @@ export function handleOverflowingText(tSpan, maxWidth) {
     if (!svg) {
         return;
     }
-    const textNode = tSpan.closest('text');
-    const angle = ((_a = Array.from((textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal) || []).find((item) => item.angle)) === null || _a === void 0 ? void 0 : _a.angle) || 0;
-    const revertRotation = svg.createSVGTransform();
-    revertRotation.setRotate(-angle, 0, 0);
-    textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal.appendItem(revertRotation);
     let text = tSpan.textContent || '';
     // 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);
+    let textLength = textWidth !== null && textWidth !== void 0 ? textWidth : Math.floor(((_a = tSpan.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.width) || 0);
+    if (textLength < maxWidth) {
+        return;
+    }
+    const textNode = tSpan.closest('text');
+    const angle = ((_b = Array.from((textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal) || []).find((item) => item.angle)) === null || _b === void 0 ? void 0 : _b.angle) || 0;
+    if (angle) {
+        const revertRotation = svg.createSVGTransform();
+        revertRotation.setRotate(-angle, 0, 0);
+        textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal.appendItem(revertRotation);
+    }
     while (textLength > maxWidth && text.length > 1) {
         text = text.slice(0, -1);
         tSpan.textContent = text + '…';
@@ -25,18 +30,30 @@ export function handleOverflowingText(tSpan, maxWidth) {
     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);
+    if (angle) {
+        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) {
+export function setEllipsisForOverflowText(selection, maxWidth, textWidth) {
+    var _a, _b;
+    const originalTextWidth = textWidth !== null && textWidth !== void 0 ? textWidth : Math.floor(((_b = (_a = selection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0);
+    if (originalTextWidth <= maxWidth) {
+        return;
+    }
     const text = selection.text();
     selection.text(null).append('title').text(text);
-    const tSpan = selection.append('tspan').text(text).style('alignment-baseline', 'inherit');
-    handleOverflowingText(tSpan.node(), maxWidth);
+    const tSpan = selection.append('tspan').text(text).style('dominant-baseline', 'inherit');
+    handleOverflowingText(tSpan.node(), maxWidth, originalTextWidth);
 }
-export function setEllipsisForOverflowTexts(selection, maxWidth) {
+export function setEllipsisForOverflowTexts(selection, maxWidth, currentWidth) {
     selection.each(function (datum) {
+        var _a, _b;
+        const textSelection = select(this);
         const textMaxWidth = typeof maxWidth === 'function' ? maxWidth(datum) : maxWidth;
-        setEllipsisForOverflowText(select(this), textMaxWidth);
+        const textWidth = currentWidth
+            ? currentWidth(datum)
+            : Math.floor(((_b = (_a = textSelection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0);
+        setEllipsisForOverflowText(textSelection, textMaxWidth, textWidth);
     });
 }
 export function hasOverlappingLabels({ width, labels, padding = 0, style, }) {
@@ -148,3 +165,37 @@ export function wrapText(args) {
         return acc;
     }, []);
 }
+export function getTextSizeFn({ style }) {
+    const map = {};
+    const setSymbolSize = (s) => {
+        const size = getLabelsSize({
+            labels: [s],
+            style,
+        });
+        map[s] = { width: size.maxWidth, height: size.maxHeight };
+    };
+    return (str) => {
+        let width = 0;
+        let height = 0;
+        [...str].forEach((s) => {
+            if (!map[s]) {
+                setSymbolSize(s);
+            }
+            width += map[s].width;
+            height = Math.max(height, map[s].height);
+        });
+        return { width, height };
+    };
+}
+export function getTextWithElipsis({ text: originalText, getTextWidth, maxWidth, }) {
+    let text = originalText;
+    let textLength = getTextWidth(text);
+    while (textLength > maxWidth && text.length > 1) {
+        text = text.slice(0, -2) + '…';
+        textLength = getTextWidth(text);
+    }
+    if (textLength > maxWidth) {
+        text = '';
+    }
+    return text;
+}

package/dist/cjs/utils/chart-ui/pie-center-text.d.ts

@@ -1,8 +1,9 @@
 export declare function pieCenterText(text: string, options?: {
-    padding?: number;
+    padding?: string | number;
     color?: string;
+    minFontSize?: number;
 }): ((args: {
     series: {
         innerRadius: number;
     };
-}) => Element | null) | undefined;
+}) => SVGGElement | null) | undefined;

package/dist/cjs/utils/chart-ui/pie-center-text.js

@@ -1,29 +1,42 @@
-import { create } from 'd3-selection';
+import { select } from 'd3-selection';
 import get from 'lodash/get';
-import { getLabelsSize } from '../chart/text';
+import { calculateNumericProperty } from '../chart/math';
+import { getLabelsSize, handleOverflowingText } from '../chart/text';
 const MAX_FONT_SIZE = 64;
+const MIN_FONT_SIZE = 8;
 export function pieCenterText(text, options) {
     if (!text) {
         return undefined;
     }
-    const padding = get(options, 'padding', 12);
     const color = get(options, 'color', 'currentColor');
     return function (args) {
+        var _a, _b;
         let fontSize = MAX_FONT_SIZE;
         const textSize = getLabelsSize({ labels: [text], style: { fontSize: `${fontSize}px` } });
         let availableSpace = args.series.innerRadius * 2;
+        const padding = (_a = calculateNumericProperty({
+            base: availableSpace,
+            value: options === null || options === void 0 ? void 0 : options.padding,
+        })) !== null && _a !== void 0 ? _a : 12;
         if (padding < args.series.innerRadius) {
             availableSpace -= padding * 2;
         }
-        fontSize = (fontSize * availableSpace) / textSize.maxWidth;
-        const container = create('svg:g');
-        container
+        fontSize = Math.max((_b = options === null || options === void 0 ? void 0 : options.minFontSize) !== null && _b !== void 0 ? _b : MIN_FONT_SIZE, (fontSize * availableSpace) / Math.max(textSize.maxWidth, textSize.maxHeight));
+        const tempWrapper = select(document.body).append('svg');
+        const container = tempWrapper.append('g');
+        const textSelection = container
             .append('text')
-            .text(text)
-            .attr('text-anchor', 'middle')
-            .attr('alignment-baseline', 'middle')
             .style('font-size', `${fontSize}px`)
             .style('fill', color);
-        return container.node();
+        textSelection.append('title').text(text);
+        const tspan = textSelection
+            .append('tspan')
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .text(text);
+        handleOverflowingText(tspan.node(), availableSpace);
+        const result = container.node();
+        tempWrapper.remove();
+        return result;
     };
 }

package/dist/cjs/utils/misc.d.ts

@@ -8,3 +8,6 @@ export declare function getUniqId(): string;
  * More details [here](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples).
  */
 export declare function isMacintosh(): boolean;
+export declare function measurePerformance(): {
+    end(): number;
+};

package/dist/cjs/utils/misc.js

@@ -18,3 +18,11 @@ export function getUniqId() {
 export function isMacintosh() {
     return typeof navigator === 'undefined' ? false : /Mac|iP(hone|[oa]d)/.test(navigator.platform);
 }
+export function measurePerformance() {
+    const timestamp = performance.now();
+    return {
+        end() {
+            return performance.now() - timestamp;
+        },
+    };
+}

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

@@ -3,15 +3,15 @@
 }
 .gcharts-axis .tick text {
   color: var(--g-color-text-secondary);
-  alignment-baseline: after-edge;
+  dominant-baseline: text-after-edge;
 }
 .gcharts-axis .tick line, .gcharts-axis .tick path {
   stroke: var(--g-color-line-generic);
 }
 .gcharts-axis__title {
-  alignment-baseline: after-edge;
+  dominant-baseline: text-after-edge;
   fill: var(--g-color-text-secondary);
 }
 .gcharts-axis__title tspan {
-  alignment-baseline: after-edge;
+  dominant-baseline: text-after-edge;
 }

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

@@ -294,7 +294,7 @@ export const Legend = (props) => {
                 .attr('font-weight', (_c = legend.title.style.fontWeight) !== null && _c !== void 0 ? _c : null)
                 .attr('font-size', (_d = legend.title.style.fontSize) !== null && _d !== void 0 ? _d : null)
                 .attr('fill', (_e = legend.title.style.fontColor) !== null && _e !== void 0 ? _e : null)
-                .style('alignment-baseline', 'before-edge')
+                .style('dominant-baseline', 'text-before-edge')
                 .html(legend.title.text);
         }
         const { left } = getLegendPosition({

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

@@ -19,7 +19,7 @@
 }
 .gcharts-legend__item-text {
   fill: var(--g-color-text-secondary);
-  alignment-baseline: before-edge;
+  dominant-baseline: text-before-edge;
 }
 .gcharts-legend__item-text_unselected {
   fill: var(--g-color-text-hint);
@@ -32,7 +32,7 @@
   fill: var(--g-color-text-primary);
 }
 .gcharts-legend__pagination-counter, .gcharts-legend__pagination-arrow {
-  alignment-baseline: middle;
+  dominant-baseline: middle;
 }
 .gcharts-legend__pagination-arrow {
   cursor: pointer;

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

@@ -147,7 +147,7 @@ export function PieSeriesShapes(args) {
                     });
                     return d;
                 });
-                const labelSelection = pieSelection.selectAll('tspan');
+                const labelSelection = pieSelection.selectAll(`.${b('label')} tspan`);
                 const connectorSelection = pieSelection.selectAll(connectorSelector);
                 labelSelection.merge(connectorSelection).datum((d, i, elements) => {
                     return setActiveState({

package/dist/esm/hooks/useShapes/styles.css

@@ -9,11 +9,11 @@
   font-size: 11px;
   font-weight: bold;
   fill: var(--g-color-text-complementary);
-  alignment-baseline: before-edge;
+  dominant-baseline: text-before-edge;
 }
 
 .gcharts-radar__label {
-  alignment-baseline: before-edge;
+  dominant-baseline: text-before-edge;
 }
 
 .gcharts-bar-x__label {
@@ -24,14 +24,14 @@
 .gcharts-bar-y__label {
   user-select: none;
   fill: var(--g-color-text-complementary);
-  alignment-baseline: after-edge;
+  dominant-baseline: text-after-edge;
 }
 
 .gcharts-treemap__label {
   user-select: none;
   pointer-events: none;
   fill: var(--g-color-text-complementary);
-  alignment-baseline: text-before-edge;
+  dominant-baseline: text-before-edge;
 }
 
 .gcharts-waterfall__connector {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { color, select } from 'd3';
 import get from 'lodash/get';
-import { block, setEllipsisForOverflowTexts } from '../../../utils';
+import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
 const b = block('treemap');
 export const TreemapSeriesShape = (props) => {
@@ -44,8 +44,7 @@ export const TreemapSeriesShape = (props) => {
             .attr('y', (d) => d.y)
             .style('font-size', () => series.dataLabels.style.fontSize)
             .style('font-weight', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontWeight) || null; })
-            .style('fill', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontColor) || null; })
-            .call(setEllipsisForOverflowTexts, (d) => d.width);
+            .style('fill', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontColor) || null; });
         const eventName = `hover-shape.treemap`;
         const hoverOptions = get(seriesOptions, 'treemap.states.hover');
         const inactiveOptions = get(seriesOptions, 'treemap.states.inactive');

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

@@ -1,10 +1,11 @@
 import { ascending, descending, sort, stratify, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3';
 import { LayoutAlgorithm } from '../../../constants';
-import { getLabelsSize } from '../../../utils';
+import { getLabelsSize, getTextSizeFn, getTextWithElipsis } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 const DEFAULT_PADDING = 1;
 function getLabels(args) {
     const { data, options: { html, padding, align, style }, } = args;
+    const getTextSize = getTextSizeFn({ style });
     return data.reduce((acc, d) => {
         const texts = Array.isArray(d.data.name) ? d.data.name : [d.data.name];
         const left = d.x0 + padding;
@@ -15,11 +16,22 @@ function getLabels(args) {
         texts.forEach((text) => {
             var _a;
             const label = getFormattedValue(Object.assign({ value: text }, args.options));
-            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 labelMaxHeight = 0;
+            let labelMaxWidth = 0;
+            if (html) {
+                const size = (_a = getLabelsSize({
+                    labels: [label],
+                    style: Object.assign(Object.assign({}, style), { maxWidth: `${spaceWidth}px`, maxHeight: `${availableSpaceHeight}px` }),
+                    html,
+                })) !== null && _a !== void 0 ? _a : {};
+                labelMaxHeight = size.maxHeight;
+                labelMaxWidth = size.maxWidth;
+            }
+            else {
+                const size = getTextSize(label);
+                labelMaxHeight = size.height;
+                labelMaxWidth = size.width;
+            }
             let x = left;
             const y = prevLabelsHeight + d.y0 + padding;
             const labelWidth = Math.min(labelMaxWidth, spaceWidth);
@@ -53,10 +65,13 @@ function getLabels(args) {
                     size: { width: labelWidth, height: labelHeight },
                 }
                 : {
-                    text: label,
+                    text: getTextWithElipsis({
+                        text: label,
+                        getTextWidth: (s) => getTextSize(s).width,
+                        maxWidth: labelWidth,
+                    }),
                     x,
                     y,
-                    width: labelWidth,
                     nodeData: d.data,
                 };
             acc.push(item);

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

@@ -5,7 +5,6 @@ export type TreemapLabelData = {
     text: string;
     x: number;
     y: number;
-    width: number;
     nodeData: TreemapSeriesData;
 };
 export type PreparedTreemapData = {

package/dist/esm/hooks/useSplit/index.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import get from 'lodash/get';
 import { calculateNumericProperty, getHorisontalSvgTextHeight } from '../../utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
@@ -31,27 +32,29 @@ export function getPlotHeight(args) {
     return boundsHeight;
 }
 export const useSplit = (args) => {
-    var _a;
     const { split, boundsHeight, chartWidth } = args;
-    const splitGap = (_a = calculateNumericProperty({ value: split === null || split === void 0 ? void 0 : split.gap, base: boundsHeight })) !== null && _a !== void 0 ? _a : 0;
-    const plotHeight = getPlotHeight({ split: split, boundsHeight, gap: splitGap });
-    const plots = (split === null || split === void 0 ? void 0 : split.plots) || [];
-    return {
-        plots: plots.map((p, index) => {
-            const title = preparePlotTitle({
-                title: p.title,
-                plotIndex: index,
-                gap: splitGap,
-                plotHeight,
-                chartWidth,
-            });
-            const top = index * (plotHeight + splitGap);
-            return {
-                top: top + title.height,
-                height: plotHeight - title.height,
-                title,
-            };
-        }),
-        gap: splitGap,
-    };
+    return React.useMemo(() => {
+        var _a;
+        const splitGap = (_a = calculateNumericProperty({ value: split === null || split === void 0 ? void 0 : split.gap, base: boundsHeight })) !== null && _a !== void 0 ? _a : 0;
+        const plotHeight = getPlotHeight({ split: split, boundsHeight, gap: splitGap });
+        const plots = (split === null || split === void 0 ? void 0 : split.plots) || [];
+        return {
+            plots: plots.map((p, index) => {
+                const title = preparePlotTitle({
+                    title: p.title,
+                    plotIndex: index,
+                    gap: splitGap,
+                    plotHeight,
+                    chartWidth,
+                });
+                const top = index * (plotHeight + splitGap);
+                return {
+                    top: top + title.height,
+                    height: plotHeight - title.height,
+                    title,
+                };
+            }),
+            gap: splitGap,
+        };
+    }, [split, boundsHeight, chartWidth]);
 };

package/dist/esm/utils/chart/axis-generators/bottom.js

@@ -63,7 +63,7 @@ export function axisBottom(args) {
                 return 'middle';
             })
                 .style('transform', transform)
-                .style('alignment-baseline', 'after-edge');
+                .style('dominant-baseline', 'text-after-edge');
             return tick;
         })
             .attr('transform', function (d) {

package/dist/esm/utils/chart/index.js

@@ -173,7 +173,7 @@ export const getHorisontalSvgTextHeight = (args) => {
     const textSelection = container.append('text').text(text);
     const fontSize = get(style, 'fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE);
     if (fontSize) {
-        textSelection.style('font-size', fontSize).style('alignment-baseline', 'after-edge');
+        textSelection.style('font-size', fontSize).style('dominant-baseline', 'text-after-edge');
     }
     const height = ((_a = textSelection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
     container.remove();

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

@@ -1,8 +1,8 @@
 import type { Selection } from 'd3';
 import type { BaseTextStyle, MeaningfulAny } from '../../types';
-export declare function handleOverflowingText(tSpan: SVGTSpanElement | null, maxWidth: number): void;
-export declare function setEllipsisForOverflowText<T>(selection: Selection<SVGTextElement, T, null, unknown>, maxWidth: number): void;
-export declare function setEllipsisForOverflowTexts<T>(selection: Selection<SVGTextElement, T, MeaningfulAny, unknown>, maxWidth: ((datum: T) => number) | number): void;
+export declare function handleOverflowingText(tSpan: SVGTSpanElement | null, maxWidth: number, textWidth?: number): void;
+export declare function setEllipsisForOverflowText<T>(selection: Selection<SVGTextElement, T, null, unknown>, maxWidth: number, textWidth?: number): void;
+export declare function setEllipsisForOverflowTexts<T>(selection: Selection<SVGTextElement, T, MeaningfulAny, unknown>, maxWidth: ((datum: T) => number) | number, currentWidth?: (datum: T) => number): void;
 export declare function hasOverlappingLabels({ width, labels, padding, style, }: {
     width: number;
     labels: string[];
@@ -27,3 +27,14 @@ export declare function wrapText(args: {
     style?: BaseTextStyle;
     width: number;
 }): TextRow[];
+export declare function getTextSizeFn({ style }: {
+    style: BaseTextStyle;
+}): (str: string) => {
+    width: number;
+    height: number;
+};
+export declare function getTextWithElipsis({ text: originalText, getTextWidth, maxWidth, }: {
+    text: string;
+    getTextWidth: (s: string) => number;
+    maxWidth: number;
+}): string;

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

@@ -1,5 +1,5 @@
 import { select } from 'd3-selection';
-export function handleOverflowingText(tSpan, maxWidth) {
+export function handleOverflowingText(tSpan, maxWidth, textWidth) {
     var _a, _b, _c;
     if (!tSpan) {
         return;
@@ -8,15 +8,20 @@ export function handleOverflowingText(tSpan, maxWidth) {
     if (!svg) {
         return;
     }
-    const textNode = tSpan.closest('text');
-    const angle = ((_a = Array.from((textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal) || []).find((item) => item.angle)) === null || _a === void 0 ? void 0 : _a.angle) || 0;
-    const revertRotation = svg.createSVGTransform();
-    revertRotation.setRotate(-angle, 0, 0);
-    textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal.appendItem(revertRotation);
     let text = tSpan.textContent || '';
     // 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);
+    let textLength = textWidth !== null && textWidth !== void 0 ? textWidth : Math.floor(((_a = tSpan.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.width) || 0);
+    if (textLength < maxWidth) {
+        return;
+    }
+    const textNode = tSpan.closest('text');
+    const angle = ((_b = Array.from((textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal) || []).find((item) => item.angle)) === null || _b === void 0 ? void 0 : _b.angle) || 0;
+    if (angle) {
+        const revertRotation = svg.createSVGTransform();
+        revertRotation.setRotate(-angle, 0, 0);
+        textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal.appendItem(revertRotation);
+    }
     while (textLength > maxWidth && text.length > 1) {
         text = text.slice(0, -1);
         tSpan.textContent = text + '…';
@@ -25,18 +30,30 @@ export function handleOverflowingText(tSpan, maxWidth) {
     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);
+    if (angle) {
+        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) {
+export function setEllipsisForOverflowText(selection, maxWidth, textWidth) {
+    var _a, _b;
+    const originalTextWidth = textWidth !== null && textWidth !== void 0 ? textWidth : Math.floor(((_b = (_a = selection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0);
+    if (originalTextWidth <= maxWidth) {
+        return;
+    }
     const text = selection.text();
     selection.text(null).append('title').text(text);
-    const tSpan = selection.append('tspan').text(text).style('alignment-baseline', 'inherit');
-    handleOverflowingText(tSpan.node(), maxWidth);
+    const tSpan = selection.append('tspan').text(text).style('dominant-baseline', 'inherit');
+    handleOverflowingText(tSpan.node(), maxWidth, originalTextWidth);
 }
-export function setEllipsisForOverflowTexts(selection, maxWidth) {
+export function setEllipsisForOverflowTexts(selection, maxWidth, currentWidth) {
     selection.each(function (datum) {
+        var _a, _b;
+        const textSelection = select(this);
         const textMaxWidth = typeof maxWidth === 'function' ? maxWidth(datum) : maxWidth;
-        setEllipsisForOverflowText(select(this), textMaxWidth);
+        const textWidth = currentWidth
+            ? currentWidth(datum)
+            : Math.floor(((_b = (_a = textSelection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0);
+        setEllipsisForOverflowText(textSelection, textMaxWidth, textWidth);
     });
 }
 export function hasOverlappingLabels({ width, labels, padding = 0, style, }) {
@@ -148,3 +165,37 @@ export function wrapText(args) {
         return acc;
     }, []);
 }
+export function getTextSizeFn({ style }) {
+    const map = {};
+    const setSymbolSize = (s) => {
+        const size = getLabelsSize({
+            labels: [s],
+            style,
+        });
+        map[s] = { width: size.maxWidth, height: size.maxHeight };
+    };
+    return (str) => {
+        let width = 0;
+        let height = 0;
+        [...str].forEach((s) => {
+            if (!map[s]) {
+                setSymbolSize(s);
+            }
+            width += map[s].width;
+            height = Math.max(height, map[s].height);
+        });
+        return { width, height };
+    };
+}
+export function getTextWithElipsis({ text: originalText, getTextWidth, maxWidth, }) {
+    let text = originalText;
+    let textLength = getTextWidth(text);
+    while (textLength > maxWidth && text.length > 1) {
+        text = text.slice(0, -2) + '…';
+        textLength = getTextWidth(text);
+    }
+    if (textLength > maxWidth) {
+        text = '';
+    }
+    return text;
+}

package/dist/esm/utils/chart-ui/pie-center-text.d.ts

@@ -1,8 +1,9 @@
 export declare function pieCenterText(text: string, options?: {
-    padding?: number;
+    padding?: string | number;
     color?: string;
+    minFontSize?: number;
 }): ((args: {
     series: {
         innerRadius: number;
     };
-}) => Element | null) | undefined;
+}) => SVGGElement | null) | undefined;

package/dist/esm/utils/chart-ui/pie-center-text.js

@@ -1,29 +1,42 @@
-import { create } from 'd3-selection';
+import { select } from 'd3-selection';
 import get from 'lodash/get';
-import { getLabelsSize } from '../chart/text';
+import { calculateNumericProperty } from '../chart/math';
+import { getLabelsSize, handleOverflowingText } from '../chart/text';
 const MAX_FONT_SIZE = 64;
+const MIN_FONT_SIZE = 8;
 export function pieCenterText(text, options) {
     if (!text) {
         return undefined;
     }
-    const padding = get(options, 'padding', 12);
     const color = get(options, 'color', 'currentColor');
     return function (args) {
+        var _a, _b;
         let fontSize = MAX_FONT_SIZE;
         const textSize = getLabelsSize({ labels: [text], style: { fontSize: `${fontSize}px` } });
         let availableSpace = args.series.innerRadius * 2;
+        const padding = (_a = calculateNumericProperty({
+            base: availableSpace,
+            value: options === null || options === void 0 ? void 0 : options.padding,
+        })) !== null && _a !== void 0 ? _a : 12;
         if (padding < args.series.innerRadius) {
             availableSpace -= padding * 2;
         }
-        fontSize = (fontSize * availableSpace) / textSize.maxWidth;
-        const container = create('svg:g');
-        container
+        fontSize = Math.max((_b = options === null || options === void 0 ? void 0 : options.minFontSize) !== null && _b !== void 0 ? _b : MIN_FONT_SIZE, (fontSize * availableSpace) / Math.max(textSize.maxWidth, textSize.maxHeight));
+        const tempWrapper = select(document.body).append('svg');
+        const container = tempWrapper.append('g');
+        const textSelection = container
             .append('text')
-            .text(text)
-            .attr('text-anchor', 'middle')
-            .attr('alignment-baseline', 'middle')
             .style('font-size', `${fontSize}px`)
             .style('fill', color);
-        return container.node();
+        textSelection.append('title').text(text);
+        const tspan = textSelection
+            .append('tspan')
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .text(text);
+        handleOverflowingText(tspan.node(), availableSpace);
+        const result = container.node();
+        tempWrapper.remove();
+        return result;
     };
 }

package/dist/esm/utils/misc.d.ts

@@ -8,3 +8,6 @@ export declare function getUniqId(): string;
  * More details [here](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples).
  */
 export declare function isMacintosh(): boolean;
+export declare function measurePerformance(): {
+    end(): number;
+};

package/dist/esm/utils/misc.js

@@ -18,3 +18,11 @@ export function getUniqId() {
 export function isMacintosh() {
     return typeof navigator === 'undefined' ? false : /Mac|iP(hone|[oa]d)/.test(navigator.platform);
 }
+export function measurePerformance() {
+    const timestamp = performance.now();
+    return {
+        end() {
+            return performance.now() - timestamp;
+        },
+    };
+}

package/package.json

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