@fluentui/react-charting 5.25.5 → 5.25.6

package/lib/utilities/utilities.js

@@ -8,13 +8,15 @@ import { format as d3Format } from 'd3-format';
 import { timeFormat as d3TimeFormat, timeFormatLocale as d3TimeFormatLocale, utcFormat as d3UtcFormat, } from 'd3-time-format';
 import { timeSecond as d3TimeSecond, timeMinute as d3TimeMinute, timeHour as d3TimeHour, timeDay as d3TimeDay, timeMonth as d3TimeMonth, timeWeek as d3TimeWeek, timeYear as d3TimeYear, utcSecond as d3UtcSecond, utcMinute as d3UtcMinute, utcHour as d3UtcHour, utcDay as d3UtcDay, utcMonth as d3UtcMonth, utcWeek as d3UtcWeek, utcYear as d3UtcYear, } from 'd3-time';
 import { formatPrefix as d3FormatPrefix } from 'd3-format';
-import { calculatePrecision, getId, precisionRound } from '@fluentui/react';
+import { calculatePrecision, precisionRound } from '@fluentui/react';
 import { curveLinear as d3CurveLinear, curveNatural as d3CurveNatural, curveStep as d3CurveStep, curveStepAfter as d3CurveStepAfter, curveStepBefore as d3CurveStepBefore, } from 'd3-shape';
 import { formatDateToLocaleString, formatToLocaleString, getMultiLevelDateTimeFormatOptions, handleFloatingPointPrecisionError, isInvalidValue, isNumber, } from '@fluentui/chart-utilities';
 import { getColorContrast } from './colors';
 export var MIN_DOMAIN_MARGIN = 8;
 export var MIN_DONUT_RADIUS = 1;
 export var DEFAULT_DATE_STRING = '2000-01-01';
+export var CARTESIAN_XAXIS_CLASSNAME = 'fui-cart__xAxis';
+var CARTESIAN_XAXIS_TEXT_SELECTOR = ".".concat(CARTESIAN_XAXIS_CLASSNAME, " text");
 export var ChartTypes;
 (function (ChartTypes) {
     ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
@@ -92,7 +94,7 @@ export function createNumericXAxis(xAxisParams, tickParams, chartType, culture,
         var xAxisValue = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
         return (defaultFormat === null || defaultFormat === void 0 ? void 0 : defaultFormat(xAxisValue)) === '' ? '' : formatToLocaleString(xAxisValue, culture);
     };
-    if (hideTickOverlap && typeof xAxisCount === 'undefined') {
+    if (hideTickOverlap) {
         var longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map(function (v, i) { return tickFormat(v, i); })) + 20;
         var _d = xAxisScale.range(), start = _d[0], end = _d[1];
         tickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
@@ -118,8 +120,8 @@ export function createNumericXAxis(xAxisParams, tickParams, chartType, culture,
     if (xAxisElement) {
         d3Select(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
     }
-    var tickValues = (customTickValues !== null && customTickValues !== void 0 ? customTickValues : xAxisScale.ticks(tickCount)).map(xAxis.tickFormat());
-    return { xScale: xAxisScale, tickValues: tickValues };
+    var tickValues = customTickValues !== null && customTickValues !== void 0 ? customTickValues : xAxisScale.ticks(tickCount);
+    return { xScale: xAxisScale, tickValues: tickValues, tickLabels: tickValues.map(xAxis.tickFormat()) };
 }
 /**
  * This function returns a multilevel formatter for a given date range.
@@ -224,7 +226,7 @@ function isPowerOf10(num) {
  * @param {ITickParams} tickParams
  */
 export function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLocale, customDateTimeFormatter, useUTC, chartType) {
-    var domainNRangeValues = xAxisParams.domainNRangeValues, xAxisElement = xAxisParams.xAxisElement, _a = xAxisParams.tickPadding, tickPadding = _a === void 0 ? 6 : _a, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, xAxisCount = xAxisParams.xAxisCount, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth, tickStep = xAxisParams.tickStep, tick0 = xAxisParams.tick0, tickText = xAxisParams.tickText;
+    var domainNRangeValues = xAxisParams.domainNRangeValues, xAxisElement = xAxisParams.xAxisElement, _a = xAxisParams.tickPadding, tickPadding = _a === void 0 ? 6 : _a, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, xAxisCount = xAxisParams.xAxisCount, hideTickOverlap = xAxisParams.hideTickOverlap, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth, tickStep = xAxisParams.tickStep, tick0 = xAxisParams.tick0, tickText = xAxisParams.tickText;
     var xAxisScale = useUTC ? d3ScaleUtc() : d3ScaleTime();
     xAxisScale
         .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
@@ -265,10 +267,11 @@ export function createDateXAxis(xAxisParams, tickParams, culture, options, timeF
         }
         return formatDateToLocaleString(domainValue, culture, useUTC, false, formatOptions);
     };
-    var longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map(tickFormat)) + 40;
-    var _c = xAxisScale.range(), start = _c[0], end = _c[1];
-    var 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) {
+        var longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map(tickFormat)) + 40;
+        var _c = xAxisScale.range(), start = _c[0], end = _c[1];
+        tickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
+    }
     var xAxis = d3AxisBottom(xAxisScale)
         .tickSize(xAxistickSize)
         .tickPadding(tickPadding)
