@fluentui/react-charting 5.24.2 → 5.24.3

package/lib/utilities/utilities.js

@@ -22,6 +22,7 @@ export var ChartTypes;
     ChartTypes[ChartTypes["GroupedVerticalBarChart"] = 4] = "GroupedVerticalBarChart";
     ChartTypes[ChartTypes["HeatMapChart"] = 5] = "HeatMapChart";
     ChartTypes[ChartTypes["HorizontalBarChartWithAxis"] = 6] = "HorizontalBarChartWithAxis";
+    ChartTypes[ChartTypes["ScatterChart"] = 7] = "ScatterChart";
 })(ChartTypes || (ChartTypes = {}));
 export var XAxisTypes;
 (function (XAxisTypes) {
@@ -470,6 +471,8 @@ export var createStringYAxis = function (yAxisParams, dataPoints, isRtl, barWidt
  * 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
 export function calloutData(values) {
     var combinedResult = [];
     values.forEach(function (line) {
@@ -481,6 +484,7 @@ export 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) {
@@ -509,7 +513,8 @@ export 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;
 }
@@ -1339,6 +1344,102 @@ export function getCurveFactory(curve, defaultFactory) {
             return defaultFactory;
     }
 }
+/**
+ * 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}
+ */
+export 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 = d3Min(points, function (point) {
+        return d3Min(point.data, function (item) {
+            return item.x;
+        });
+    });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    lDate = d3Max(points, function (point) {
+        return d3Max(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 = d3Min(__spreadArray(__spreadArray([], tickValues, true), [sDate], false));
+    lDate = d3Max(__spreadArray(__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 };
+}
+/**
+ * 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}
+ */
+export function domainRangeOfNumericForScatterChart(points, margins, width, isRTL) {
+    var xMin = d3Min(points, function (point) {
+        return d3Min(point.data, function (item) { return item.x; });
+    });
+    var xMax = d3Max(points, function (point) {
+        return d3Max(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 };
+}
+export 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 = d3ScaleLinear()
+        .domain([domainValues[0], yMax])
+        .range([containerHeight - margins.bottom, margins.top + (eventAnnotationProps ? eventLabelHeight : 0)]);
+    var axis = (!isRtl && useSecondaryYScale) || (isRtl && !useSecondaryYScale) ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
+    var yAxis = axis
+        .tickPadding(tickPadding)
+        .tickValues(domainValues)
+        .tickSizeInner(-(containerWidth - margins.left - margins.right));
+    yAxisTickFormat ? yAxis.tickFormat(yAxisTickFormat) : yAxis.tickFormat(d3Format('.2~s'));
+    yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
+    axisData.yAxisDomainValues = domainValues;
+    return yAxisScale;
+}
 export var truncateString = function (str, maxLength, ellipsis) {
     if (ellipsis === void 0) { ellipsis = '...'; }
     if (str.length <= maxLength) {