@fluentui/react-charts 9.2.1 → 9.2.2

package/lib/utilities/utilities.js

@@ -63,7 +63,7 @@ function yAxisTickFormatterInternal(value, limitWidth = false) {
  * @export
  * @param {IXAxisParams} xAxisParams
  */ export 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 = d3ScaleLinear().domain([
         domainNRangeValues.dStartValue,
         domainNRangeValues.dEndValue
@@ -81,7 +81,7 @@ function yAxisTickFormatterInternal(value, limitWidth = false) {
         return 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);
     }
@@ -295,7 +295,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 } = xAxisParams;
+    const { domainNRangeValues, xAxisElement, tickPadding = 6, xAxistickSize = 6, xAxisCount, calcMaxLabelWidth } = xAxisParams;
     const isUtcSet = useUTC === true || useUTC === 'utc';
     const xAxisScale = isUtcSet ? d3ScaleUtc() : d3ScaleTime();
     xAxisScale.domain([
@@ -336,7 +336,7 @@ export function getDateFormatLevel(date, useUTC) {
         }
         return 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);
@@ -366,7 +366,7 @@ export function getDateFormatLevel(date, useUTC) {
  * @param {string[]} dataset
  * @returns
  */ export 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 = d3ScaleBand().domain(dataset).range([
         domainNRangeValues.rStartValue,
         domainNRangeValues.rEndValue
@@ -378,9 +378,9 @@ export function getDateFormatLevel(date, useUTC) {
     };
     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;
@@ -654,6 +654,7 @@ export function getUnique(arr, comp) {
         return array.slice(0, pos).concat(array.slice(pos + 1));
     }
 }
+export const DEFAULT_WRAP_WIDTH = 10;
 /**
  * This method used for wrapping of x axis labels (tick values).
  * It breaks down given text value by space separated and calculates the total height needed to display all the words.
@@ -663,21 +664,19 @@ export function getUnique(arr, comp) {
  * @param {IWrapLabelProps} wrapLabelProps
  * @returns
  */ export 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 = d3Select(node).call(xAxis);
     let removeVal = 0;
-    const width = 10;
-    const arr = [];
+    let maxLines = 1;
     axisNode.selectAll('.tick text').each(function() {
         const text = d3Select(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;
@@ -686,9 +685,9 @@ export function getUnique(arr, comp) {
         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);
@@ -702,30 +701,20 @@ export function getUnique(arr, comp) {
                     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;
 }
 /**
@@ -743,7 +732,7 @@ yAxis, noOfCharsToTruncate, truncateLabel, isRtl) {
         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'));