@@ -290,8 +293,8 @@ export function createDateXAxis(xAxisParams, tickParams, culture, options, timeF
     if (xAxisElement) {
         d3Select(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
     }
-    var tickValues = (customTickValues !== null && customTickValues !== void 0 ? customTickValues : xAxisScale.ticks(tickCount)).map(xAxis.tickFormat());
-    return { xScale: xAxisScale, tickValues: tickValues };
+    var tickValues = customTickValues !== null && customTickValues !== void 0 ? customTickValues : xAxisScale.ticks(tickCount);
+    return { xScale: xAxisScale, tickValues: tickValues, tickLabels: tickValues.map(xAxis.tickFormat()) };
 }
 /**
  * Create String X axis
@@ -353,7 +356,7 @@ export function createStringXAxis(xAxisParams, tickParams, dataset, culture) {
     if (xAxisParams.xAxisElement) {
         d3Select(xAxisParams.xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
     }
-    return { xScale: xAxisScale, tickValues: tickValues };
+    return { xScale: xAxisScale, tickValues: tickValues, tickLabels: tickValues.map(xAxis.tickFormat()) };
 }
 /**
  * This method is used to calculate the rounded tick values for the y-axis
@@ -677,14 +680,15 @@ export var DEFAULT_WRAP_WIDTH = 10;
  * @returns
  */
 export function createWrapOfXLabels(wrapLabelProps) {
-    var node = wrapLabelProps.node, xAxis = wrapLabelProps.xAxis, noOfCharsToTruncate = wrapLabelProps.noOfCharsToTruncate, showXAxisLablesTooltip = wrapLabelProps.showXAxisLablesTooltip, _a = wrapLabelProps.width, width = _a === void 0 ? DEFAULT_WRAP_WIDTH : _a;
+    var _a, _b;
+    var node = wrapLabelProps.node, xAxis = wrapLabelProps.xAxis, noOfCharsToTruncate = wrapLabelProps.noOfCharsToTruncate, showXAxisLablesTooltip = wrapLabelProps.showXAxisLablesTooltip, _c = wrapLabelProps.width, width = _c === void 0 ? DEFAULT_WRAP_WIDTH : _c, container = wrapLabelProps.container;
     if (node === null) {
         return;
     }
     var axisNode = d3Select(node).call(xAxis);
     var removeVal = 0;
     var maxLines = 1;
-    axisNode.selectAll('.tick text').each(function () {
+    axisNode.selectAll('.tick text').each(function (_, tickIndex) {
         var text = d3Select(this);
         var totalWord = text.text();
         var truncatedWord = "".concat(text.text().slice(0, noOfCharsToTruncate), "...");
@@ -698,41 +702,27 @@ export function createWrapOfXLabels(wrapLabelProps) {
         var dy = parseFloat(text.attr('dy'));
         var tspan = text
             .text(null)
+            .attr('data-full', totalWord)
             .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);
+            .attr('dy', dy + 'em');
+        if (showXAxisLablesTooltip) {
+            tspan.text(totalWordLength > noOfCharsToTruncate ? truncatedWord : totalWord);
         }
         else {
+            var 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) {
+                var label = line.join(' ');
+                tspan.text(label);
+                var 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')
@@ -744,10 +734,7 @@ export function createWrapOfXLabels(wrapLabelProps) {
     });
     if (!showXAxisLablesTooltip) {
         var maxHeight = 12; // intial value to render corretly first time
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var outerHTMLElement = document.getElementById('WordBreakId');
-        var BoxCordinates = outerHTMLElement && outerHTMLElement.getBoundingClientRect();
-        var boxHeight = BoxCordinates && BoxCordinates.height;
+        var boxHeight = (_b = (_a = (container !== null && container !== void 0 ? container : document).querySelector(".".concat(CARTESIAN_XAXIS_CLASSNAME, " tspan"))) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) !== null && _b !== void 0 ? _b : 0;
         if (boxHeight > maxHeight) {
             maxHeight = boxHeight;
         }
@@ -772,53 +759,35 @@ yAxis, noOfCharsToTruncate, truncateLabel, isRtl) {
             ? "...".concat(text.text().slice(0, noOfCharsToTruncate))
             : "".concat(text.text().slice(0, noOfCharsToTruncate), "...");
         var totalWordLength = text.text().length;
-        var padding = 0; // ems
         var y = text.attr('y');
         var x = text.attr('x');
         var dy = parseFloat(text.attr('dy'));
-        var dx = 0;
-        text
+        var tspan = text
             .text(null)
+            .attr('data-full', totalWord)
             .append('tspan')
             .attr('x', x)
             .attr('y', y)
-            .attr('id', 'BaseSpan')
-            .attr('dy', dy + 'em')
-            .attr('data-', totalWord);
-        if (truncateLabel && totalWordLength > noOfCharsToTruncate) {
-            text
-                .append('tspan')
-                .attr('id', 'showDots')
-                .attr('x', x)
-                .attr('y', y)
-                .attr('dy', dy + 'em')
-                .attr('dx', padding + dx + 'em')
-                .text(truncatedWord);
-        }
-        else {
-            text
-                .append('tspan')
-                .attr('id', 'LessLength')
-                .attr('x', x)
-                .attr('y', y)
-                .attr('dx', padding + dx + 'em')
-                .text(totalWord);
+            .attr('dy', dy + 'em');
+        if (truncateLabel) {
+            tspan.text(totalWordLength > noOfCharsToTruncate ? truncatedWord : totalWord);
         }
     });
 }
 export var wrapContent = function (content, id, maxWidth) {
     var textElement = d3Select("#".concat(id));
     textElement.text(content);
-    if (!textElement.node()) {
+    var node = textElement.node();
+    if (!node || typeof node.getComputedTextLength !== 'function') {
         return false;
     }
     var isOverflowing = false;
-    var textLength = textElement.node().getComputedTextLength();
+    var textLength = node.getComputedTextLength();
     while (textLength > maxWidth && content.length > 0) {
         content = content.slice(0, -1);
         textElement.text(content + '...');
         isOverflowing = true;
-        textLength = textElement.node().getComputedTextLength();
+        textLength = node.getComputedTextLength();
     }
     return isOverflowing;
 };
@@ -855,38 +824,41 @@ export var calculateLongestLabelWidth = function (labels, query) {
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function tooltipOfAxislabels(axistooltipProps) {
-    var tooltipCls = axistooltipProps.tooltipCls, axis = axistooltipProps.axis, id = axistooltipProps.id;
+    var tooltipCls = axistooltipProps.tooltipCls, axis = axistooltipProps.axis, id = axistooltipProps.id, container = axistooltipProps.container;
     if (axis === null) {
         return null;
     }
-    var div = d3Select('body').append('div').attr('id', id).attr('class', tooltipCls).style('opacity', 0);
-    var aa = axis.selectAll('#BaseSpan')._groups[0];
-    var baseSpanLength = aa && Object.keys(aa).length;
-    var originalDataArray = [];
-    for (var i = 0; i < baseSpanLength; i++) {
-        var originalData = aa[i].dataset && Object.values(aa[i].dataset)[0];
-        originalDataArray.push(originalData);
-    }
-    var tickObject = axis.selectAll('.tick')._groups[0];
-    var tickObjectLength = tickObject && Object.keys(tickObject).length;
-    var _loop_1 = function (i) {
-        var d1 = tickObject[i];
-        d3Select(d1)
+    var div = (container ? d3Select(container) : d3Select('body'))
+        .append('div')
+        .attr('id', id)
+        .attr('class', tooltipCls)
+        .style('opacity', 0);
+    axis.selectAll('.tick text').each(function () {
+        var tickSelection = d3Select(this);
+        var fullLabel = tickSelection.attr('data-full');
+        if (tickSelection.text() === fullLabel) {
+            return;
+        }
+        var tickEl = this;
+        tickSelection
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             .on('mouseover', function (event, d) {
-            div.style('opacity', 0.9);
+            var _a;
+            var containerBounds = container === null || container === void 0 ? void 0 : container.getBoundingClientRect();
+            var tickBounds = tickEl.getBoundingClientRect();
+            var tooltipBottom = containerBounds ? containerBounds.bottom - (tickBounds.top - 4) : tickBounds.top - 4;
+            var tooltipLeft = (tickBounds.left + tickBounds.right) / 2 - ((_a = containerBounds === null || containerBounds === void 0 ? void 0 : containerBounds.left) !== null && _a !== void 0 ? _a : 0);
             div
-                .text(originalDataArray[i])
-                .style('left', event.pageX + 'px')
-                .style('top', event.pageY - 28 + 'px');
+                .text(fullLabel)
+                .style('bottom', "".concat(tooltipBottom, "px"))
+                .style('left', "".concat(tooltipLeft, "px"))
+                .style('transform', 'translateX(-50%)')
+                .style('opacity', 0.9);
         })
             .on('mouseout', function (d) {
             div.style('opacity', 0);
         });
-    };
-    for (var i = 0; i < tickObjectLength; i++) {
-        _loop_1(i);
-    }
+    });
 }
 /**
  * Find the axis type of line chart and area chart from given data
@@ -1373,8 +1345,8 @@ export function areArraysEqual(arr1, arr2) {
     return true;
 }
 var cssVarRegExp = /var\((--[a-zA-Z0-9\-]+)\)/g;
-export function resolveCSSVariables(chartContainer, styleRules) {
-    var containerStyles = getComputedStyle(chartContainer);
+export function resolveCSSVariables(container, styleRules) {
+    var containerStyles = getComputedStyle(container);
     return styleRules.replace(cssVarRegExp, function (match, group1) {
         return containerStyles.getPropertyValue(group1);
     });
@@ -1403,24 +1375,50 @@ var MEASUREMENT_SPAN_STYLE = {
     border: 'none',
     whiteSpace: 'pre',
 };
-var MEASUREMENT_SPAN_ID = getId('measurement_span_');
-export var createMeasurementSpan = function (text, className, parentElement) {
+var MEASUREMENT_SPAN_ID = 'fui_measurement_span';
+var TEXT_STYLE_PROPERTIES = [
+    'font-size',
+    'font-family',
+    'font-weight',
+    'font-style',
+    'letter-spacing',
+    'text-transform',
+];
+export var measureTextWithDOM = function (text, cssSelector, container) {
     var 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);
+    var refEl = (container !== null && container !== void 0 ? container : document).querySelector(cssSelector);
+    if (refEl) {
+        copyStyle(TEXT_STYLE_PROPERTIES, refEl, measurementSpan);
+    }
     measurementSpan.textContent = "".concat(text);
-    return measurementSpan;
+    var rect = measurementSpan.getBoundingClientRect();
+    return { node: measurementSpan, width: rect.width, height: rect.height };
+};
+var CACHE_SIZE = 2000;
+var textSizeCache = new Map();
+export var getTextSize = function (text, cssSelector, container) {
+    var cacheKey = "".concat(text, "|").concat(cssSelector);
+    var cachedResult = textSizeCache.get(cacheKey);
+    if (cachedResult) {
+        return cachedResult;
+    }
+    var _a = measureTextWithDOM(text, cssSelector, container), width = _a.width, height = _a.height;
+    // TODO: Improve cache eviction strategy if needed (e.g., LRU)
+    if (textSizeCache.size >= CACHE_SIZE) {
+        var firstKey = textSizeCache.keys().next().value;
+        if (!isInvalidValue(firstKey)) {
+            textSizeCache.delete(firstKey);
+        }
+    }
+    textSizeCache.set(cacheKey, { width: width, height: height });
+    return { width: width, height: height };
 };
 export function getCurveFactory(curve, defaultFactory) {
     if (defaultFactory === void 0) { defaultFactory = d3CurveLinear; }
@@ -1664,7 +1662,7 @@ export var generateMonthlyTicks = function (tick0, tickStepInMonths, scaleDomain
     }
     return ticks;
 };
-var generateNumericTicks = function (scaleType, tickStep, tick0, scaleDomain) {
+export var generateNumericTicks = function (scaleType, tickStep, tick0, scaleDomain) {
     var refTick = typeof tick0 === 'number' ? tick0 : 0;
     if (scaleType === 'log') {
         if (typeof tickStep === 'number' && tickStep > 0) {
@@ -1683,7 +1681,7 @@ var generateNumericTicks = function (scaleType, tickStep, tick0, scaleDomain) {
         return generateLinearTicks(refTick, tickStep, scaleDomain);
     }
 };
-var generateDateTicks = function (tickStep, tick0, scaleDomain, useUTC) {
+export var generateDateTicks = function (tickStep, tick0, scaleDomain, useUTC) {
     var refTick = tick0 instanceof Date ? tick0 : new Date(DEFAULT_DATE_STRING);
     if (typeof tickStep === 'number' && tickStep > 0) {
         return generateLinearTicks(+refTick, tickStep, scaleDomain.map(function (d) { return +d; })).map(function (t) { return new Date(t); });
@@ -1709,4 +1707,112 @@ export var findCalloutPoints = function (calloutPointsByX, x) {
         values: calloutPointsByX[key],
     };
 };
+export var autoLayoutXAxisLabels = function (tickValues, tickLabels, scale, axisNode, containerWidth, container) {
+    var _a;
+    var requiresWrap = false;
+    var requiresTruncate = false;
+    var maxWidths = [];
+    var _b = scale.range(), rangeStart = _b[0], rangeEnd = _b[1];
+    var isRTL = rangeEnd - rangeStart < 0;
+    var start = isRTL ? containerWidth : 0;
+    var end = isRTL ? 0 : containerWidth;
+    var getTickPosition = function (index) {
+        var _a;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return ((_a = scale(tickValues[index])) !== null && _a !== void 0 ? _a : 0) + ('bandwidth' in scale ? scale.bandwidth() / 2 : 0);
+    };
+    var getLabelWidth = function (text) {
+        return getTextSize(text, CARTESIAN_XAXIS_TEXT_SELECTOR, container).width;
+    };
+    for (var i = 0; i < tickValues.length; i++) {
+        var position = getTickPosition(i);
+        var leftSpace = Math.abs(i > 0 ? (position - getTickPosition(i - 1)) / 2 : position - start);
+        var rightSpace = Math.abs(i + 1 < tickValues.length ? (getTickPosition(i + 1) - position) / 2 : end - position);
+        var maxAvailableWidth = Math.min(leftSpace, rightSpace) * 2 - 8; // 4px padding on both sides
+        var label = tickLabels[i];
+        var labelWidth = getLabelWidth(label);
+        maxWidths.push(maxAvailableWidth);
+        if (labelWidth > maxAvailableWidth) {
+            var longestWordWidth = Math.max.apply(Math, label.split(/\s+/).map(function (word) { return getLabelWidth(word); }));
+            if (longestWordWidth <= maxAvailableWidth) {
+                requiresWrap = true;
+            }
+            else {
+                requiresTruncate = true;
+            }
+        }
+    }
+    if (requiresTruncate) {
+        return truncateAndStaggerXAxisLabels(tickValues, tickLabels, scale, axisNode, containerWidth, container);
+    }
+    if (requiresWrap) {
+        return ((_a = createWrapOfXLabels({
+            node: axisNode,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            xAxis: scale,
+            noOfCharsToTruncate: 100,
+            showXAxisLablesTooltip: false,
+            width: maxWidths,
+            container: container,
+        })) !== null && _a !== void 0 ? _a : 0);
+    }
+    return 0;
+};
+var truncateAndStaggerXAxisLabels = function (tickValues, tickLabels, scale, axisNode, containerWidth, container) {
+    if (!axisNode) {
+        return 0;
+    }
+    var maxHeight = 12;
+    var _a = scale.range(), rangeStart = _a[0], rangeEnd = _a[1];
+    var isRTL = rangeEnd - rangeStart < 0;
+    var start = isRTL ? containerWidth : 0;
+    var end = isRTL ? 0 : containerWidth;
+    var getTickPosition = function (index) {
+        var _a;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return ((_a = scale(tickValues[index])) !== null && _a !== void 0 ? _a : 0) + ('bandwidth' in scale ? scale.bandwidth() / 2 : 0);
+    };
+    var getLabelSize = function (text) {
+        return getTextSize(text, CARTESIAN_XAXIS_TEXT_SELECTOR, container);
+    };
+    d3Select(axisNode)
+        .selectAll('.tick text')
+        .each(function (_, i) {
+        var position = getTickPosition(i);
+        var leftSpace = Math.abs(i > 0 ? position - getTickPosition(i - 1) : position - start);
+        var rightSpace = Math.abs(i + 1 < tickValues.length ? getTickPosition(i + 1) - position : end - position);
+        var maxAvailableWidth = Math.min(leftSpace, rightSpace) * 2 - 8; // 4px padding on both sides
+        var label = tickLabels[i];
+        var textNode = d3Select(this).text(null).attr('data-full', label);
+        var lineHeight = 1.1; // ems
+        var y = textNode.attr('y');
+        var 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, function (s) { return getLabelSize(s).width; }));
+        maxHeight = Math.max(maxHeight, getLabelSize(label).height);
+    });
+    return tickValues.length > 1 ? maxHeight : 0;
+};
+var truncateTextToFitWidth = function (text, maxWidth, measure) {
+    if (measure(text) <= maxWidth) {
+        return text;
+    }
+    var lo = 1;
+    var hi = text.length;
+    while (lo < hi) {
+        var mid = Math.floor((lo + hi + 1) / 2);
+        var candidate = text.slice(0, mid) + '...';
+        if (measure(candidate) <= maxWidth) {
+            lo = mid;
+        }
+        else {
+            hi = mid - 1;
+        }
+    }
+    return text.slice(0, lo) + '...';
+};
 //# sourceMappingURL=utilities.js.map