@fluentui/react-charting 5.23.84 → 5.23.86

package/lib-amd/utilities/utilities.js

@@ -2,7 +2,8 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
     "use strict";
     var _a;
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.getCurveFactory = exports.createMeasurementSpan = 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 = 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 = exports.MIN_DOMAIN_MARGIN = void 0;
+    exports.MIN_DOMAIN_MARGIN = 8;
     var ChartTypes;
     (function (ChartTypes) {
         ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
@@ -60,7 +61,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      */
     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]);
@@ -96,16 +97,75 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         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;
@@ -113,21 +173,21 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         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);
@@ -146,12 +206,26 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      */
     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);
@@ -160,8 +234,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
                 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) {
@@ -171,13 +244,12 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
                     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)
@@ -308,13 +380,12 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
     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);
@@ -358,10 +429,13 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      * @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) {