@fluentui/react-charting 5.24.6 → 5.24.7

package/lib/utilities/utilities.js

@@ -70,7 +70,7 @@ export function defaultYAxisTickFormatter(value) {
  */
 export function createNumericXAxis(xAxisParams, tickParams, chartType, culture) {
     var _a;
-    var domainNRangeValues = xAxisParams.domainNRangeValues, _b = xAxisParams.showRoundOffXTickValues, showRoundOffXTickValues = _b === void 0 ? true : _b, _c = xAxisParams.xAxistickSize, xAxistickSize = _c === void 0 ? 6 : _c, _d = xAxisParams.tickPadding, tickPadding = _d === void 0 ? 10 : _d, xAxisCount = xAxisParams.xAxisCount, xAxisElement = xAxisParams.xAxisElement, hideTickOverlap = xAxisParams.hideTickOverlap;
+    var domainNRangeValues = xAxisParams.domainNRangeValues, _b = xAxisParams.showRoundOffXTickValues, showRoundOffXTickValues = _b === void 0 ? true : _b, _c = xAxisParams.xAxistickSize, xAxistickSize = _c === void 0 ? 6 : _c, _d = xAxisParams.tickPadding, tickPadding = _d === void 0 ? 10 : _d, xAxisCount = xAxisParams.xAxisCount, xAxisElement = xAxisParams.xAxisElement, hideTickOverlap = xAxisParams.hideTickOverlap, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth;
     var xAxisScale = d3ScaleLinear()
         .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
         .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]);
@@ -84,7 +84,7 @@ export function createNumericXAxis(xAxisParams, tickParams, chartType, culture)
         return formatToLocaleString(xAxisValue, culture);
     };
     if (hideTickOverlap && typeof xAxisCount === 'undefined') {
-        var longestLabelWidth = calculateLongestLabelWidth(xAxisScale.ticks().map(tickFormat), '[class^="xAxis-"] text') + 20;
+        var longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map(tickFormat)) + 20;
         var _e = xAxisScale.range(), start = _e[0], end = _e[1];
         tickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
     }
@@ -209,7 +209,7 @@ function isPowerOf10(num) {
  */
 export function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLocale, customDateTimeFormatter, useUTC) {
     var _a;
-    var domainNRangeValues = xAxisParams.domainNRangeValues, xAxisElement = xAxisParams.xAxisElement, _b = xAxisParams.tickPadding, tickPadding = _b === void 0 ? 6 : _b, _c = xAxisParams.xAxistickSize, xAxistickSize = _c === void 0 ? 6 : _c, xAxisCount = xAxisParams.xAxisCount;
+    var domainNRangeValues = xAxisParams.domainNRangeValues, xAxisElement = xAxisParams.xAxisElement, _b = xAxisParams.tickPadding, tickPadding = _b === void 0 ? 6 : _b, _c = xAxisParams.xAxistickSize, xAxistickSize = _c === void 0 ? 6 : _c, xAxisCount = xAxisParams.xAxisCount, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth;
     var xAxisScale = useUTC ? d3ScaleUtc() : d3ScaleTime();
     xAxisScale
         .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
@@ -247,7 +247,7 @@ export function createDateXAxis(xAxisParams, tickParams, culture, options, timeF
         }
         return formatDateToLocaleString(domainValue, culture, useUTC, false, formatOptions);
     };
-    var longestLabelWidth = calculateLongestLabelWidth(xAxisScale.ticks().map(tickFormat), '[class^="xAxis-"] text') + 40;
+    var longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map(tickFormat)) + 40;
     var _d = xAxisScale.range(), start = _d[0], end = _d[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);
@@ -274,7 +274,7 @@ export function createDateXAxis(xAxisParams, tickParams, culture, options, timeF
  */
 export function createStringXAxis(xAxisParams, tickParams, dataset, culture) {
     var _a;
-    var domainNRangeValues = xAxisParams.domainNRangeValues, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, _c = xAxisParams.tickPadding, tickPadding = _c === void 0 ? 10 : _c, _d = xAxisParams.xAxisPadding, xAxisPadding = _d === void 0 ? 0.1 : _d, xAxisInnerPadding = xAxisParams.xAxisInnerPadding, xAxisOuterPadding = xAxisParams.xAxisOuterPadding, containerWidth = xAxisParams.containerWidth, hideTickOverlap = xAxisParams.hideTickOverlap;
+    var domainNRangeValues = xAxisParams.domainNRangeValues, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, _c = xAxisParams.tickPadding, tickPadding = _c === void 0 ? 10 : _c, _d = xAxisParams.xAxisPadding, xAxisPadding = _d === void 0 ? 0.1 : _d, xAxisInnerPadding = xAxisParams.xAxisInnerPadding, xAxisOuterPadding = xAxisParams.xAxisOuterPadding, containerWidth = xAxisParams.containerWidth, hideTickOverlap = xAxisParams.hideTickOverlap, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth;
     var xAxisScale = d3ScaleBand()
         .domain(dataset)
         .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue])
