@fluentui/react-charting 5.23.52 → 5.23.54

package/lib-amd/utilities/utilities.js

@@ -30,27 +30,41 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      * @export
      * @param {IXAxisParams} xAxisParams
      */
-    function createNumericXAxis(xAxisParams, chartType, culture) {
-        var domainNRangeValues = xAxisParams.domainNRangeValues, _a = xAxisParams.showRoundOffXTickValues, showRoundOffXTickValues = _a === void 0 ? false : _a, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, _c = xAxisParams.tickPadding, tickPadding = _c === void 0 ? 10 : _c, _d = xAxisParams.xAxisCount, xAxisCount = _d === void 0 ? 6 : _d, xAxisElement = xAxisParams.xAxisElement;
+    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 xAxisScale = (0, d3_scale_1.scaleLinear)()
             .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
             .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]);
         showRoundOffXTickValues && xAxisScale.nice();
+        var tickCount = xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : 6;
+        var tickFormat = function (domainValue, _index) {
+            if (tickParams.tickFormat) {
+                return (0, d3_format_1.format)(tickParams.tickFormat)(domainValue);
+            }
+            var xAxisValue = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
+            return (0, exports.convertToLocaleString)(xAxisValue, culture);
+        };
+        if (hideTickOverlap && typeof xAxisCount === 'undefined') {
+            var longestLabelWidth = (0, exports.calculateLongestLabelWidth)(xAxisScale.ticks().map(tickFormat), '[class^="xAxis-"] text') + 20;
+            var _e = xAxisScale.range(), start = _e[0], end = _e[1];
+            tickCount = Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth));
+        }
         var xAxis = (0, d3_axis_1.axisBottom)(xAxisScale)
             .tickSize(xAxistickSize)
             .tickPadding(tickPadding)
-            .ticks(xAxisCount)
-            .tickFormat(function (domainValue, index) {
-            var xAxisValue = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
-            return (0, exports.convertToLocaleString)(xAxisValue, culture);
-        });
+            .ticks(tickCount)
+            .tickFormat(tickFormat);
         if (chartType === ChartTypes.HorizontalBarChartWithAxis) {
             xAxis.tickSizeInner(-(xAxisParams.containerHeight - xAxisParams.margins.top));
         }
+        if (tickParams.tickValues) {
+            xAxis.tickValues(tickParams.tickValues);
+        }
         if (xAxisElement) {
             (0, d3_selection_1.select)(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
         }
-        var tickValues = xAxisScale.ticks(xAxisCount).map(xAxis.tickFormat());
+        var tickValues = ((_a = tickParams.tickValues) !== null && _a !== void 0 ? _a : xAxisScale.ticks(tickCount)).map(xAxis.tickFormat());
         return { xScale: xAxisScale, tickValues: tickValues };
     }
     exports.createNumericXAxis = createNumericXAxis;
@@ -95,42 +109,48 @@ 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, _d = xAxisParams.xAxisCount, xAxisCount = _d === void 0 ? 6 : _d;
+        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 xAxisScale = useUTC ? (0, d3_scale_1.scaleUtc)() : (0, d3_scale_1.scaleTime)();
         xAxisScale
             .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
             .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]);
-        var xAxis = (0, d3_axis_1.axisBottom)(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).ticks(xAxisCount);
-        if (customDateTimeFormatter) {
-            xAxis.tickFormat(function (domainValue, _index) {
+        var tickCount = xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : 6;
+        var tickFormat = function (domainValue, _index) {
+            if (customDateTimeFormatter) {
                 return customDateTimeFormatter(domainValue);
-            });
-        }
-        else if (culture && options) {
-            xAxis.tickFormat(function (domainValue, _index) {
+            }
+            if (culture && options) {
                 return domainValue.toLocaleString(culture, options);
-            });
-        }
-        else if (timeFormatLocale) {
-            var locale_1 = (0, d3_time_format_1.timeFormatLocale)(timeFormatLocale);
-            xAxis.tickFormat(function (domainValue, _index) {
-                return multiFormat(domainValue, locale_1, useUTC);
-            });
+            }
+            if (timeFormatLocale) {
+                var locale = (0, d3_time_format_1.timeFormatLocale)(timeFormatLocale);
+                return multiFormat(domainValue, locale, useUTC);
+            }
+            if (culture === undefined && tickParams.tickFormat) {
+                if (useUTC) {
+                    return (0, d3_time_format_1.utcFormat)(tickParams.tickFormat)(domainValue);
+                }
+                else {
+                    return (0, d3_time_format_1.timeFormat)(tickParams.tickFormat)(domainValue);
+                }
+            }
+            return multiFormat(domainValue, undefined, useUTC);
+        };
+        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.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth));
         }
