@fluentui/react-charting 5.23.83 → 5.23.85

package/lib/utilities/utilities.js

@@ -10,6 +10,7 @@ import { timeSecond as d3TimeSecond, timeMinute as d3TimeMinute, timeHour as d3T
 import { formatPrefix as d3FormatPrefix } from 'd3-format';
 import { getId } from '@fluentui/react';
 import { curveLinear as d3CurveLinear, curveNatural as d3CurveNatural, curveStep as d3CurveStep, curveStepAfter as d3CurveStepAfter, curveStepBefore as d3CurveStepBefore, } from 'd3-shape';
+export var MIN_DOMAIN_MARGIN = 8;
 export var ChartTypes;
 (function (ChartTypes) {
     ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
@@ -32,6 +33,33 @@ export var YAxisType;
     YAxisType[YAxisType["DateAxis"] = 1] = "DateAxis";
     YAxisType[YAxisType["StringAxis"] = 2] = "StringAxis";
 })(YAxisType || (YAxisType = {}));
+function yAxisTickFormatterInternal(value, limitWidth) {
+    if (limitWidth === void 0) { limitWidth = false; }
+    // Use SI format prefix with 2 decimal places without insignificant trailing zeros
+    var formatter = d3FormatPrefix('.2~', value);
+    if (Math.abs(value) < 1) {
+        // Don't use SI notation for small numbers as it is less readable
+        formatter = d3Format('.2~g');
+    }
+    else if (limitWidth && Math.abs(value) >= 1000) {
+        // If width is limited, use SI format prefix with 1 point precision
+        formatter = d3FormatPrefix('.1~', value);
+    }
+    var formattedValue = formatter(value);
+    // Replace 'G' with 'B' if the value is greater than 10^9 as it is a more common convention
+    if (Math.abs(value) >= 1e9) {
+        return formattedValue.replace('G', 'B');
+    }
+    return formattedValue;
+}
+/**
+ * Formatter for y axis ticks.
+ * @param value - The number to format.
+ * @returns The formatted string .
+ */
+export function defaultYAxisTickFormatter(value) {
+    return yAxisTickFormatterInternal(value);
+}
 /**
  * Create Numeric X axis
  * @export
@@ -39,7 +67,7 @@ export var YAxisType;
  */
 export function createNumericXAxis(xAxisParams, tickParams, chartType, culture) {
     var _a;
-    var domainNRangeValues = xAxisParams.domainNRangeValues, _b = xAxisParams.showRoundOffXTickValues, showRoundOffXTickValues = _b === void 0 ? false : _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;
     var xAxisScale = d3ScaleLinear()
         .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
         .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]);
@@ -74,16 +102,75 @@ export function createNumericXAxis(xAxisParams, tickParams, chartType, culture)
     var tickValues = ((_a = tickParams.tickValues) !== null && _a !== void 0 ? _a : xAxisScale.ticks(tickCount)).map(xAxis.tickFormat());
     return { xScale: xAxisScale, tickValues: tickValues };
 }
