@fluentui/react-charting 5.24.2 → 5.24.3

package/lib-commonjs/utilities/utilities.js

@@ -2,7 +2,7 @@
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.copyStyle = exports.resolveCSSVariables = exports.areArraysEqual = exports.getSecureProps = exports.isScalePaddingDefined = exports.getScalePadding = exports.getBarWidth = exports.formatScientificLimitWidth = exports.wrapTextInsideDonut = exports.rotateXAxisLabels = 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.tooltipOfAxislabels = 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_DONUT_RADIUS = exports.MIN_DOMAIN_MARGIN = void 0;
-exports.truncateString = exports.getCurveFactory = exports.createMeasurementSpan = void 0;
+exports.truncateString = exports.createYAxisForScatterChart = exports.domainRangeOfNumericForScatterChart = exports.domainRangeOfDateForScatterChart = exports.getCurveFactory = exports.createMeasurementSpan = void 0;
 var tslib_1 = require("tslib");
 var d3_axis_1 = require("d3-axis");
 var d3_array_1 = require("d3-array");
@@ -26,6 +26,7 @@ var ChartTypes;
     ChartTypes[ChartTypes["GroupedVerticalBarChart"] = 4] = "GroupedVerticalBarChart";
     ChartTypes[ChartTypes["HeatMapChart"] = 5] = "HeatMapChart";
     ChartTypes[ChartTypes["HorizontalBarChartWithAxis"] = 6] = "HorizontalBarChartWithAxis";
