@fluentui/react-charting 5.16.30 → 5.16.31

package/lib-amd/utilities/utilities.js

@@ -2,7 +2,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
     "use strict";
     var _a;
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.wrapTextInsideDonut = exports.rotateXAxisLabels = exports.convertToLocaleString = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.getMinMaxOfYAxis = exports.findVerticalNumericMinMaxOfY = exports.findVSBCNumericMinMaxOfY = exports.findNumericMinMaxOfY = exports.getDomainNRangeValues = exports.domainRageOfVerticalNumeric = exports.domainRangeOfVSBCNumeric = exports.domainRangeOfXStringAxis = exports.domainRangeOfNumericForAreaChart = exports.domainRangeOfDateForAreaChart = exports.getXAxisType = exports.tooltipOfXAxislabels = exports.createWrapOfXLabels = exports.silceOrAppendToArray = exports.getUnique = exports.calloutData = exports.createStringYAxis = exports.createYAxis = exports.prepareDatapoints = exports.createStringXAxis = exports.createDateXAxis = exports.createNumericXAxis = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = void 0;
+    exports.wrapTextInsideDonut = exports.rotateXAxisLabels = exports.convertToLocaleString = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.getMinMaxOfYAxis = exports.findHBCWANumericMinMaxOfY = exports.findVerticalNumericMinMaxOfY = exports.findVSBCNumericMinMaxOfY = exports.findNumericMinMaxOfY = exports.getDomainNRangeValues = exports.domainRageOfVerticalNumeric = exports.domainRangeOfVSBCNumeric = exports.domainRangeOfXStringAxis = exports.domainRangeOfNumericForHorizontalBarChartWithAxis = exports.domainRangeOfNumericForAreaChart = exports.domainRangeOfDateForAreaChart = exports.getXAxisType = exports.tooltipOfXAxislabels = exports.calculateLongestYAxisLabel = exports.createYAxisLabels = exports.createWrapOfXLabels = exports.silceOrAppendToArray = exports.getUnique = exports.calloutData = exports.createStringYAxisForOtherCharts = exports.createStringYAxisForHorizontalBarChartWithAxis = exports.createStringYAxis = exports.createYAxisForOtherCharts = exports.createYAxisForHorizontalBarChartWithAxis = exports.createYAxis = exports.prepareDatapoints = exports.createStringXAxis = exports.createDateXAxis = exports.createNumericXAxis = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = void 0;
     var ChartTypes;
     (function (ChartTypes) {
         ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
@@ -11,6 +11,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         ChartTypes[ChartTypes["VerticalStackedBarChart"] = 3] = "VerticalStackedBarChart";
         ChartTypes[ChartTypes["GroupedVerticalBarChart"] = 4] = "GroupedVerticalBarChart";
         ChartTypes[ChartTypes["HeatMapChart"] = 5] = "HeatMapChart";
+        ChartTypes[ChartTypes["HorizontalBarChartWithAxis"] = 6] = "HorizontalBarChartWithAxis";
     })(ChartTypes = exports.ChartTypes || (exports.ChartTypes = {}));
     var XAxisTypes;
     (function (XAxisTypes) {
@@ -29,7 +30,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      * @export
      * @param {IXAxisParams} xAxisParams
      */
-    function createNumericXAxis(xAxisParams, culture) {
+    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;
         var xAxisScale = d3_scale_1.scaleLinear()
             .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
@@ -39,11 +40,13 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
             .tickSize(xAxistickSize)
             .tickPadding(tickPadding)
             .ticks(xAxisCount)
-            .tickSizeOuter(0)
             .tickFormat(function (domainValue, index) {
             var xAxisValue = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
             return exports.convertToLocaleString(xAxisValue, culture);
         });
+        if (chartType === ChartTypes.HorizontalBarChartWithAxis) {
+            xAxis.tickSizeInner(-(xAxisParams.containerHeight - xAxisParams.margins.top));
+        }
         if (xAxisElement) {
             d3_selection_1.select(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
         }
@@ -165,7 +168,32 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      * @param {IYAxisParams} yAxisParams
      * @param {boolean} isRtl
      */
-    function createYAxis(yAxisParams, isRtl, axisData) {
+    function createYAxis(yAxisParams, isRtl, axisData, chartType, barWidth) {
+        switch (chartType) {
+            case ChartTypes.HorizontalBarChartWithAxis:
+                return createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl, axisData, barWidth);
+            default:
+                return createYAxisForOtherCharts(yAxisParams, isRtl, axisData);
+        }
+    }
+    exports.createYAxis = createYAxis;
+    function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl, axisData, barWidth) {
+        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)
+        var tempVal = maxOfYVal || yMinMaxValues.endValue;
+        var finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
+        var finalYmin = yMinMaxValues.startValue < yMinValue ? 0 : yMinValue;
+        var yAxisScale = d3_scale_1.scaleLinear()
+            .domain([finalYmin, finalYmax])
+            .range([containerHeight - margins.bottom, margins.top]);
+        var axis = isRtl ? d3_axis_1.axisRight(yAxisScale) : d3_axis_1.axisLeft(yAxisScale);
+        var yAxis = axis.tickPadding(tickPadding).ticks(yAxisTickCount);
+        yAxisTickFormat ? yAxis.tickFormat(yAxisTickFormat) : yAxis.tickFormat(d3_format_1.format('.2~s'));
+        yAxisElement ? d3_selection_1.select(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
+        return yAxisScale;
+    }
+    exports.createYAxisForHorizontalBarChartWithAxis = createYAxisForHorizontalBarChartWithAxis;
+    function createYAxisForOtherCharts(yAxisParams, isRtl, axisData) {
         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;
@@ -185,14 +213,43 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         axisData.yAxisDomainValues = domainValues;
         return yAxisScale;
     }
-    exports.createYAxis = createYAxis;
+    exports.createYAxisForOtherCharts = createYAxisForOtherCharts;
+    var createStringYAxis = function (yAxisParams, dataPoints, isRtl, chartType, barWidth, culture) {
+        switch (chartType) {
+            case ChartTypes.HorizontalBarChartWithAxis:
+                return exports.createStringYAxisForHorizontalBarChartWithAxis(yAxisParams, dataPoints, isRtl, barWidth, culture);
+            default:
+                return exports.createStringYAxisForOtherCharts(yAxisParams, dataPoints, isRtl);
+        }
+    };
+    exports.createStringYAxis = createStringYAxis;
+    /**
+     * Creating String Y axis of the chart for Horizontal Bar Chart With Axis
+     * @param yAxisParams
+     * @param dataPoints
+     * @param isRtl
+     */
+    var createStringYAxisForHorizontalBarChartWithAxis = function (yAxisParams, dataPoints, isRtl, barWidth, culture) {
+        var containerHeight = yAxisParams.containerHeight, _a = yAxisParams.tickPadding, tickPadding = _a === void 0 ? 12 : _a, margins = yAxisParams.margins, yAxisTickFormat = yAxisParams.yAxisTickFormat, yAxisElement = yAxisParams.yAxisElement;
+        var yAxisScale = d3_scale_1.scaleBand()
+            .domain(dataPoints)
+            .range([containerHeight - margins.bottom - barWidth / 2, margins.top + barWidth / 2]);
+        var axis = isRtl ? d3_axis_1.axisRight(yAxisScale) : d3_axis_1.axisLeft(yAxisScale);
+        var yAxis = axis.tickPadding(tickPadding).ticks(dataPoints);
+        if (yAxisTickFormat) {
+            yAxis.tickFormat(yAxisTickFormat);
+        }
+        yAxisElement ? d3_selection_1.select(yAxisElement).call(yAxis).selectAll('text') : '';
+        return yAxisScale;
+    };
+    exports.createStringYAxisForHorizontalBarChartWithAxis = createStringYAxisForHorizontalBarChartWithAxis;
     /**
-     * Creating String Y axis of the chart
+     * Creating String Y axis of the chart for other chart except Horizontal Bar Chart With Axis
      * @param yAxisParams
      * @param dataPoints
      * @param isRtl
      */
-    var createStringYAxis = function (yAxisParams, dataPoints, isRtl) {
+    var createStringYAxisForOtherCharts = function (yAxisParams, dataPoints, isRtl) {
         var containerHeight = yAxisParams.containerHeight, _a = yAxisParams.tickPadding, tickPadding = _a === void 0 ? 12 : _a, margins = yAxisParams.margins, yAxisTickFormat = yAxisParams.yAxisTickFormat, yAxisElement = yAxisParams.yAxisElement, _b = yAxisParams.yAxisPadding, yAxisPadding = _b === void 0 ? 0 : _b;
         var yAxisScale = d3_scale_1.scaleBand()
             .domain(dataPoints)
@@ -206,7 +263,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         yAxisElement ? d3_selection_1.select(yAxisElement).call(yAxis).selectAll('text') : '';
         return yAxisScale;
     };
-    exports.createStringYAxis = createStringYAxis;
+    exports.createStringYAxisForOtherCharts = createStringYAxisForOtherCharts;
     function calloutData(values) {
         var combinedResult = [];
         values.forEach(function (element) {
@@ -385,6 +442,77 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         return removeVal > 0 ? removeVal : 0;
     }
     exports.createWrapOfXLabels = createWrapOfXLabels;
+    /**
+     * This method used for wrapping of y axis labels (tick values).
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function createYAxisLabels(node, 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    yAxis, noOfCharsToTruncate, truncateLabel, xValue, isRtl) {
+        if (node === null) {
+            return;
+        }
+        var axisNode = d3_selection_1.select(node).call(yAxis);
+        axisNode.selectAll('.tick text').each(function () {
+            var text = d3_selection_1.select(this);
+            var totalWord = text.text();
+            var truncatedWord = text.text().slice(0, noOfCharsToTruncate) + "...";
+            var totalWordLength = text.text().length;
+            var padding = truncateLabel ? 1.5 : 1; // ems
+            var y = text.attr('y');
+            var x = text.attr('x');
+            var dy = parseFloat(text.attr('dy'));
+            var dx = 0;
+            text
+                .text(null)
+                .append('tspan')
+                .attr('x', x)
+                .attr('y', y)
+                .attr('id', 'BaseSpan')
+                .attr('dy', dy + 'em')
+                .attr('data-', totalWord);
+            if (truncateLabel && totalWordLength > noOfCharsToTruncate) {
+                text
+                    .append('tspan')
+                    .attr('id', 'showDots')
+                    .attr('x', x)
+                    .attr('y', y)
+                    .attr('dy', dy)
+                    .attr('dx', padding + dx + 'em')
+                    .text(truncatedWord);
+            }
+            else {
+                text
+                    .attr('text-align', 'start')
+                    .append('tspan')
+                    .attr('id', 'LessLength')
+                    .attr('x', isRtl ? xValue : x)
+                    .attr('y', y)
+                    .attr('dx', padding + dx + 'em')
+                    .text(totalWord);
+            }
+        });
+    }
+    exports.createYAxisLabels = createYAxisLabels;
+    /**
+     * This function is calculating the length of longest Y axis label in px ,so that we are able to
+     * create the cartesian chart by shifting that many points to the right/left.
+     * @param points
+     * @returns
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function calculateLongestYAxisLabel(points, yAxisElement) {
+        var maxLabelLength = 0;
+        points.forEach(function (point) {
+            var canvas = document.createElement('canvas');
+            var ctx = canvas.getContext('2d');
+            ctx.font = window.getComputedStyle(yAxisElement, null).getPropertyValue('font-size');
+            var wordLengthInPixel = ctx.measureText(point.y).width;
+            maxLabelLength = Math.max(wordLengthInPixel, maxLabelLength);
+        });
+        return maxLabelLength;
+    }
+    exports.calculateLongestYAxisLabel = calculateLongestYAxisLabel;
     /**
      * This method displays a tooltip to the x axis lables(tick values)
      * when prop 'showXAxisLablesTooltip' enables to the respected chart.
@@ -503,6 +631,25 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
             : { dStartValue: xMin, dEndValue: xMax, rStartValue: rStartValue, rEndValue: rEndValue };
     }
     exports.domainRangeOfNumericForAreaChart = domainRangeOfNumericForAreaChart;
+    /**
+     * Calculates Domain and range values for Numeric X axis.
+     * This method calculates Horizontal Chart with Axis
+     * @export
+     * @param {ILineChartPoints[]} points
+     * @param {IMargins} margins
+     * @param {number} width
+     * @param {boolean} isRTL
+     * @returns {IDomainNRange}
+     */
+    function domainRangeOfNumericForHorizontalBarChartWithAxis(points, margins, containerWidth, isRTL, shiftX) {
+        var xMax = d3_array_1.max(points, function (point) { return point.x; });
+        var rMin = isRTL ? margins.left : margins.left + shiftX;
+        var rMax = isRTL ? containerWidth - margins.right - shiftX : containerWidth - margins.right;
+        return isRTL
+            ? { dStartValue: xMax, dEndValue: 0, rStartValue: rMin, rEndValue: rMax }
+            : { dStartValue: 0, dEndValue: xMax, rStartValue: rMin, rEndValue: rMax };
+    }
+    exports.domainRangeOfNumericForHorizontalBarChartWithAxis = domainRangeOfNumericForHorizontalBarChartWithAxis;
     /**
      * Calculates Range values of x Axis string axis
      * For String axis, we need to give domain values (Not start and end array values)
@@ -579,7 +726,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      */
     function getDomainNRangeValues(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
+    points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
         var domainNRangeValue;
         if (xAxisType === XAxisTypes.NumericAxis) {
             switch (chartType) {
@@ -593,6 +740,9 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
                 case ChartTypes.VerticalBarChart:
                     domainNRangeValue = domainRageOfVerticalNumeric(points, margins, width, isRTL, barWidth);
                     break;
+                case ChartTypes.HorizontalBarChartWithAxis:
+                    domainNRangeValue = domainRangeOfNumericForHorizontalBarChartWithAxis(points, margins, width, isRTL, shiftX);
+                    break;
                 default:
                     domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
             }
@@ -666,6 +816,21 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         return { startValue: yMin, endValue: yMax };
     }
     exports.findVerticalNumericMinMaxOfY = findVerticalNumericMinMaxOfY;
+    /**
+     * Fins the min and max values of the vertical bar chart y axis data point.
+     * @export
+     * @param {IVerticalBarChartDataPoint[]} points
+     * @returns {{ startValue: number; endValue: number }}
+     */
+    function findHBCWANumericMinMaxOfY(points, yAxisType) {
+        if (yAxisType !== undefined && yAxisType === YAxisType.NumericAxis) {
+            var yMax = d3_array_1.max(points, function (point) { return point.y; });
+            var yMin = d3_array_1.min(points, function (point) { return point.y; });
+            return { startValue: yMin, endValue: yMax };
+        }
+        return { startValue: 0, endValue: 0 };
+    }
+    exports.findHBCWANumericMinMaxOfY = findHBCWANumericMinMaxOfY;
     /**
      * For creating Y axis, need to calculate y axis domain values from given points. This may vary based on chart type.
      * So, this method will define which method need to call based on chart type to find out min and max values(For Domain).
@@ -676,7 +841,10 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      * @returns {{ startValue: number; endValue: number }}
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function getMinMaxOfYAxis(points, chartType) {
+    function getMinMaxOfYAxis(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    points, chartType, yAxisType) {
+        if (yAxisType === void 0) { yAxisType = YAxisType.NumericAxis; }
         var minMaxValues;
         switch (chartType) {
             case ChartTypes.AreaChart:
@@ -689,6 +857,9 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
             case ChartTypes.VerticalBarChart:
                 minMaxValues = findVerticalNumericMinMaxOfY(points);
                 break;
+            case ChartTypes.HorizontalBarChartWithAxis:
+                minMaxValues = findHBCWANumericMinMaxOfY(points, yAxisType);
+                break;
             default:
                 minMaxValues = { startValue: 0, endValue: 0 };
         }