-function multiFormat(date, locale, useUTC) {
+/**
+ * This function returns a multilevel formatter for a given date range.
+ * It determines the appropriate date format to accommodate each tick value.
+ * The goal is to represent the date label in the smallest possible format without loss of information.
+ * The challenge here is to adhere to locale specific formats while ensuring the complete label is shown.
+ * There is an exhaustive map of all possible date/time units and their respective formats.
+ * Based on the range of formatting granularity levels, a format spanning the range is returned.
+ * @param startLevel - The starting level of the date format.
+ * @param endLevel - The ending level of the date format.
+ * @param locale - The locale object for formatting.
+ * @param useUTC
+ * @returns
+ */
+function getMultiLevelDateFormatter(startLevel, endLevel, locale, useUTC) {
     var timeFormat = locale ? (useUTC ? locale.utcFormat : locale.format) : useUTC ? d3UtcFormat : d3TimeFormat;
-    var formatMillisecond = timeFormat('.%L');
-    var formatSecond = timeFormat(':%S');
-    var formatMinute = timeFormat('%I:%M');
-    var formatHour = timeFormat('%I %p');
-    var formatDay = timeFormat('%a %d');
-    var formatWeek = timeFormat('%b %d');
-    var formatMonth = timeFormat('%B');
-    var formatYear = timeFormat('%Y');
+    // Refer to https://d3js.org/d3-time-format#locale_format to see explanation about each format specifier
+    var DEFAULT = '%c';
+    var MS = '.%L';
+    var MS_S = ':%S.%L';
+    var MS_S_MIN = '%M:%S.%L';
+    var MS_S_MIN_H = '%-I:%M:%S.%L %p';
+    var MS_S_MIN_H_D = '%a %d, %X';
+    var MS_S_MIN_H_D_W = '%b %d, %X';
+    var MS_S_MIN_H_D_W_M = MS_S_MIN_H_D_W;
+    var MS_S_MIN_H_D_W_M_Y = DEFAULT;
+    var S = ':%S';
+    var S_MIN = '%-I:%M:%S';
+    var S_MIN_H = '%X';
+    var S_MIN_H_D = MS_S_MIN_H_D;
+    var S_MIN_H_D_W = MS_S_MIN_H_D_W;
+    var S_MIN_H_D_W_M = MS_S_MIN_H_D_W_M;
+    var S_MIN_H_D_W_M_Y = DEFAULT;
+    var MIN = '%-I:%M %p';
+    var MIN_H = MIN;
+    var MIN_H_D = '%a %d, %-I:%M %p';
+    var MIN_H_D_W = '%b %d, %-I:%M %p';
+    var MIN_H_D_W_M = MIN_H_D_W;
+    var MIN_H_D_W_M_Y = '%x, %-I:%M %p';
+    var H = '%-I %p';
+    var H_D = '%a %d, %-I %p';
+    var H_D_W = '%b %d, %-I %p';
+    var H_D_W_M = H_D_W;
+    var H_D_W_M_Y = '%x, %-I %p';
+    var D = '%a %d';
+    var D_W = '%b %d';
+    var D_W_M = D_W;
+    var D_W_M_Y = '%x';
+    var W = D_W;
+    var W_M = W;
+    var W_M_Y = D_W_M_Y;
+    var M = '%B';
+    var M_Y = '%b %Y';
+    var Y = '%Y';
+    var MULTI_LEVEL_DATE_TIME_FORMATS = [
+        // ms, s, min, h, d, w, m, y
+        [MS, MS_S, MS_S_MIN, MS_S_MIN_H, MS_S_MIN_H_D, MS_S_MIN_H_D_W, MS_S_MIN_H_D_W_M, MS_S_MIN_H_D_W_M_Y], // ms
+        [DEFAULT, S, S_MIN, S_MIN_H, S_MIN_H_D, S_MIN_H_D_W, S_MIN_H_D_W_M, S_MIN_H_D_W_M_Y], // s
+        [DEFAULT, DEFAULT, MIN, MIN_H, MIN_H_D, MIN_H_D_W, MIN_H_D_W_M, MIN_H_D_W_M_Y], // min
+        [DEFAULT, DEFAULT, DEFAULT, H, H_D, H_D_W, H_D_W_M, H_D_W_M_Y], // h
+        [DEFAULT, DEFAULT, DEFAULT, DEFAULT, D, D_W, D_W_M, D_W_M_Y], // d
+        [DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT, W, W_M, W_M_Y], // w
+        [DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT, M, M_Y], // m
+        [DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT, Y], // y
+    ];
+    var formatter = timeFormat(MULTI_LEVEL_DATE_TIME_FORMATS[startLevel][endLevel]);
+    return formatter;
+}
+function getDateFormatLevel(date, useUTC) {
+    var _a;
     var timeSecond = useUTC ? d3UtcSecond : d3TimeSecond;
     var timeMinute = useUTC ? d3UtcMinute : d3TimeMinute;
     var timeHour = useUTC ? d3UtcHour : d3TimeHour;
@@ -91,21 +178,21 @@ function multiFormat(date, locale, useUTC) {
     var timeMonth = useUTC ? d3UtcMonth : d3TimeMonth;
     var timeWeek = useUTC ? d3UtcWeek : d3TimeWeek;
     var timeYear = useUTC ? d3UtcYear : d3TimeYear;
-    return (timeSecond(date) < date
-        ? formatMillisecond
-        : timeMinute(date) < date
-            ? formatSecond
-            : timeHour(date) < date
-                ? formatMinute
-                : timeDay(date) < date
-                    ? formatHour
-                    : timeMonth(date) < date
-                        ? timeWeek(date) < date
-                            ? formatDay
-                            : formatWeek
-                        : timeYear(date) < date
-                            ? formatMonth
-                            : formatYear)(date);
+    var formats = [
+        { formatLevel: 0, condition: function (d) { return timeSecond(d) < d; } }, // Milliseconds
+        { formatLevel: 1, condition: function (d) { return timeMinute(d) < d; } }, // Seconds
+        { formatLevel: 2, condition: function (d) { return timeHour(d) < d; } }, // Minutes
+        { formatLevel: 3, condition: function (d) { return timeDay(d) < d; } }, // Hours
+        { formatLevel: 4, condition: function (d) { return timeMonth(d) < d && timeWeek(d) < d; } }, // Days
+        { formatLevel: 5, condition: function (d) { return timeMonth(d) < d; } }, // Weeks
+        { formatLevel: 6, condition: function (d) { return timeYear(d) < d; } }, // Months
+        { formatLevel: 7, condition: function () { return true; } }, // Years (default)
+    ];
+    var matchedFormat = formats.find(function (_a) {
+        var condition = _a.condition;
+        return condition(date);
+    });
+    return (_a = matchedFormat === null || matchedFormat === void 0 ? void 0 : matchedFormat.formatLevel) !== null && _a !== void 0 ? _a : 7;
 }
 function isPowerOf10(num) {
     var roundedfinalYMax = handleFloatingPointPrecisionError(num);
@@ -124,12 +211,26 @@ function handleFloatingPointPrecisionError(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, hideTickOverlap = xAxisParams.hideTickOverlap;
+    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 xAxisScale = useUTC ? d3ScaleUtc() : d3ScaleTime();
     xAxisScale
         .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
-        .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]);
+        .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue])
+        .nice();
     var tickCount = xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : 6;
