@fluentui/react-charting 5.16.30 → 5.16.32

package/lib-commonjs/utilities/utilities.js

@@ -1,7 +1,7 @@
 "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 tslib_1 = require("tslib");
 var d3_axis_1 = require("d3-axis");
 var d3_array_1 = require("d3-array");
@@ -18,6 +18,7 @@ var ChartTypes;
     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) {
@@ -36,7 +37,7 @@ var YAxisType;
  * @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])
@@ -46,11 +47,13 @@ function createNumericXAxis(xAxisParams, culture) {
         .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');
     }
@@ -172,7 +175,32 @@ exports.prepareDatapoints = prepareDatapoints;
  * @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;
@@ -192,14 +220,43 @@ function createYAxis(yAxisParams, isRtl, axisData) {
     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)
@@ -213,7 +270,7 @@ var createStringYAxis = function (yAxisParams, dataPoints, isRtl) {
     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) {
@@ -392,6 +449,77 @@ function createWrapOfXLabels(wrapLabelProps) {
     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.
@@ -510,6 +638,25 @@ function domainRangeOfNumericForAreaChart(points, margins, width, isRTL) {
         : { 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)
@@ -586,7 +733,7 @@ exports.domainRageOfVerticalNumeric = domainRageOfVerticalNumeric;
  */
 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) {
@@ -600,6 +747,9 @@ points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
             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 };
         }
@@ -673,6 +823,21 @@ function findVerticalNumericMinMaxOfY(points) {
     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).
@@ -683,7 +848,10 @@ exports.findVerticalNumericMinMaxOfY = findVerticalNumericMinMaxOfY;
  * @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:
@@ -696,6 +864,9 @@ function getMinMaxOfYAxis(points, chartType) {
         case ChartTypes.VerticalBarChart:
             minMaxValues = findVerticalNumericMinMaxOfY(points);
             break;
+        case ChartTypes.HorizontalBarChartWithAxis:
+            minMaxValues = findHBCWANumericMinMaxOfY(points, yAxisType);
+            break;
         default:
             minMaxValues = { startValue: 0, endValue: 0 };
     }