@gravity-ui/charts 1.34.9 → 1.35.0

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/hooks/useShapes/bar-x/prepare-data.js

@@ -1,4 +1,4 @@
-import { ascending, descending, sort } from 'd3';
+import { ascending, descending, reverse, sort } from 'd3';
 import get from 'lodash/get';
 import { getDataCategoryValue, getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
@@ -103,9 +103,13 @@ export const prepareBarXData = async (args) => {
                 let positiveStackHeight = 0;
                 let negativeStackHeight = 0;
                 const stackItems = [];
-                const sortedData = sortKey
-                    ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
-                    : yValues;
+                let sortedData = yValues;
+                if (sortKey) {
+                    sortedData = sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)));
+                }
+                else if ((sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.direction) === 'desc') {
+                    sortedData = reverse(yValues);
+                }
                 for (let yValueIndex = 0; yValueIndex < sortedData.length; yValueIndex++) {
                     const yValue = sortedData[yValueIndex];
                     const yAxisIndex = yValue.series.yAxis;
@@ -119,7 +123,6 @@ export const prepareBarXData = async (args) => {
                     if (xAxis.type === 'category') {
                         const xBandScale = xScale;
                         const xBandScaleDomain = xBandScale.domain();
-                        // eslint-disable-next-line max-depth
                         if (xBandScaleDomain.indexOf(xValue) === -1) {
                             continue;
                         }

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/hooks/useShapes/bar-x/prepare-data.js

@@ -1,4 +1,4 @@
-import { ascending, descending, sort } from 'd3';
+import { ascending, descending, reverse, sort } from 'd3';
 import get from 'lodash/get';
 import { getDataCategoryValue, getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
@@ -103,9 +103,13 @@ export const prepareBarXData = async (args) => {
                 let positiveStackHeight = 0;
                 let negativeStackHeight = 0;
                 const stackItems = [];
-                const sortedData = sortKey
-                    ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
-                    : yValues;
+                let sortedData = yValues;
+                if (sortKey) {
+                    sortedData = sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)));
+                }
+                else if ((sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.direction) === 'desc') {
+                    sortedData = reverse(yValues);
+                }
                 for (let yValueIndex = 0; yValueIndex < sortedData.length; yValueIndex++) {
                     const yValue = sortedData[yValueIndex];
                     const yAxisIndex = yValue.series.yAxis;
@@ -119,7 +123,6 @@ export const prepareBarXData = async (args) => {
                     if (xAxis.type === 'category') {
                         const xBandScale = xScale;
                         const xBandScaleDomain = xBandScale.domain();
-                        // eslint-disable-next-line max-depth
                         if (xBandScaleDomain.indexOf(xValue) === -1) {
                             continue;
                         }

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.35.0",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",