@fluentui/react-charting 5.23.84 → 5.23.86

package/lib-commonjs/utilities/utilities.js

@@ -1,8 +1,8 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.copyStyle = exports.resolveCSSVariables = exports.areArraysEqual = exports.getSecureProps = exports.formatDate = exports.isScalePaddingDefined = exports.getScalePadding = exports.getBarWidth = exports.formatValueLimitWidth = exports.wrapTextInsideDonut = exports.rotateXAxisLabels = exports.convertToLocaleString = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.findHBCWANumericMinMaxOfY = exports.findVerticalNumericMinMaxOfY = exports.findVSBCNumericMinMaxOfY = exports.findNumericMinMaxOfY = exports.domainRageOfVerticalNumeric = exports.domainRangeOfDateForAreaLineVerticalBarChart = exports.domainRangeOfVSBCNumeric = exports.domainRangeOfXStringAxis = exports.domainRangeOfNumericForHorizontalBarChartWithAxis = exports.computeLongestBars = exports.groupChartDataByYValue = exports.domainRangeOfNumericForAreaChart = exports.getXAxisType = exports.tooltipOfXAxislabels = exports.calculateLongestLabelWidth = exports.wrapContent = exports.createYAxisLabels = exports.createWrapOfXLabels = exports.silceOrAppendToArray = exports.getUnique = exports.calloutData = exports.createStringYAxis = exports.createStringYAxisForHorizontalBarChartWithAxis = exports.createNumericYAxis = exports.createYAxisForHorizontalBarChartWithAxis = exports.prepareDatapoints = exports.createStringXAxis = exports.createDateXAxis = exports.createNumericXAxis = exports.defaultYAxisTickFormatter = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = void 0;
-exports.getCurveFactory = exports.createMeasurementSpan = void 0;
+exports.resolveCSSVariables = exports.areArraysEqual = exports.getSecureProps = exports.formatDate = exports.isScalePaddingDefined = exports.getScalePadding = exports.getBarWidth = exports.formatValueLimitWidth = exports.wrapTextInsideDonut = exports.rotateXAxisLabels = exports.convertToLocaleString = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.findHBCWANumericMinMaxOfY = exports.findVerticalNumericMinMaxOfY = exports.findVSBCNumericMinMaxOfY = exports.findNumericMinMaxOfY = exports.domainRageOfVerticalNumeric = exports.domainRangeOfDateForAreaLineVerticalBarChart = exports.domainRangeOfVSBCNumeric = exports.domainRangeOfXStringAxis = exports.domainRangeOfNumericForHorizontalBarChartWithAxis = exports.computeLongestBars = exports.groupChartDataByYValue = exports.domainRangeOfNumericForAreaChart = exports.getXAxisType = exports.tooltipOfXAxislabels = exports.calculateLongestLabelWidth = exports.wrapContent = exports.createYAxisLabels = exports.createWrapOfXLabels = exports.silceOrAppendToArray = exports.getUnique = exports.calloutData = exports.createStringYAxis = exports.createStringYAxisForHorizontalBarChartWithAxis = exports.createNumericYAxis = exports.createYAxisForHorizontalBarChartWithAxis = exports.prepareDatapoints = exports.createStringXAxis = exports.createDateXAxis = exports.createNumericXAxis = exports.defaultYAxisTickFormatter = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = exports.MIN_DOMAIN_MARGIN = void 0;
+exports.getCurveFactory = exports.createMeasurementSpan = exports.copyStyle = void 0;
 var tslib_1 = require("tslib");
 var d3_axis_1 = require("d3-axis");
 var d3_array_1 = require("d3-array");
@@ -14,6 +14,7 @@ var d3_time_1 = require("d3-time");
 var d3_format_2 = require("d3-format");
 var react_1 = require("@fluentui/react");
 var d3_shape_1 = require("d3-shape");
