@fluentui/react-charts 9.2.0 → 9.2.2

package/lib-commonjs/utilities/utilities.js

@@ -15,6 +15,9 @@ _export(exports, {
     CustomPoints: function() {
         return CustomPoints;
     },
+    DEFAULT_WRAP_WIDTH: function() {
+        return DEFAULT_WRAP_WIDTH;
+    },
     HighContrastSelector: function() {
         return HighContrastSelector;
     },
@@ -255,7 +258,7 @@ function defaultYAxisTickFormatter(value) {
     return yAxisTickFormatterInternal(value);
 }
 function createNumericXAxis(xAxisParams, tickParams, chartType, culture) {
-    const { domainNRangeValues, showRoundOffXTickValues = false, xAxistickSize = 6, tickPadding = 10, xAxisCount, xAxisElement, hideTickOverlap } = xAxisParams;
+    const { domainNRangeValues, showRoundOffXTickValues = false, xAxistickSize = 6, tickPadding = 10, xAxisCount, xAxisElement, hideTickOverlap, calcMaxLabelWidth } = xAxisParams;
     const xAxisScale = (0, _d3scale.scaleLinear)().domain([
         domainNRangeValues.dStartValue,
         domainNRangeValues.dEndValue
@@ -273,7 +276,7 @@ function createNumericXAxis(xAxisParams, tickParams, chartType, culture) {
         return (0, _chartutilities.formatToLocaleString)(xAxisValue, culture);
     };
     if (hideTickOverlap && typeof xAxisCount === 'undefined') {
-        const longestLabelWidth = calculateLongestLabelWidth(xAxisScale.ticks().map(tickFormat), '.fui-cart__xAxis text') + 20;
+        const longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map(tickFormat)) + 20;
         const [start, end] = xAxisScale.range();
         tickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
     }
@@ -482,7 +485,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 } = xAxisParams;
+    const { domainNRangeValues, xAxisElement, tickPadding = 6, xAxistickSize = 6, xAxisCount, calcMaxLabelWidth } = xAxisParams;
     const isUtcSet = useUTC === true || useUTC === 'utc';
     const xAxisScale = isUtcSet ? (0, _d3scale.scaleUtc)() : (0, _d3scale.scaleTime)();
     xAxisScale.domain([
@@ -523,7 +526,7 @@ function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLo
         }
         return (0, _chartutilities.formatDateToLocaleString)(domainValue, culture, useUTC ? true : false, false, formatOptions);
     };
-    const longestLabelWidth = calculateLongestLabelWidth(xAxisScale.ticks().map(tickFormat), '.fui-cart__xAxis text') + 40;
+    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);
@@ -545,7 +548,7 @@ function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLo
     };
 }
 function createStringXAxis(xAxisParams, tickParams, dataset, culture) {
-    const { domainNRangeValues, xAxistickSize = 6, tickPadding = 10, xAxisPadding = 0.1, xAxisInnerPadding, xAxisOuterPadding, containerWidth, hideTickOverlap } = xAxisParams;
+    const { domainNRangeValues, xAxistickSize = 6, tickPadding = 10, xAxisPadding = 0.1, xAxisInnerPadding, xAxisOuterPadding, containerWidth, hideTickOverlap, calcMaxLabelWidth } = xAxisParams;
     const xAxisScale = (0, _d3scale.scaleBand)().domain(dataset).range([
         domainNRangeValues.rStartValue,
         domainNRangeValues.rEndValue
@@ -557,9 +560,9 @@ function createStringXAxis(xAxisParams, tickParams, dataset, culture) {
     };
     if (hideTickOverlap) {
         let nonOverlappingTickValues = [];
-        const tickSizes = tickValues.map((value, index)=>calculateLongestLabelWidth([
-                tickFormat(value, index)
-            ], '.fui-cart__xAxis text'));
+        const tickSizes = tickValues.map((value)=>calcMaxLabelWidth([
+                value
+            ]));
         // for LTR
         let start = 0;
         let end = containerWidth;
@@ -800,22 +803,21 @@ function silceOrAppendToArray(array, value) {
         return array.slice(0, pos).concat(array.slice(pos + 1));
     }
 }
+const DEFAULT_WRAP_WIDTH = 10;
 function createWrapOfXLabels(wrapLabelProps) {
-    const { node, xAxis, noOfCharsToTruncate, showXAxisLablesTooltip } = wrapLabelProps;
+    const { node, xAxis, noOfCharsToTruncate, showXAxisLablesTooltip, width = DEFAULT_WRAP_WIDTH } = wrapLabelProps;
     if (node === null) {
         return;
     }
     const axisNode = (0, _d3selection.select)(node).call(xAxis);
     let removeVal = 0;
-    const width = 10;
-    const arr = [];
+    let maxLines = 1;
     axisNode.selectAll('.tick text').each(function() {
         const text = (0, _d3selection.select)(this);
         const totalWord = text.text();
         const truncatedWord = `${text.text().slice(0, noOfCharsToTruncate)}...`;
         const totalWordLength = text.text().length;
         const words = text.text().split(/\s+/).reverse();
-        arr.push(words.length);
         let word = '';
         let line = [];
         let lineNumber = 0;
@@ -824,9 +826,9 @@ function createWrapOfXLabels(wrapLabelProps) {
         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', ++lineNumber * lineHeight + dy + 'em').text(truncatedWord);
+            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', ++lineNumber * lineHeight + dy + 'em').text(totalWord);
+            tspan = text.append('tspan').attr('id', 'LessLength').attr('x', 0).attr('y', y).attr('dy', dy + 'em').text(totalWord);
         } else {
             while(word = words.pop()){
                 line.push(word);
@@ -840,30 +842,20 @@ function createWrapOfXLabels(wrapLabelProps) {
                     tspan = text.append('tspan').attr('id', 'WordBreakId').attr('x', 0).attr('y', y).attr('dy', ++lineNumber * lineHeight + dy + 'em').text(word);
                 }
             }
-            const maxDigit = Math.max(...arr);
-            let maxHeight = 12; // intial value to render corretly first time
-            axisNode.selectAll('text').each(()=>{
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const outerHTMLElement = document.getElementById('WordBreakId');
-                const BoxCordinates = outerHTMLElement && outerHTMLElement.getBoundingClientRect();
-                const boxHeight = BoxCordinates && BoxCordinates.height;
-                if (boxHeight > maxHeight) {
-                    maxHeight = boxHeight;
-                }
-            });
-            // If we take directly maxDigit * maxheight, then it will show more height between x axis tick values and bottom.
-            // To avoid this, reducing maxDigit value by removing some digit based on legth of word.
-            let removeDigit = 4;
-            if (maxDigit <= 2) {
-                removeDigit = 1;
-            } else if (maxDigit > 2 && maxDigit <= 6) {
-                removeDigit = 2;
-            } else if (maxDigit > 6 && maxDigit <= 9) {
-                removeDigit = 3;
-            }
-            removeVal = (maxDigit - removeDigit) * maxHeight;
         }
+        maxLines = Math.max(maxLines, lineNumber + 1);
     });
+    if (!showXAxisLablesTooltip) {
+        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;
+        if (boxHeight > maxHeight) {
+            maxHeight = boxHeight;
+        }
+        removeVal = (maxLines - 1) * maxHeight;
+    }
     return removeVal > 0 ? removeVal : 0;
 }
 function createYAxisLabels(node, yAxis, noOfCharsToTruncate, truncateLabel, isRtl) {
@@ -877,7 +869,7 @@ function createYAxisLabels(node, yAxis, noOfCharsToTruncate, truncateLabel, isRt
         const totalWord = text.text();
         const truncatedWord = isRtl ? `...${text.text().slice(0, noOfCharsToTruncate)}` : `${text.text().slice(0, noOfCharsToTruncate)}...`;
         const totalWordLength = text.text().length;
-        const padding = truncateLabel ? 1.5 : 1; // ems
+        const padding = 0; // ems
         const y = text.attr('y');
         const x = text.attr('x');
         const dy = parseFloat(text.attr('dy'));