@gravity-ui/charts 1.6.5 → 1.6.6

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/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('dominant-baseline', 'inherit');
-    handleOverflowingText(tSpan.node(), maxWidth);
+    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/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/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/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('dominant-baseline', 'inherit');
-    handleOverflowingText(tSpan.node(), maxWidth);
+    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/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.5",
+  "version": "1.6.6",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",