@@ -286,7 +286,7 @@ export function createStringXAxis(xAxisParams, tickParams, dataset, culture) {
         // Here, we need the width of each individual label to detect overlaps,
         // but calculateLongestLabelWidth returns the maximum pixel width from an array of labels.
         // So call this function separately for each label, instead of the entire array.
-        var tickSizes = tickValues.map(function (value) { return calculateLongestLabelWidth([value], '[class^="xAxis-"] text'); });
+        var tickSizes = tickValues.map(function (value) { return calcMaxLabelWidth([value]); });
         // for LTR
         var start = 0;
         var end = containerWidth;
@@ -397,10 +397,10 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
     if (roundedTicks === void 0) { roundedTicks = false; }
     var _a = yAxisParams.yMinMaxValues, yMinMaxValues = _a === void 0 ? { startValue: 0, endValue: 0 } : _a, _b = yAxisParams.yAxisElement, yAxisElement = _b === void 0 ? null : _b, _c = yAxisParams.yMaxValue, yMaxValue = _c === void 0 ? 0 : _c, _d = yAxisParams.yMinValue, yMinValue = _d === void 0 ? 0 : _d, containerHeight = yAxisParams.containerHeight, containerWidth = yAxisParams.containerWidth, margins = yAxisParams.margins, _e = yAxisParams.tickPadding, tickPadding = _e === void 0 ? 12 : _e, _f = yAxisParams.maxOfYVal, maxOfYVal = _f === void 0 ? 0 : _f, yAxisTickFormat = yAxisParams.yAxisTickFormat, _g = yAxisParams.yAxisTickCount, yAxisTickCount = _g === void 0 ? 4 : _g, eventAnnotationProps = yAxisParams.eventAnnotationProps, eventLabelHeight = yAxisParams.eventLabelHeight;
     // maxOfYVal coming from only area chart and Grouped vertical bar chart(Calculation done at base file)
-    var tempVal = maxOfYVal || yMinMaxValues.endValue;
+    var tempVal = maxOfYVal || yMinMaxValues.endValue || 0;
     var finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
     var finalYmin = supportNegativeData
-        ? Math.min(yMinMaxValues.startValue, yMinValue || 0)
+        ? Math.min(yMinMaxValues.startValue || 0, yMinValue || 0)
         : yMinMaxValues.startValue < yMinValue
             ? 0
             : yMinValue;
@@ -550,6 +550,7 @@ export function silceOrAppendToArray(array, value) {
         return array.slice(0, pos).concat(array.slice(pos + 1));
     }
 }
+export var 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.
@@ -560,21 +561,19 @@ export function silceOrAppendToArray(array, value) {
  * @returns
  */
 export function createWrapOfXLabels(wrapLabelProps) {
-    var node = wrapLabelProps.node, xAxis = wrapLabelProps.xAxis, noOfCharsToTruncate = wrapLabelProps.noOfCharsToTruncate, showXAxisLablesTooltip = wrapLabelProps.showXAxisLablesTooltip;
+    var node = wrapLabelProps.node, xAxis = wrapLabelProps.xAxis, noOfCharsToTruncate = wrapLabelProps.noOfCharsToTruncate, showXAxisLablesTooltip = wrapLabelProps.showXAxisLablesTooltip, _a = wrapLabelProps.width, width = _a === void 0 ? DEFAULT_WRAP_WIDTH : _a;
     if (node === null) {
         return;
     }
     var axisNode = d3Select(node).call(xAxis);
     var removeVal = 0;
-    var width = 10;
-    var arr = [];
+    var maxLines = 1;
     axisNode.selectAll('.tick text').each(function () {
         var text = d3Select(this);
         var totalWord = text.text();
         var truncatedWord = "".concat(text.text().slice(0, noOfCharsToTruncate), "...");
         var totalWordLength = text.text().length;
         var words = text.text().split(/\s+/).reverse();
-        arr.push(words.length);
         var word = '';
         var line = [];
         var lineNumber = 0;
@@ -595,7 +594,7 @@ export function createWrapOfXLabels(wrapLabelProps) {
                 .attr('id', 'showDots')
                 .attr('x', 0)
                 .attr('y', y)
-                .attr('dy', ++lineNumber * lineHeight + dy + 'em')
+                .attr('dy', dy + 'em')
                 .text(truncatedWord);
         }
         else if (showXAxisLablesTooltip && totalWordLength <= noOfCharsToTruncate) {
@@ -604,7 +603,7 @@ export function createWrapOfXLabels(wrapLabelProps) {
                 .attr('id', 'LessLength')
                 .attr('x', 0)
                 .attr('y', y)
-                .attr('dy', ++lineNumber * lineHeight + dy + 'em')
+                .attr('dy', dy + 'em')
                 .text(totalWord);
         }
         else {
@@ -624,32 +623,20 @@ export function createWrapOfXLabels(wrapLabelProps) {
                         .text(word);
                 }
             }
-            var maxDigit = Math.max.apply(Math, arr);
-            var maxHeight_1 = 12; // intial value to render corretly first time
-            axisNode.selectAll('text').each(function () {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                var outerHTMLElement = document.getElementById('WordBreakId');
-                var BoxCordinates = outerHTMLElement && outerHTMLElement.getBoundingClientRect();
-                var boxHeight = BoxCordinates && BoxCordinates.height;
-                if (boxHeight > maxHeight_1) {
-                    maxHeight_1 = 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.
-            var 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_1;
         }
+        maxLines = Math.max(maxLines, lineNumber + 1);
     });
+    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;
+        if (boxHeight > maxHeight) {
+            maxHeight = boxHeight;
+        }
+        removeVal = (maxLines - 1) * maxHeight;
+    }
     return removeVal > 0 ? removeVal : 0;
 }
 /**