+exports.MIN_DOMAIN_MARGIN = 8;
 var ChartTypes;
 (function (ChartTypes) {
     ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
@@ -71,7 +72,7 @@ exports.defaultYAxisTickFormatter = defaultYAxisTickFormatter;
  */
 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 = (0, d3_scale_1.scaleLinear)()
         .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
         .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]);
@@ -107,16 +108,75 @@ function createNumericXAxis(xAxisParams, tickParams, chartType, culture) {
     return { xScale: xAxisScale, tickValues: tickValues };
 }
 exports.createNumericXAxis = createNumericXAxis;
-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 ? d3_time_format_1.utcFormat : d3_time_format_1.timeFormat;
-    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 ? d3_time_1.utcSecond : d3_time_1.timeSecond;
     var timeMinute = useUTC ? d3_time_1.utcMinute : d3_time_1.timeMinute;
     var timeHour = useUTC ? d3_time_1.utcHour : d3_time_1.timeHour;
@@ -124,21 +184,21 @@ function multiFormat(date, locale, useUTC) {
     var timeMonth = useUTC ? d3_time_1.utcMonth : d3_time_1.timeMonth;
     var timeWeek = useUTC ? d3_time_1.utcWeek : d3_time_1.timeWeek;
     var timeYear = useUTC ? d3_time_1.utcYear : d3_time_1.timeYear;
-    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);
@@ -157,12 +217,26 @@ function handleFloatingPointPrecisionError(num) {
  */
 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 ? (0, d3_scale_1.scaleUtc)() : (0, d3_scale_1.scaleTime)();
     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 ? (0, d3_time_format_1.timeFormatLocale)(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);
@@ -171,8 +245,7 @@ function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLo
             return domainValue.toLocaleString(culture, options);
         }
         if (timeFormatLocale) {
-            var locale = (0, d3_time_format_1.timeFormatLocale)(timeFormatLocale);
-            return multiFormat(domainValue, locale, useUTC);
+            return formatFn(domainValue);
         }
         if (culture === undefined && tickParams.tickFormat) {
             if (useUTC) {
@@ -182,13 +255,12 @@ function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLo
                 return (0, d3_time_format_1.timeFormat)(tickParams.tickFormat)(domainValue);
             }
         }
-        return multiFormat(domainValue, undefined, useUTC);
+        return formatFn(domainValue);
     };
-    if (hideTickOverlap && typeof xAxisCount === 'undefined') {
-        var longestLabelWidth = (0, exports.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 = (0, exports.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 = (0, d3_axis_1.axisBottom)(xAxisScale)
         .tickSize(xAxistickSize)
         .tickPadding(tickPadding)
@@ -319,13 +391,12 @@ function prepareDatapoints(maxVal, minVal, splitInto, isIntegralDataset, rounded
 exports.prepareDatapoints = prepareDatapoints;
 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 = (0, d3_scale_1.scaleLinear)()
-        .domain([finalYmin - yDomainPadding, finalYmax + yDomainPadding])
+        .domain([finalYmin, finalYmax])
         .range([containerHeight - margins.bottom, margins.top]);
     var axis = isRtl ? (0, d3_axis_1.axisRight)(yAxisScale) : (0, d3_axis_1.axisLeft)(yAxisScale);
     var yAxis = axis.tickPadding(tickPadding).ticks(yAxisTickCount);
@@ -369,10 +440,13 @@ exports.createNumericYAxis = createNumericYAxis;
  * @param isRtl
  */
 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 = (0, d3_scale_1.scaleBand)()
         .domain(dataPoints)
-        .range([containerHeight - margins.bottom - barWidth / 2, margins.top + barWidth / 2]);
+        .range([containerHeight - margins.bottom, margins.top])
+        .padding(yAxisPaddingValue);
     var axis = isRtl ? (0, d3_axis_1.axisRight)(yAxisScale) : (0, d3_axis_1.axisLeft)(yAxisScale);
     var yAxis = axis.tickPadding(tickPadding).ticks(dataPoints);
     if (yAxisTickFormat) {