+    ChartTypes[ChartTypes["ScatterChart"] = 7] = "ScatterChart";
 })(ChartTypes || (exports.ChartTypes = ChartTypes = {}));
 var XAxisTypes;
 (function (XAxisTypes) {
@@ -483,6 +484,8 @@ exports.createStringYAxis = createStringYAxis;
  * This methos creates an object for those 2 charts.
  * @param values
  */
+// changing the type to any as it is used by multiple charts with different data types
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function calloutData(values) {
     var combinedResult = [];
     values.forEach(function (line) {
@@ -494,6 +497,7 @@ function calloutData(values) {
         combinedResult = combinedResult.concat(elements);
     });
     var xValToDataPoints = {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     combinedResult.forEach(function (ele) {
         var xValue = ele.x instanceof Date ? ele.x.getTime() : ele.x;
         if (xValue in xValToDataPoints) {
@@ -522,7 +526,8 @@ function calloutData(values) {
         }
     });
     var result = Object.keys(xValToDataPoints).map(function (xValue) {
-        return { x: Number(xValue), values: xValToDataPoints[xValue] };
+        var originalXValue = isNaN(Number(xValue)) ? xValue : Number(xValue);
+        return { x: originalXValue, values: xValToDataPoints[xValue] };
     });
     return result;
 }
@@ -1387,6 +1392,105 @@ function getCurveFactory(curve, defaultFactory) {
     }
 }
 exports.getCurveFactory = getCurveFactory;
+/**
+ * Calculates Domain and range values for Date X axis for scatter chart.
+ * @export
+ * @param {LineChartPoints[]} points
+ * @param {IMargins} margins
+ * @param {number} width
+ * @param {boolean} isRTL
+ * @param {Date[] | number[]} tickValues
+ * @returns {IDomainNRange}
+ */
+function domainRangeOfDateForScatterChart(points, margins, width, isRTL, tickValues) {
+    if (tickValues === void 0) { tickValues = []; }
+    var sDate;
+    var lDate;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    sDate = (0, d3_array_1.min)(points, function (point) {
+        return (0, d3_array_1.min)(point.data, function (item) {
+            return item.x;
+        });
+    });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    lDate = (0, d3_array_1.max)(points, function (point) {
+        return (0, d3_array_1.max)(point.data, function (item) {
+            return item.x;
+        });
+    });
+    var xPadding = (lDate.getTime() - sDate.getTime()) * 0.1;
+    sDate = new Date(sDate.getTime() - xPadding);
+    lDate = new Date(lDate.getTime() + xPadding);
+    // Need to draw graph with given small and large date
+    // (Which Involves customization of date axis tick values)
+    // That may be Either from given graph data or from prop 'tickValues' date values.
+    // So, Finding smallest and largest dates
+    sDate = (0, d3_array_1.min)(tslib_1.__spreadArray(tslib_1.__spreadArray([], tickValues, true), [sDate], false));
+    lDate = (0, d3_array_1.max)(tslib_1.__spreadArray(tslib_1.__spreadArray([], tickValues, true), [lDate], false));
+    var rStartValue = margins.left;
+    var rEndValue = width - margins.right;
+    return isRTL
+        ? { dStartValue: lDate, dEndValue: sDate, rStartValue: rStartValue, rEndValue: rEndValue }
+        : { dStartValue: sDate, dEndValue: lDate, rStartValue: rStartValue, rEndValue: rEndValue };
+}
+exports.domainRangeOfDateForScatterChart = domainRangeOfDateForScatterChart;
+/**
+ * Calculates Domain and range values for Numeric X axis for scatter chart.
+ * @export
+ * @param {LineChartPoints[]} points
+ * @param {IMargins} margins
+ * @param {number} width
+ * @param {boolean} isRTL
+ * @returns {IDomainNRange}
+ */
+function domainRangeOfNumericForScatterChart(points, margins, width, isRTL) {
+    var xMin = (0, d3_array_1.min)(points, function (point) {
+        return (0, d3_array_1.min)(point.data, function (item) { return item.x; });
+    });
+    var xMax = (0, d3_array_1.max)(points, function (point) {
+        return (0, d3_array_1.max)(point.data, function (item) {
+            return item.x;
+        });
+    });
+    var xPadding = (xMax - xMin) * 0.1;
+    xMin = xMin - xPadding;
+    xMax = xMax + xPadding;
+    var rStartValue = margins.left;
+    var rEndValue = width - margins.right;
+    return isRTL
+        ? { dStartValue: xMax, dEndValue: xMin, rStartValue: rStartValue, rEndValue: rEndValue }
+        : { dStartValue: xMin, dEndValue: xMax, rStartValue: rStartValue, rEndValue: rEndValue };
+}
+exports.domainRangeOfNumericForScatterChart = domainRangeOfNumericForScatterChart;
+function createYAxisForScatterChart(yAxisParams, isRtl, axisData, isIntegralDataset, useSecondaryYScale, _supportNegativeData, roundedTicks) {
+    if (useSecondaryYScale === void 0) { useSecondaryYScale = false; }
+    if (_supportNegativeData === void 0) { _supportNegativeData = false; }
+    if (roundedTicks === void 0) { roundedTicks = false; }
+    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;
+    var finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
+    var finalYmin = Math.min(yMinMaxValues.startValue, yMinValue || 0);
+    var domainValues = prepareDatapoints(finalYmax, finalYmin, yAxisTickCount, isIntegralDataset, roundedTicks);
+    var yMin = finalYmin;
+    var yMax = domainValues[domainValues.length - 1];
+    var yPadding = (yMax - yMin) * 0.1;
+    yMin = yMin - yPadding;
+    yMax = yMax + yPadding;
+    var yAxisScale = (0, d3_scale_1.scaleLinear)()
+        .domain([domainValues[0], yMax])
+        .range([containerHeight - margins.bottom, margins.top + (eventAnnotationProps ? eventLabelHeight : 0)]);
+    var axis = (!isRtl && useSecondaryYScale) || (isRtl && !useSecondaryYScale) ? (0, d3_axis_1.axisRight)(yAxisScale) : (0, d3_axis_1.axisLeft)(yAxisScale);
+    var yAxis = axis
+        .tickPadding(tickPadding)
+        .tickValues(domainValues)
+        .tickSizeInner(-(containerWidth - margins.left - margins.right));
+    yAxisTickFormat ? yAxis.tickFormat(yAxisTickFormat) : yAxis.tickFormat((0, d3_format_1.format)('.2~s'));
+    yAxisElement ? (0, d3_selection_1.select)(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
+    axisData.yAxisDomainValues = domainValues;
+    return yAxisScale;
+}
+exports.createYAxisForScatterChart = createYAxisForScatterChart;
 var truncateString = function (str, maxLength, ellipsis) {
     if (ellipsis === void 0) { ellipsis = '...'; }
     if (str.length <= maxLength) {