@fluentui/react-charts 0.0.0-nightly-20251215-0407.1 → 0.0.0-nightly-20251217-0407.1

package/lib-commonjs/utilities/utilities.js

@@ -10,6 +10,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    CARTESIAN_XAXIS_CLASSNAME: function() {
+        return CARTESIAN_XAXIS_CLASSNAME;
+    },
     ChartTypes: function() {
         return ChartTypes;
     },
@@ -49,6 +52,9 @@ _export(exports, {
     areArraysEqual: function() {
         return areArraysEqual;
     },
+    autoLayoutXAxisLabels: function() {
+        return autoLayoutXAxisLabels;
+    },
     calculateLongestLabelWidth: function() {
         return calculateLongestLabelWidth;
     },
@@ -67,9 +73,6 @@ _export(exports, {
     createDateXAxis: function() {
         return createDateXAxis;
     },
-    createMeasurementSpan: function() {
-        return createMeasurementSpan;
-    },
     createNumericXAxis: function() {
         return createNumericXAxis;
     },
@@ -175,6 +178,9 @@ _export(exports, {
     getSecureProps: function() {
         return getSecureProps;
     },
+    getTextSize: function() {
+        return getTextSize;
+    },
     getTypeOfAxis: function() {
         return getTypeOfAxis;
     },
@@ -202,6 +208,9 @@ _export(exports, {
     isValidDomainValue: function() {
         return isValidDomainValue;
     },
+    measureTextWithDOM: function() {
+        return measureTextWithDOM;
+    },
     pointTypes: function() {
         return pointTypes;
     },
@@ -252,6 +261,8 @@ const _chartutilities = require("@fluentui/chart-utilities");
 const MIN_DOMAIN_MARGIN = 8;
 const MIN_DONUT_RADIUS = 1;
 const DEFAULT_DATE_STRING = '2000-01-01';
+const CARTESIAN_XAXIS_CLASSNAME = 'fui-cart__xAxis';
+const CARTESIAN_XAXIS_TEXT_SELECTOR = `.${CARTESIAN_XAXIS_CLASSNAME} text`;
 var ChartTypes = /*#__PURE__*/ function(ChartTypes) {
     ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
     ChartTypes[ChartTypes["LineChart"] = 1] = "LineChart";
@@ -321,7 +332,7 @@ function createNumericXAxis(xAxisParams, tickParams, chartType, culture, scaleTy
         const xAxisValue = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
         return (defaultFormat === null || defaultFormat === void 0 ? void 0 : defaultFormat(xAxisValue)) === '' ? '' : (0, _chartutilities.formatToLocaleString)(xAxisValue, culture);
     };
-    if (hideTickOverlap && typeof xAxisCount === 'undefined') {
+    if (hideTickOverlap) {
         const longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map((v, i)=>tickFormat(v, i))) + 20;
         const [start, end] = xAxisScale.range();
         tickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
@@ -345,10 +356,12 @@ function createNumericXAxis(xAxisParams, tickParams, chartType, culture, scaleTy
     if (xAxisElement) {
         (0, _d3selection.select)(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true').style('direction', 'ltr').style('unicode-bidi', 'isolate');
     }
-    const tickValues = (customTickValues !== null && customTickValues !== void 0 ? customTickValues : xAxisScale.ticks(tickCount)).map(xAxis.tickFormat());
+    const tickValues = customTickValues !== null && customTickValues !== void 0 ? customTickValues : xAxisScale.ticks(tickCount);
+    const tickLabels = tickValues.map(xAxis.tickFormat());
     return {
         xScale: xAxisScale,
-        tickValues
+        tickValues,
+        tickLabels
     };
 }
 /**
@@ -536,7 +549,7 @@ function getDateFormatLevel(date, useUTC) {
     return (_matchedFormat_formatLevel = matchedFormat === null || matchedFormat === void 0 ? void 0 : matchedFormat.formatLevel) !== null && _matchedFormat_formatLevel !== void 0 ? _matchedFormat_formatLevel : 7;
 }
 function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLocale, customDateTimeFormatter, useUTC, chartType) {
-    const { domainNRangeValues, xAxisElement, tickPadding = 6, xAxistickSize = 6, xAxisCount, calcMaxLabelWidth, tickStep, tick0, tickText } = xAxisParams;
+    const { domainNRangeValues, xAxisElement, tickPadding = 6, xAxistickSize = 6, xAxisCount, hideTickOverlap, calcMaxLabelWidth, tickStep, tick0, tickText } = xAxisParams;
     const isUtcSet = useUTC === true || useUTC === 'utc';
     const xAxisScale = isUtcSet ? (0, _d3scale.scaleUtc)() : (0, _d3scale.scaleTime)();
     xAxisScale.domain([
@@ -580,10 +593,11 @@ function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLo
         }
         return (0, _chartutilities.formatDateToLocaleString)(domainValue, culture, useUTC ? true : false, false, formatOptions);
     };
-    const longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map(tickFormat)) + 40;
-    const [start, end] = xAxisScale.range();
-    const maxPossibleTickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
-    tickCount = Math.min(maxPossibleTickCount, xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : tickCount);
+    if (hideTickOverlap) {
+        const longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map(tickFormat)) + 40;
+        const [start, end] = xAxisScale.range();
+        tickCount = Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth));
+    }
     const xAxis = (0, _d3axis.axisBottom)(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).ticks(tickCount).tickFormat(tickFormat);
     if ([
         8
@@ -602,10 +616,12 @@ function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLo
     if (xAxisElement) {
         (0, _d3selection.select)(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
     }
-    const tickValues = (customTickValues !== null && customTickValues !== void 0 ? customTickValues : xAxisScale.ticks(tickCount)).map(xAxis.tickFormat());
+    const tickValues = customTickValues !== null && customTickValues !== void 0 ? customTickValues : xAxisScale.ticks(tickCount);
+    const tickLabels = tickValues.map(xAxis.tickFormat());
     return {
         xScale: xAxisScale,
-        tickValues
+        tickValues,
+        tickLabels
     };
 }
 function createStringXAxis(xAxisParams, tickParams, dataset, culture, _useRtl) {
@@ -654,7 +670,8 @@ function createStringXAxis(xAxisParams, tickParams, dataset, culture, _useRtl) {
     }
     return {
         xScale: xAxisScale,
-        tickValues: tickValues.map(xAxis.tickFormat())
+        tickValues,
+        tickLabels: tickValues.map(xAxis.tickFormat())
     };
 }
 function useRtl() {
@@ -949,14 +966,14 @@ function silceOrAppendToArray(array, value) {
 }
 const DEFAULT_WRAP_WIDTH = 10;
 function createWrapOfXLabels(wrapLabelProps) {
-    const { node, xAxis, noOfCharsToTruncate, showXAxisLablesTooltip, width = DEFAULT_WRAP_WIDTH } = wrapLabelProps;
+    const { node, xAxis, noOfCharsToTruncate, showXAxisLablesTooltip, width = DEFAULT_WRAP_WIDTH, container } = wrapLabelProps;
     if (node === null) {
         return;
     }
     const axisNode = (0, _d3selection.select)(node).call(xAxis);
     let removeVal = 0;
     let maxLines = 1;
-    axisNode.selectAll('.tick text').each(function() {
+    axisNode.selectAll('.tick text').each(function(_, tickIndex) {
         const text = (0, _d3selection.select)(this);
         const totalWord = text.text();
         const truncatedWord = `${text.text().slice(0, noOfCharsToTruncate)}...`;
@@ -968,33 +985,33 @@ function createWrapOfXLabels(wrapLabelProps) {
         const lineHeight = 1.1; // ems
         const y = text.attr('y');
         const dy = parseFloat(text.attr('dy'));
-        let tspan = text.text(null).append('tspan').attr('x', 0).attr('y', y).attr('id', 'BaseSpan').attr('dy', dy + 'em').attr('data-', totalWord);
-        if (showXAxisLablesTooltip && totalWordLength > noOfCharsToTruncate) {
-            tspan = text.append('tspan').attr('id', 'showDots').attr('x', 0).attr('y', y).attr('dy', dy + 'em').text(truncatedWord);
-        } else if (showXAxisLablesTooltip && totalWordLength <= noOfCharsToTruncate) {
-            tspan = text.append('tspan').attr('id', 'LessLength').attr('x', 0).attr('y', y).attr('dy', dy + 'em').text(totalWord);
+        let tspan = text.text(null).attr('data-full', totalWord).append('tspan').attr('x', 0).attr('y', y).attr('dy', dy + 'em');
+        if (showXAxisLablesTooltip) {
+            tspan.text(totalWordLength > noOfCharsToTruncate ? truncatedWord : totalWord);
         } else {
+            const maxWidth = Array.isArray(width) ? width[tickIndex] : width;
             while(word = words.pop()){
                 line.push(word);
-                tspan.text(line.join(' '));
-                if (tspan.node().getComputedTextLength() > width && line.length > 1) {
+                const label = line.join(' ');
+                tspan.text(label);
+                const labelWidth = getTextSize(label, CARTESIAN_XAXIS_TEXT_SELECTOR, container).width;
+                if (labelWidth > maxWidth && line.length > 1) {
                     line.pop();
                     tspan.text(line.join(' '));
                     line = [
                         word
                     ];
-                    tspan = text.append('tspan').attr('id', 'WordBreakId').attr('x', 0).attr('y', y).attr('dy', ++lineNumber * lineHeight + dy + 'em').text(word);
+                    tspan = text.append('tspan').attr('x', 0).attr('y', y).attr('dy', ++lineNumber * lineHeight + dy + 'em').text(word);
                 }
             }
         }
         maxLines = Math.max(maxLines, lineNumber + 1);
     });
     if (!showXAxisLablesTooltip) {
+        var _querySelector;
         let maxHeight = 12; // intial value to render corretly first time
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const outerHTMLElement = document.getElementById('WordBreakId');
-        const BoxCordinates = outerHTMLElement && outerHTMLElement.getBoundingClientRect();
-        const boxHeight = BoxCordinates && BoxCordinates.height;
+        var _querySelector_getBoundingClientRect_height;
+        const boxHeight = (_querySelector_getBoundingClientRect_height = (_querySelector = (container !== null && container !== void 0 ? container : document).querySelector(`.${CARTESIAN_XAXIS_CLASSNAME} tspan`)) === null || _querySelector === void 0 ? void 0 : _querySelector.getBoundingClientRect().height) !== null && _querySelector_getBoundingClientRect_height !== void 0 ? _querySelector_getBoundingClientRect_height : 0;
         if (boxHeight > maxHeight) {
             maxHeight = boxHeight;
         }
@@ -1006,24 +1023,18 @@ function createYAxisLabels(node, yAxis, noOfCharsToTruncate, truncateLabel, isRt
     if (node === null) {
         return;
     }
-    let tickIndex = 0;
     const axisNode = (0, _d3selection.select)(node).call(yAxis);
     axisNode.selectAll('.tick text').each(function() {
         const text = (0, _d3selection.select)(this);
         const totalWord = text.text();
         const truncatedWord = isRtl ? `...${text.text().slice(0, noOfCharsToTruncate)}` : `${text.text().slice(0, noOfCharsToTruncate)}...`;
         const totalWordLength = text.text().length;
-        const padding = 0; // ems
         const y = text.attr('y');
         const x = text.attr('x');
         const dy = parseFloat(text.attr('dy'));
-        const dx = 0;
-        const uid = tickIndex++;
-        text.text(null).append('tspan').attr('x', x).attr('y', y).attr('id', `BaseSpan-${uid}`).attr('dy', dy + 'em').attr('data-', totalWord);
-        if (truncateLabel && totalWordLength > noOfCharsToTruncate) {
-            text.append('tspan').attr('id', `showDots-${uid}`).attr('x', x).attr('y', y).attr('dy', dy + 'em').attr('dx', padding + dx + 'em').text(truncatedWord);
-        } else {
-            text.append('tspan').attr('id', `LessLength-${uid}`).attr('x', x).attr('y', y).attr('dx', padding + dx + 'em').text(totalWord);
+        const tspan = text.text(null).attr('data-full', totalWord).append('tspan').attr('x', x).attr('y', y).attr('dy', dy + 'em');
+        if (truncateLabel) {
+            tspan.text(totalWordLength > noOfCharsToTruncate ? truncatedWord : totalWord);
         }
     });
 }
@@ -1065,30 +1076,30 @@ const calculateLongestLabelWidth = (labels, query = 'none')=>{
     return maxLabelWidth;
 };
 function tooltipOfAxislabels(axistooltipProps) {
-    const { tooltipCls, axis, id } = axistooltipProps;
+    const { tooltipCls, axis, id, container } = axistooltipProps;
     if (axis === null) {
         return null;
     }
-    const div = (0, _d3selection.select)('body').append('div').attr('id', id).attr('class', tooltipCls).style('opacity', 0);
-    const aa = axis.selectAll('[id^="BaseSpan-"]')._groups[0];
-    const baseSpanLength = aa && Object.keys(aa).length;
-    const originalDataArray = [];
-    for(let i = 0; i < baseSpanLength; i++){
-        const originalData = aa[i].dataset && Object.values(aa[i].dataset)[0];
-        originalDataArray.push(originalData);
-    }
-    const tickObject = axis.selectAll('.tick')._groups[0];
-    const tickObjectLength = tickObject && Object.keys(tickObject).length;
-    for(let i = 0; i < tickObjectLength; i++){
-        const d1 = tickObject[i];
-        (0, _d3selection.select)(d1) // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const div = (container ? (0, _d3selection.select)(container) : (0, _d3selection.select)('body')).append('div').attr('id', id).attr('class', tooltipCls).style('opacity', 0);
+    axis.selectAll('.tick text').each(function() {
+        const tickSelection = (0, _d3selection.select)(this);
+        const fullLabel = tickSelection.attr('data-full');
+        if (tickSelection.text() === fullLabel) {
+            return;
+        }
+        const tickEl = this;
+        tickSelection // eslint-disable-next-line @typescript-eslint/no-explicit-any
         .on('mouseover', (event, d)=>{
-            div.style('opacity', 0.9);
-            div.html(originalDataArray[i]).style('left', event.pageX + 'px').style('top', event.pageY - 28 + 'px');
+            const containerBounds = container === null || container === void 0 ? void 0 : container.getBoundingClientRect();
+            const tickBounds = tickEl.getBoundingClientRect();
+            const tooltipBottom = containerBounds ? containerBounds.bottom - (tickBounds.top - 4) : tickBounds.top - 4;
+            var _containerBounds_left;
+            const tooltipLeft = (tickBounds.left + tickBounds.right) / 2 - ((_containerBounds_left = containerBounds === null || containerBounds === void 0 ? void 0 : containerBounds.left) !== null && _containerBounds_left !== void 0 ? _containerBounds_left : 0);
+            div.text(fullLabel).style('bottom', `${tooltipBottom}px`).style('left', `${tooltipLeft}px`).style('transform', 'translateX(-50%)').style('opacity', 0.9);
         }).on('mouseout', (d)=>{
             div.style('opacity', 0);
         });
-    }
+    });
 }
 function getXAxisType(points) {
     let isXAxisDateType = false;
@@ -1513,8 +1524,8 @@ function areArraysEqual(arr1, arr2) {
     return true;
 }
 const cssVarRegExp = /var\((--[a-zA-Z0-9\-]+)\)/g;
-function resolveCSSVariables(chartContainer, styleRules) {
-    const containerStyles = getComputedStyle(chartContainer);
+function resolveCSSVariables(container, styleRules) {
+    const containerStyles = getComputedStyle(container);
     return styleRules.replace(cssVarRegExp, (match, group1)=>{
         return containerStyles.getPropertyValue(group1);
     });
@@ -1614,11 +1625,6 @@ function copyStyle(properties, fromEl, toEl) {
         });
     }
 }
-let measurementSpanCounter = 0;
-function getUniqueMeasurementSpanId() {
-    measurementSpanCounter++;
-    return `measurement_span_${measurementSpanCounter}`;
-}
 const MEASUREMENT_SPAN_STYLE = {
     position: 'absolute',
     visibility: 'hidden',
@@ -1629,23 +1635,60 @@ const MEASUREMENT_SPAN_STYLE = {
     border: 'none',
     whiteSpace: 'pre'
 };
-const createMeasurementSpan = (text, className, parentElement)=>{
-    const MEASUREMENT_SPAN_ID = getUniqueMeasurementSpanId();
+const MEASUREMENT_SPAN_ID = 'fui_measurement_span';
+const TEXT_STYLE_PROPERTIES = [
+    'font-size',
+    'font-family',
+    'font-weight',
+    'font-style',
+    'letter-spacing',
+    'text-transform'
+];
+const measureTextWithDOM = (text, cssSelector, container)=>{
     let measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
     if (!measurementSpan) {
         measurementSpan = document.createElement('span');
         measurementSpan.setAttribute('id', MEASUREMENT_SPAN_ID);
         measurementSpan.setAttribute('aria-hidden', 'true');
-        if (parentElement) {
-            parentElement.appendChild(measurementSpan);
-        } else {
-            document.body.appendChild(measurementSpan);
-        }
+        (container !== null && container !== void 0 ? container : document.body).appendChild(measurementSpan);
     }
-    measurementSpan.setAttribute('class', className);
     Object.assign(measurementSpan.style, MEASUREMENT_SPAN_STYLE);
+    const refEl = (container !== null && container !== void 0 ? container : document).querySelector(cssSelector);
+    if (refEl) {
+        copyStyle(TEXT_STYLE_PROPERTIES, refEl, measurementSpan);
+    }
     measurementSpan.textContent = `${text}`;
-    return measurementSpan;
+    const rect = measurementSpan.getBoundingClientRect();
+    return {
+        node: measurementSpan,
+        width: rect.width,
+        height: rect.height
+    };
+};
+const CACHE_SIZE = 2000;
+const textSizeCache = new Map();
+const getTextSize = (text, cssSelector, container)=>{
+    const cacheKey = `${text}|${cssSelector}`;
+    const cachedResult = textSizeCache.get(cacheKey);
+    if (cachedResult) {
+        return cachedResult;
+    }
+    const { width, height } = measureTextWithDOM(text, cssSelector, container);
+    // TODO: Improve cache eviction strategy if needed (e.g., LRU)
+    if (textSizeCache.size >= CACHE_SIZE) {
+        const firstKey = textSizeCache.keys().next().value;
+        if (!(0, _chartutilities.isInvalidValue)(firstKey)) {
+            textSizeCache.delete(firstKey);
+        }
+    }
+    textSizeCache.set(cacheKey, {
+        width,
+        height
+    });
+    return {
+        width,
+        height
+    };
 };
 function isScatterPolarSeries(points) {
     return points.some((item)=>{
@@ -1842,3 +1885,102 @@ const findCalloutPoints = (calloutPointsByX, x)=>{
         values: calloutPointsByX[key]
     };
 };
+const autoLayoutXAxisLabels = (tickValues, tickLabels, scale, axisNode, containerWidth, container)=>{
+    let requiresWrap = false;
+    let requiresTruncate = false;
+    const maxWidths = [];
+    const [rangeStart, rangeEnd] = scale.range();
+    const isRTL = rangeEnd - rangeStart < 0;
+    const start = isRTL ? containerWidth : 0;
+    const end = isRTL ? 0 : containerWidth;
+    const getTickPosition = (index)=>{
+        var _scale;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return ((_scale = scale(tickValues[index])) !== null && _scale !== void 0 ? _scale : 0) + ('bandwidth' in scale ? scale.bandwidth() / 2 : 0);
+    };
+    const getLabelWidth = (text)=>{
+        return getTextSize(text, CARTESIAN_XAXIS_TEXT_SELECTOR, container).width;
+    };
+    for(let i = 0; i < tickValues.length; i++){
+        const position = getTickPosition(i);
+        const leftSpace = Math.abs(i > 0 ? (position - getTickPosition(i - 1)) / 2 : position - start);
+        const rightSpace = Math.abs(i + 1 < tickValues.length ? (getTickPosition(i + 1) - position) / 2 : end - position);
+        const maxAvailableWidth = Math.min(leftSpace, rightSpace) * 2 - 8; // 4px padding on both sides
+        const label = tickLabels[i];
+        const labelWidth = getLabelWidth(label);
+        maxWidths.push(maxAvailableWidth);
+        if (labelWidth > maxAvailableWidth) {
+            const longestWordWidth = Math.max(...label.split(/\s+/).map((word)=>getLabelWidth(word)));
+            if (longestWordWidth <= maxAvailableWidth) {
+                requiresWrap = true;
+            } else {
+                requiresTruncate = true;
+            }
+        }
+    }
+    if (requiresTruncate) {
+        return truncateAndStaggerXAxisLabels(tickValues, tickLabels, scale, axisNode, containerWidth, container);
+    }
+    if (requiresWrap) {
+        var _createWrapOfXLabels;
+        return (_createWrapOfXLabels = createWrapOfXLabels({
+            node: axisNode,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            xAxis: scale,
+            noOfCharsToTruncate: 100,
+            showXAxisLablesTooltip: false,
+            width: maxWidths,
+            container
+        })) !== null && _createWrapOfXLabels !== void 0 ? _createWrapOfXLabels : 0;
+    }
+    return 0;
+};
+const truncateAndStaggerXAxisLabels = (tickValues, tickLabels, scale, axisNode, containerWidth, container)=>{
+    if (!axisNode) {
+        return 0;
+    }
+    let maxHeight = 12;
+    const [rangeStart, rangeEnd] = scale.range();
+    const isRTL = rangeEnd - rangeStart < 0;
+    const start = isRTL ? containerWidth : 0;
+    const end = isRTL ? 0 : containerWidth;
+    const getTickPosition = (index)=>{
+        var _scale;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return ((_scale = scale(tickValues[index])) !== null && _scale !== void 0 ? _scale : 0) + ('bandwidth' in scale ? scale.bandwidth() / 2 : 0);
+    };
+    const getLabelSize = (text)=>{
+        return getTextSize(text, CARTESIAN_XAXIS_TEXT_SELECTOR, container);
+    };
+    (0, _d3selection.select)(axisNode).selectAll('.tick text').each(function(_, i) {
+        const position = getTickPosition(i);
+        const leftSpace = Math.abs(i > 0 ? position - getTickPosition(i - 1) : position - start);
+        const rightSpace = Math.abs(i + 1 < tickValues.length ? getTickPosition(i + 1) - position : end - position);
+        const maxAvailableWidth = Math.min(leftSpace, rightSpace) * 2 - 8; // 4px padding on both sides
+        const label = tickLabels[i];
+        const textNode = (0, _d3selection.select)(this).text(null).attr('data-full', label);
+        const lineHeight = 1.1; // ems
+        const y = textNode.attr('y');
+        const dy = parseFloat(textNode.attr('dy'));
+        textNode.append('tspan').attr('x', 0).attr('y', y).attr('dy', (i % 2 === 1 ? lineHeight : 0) + dy + 'em').text(truncateTextToFitWidth(label, maxAvailableWidth, (s)=>getLabelSize(s).width));
+        maxHeight = Math.max(maxHeight, getLabelSize(label).height);
+    });
+    return tickValues.length > 1 ? maxHeight : 0;
+};
+const truncateTextToFitWidth = (text, maxWidth, measure)=>{
+    if (measure(text) <= maxWidth) {
+        return text;
+    }
+    let lo = 1;
+    let hi = text.length;
+    while(lo < hi){
+        const mid = Math.floor((lo + hi + 1) / 2);
+        const candidate = text.slice(0, mid) + '...';
+        if (measure(candidate) <= maxWidth) {
+            lo = mid;
+        } else {
+            hi = mid - 1;
+        }
+    }
+    return text.slice(0, lo) + '...';
+};