+    var lowestFormatLevel = 100;
+    var highestFormatLevel = -1;
+    var locale = timeFormatLocale ? d3TimeFormatLocale(timeFormatLocale) : undefined;
+    xAxisScale.ticks().forEach(function (domainValue) {
+        var formatLevel = getDateFormatLevel(domainValue, useUTC);
+        if (formatLevel > highestFormatLevel) {
+            highestFormatLevel = formatLevel;
+        }
+        if (formatLevel < lowestFormatLevel) {
+            lowestFormatLevel = formatLevel;
+        }
+    });
+    var formatFn = getMultiLevelDateFormatter(lowestFormatLevel, highestFormatLevel, locale, useUTC);
     var tickFormat = function (domainValue, _index) {
         if (customDateTimeFormatter) {
             return customDateTimeFormatter(domainValue);
@@ -138,8 +239,7 @@ export function createDateXAxis(xAxisParams, tickParams, culture, options, timeF
             return domainValue.toLocaleString(culture, options);
         }
         if (timeFormatLocale) {
-            var locale = d3TimeFormatLocale(timeFormatLocale);
-            return multiFormat(domainValue, locale, useUTC);
+            return formatFn(domainValue);
         }
         if (culture === undefined && tickParams.tickFormat) {
             if (useUTC) {
@@ -149,13 +249,12 @@ export function createDateXAxis(xAxisParams, tickParams, culture, options, timeF
                 return d3TimeFormat(tickParams.tickFormat)(domainValue);
             }
         }
-        return multiFormat(domainValue, undefined, useUTC);
+        return formatFn(domainValue);
     };
-    if (hideTickOverlap && typeof xAxisCount === 'undefined') {
-        var longestLabelWidth = calculateLongestLabelWidth(xAxisScale.ticks().map(tickFormat), '[class^="xAxis-"] text') + 40;
-        var _d = xAxisScale.range(), start = _d[0], end = _d[1];
-        tickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
-    }
+    var longestLabelWidth = calculateLongestLabelWidth(xAxisScale.ticks().map(tickFormat), '[class^="xAxis-"] text') + 40;
+    var _d = xAxisScale.range(), start = _d[0], end = _d[1];
+    tickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
+    tickCount = Math.min(tickCount, xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : tickCount);
     var xAxis = d3AxisBottom(xAxisScale)
         .tickSize(xAxistickSize)
         .tickPadding(tickPadding)
@@ -283,17 +382,16 @@ export function prepareDatapoints(maxVal, minVal, splitInto, isIntegralDataset,
 }
 export function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl) {
     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, 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;
-    // maxOfYVal coming from only area chart and Grouped vertical bar chart(Calculation done at base file)
+    // maxOfYVal coming from horizontal bar chart with axis (Calculation done at base file)
     var tempVal = maxOfYVal || yMinMaxValues.endValue;
     var finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
     var finalYmin = yMinMaxValues.startValue < yMinValue ? Math.min(0, yMinMaxValues.startValue) : yMinValue;
-    var yDomainPadding = Math.abs(finalYmax - finalYmin) * 0.1;
     var yAxisScale = d3ScaleLinear()
-        .domain([finalYmin - yDomainPadding, finalYmax + yDomainPadding])
+        .domain([finalYmin, finalYmax])
         .range([containerHeight - margins.bottom, margins.top]);
     var axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
     var yAxis = axis.tickPadding(tickPadding).ticks(yAxisTickCount);
-    yAxisTickFormat ? yAxis.tickFormat(yAxisTickFormat) : yAxis.tickFormat(d3Format('.2~s'));
+    yAxisTickFormat ? yAxis.tickFormat(yAxisTickFormat) : yAxis.tickFormat(defaultYAxisTickFormatter);
     yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
     return yAxisScale;
 }
@@ -319,7 +417,7 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
         .tickPadding(tickPadding)
         .tickValues(domainValues)
         .tickSizeInner(-(containerWidth - margins.left - margins.right));
-    yAxisTickFormat ? yAxis.tickFormat(yAxisTickFormat) : yAxis.tickFormat(d3Format('.2~s'));
+    yAxisTickFormat ? yAxis.tickFormat(yAxisTickFormat) : yAxis.tickFormat(defaultYAxisTickFormatter);
     yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
     axisData.yAxisDomainValues = domainValues;
     return yAxisScale;
@@ -331,10 +429,13 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
  * @param isRtl
  */
 export var createStringYAxisForHorizontalBarChartWithAxis = function (yAxisParams, dataPoints, isRtl, barWidth) {
-    var containerHeight = yAxisParams.containerHeight, _a = yAxisParams.tickPadding, tickPadding = _a === void 0 ? 12 : _a, margins = yAxisParams.margins, yAxisTickFormat = yAxisParams.yAxisTickFormat, yAxisElement = yAxisParams.yAxisElement;
+    var containerHeight = yAxisParams.containerHeight, _a = yAxisParams.tickPadding, tickPadding = _a === void 0 ? 12 : _a, margins = yAxisParams.margins, yAxisTickFormat = yAxisParams.yAxisTickFormat, yAxisElement = yAxisParams.yAxisElement, yAxisPadding = yAxisParams.yAxisPadding;
+    var yAxisPaddingValue = yAxisPadding !== null && yAxisPadding !== void 0 ? yAxisPadding : 0.5;
+    yAxisPaddingValue = yAxisPaddingValue === 1 ? 0.99 : yAxisPaddingValue;
     var yAxisScale = d3ScaleBand()
         .domain(dataPoints)
-        .range([containerHeight - margins.bottom - barWidth / 2, margins.top + barWidth / 2]);
+        .range([containerHeight - margins.bottom, margins.top])
+        .padding(yAxisPaddingValue);
     var axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
     var yAxis = axis.tickPadding(tickPadding).ticks(dataPoints);
     if (yAxisTickFormat) {
@@ -1044,10 +1145,16 @@ export var convertToLocaleString = function (data, culture) {
     }
     culture = culture || undefined;
     if (typeof data === 'number') {
+        if (Math.abs(data) < 10000) {
+            return data.toString();
+        }
         return data.toLocaleString(culture);
     }
     else if (typeof data === 'string' && !window.isNaN(Number(data))) {
         var num = Number(data);
+        if (Math.abs(num) < 10000) {
+            return num.toString();
+        }
         return num.toLocaleString(culture);
     }
     else if (data instanceof Date) {
@@ -1130,15 +1237,8 @@ export function wrapTextInsideDonut(selectorClass, maxWidth) {
         idx += 1;
     });
 }
-export function formatValueWithSIPrefix(value) {
-    var specifier;
-    if (value < 1000) {
-        specifier = '.2~'; // upto 2 decimal places without insignificant trailing zeros
-    }
-    else {
-        specifier = '.1'; // upto 1 decimal place
-    }
-    return d3FormatPrefix(specifier, value)(value);
+export function formatValueLimitWidth(value) {
+    return yAxisTickFormatterInternal(value, true);
 }
 var DEFAULT_BAR_WIDTH = 16;
 var MIN_BAR_WIDTH = 1;