@fluentui/react-charting 5.25.5 → 5.25.7

package/lib-amd/utilities/utilities.js

@@ -2,7 +2,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
     "use strict";
     var _a;
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.findCalloutPoints = exports.generateMonthlyTicks = exports.generateLinearTicks = exports.getRangeForScatterMarkerSize = exports.getScatterXDomainExtent = exports.isPlottable = exports.isValidDomainValue = exports.getDomainPaddingForMarkers = exports.getInvertedTextColor = exports.sortAxisCategories = exports.truncateString = exports.createMeasurementSpan = exports.isScalePaddingDefined = exports.getScalePadding = exports.getBarWidth = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.calculateLongestLabelWidth = exports.wrapContent = exports.DEFAULT_WRAP_WIDTH = exports.createStringYAxis = exports.createStringYAxisForHorizontalBarChartWithAxis = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = exports.DEFAULT_DATE_STRING = exports.MIN_DONUT_RADIUS = exports.MIN_DOMAIN_MARGIN = void 0;
+    exports.autoLayoutXAxisLabels = exports.findCalloutPoints = exports.generateDateTicks = exports.generateNumericTicks = exports.generateMonthlyTicks = exports.generateLinearTicks = exports.getRangeForScatterMarkerSize = exports.getScatterXDomainExtent = exports.isPlottable = exports.isValidDomainValue = exports.getDomainPaddingForMarkers = exports.getInvertedTextColor = exports.sortAxisCategories = exports.truncateString = exports.getTextSize = exports.measureTextWithDOM = exports.isScalePaddingDefined = exports.getScalePadding = exports.getBarWidth = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.calculateLongestLabelWidth = exports.wrapContent = exports.DEFAULT_WRAP_WIDTH = exports.createStringYAxis = exports.createStringYAxisForHorizontalBarChartWithAxis = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = exports.CARTESIAN_XAXIS_CLASSNAME = exports.DEFAULT_DATE_STRING = exports.MIN_DONUT_RADIUS = exports.MIN_DOMAIN_MARGIN = void 0;
     exports.defaultYAxisTickFormatter = defaultYAxisTickFormatter;
     exports.createNumericXAxis = createNumericXAxis;
     exports.getDateFormatLevel = getDateFormatLevel;
@@ -44,6 +44,8 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
     exports.MIN_DOMAIN_MARGIN = 8;
     exports.MIN_DONUT_RADIUS = 1;
     exports.DEFAULT_DATE_STRING = '2000-01-01';
