@gravity-ui/charts 1.5.1 → 1.6.1

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

@@ -14,12 +14,17 @@ export function handleOverflowingText(tSpan, maxWidth) {
     revertRotation.setRotate(-angle, 0, 0);
     textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal.appendItem(revertRotation);
     let text = tSpan.textContent || '';
-    let textLength = ((_b = tSpan.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0;
+    // We believe that if the text goes beyond the boundaries of less than a pixel, it's not a big deal.
+    // Math.floor helps to solve the problem with the difference in rounding when comparing textLength with maxWidth.
+    let textLength = Math.floor(((_b = tSpan.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0);
     while (textLength > maxWidth && text.length > 1) {
         text = text.slice(0, -1);
         tSpan.textContent = text + '…';
         textLength = ((_c = tSpan.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.width) || 0;
     }
+    if (textLength > maxWidth) {
+        tSpan.textContent = '';
+    }
     textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal.removeItem((textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal.length) - 1);
 }
 export function setEllipsisForOverflowText(selection, maxWidth) {
@@ -64,21 +69,22 @@ function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
     return text;
 }
 export function getLabelsSize({ labels, style, rotation, html, }) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     if (!labels.filter(Boolean).length) {
         return { maxHeight: 0, maxWidth: 0 };
     }
     const container = select(document.body).append('div');
-    // TODO: Why do we need this styles?
-    // .attr('class', 'chartkit chartkit-theme_common');
     const result = { maxHeight: 0, maxWidth: 0 };
     let labelWrapper;
     if (html) {
         labelWrapper = container
             .append('div')
             .style('position', 'absolute')
+            .style('display', 'inline-block')
             .style('font-size', (_a = style === null || style === void 0 ? void 0 : style.fontSize) !== null && _a !== void 0 ? _a : '')
             .style('font-weight', (_b = style === null || style === void 0 ? void 0 : style.fontWeight) !== null && _b !== void 0 ? _b : '')
+            .style('max-width', (_c = style === null || style === void 0 ? void 0 : style.maxWidth) !== null && _c !== void 0 ? _c : '')
+            .style('max-height', (_d = style === null || style === void 0 ? void 0 : style.maxHeight) !== null && _d !== void 0 ? _d : '')
             .node();
         const { height, width } = labels.reduce((acc, l) => {
             var _a, _b;
@@ -102,9 +108,9 @@ export function getLabelsSize({ labels, style, rotation, html, }) {
                 .attr('text-anchor', rotation > 0 ? 'start' : 'end')
                 .style('transform', `rotate(${rotation}deg)`);
         }
-        const rect = (_c = svg.select('g').node()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
-        result.maxWidth = (_d = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _d !== void 0 ? _d : 0;
-        result.maxHeight = (_e = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _e !== void 0 ? _e : 0;
+        const rect = (_e = svg.select('g').node()) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
+        result.maxWidth = (_f = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _f !== void 0 ? _f : 0;
+        result.maxHeight = (_g = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _g !== void 0 ? _g : 0;
     }
     container.remove();
     return result;

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

@@ -11,7 +11,11 @@ export function pieCenterText(text, options) {
     return function (args) {
         let fontSize = MAX_FONT_SIZE;
         const textSize = getLabelsSize({ labels: [text], style: { fontSize: `${fontSize}px` } });
-        fontSize = (fontSize * (args.series.innerRadius - padding) * 2) / textSize.maxWidth;
+        let availableSpace = args.series.innerRadius * 2;
+        if (padding < args.series.innerRadius) {
+            availableSpace -= padding * 2;
+        }
+        fontSize = (fontSize * availableSpace) / textSize.maxWidth;
         const container = create('svg:g');
         container
             .append('text')

package/package.json

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