@gravity-ui/charts 1.34.9 → 1.34.10

package/dist/cjs/components/Tooltip/DefaultTooltipContent/index.js

@@ -89,7 +89,8 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
         }
     }, [pinned]);
     return (React.createElement("div", { className: b('content'), "data-qa": qa },
-        formattedHeadValue && (React.createElement("div", { className: b('series-name'), dangerouslySetInnerHTML: { __html: formattedHeadValue } })),
+        formattedHeadValue && (React.createElement("div", { className: b('series-name') },
+            React.createElement("div", { className: b('series-name-text'), dangerouslySetInnerHTML: { __html: formattedHeadValue } }))),
         React.createElement("div", { className: b('content-rows', { pinned }), ref: contentRowsRef, style: { maxHeight: maxContentRowsHeight } },
             visibleHovered.map((seriesItem, i) => {
                 var _a;

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

@@ -3,6 +3,7 @@
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
 }
 .gcharts-tooltip__popup-content {
+  max-width: 450px;
   text-wrap: nowrap;
   border-radius: 4px;
   background-color: var(--g-color-infographics-tooltip-bg);
@@ -24,6 +25,12 @@
   font-size: 13px;
   font-weight: 600;
 }
+.gcharts-tooltip__series-name-text {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .gcharts-tooltip__content-row {
   display: flex;
   align-items: center;

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

@@ -205,18 +205,23 @@ export function getTextSizeFn({ style }) {
 // We ignore an inaccuracy of less than a pixel.
 // To do this, we round the font size down when comparing it, and the size of the allowed space up.
 export async function getTextWithElipsis({ text: originalText, getTextWidth, maxWidth, }) {
-    let textWidth = Math.floor(await getTextWidth(originalText));
+    const textWidth = Math.floor(await getTextWidth(originalText));
     const textMaxWidth = Math.ceil(maxWidth);
     if (textWidth <= textMaxWidth) {
         return originalText;
     }
-    let text = originalText + '…';
-    while (textWidth > textMaxWidth && text.length > 2) {
-        text = text.slice(0, -2) + '…';
-        textWidth = Math.floor(await getTextWidth(text));
-    }
-    if (textWidth > textMaxWidth) {
-        text = '';
+    let low = 0;
+    let high = originalText.length;
+    while (low < high) {
+        const mid = Math.floor((low + high + 1) / 2);
+        const candidate = originalText.slice(0, mid) + '…';
+        const candidateWidth = Math.floor(await getTextWidth(candidate));
+        if (candidateWidth <= textMaxWidth) {
+            low = mid;
+        }
+        else {
+            high = mid - 1;
+        }
     }
-    return text;
+    return low > 0 ? originalText.slice(0, low) + '…' : '';
 }

package/dist/esm/components/Tooltip/DefaultTooltipContent/index.js

@@ -89,7 +89,8 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
         }
     }, [pinned]);
     return (React.createElement("div", { className: b('content'), "data-qa": qa },
-        formattedHeadValue && (React.createElement("div", { className: b('series-name'), dangerouslySetInnerHTML: { __html: formattedHeadValue } })),
+        formattedHeadValue && (React.createElement("div", { className: b('series-name') },
+            React.createElement("div", { className: b('series-name-text'), dangerouslySetInnerHTML: { __html: formattedHeadValue } }))),
         React.createElement("div", { className: b('content-rows', { pinned }), ref: contentRowsRef, style: { maxHeight: maxContentRowsHeight } },
             visibleHovered.map((seriesItem, i) => {
                 var _a;

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

@@ -3,6 +3,7 @@
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
 }
 .gcharts-tooltip__popup-content {
+  max-width: 450px;
   text-wrap: nowrap;
   border-radius: 4px;
   background-color: var(--g-color-infographics-tooltip-bg);
@@ -24,6 +25,12 @@
   font-size: 13px;
   font-weight: 600;
 }
+.gcharts-tooltip__series-name-text {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .gcharts-tooltip__content-row {
   display: flex;
   align-items: center;

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

@@ -205,18 +205,23 @@ export function getTextSizeFn({ style }) {
 // We ignore an inaccuracy of less than a pixel.
 // To do this, we round the font size down when comparing it, and the size of the allowed space up.
 export async function getTextWithElipsis({ text: originalText, getTextWidth, maxWidth, }) {
-    let textWidth = Math.floor(await getTextWidth(originalText));
+    const textWidth = Math.floor(await getTextWidth(originalText));
     const textMaxWidth = Math.ceil(maxWidth);
     if (textWidth <= textMaxWidth) {
         return originalText;
     }
-    let text = originalText + '…';
-    while (textWidth > textMaxWidth && text.length > 2) {
-        text = text.slice(0, -2) + '…';
-        textWidth = Math.floor(await getTextWidth(text));
-    }
-    if (textWidth > textMaxWidth) {
-        text = '';
+    let low = 0;
+    let high = originalText.length;
+    while (low < high) {
+        const mid = Math.floor((low + high + 1) / 2);
+        const candidate = originalText.slice(0, mid) + '…';
+        const candidateWidth = Math.floor(await getTextWidth(candidate));
+        if (candidateWidth <= textMaxWidth) {
+            low = mid;
+        }
+        else {
+            high = mid - 1;
+        }
     }
-    return text;
+    return low > 0 ? originalText.slice(0, low) + '…' : '';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.34.9",
+  "version": "1.34.10",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",