+    exports.CARTESIAN_XAXIS_CLASSNAME = 'fui-cart__xAxis';
+    var CARTESIAN_XAXIS_TEXT_SELECTOR = ".".concat(exports.CARTESIAN_XAXIS_CLASSNAME, " text");
     var ChartTypes;
     (function (ChartTypes) {
         ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
@@ -121,7 +123,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
             var xAxisValue = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
             return (defaultFormat === null || defaultFormat === void 0 ? void 0 : defaultFormat(xAxisValue)) === '' ? '' : (0, chart_utilities_1.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);
@@ -139,7 +141,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
             customTickValues = tickParams.tickValues;
         }
         else if (tickStep) {
-            customTickValues = generateNumericTicks(scaleType, tickStep, tick0, xAxisScale.domain());
+            customTickValues = (0, exports.generateNumericTicks)(scaleType, tickStep, tick0, xAxisScale.domain());
         }
         if (customTickValues) {
             xAxis.tickValues(customTickValues);
@@ -147,8 +149,8 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         if (xAxisElement) {
             (0, d3_selection_1.select)(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.
@@ -253,7 +255,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      * @param {ITickParams} tickParams
      */
     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 ? (0, d3_scale_1.scaleUtc)() : (0, d3_scale_1.scaleTime)();
         xAxisScale
             .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
@@ -294,10 +296,11 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
             }
             return (0, chart_utilities_1.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 = (0, d3_axis_1.axisBottom)(xAxisScale)
             .tickSize(xAxistickSize)
             .tickPadding(tickPadding)
@@ -311,7 +314,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
             customTickValues = tickParams.tickValues;
         }
         else if (tickStep) {
-            customTickValues = generateDateTicks(tickStep, tick0, xAxisScale.domain(), useUTC);
+            customTickValues = (0, exports.generateDateTicks)(tickStep, tick0, xAxisScale.domain(), useUTC);
         }
         if (customTickValues) {
             xAxis.tickValues(customTickValues);
@@ -319,8 +322,8 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         if (xAxisElement) {
             (0, d3_selection_1.select)(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
@@ -382,7 +385,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         if (xAxisParams.xAxisElement) {
             (0, d3_selection_1.select)(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
@@ -476,7 +479,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
             customTickValues = tickValues;
         }
         else if (tickStep) {
-            customTickValues = generateNumericTicks(undefined, tickStep, tick0, yAxisScale.domain());
+            customTickValues = (0, exports.generateNumericTicks)(undefined, tickStep, tick0, yAxisScale.domain());
         }
         if (customTickValues) {
             yAxis.tickValues(customTickValues);
@@ -523,7 +526,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
             customTickValues = tickValues;
         }
         else if (tickStep) {
-            customTickValues = generateNumericTicks(scaleType, tickStep, tick0, yAxisScale.domain());
+            customTickValues = (0, exports.generateNumericTicks)(scaleType, tickStep, tick0, yAxisScale.domain());
         }
         if (customTickValues) {
             yAxis.tickValues(customTickValues);
@@ -708,14 +711,15 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      * @returns
      */
     function createWrapOfXLabels(wrapLabelProps) {
-        var node = wrapLabelProps.node, xAxis = wrapLabelProps.xAxis, noOfCharsToTruncate = wrapLabelProps.noOfCharsToTruncate, showXAxisLablesTooltip = wrapLabelProps.showXAxisLablesTooltip, _a = wrapLabelProps.width, width = _a === void 0 ? exports.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 ? exports.DEFAULT_WRAP_WIDTH : _c, container = wrapLabelProps.container;
         if (node === null) {
             return;
         }
         var axisNode = (0, d3_selection_1.select)(node).call(xAxis);
         var removeVal = 0;
         var maxLines = 1;
-        axisNode.selectAll('.tick text').each(function () {
+        axisNode.selectAll('.tick text').each(function (_, tickIndex) {
             var text = (0, d3_selection_1.select)(this);
             var totalWord = text.text();
             var truncatedWord = "".concat(text.text().slice(0, noOfCharsToTruncate), "...");
@@ -729,41 +733,27 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
             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 = (0, exports.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')
@@ -775,10 +765,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         });
         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(exports.CARTESIAN_XAXIS_CLASSNAME, " tspan"))) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) !== null && _b !== void 0 ? _b : 0;
             if (boxHeight > maxHeight) {
                 maxHeight = boxHeight;
             }
@@ -803,53 +790,35 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
                 ? "...".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);
             }
         });
     }
     var wrapContent = function (content, id, maxWidth) {
         var textElement = (0, d3_selection_1.select)("#".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;
     };
@@ -888,38 +857,41 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     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 = (0, d3_selection_1.select)('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];
-            (0, d3_selection_1.select)(d1)
+        var div = (container ? (0, d3_selection_1.select)(container) : (0, d3_selection_1.select)('body'))
+            .append('div')
+            .attr('id', id)
+            .attr('class', tooltipCls)
+            .style('opacity', 0);
+        axis.selectAll('.tick text').each(function () {
+            var tickSelection = (0, d3_selection_1.select)(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
@@ -1411,8 +1383,8 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         return true;
     }
     var cssVarRegExp = /var\((--[a-zA-Z0-9\-]+)\)/g;
-    function resolveCSSVariables(chartContainer, styleRules) {
-        var containerStyles = getComputedStyle(chartContainer);
+    function resolveCSSVariables(container, styleRules) {
+        var containerStyles = getComputedStyle(container);
         return styleRules.replace(cssVarRegExp, function (match, group1) {
             return containerStyles.getPropertyValue(group1);
         });
@@ -1441,26 +1413,53 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         border: 'none',
         whiteSpace: 'pre',
     };
-    var MEASUREMENT_SPAN_ID = (0, react_1.getId)('measurement_span_');
-    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',
+    ];
+    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 };
+    };
+    exports.measureTextWithDOM = measureTextWithDOM;
+    var CACHE_SIZE = 2000;
+    var textSizeCache = new Map();
+    var getTextSize = function (text, cssSelector, container) {
+        var cacheKey = "".concat(text, "|").concat(cssSelector);
+        var cachedResult = textSizeCache.get(cacheKey);
+        if (cachedResult) {
+            return cachedResult;
+        }
+        var _a = (0, exports.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 (!(0, chart_utilities_1.isInvalidValue)(firstKey)) {
+                textSizeCache.delete(firstKey);
+            }
+        }
+        textSizeCache.set(cacheKey, { width: width, height: height });
+        return { width: width, height: height };
     };
-    exports.createMeasurementSpan = createMeasurementSpan;
+    exports.getTextSize = getTextSize;
     function getCurveFactory(curve, defaultFactory) {
         if (defaultFactory === void 0) { defaultFactory = d3_shape_1.curveLinear; }
         if (typeof curve === 'function') {
@@ -1732,6 +1731,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
             return (0, exports.generateLinearTicks)(refTick, tickStep, scaleDomain);
         }
     };
+    exports.generateNumericTicks = generateNumericTicks;
     var generateDateTicks = function (tickStep, tick0, scaleDomain, useUTC) {
         var refTick = tick0 instanceof Date ? tick0 : new Date(exports.DEFAULT_DATE_STRING);
         if (typeof tickStep === 'number' && tickStep > 0) {
@@ -1745,6 +1745,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
             }
         }
     };
+    exports.generateDateTicks = generateDateTicks;
     var findCalloutPoints = function (calloutPointsByX, x) {
         if (x === null) {
             return undefined;
@@ -1759,5 +1760,114 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         };
     };
     exports.findCalloutPoints = findCalloutPoints;
+    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 (0, exports.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;
+    };
+    exports.autoLayoutXAxisLabels = autoLayoutXAxisLabels;
+    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 (0, exports.getTextSize)(text, CARTESIAN_XAXIS_TEXT_SELECTOR, container);
+        };
+        (0, d3_selection_1.select)(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 = (0, d3_selection_1.select)(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