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

package/lib/utilities/utilities.js

@@ -13,6 +13,8 @@ import { formatDateToLocaleString, formatToLocaleString, getMultiLevelDateTimeFo
 export const MIN_DOMAIN_MARGIN = 8;
 export const MIN_DONUT_RADIUS = 1;
 export const DEFAULT_DATE_STRING = '2000-01-01';
+export const CARTESIAN_XAXIS_CLASSNAME = 'fui-cart__xAxis';
+const CARTESIAN_XAXIS_TEXT_SELECTOR = `.${CARTESIAN_XAXIS_CLASSNAME} text`;
 export var ChartTypes = /*#__PURE__*/ function(ChartTypes) {
     ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
     ChartTypes[ChartTypes["LineChart"] = 1] = "LineChart";
@@ -90,7 +92,7 @@ function yAxisTickFormatterInternal(value, limitWidth = false) {
         const 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) {
         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);
@@ -114,10 +116,12 @@ function yAxisTickFormatterInternal(value, limitWidth = false) {
     if (xAxisElement) {
         d3Select(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
     };
 }
 /**
@@ -310,7 +314,7 @@ export function getDateFormatLevel(date, useUTC) {
  * @param {IXAxisParams} xAxisParams
  * @param {ITickParams} tickParams
  */ export 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 ? d3ScaleUtc() : d3ScaleTime();
     xAxisScale.domain([
@@ -354,10 +358,11 @@ export function getDateFormatLevel(date, useUTC) {
         }
         return 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 = d3AxisBottom(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).ticks(tickCount).tickFormat(tickFormat);
     if ([
         8
@@ -376,10 +381,12 @@ export function getDateFormatLevel(date, useUTC) {
     if (xAxisElement) {
         d3Select(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
     };
 }
 /**
@@ -436,7 +443,8 @@ export function getDateFormatLevel(date, useUTC) {
     }
     return {
         xScale: xAxisScale,
-        tickValues: tickValues.map(xAxis.tickFormat())
+        tickValues,
+        tickLabels: tickValues.map(xAxis.tickFormat())
     };
 }
 export function useRtl() {
@@ -774,14 +782,14 @@ export const DEFAULT_WRAP_WIDTH = 10;
  * @param {IWrapLabelProps} wrapLabelProps
  * @returns
  */ export 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 = d3Select(node).call(xAxis);
     let removeVal = 0;
     let maxLines = 1;
-    axisNode.selectAll('.tick text').each(function() {
+    axisNode.selectAll('.tick text').each(function(_, tickIndex) {
         const text = d3Select(this);
         const totalWord = text.text();
         const truncatedWord = `${text.text().slice(0, noOfCharsToTruncate)}...`;
@@ -793,33 +801,33 @@ export const DEFAULT_WRAP_WIDTH = 10;
         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;
         }
@@ -835,24 +843,18 @@ yAxis, noOfCharsToTruncate, truncateLabel, isRtl) {
     if (node === null) {
         return;
     }
-    let tickIndex = 0;
     const axisNode = d3Select(node).call(yAxis);
     axisNode.selectAll('.tick text').each(function() {
         const text = d3Select(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);
         }
     });
 }
@@ -901,30 +903,30 @@ export const wrapContent = (content, id, maxWidth)=>{
  * On hover of the truncated word(at x axis labels tick), a tooltip will be appeared.
  */ // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function tooltipOfAxislabels(axistooltipProps) {
-    const { tooltipCls, axis, id } = axistooltipProps;
+    const { tooltipCls, axis, id, container } = axistooltipProps;
     if (axis === null) {
         return null;
     }
-    const div = d3Select('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];
-        d3Select(d1)// eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const div = (container ? d3Select(container) : d3Select('body')).append('div').attr('id', id).attr('class', tooltipCls).style('opacity', 0);
+    axis.selectAll('.tick text').each(function() {
+        const tickSelection = d3Select(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);
         });
-    }
+    });
 }
 /**
  * Find the axis type of line chart and area chart from given data
@@ -1466,8 +1468,8 @@ export function areArraysEqual(arr1, arr2) {
     return true;
 }
 const cssVarRegExp = /var\((--[a-zA-Z0-9\-]+)\)/g;
-export function resolveCSSVariables(chartContainer, styleRules) {
-    const containerStyles = getComputedStyle(chartContainer);
+export function resolveCSSVariables(container, styleRules) {
+    const containerStyles = getComputedStyle(container);
     return styleRules.replace(cssVarRegExp, (match, group1)=>{
         return containerStyles.getPropertyValue(group1);
     });
@@ -1570,11 +1572,6 @@ export function copyStyle(properties, fromEl, toEl) {
         });
     }
 }
-let measurementSpanCounter = 0;
-function getUniqueMeasurementSpanId() {
-    measurementSpanCounter++;
-    return `measurement_span_${measurementSpanCounter}`;
-}
 const MEASUREMENT_SPAN_STYLE = {
     position: 'absolute',
     visibility: 'hidden',
@@ -1585,23 +1582,60 @@ const MEASUREMENT_SPAN_STYLE = {
     border: 'none',
     whiteSpace: 'pre'
 };
-export 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'
+];
+export 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();
+export 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 (!isInvalidValue(firstKey)) {
+            textSizeCache.delete(firstKey);
+        }
+    }
+    textSizeCache.set(cacheKey, {
+        width,
+        height
+    });
+    return {
+        width,
+        height
+    };
 };
 /**
  * Utility function to check if an array of points is scatterpolar
@@ -1823,3 +1857,102 @@ export const findCalloutPoints = (calloutPointsByX, x)=>{
         values: calloutPointsByX[key]
     };
 };
+export 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);
+    };
+    d3Select(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 = d3Select(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) + '...';
+};