+        var xAxis = (0, d3_axis_1.axisBottom)(xAxisScale)
+            .tickSize(xAxistickSize)
+            .tickPadding(tickPadding)
+            .ticks(tickCount)
+            .tickFormat(tickFormat);
         tickParams.tickValues ? xAxis.tickValues(tickParams.tickValues) : '';
-        if (culture === undefined) {
-            tickParams.tickFormat
-                ? xAxis.tickFormat(useUTC ? (0, d3_time_format_1.utcFormat)(tickParams.tickFormat) : (0, d3_time_format_1.timeFormat)(tickParams.tickFormat))
-                : '';
-        }
         if (xAxisElement) {
             (0, d3_selection_1.select)(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
         }
-        var tickValues = ((_a = tickParams.tickValues) !== null && _a !== void 0 ? _a : xAxisScale.ticks(xAxisCount)).map(function (val, idx) {
-            var tickFormat = xAxis.tickFormat();
-            // val is a Date object. So when the tick format is not set, format val as a string to calculate its width
-            return tickFormat ? tickFormat(val, idx) : multiFormat(val, undefined, useUTC);
-        });
+        var tickValues = ((_a = tickParams.tickValues) !== null && _a !== void 0 ? _a : xAxisScale.ticks(tickCount)).map(xAxis.tickFormat());
         return { xScale: xAxisScale, tickValues: tickValues };
     }
     exports.createDateXAxis = createDateXAxis;
@@ -144,17 +164,47 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      * @returns
      */
     function createStringXAxis(xAxisParams, tickParams, dataset, culture) {
-        var domainNRangeValues = xAxisParams.domainNRangeValues, _a = xAxisParams.xAxisCount, xAxisCount = _a === void 0 ? 6 : _a, _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;
+        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 xAxisScale = (0, d3_scale_1.scaleBand)()
             .domain(dataset)
             .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue])
             .paddingInner(typeof xAxisInnerPadding !== 'undefined' ? xAxisInnerPadding : xAxisPadding)
             .paddingOuter(typeof xAxisOuterPadding !== 'undefined' ? xAxisOuterPadding : xAxisPadding);
-        var xAxis = (0, d3_axis_1.axisBottom)(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).ticks(xAxisCount);
+        var tickValues = (_a = tickParams.tickValues) !== null && _a !== void 0 ? _a : dataset;
+        if (hideTickOverlap) {
+            var nonOverlappingTickValues = [];
+            // 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 (0, exports.calculateLongestLabelWidth)([value], '[class^="xAxis-"] text'); });
+            // for LTR
+            var start = 0;
+            var end = containerWidth;
+            var sign = 1;
+            var range = xAxisScale.range();
+            if (range[1] - range[0] < 0) {
+                // for RTL
+                start = containerWidth;
+                end = 0;
+                sign = -1;
+            }
+            for (var i = tickValues.length - 1; i >= 0; i--) {
+                var tickPosition = xAxisScale(tickValues[i]);
+                if (sign * (tickPosition - (sign * tickSizes[i]) / 2 - start) >= 0 &&
+                    sign * (tickPosition + (sign * tickSizes[i]) / 2 - end) <= 0) {
+                    nonOverlappingTickValues.push(tickValues[i]);
+                    end = tickPosition - sign * (tickSizes[i] / 2 + 10);
+                }
+            }
+            nonOverlappingTickValues = nonOverlappingTickValues.reverse();
+            tickValues = nonOverlappingTickValues;
+        }
+        var xAxis = (0, d3_axis_1.axisBottom)(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).tickValues(tickValues);
         if (xAxisParams.xAxisElement) {
             (0, d3_selection_1.select)(xAxisParams.xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
         }
-        return { xScale: xAxisScale, tickValues: dataset };
+        return { xScale: xAxisScale, tickValues: tickValues };
     }
     exports.createStringXAxis = createStringXAxis;
     /**