@fluentui/react-charts 9.0.1 → 9.0.3

package/lib-commonjs/utilities/utilities.js

@@ -33,6 +33,9 @@ _export(exports, {
     YAxisType: function() {
         return YAxisType;
     },
+    areArraysEqual: function() {
+        return areArraysEqual;
+    },
     calculateLongestLabelWidth: function() {
         return calculateLongestLabelWidth;
     },
@@ -81,12 +84,18 @@ _export(exports, {
     domainRangeOfDateForAreaLineVerticalBarChart: function() {
         return domainRangeOfDateForAreaLineVerticalBarChart;
     },
+    domainRangeOfDateForScatterChart: function() {
+        return domainRangeOfDateForScatterChart;
+    },
     domainRangeOfNumericForAreaChart: function() {
         return domainRangeOfNumericForAreaChart;
     },
     domainRangeOfNumericForHorizontalBarChartWithAxis: function() {
         return domainRangeOfNumericForHorizontalBarChartWithAxis;
     },
+    domainRangeOfNumericForScatterChart: function() {
+        return domainRangeOfNumericForScatterChart;
+    },
     domainRangeOfVSBCNumeric: function() {
         return domainRangeOfVSBCNumeric;
     },
@@ -123,6 +132,9 @@ _export(exports, {
     getBarWidth: function() {
         return getBarWidth;
     },
+    getCurveFactory: function() {
+        return getCurveFactory;
+    },
     getDomainNRangeValues: function() {
         return getDomainNRangeValues;
     },
@@ -132,6 +144,9 @@ _export(exports, {
     getScalePadding: function() {
         return getScalePadding;
     },
+    getSecureProps: function() {
+        return getSecureProps;
+    },
     getTypeOfAxis: function() {
         return getTypeOfAxis;
     },
@@ -179,6 +194,7 @@ const _d3selection = require("d3-selection");
 const _d3format = require("d3-format");
 const _d3timeformat = require("d3-time-format");
 const _d3time = require("d3-time");
+const _d3shape = require("d3-shape");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 var ChartTypes;
 (function(ChartTypes) {
@@ -189,6 +205,7 @@ var ChartTypes;
     ChartTypes[ChartTypes["GroupedVerticalBarChart"] = 4] = "GroupedVerticalBarChart";
     ChartTypes[ChartTypes["HeatMapChart"] = 5] = "HeatMapChart";
     ChartTypes[ChartTypes["HorizontalBarChartWithAxis"] = 6] = "HorizontalBarChartWithAxis";
+    ChartTypes[ChartTypes["ScatterChart"] = 7] = "ScatterChart";
 })(ChartTypes || (ChartTypes = {}));
 var XAxisTypes;
 (function(XAxisTypes) {
@@ -359,23 +376,68 @@ function useRtl() {
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)(); // "dir" returns "ltr" or "rtl"
     return dir === 'rtl';
 }
-function prepareDatapoints(maxVal, minVal, splitInto, isIntegralDataset) {
+function isPowerOf10(num) {
+    const roundedfinalYMax = handleFloatingPointPrecisionError(num);
+    return Math.log10(roundedfinalYMax) % 1 === 0;
+}
+//for reference, go through this 'https://docs.python.org/release/2.5.1/tut/node16.html'
+function handleFloatingPointPrecisionError(num) {
+    const rounded = Math.round(num);
+    return Math.abs(num - rounded) < 1e-6 ? rounded : num;
+}
+/**
+ * This method is used to calculate the rounded tick values for the y-axis
+ * @param {number} minVal
+ * @param {number} maxVal
+ * @param {number} splitInto
+ * @returns {number[]}
+ */ function calculateRoundedTicks(minVal, maxVal, splitInto) {
+    const finalYmin = minVal >= 0 && minVal === maxVal ? 0 : minVal;
+    const finalYmax = minVal < 0 && minVal === maxVal ? 0 : maxVal;
+    const ticksInterval = (0, _d3array.nice)(finalYmin, finalYmax, splitInto);
+    const ticks = (0, _d3array.ticks)(ticksInterval[0], ticksInterval[ticksInterval.length - 1], splitInto);
+    if (ticks[ticks.length - 1] > finalYmax && isPowerOf10(finalYmax)) {
+        ticks.pop();
+    }
+    return ticks;
+}
+function prepareDatapoints(maxVal, minVal, splitInto, isIntegralDataset, roundedTicks) {
+    if (roundedTicks) {
+        return calculateRoundedTicks(minVal, maxVal, splitInto);
+    }
     const val = isIntegralDataset ? Math.ceil((maxVal - minVal) / splitInto) : (maxVal - minVal) / splitInto >= 1 ? Math.ceil((maxVal - minVal) / splitInto) : (maxVal - minVal) / splitInto;
-    const dataPointsArray = [
-        minVal,
-        minVal + val
+    /*
+    For cases where we have negative and positive values
+    The dataPointsArray is filled from 0 to minVal by val difference
+    Then the array is reversed and values from 0(excluding 0) to maxVal are appended
+    This ensures presence of 0 to act as an anchor reference.
+    For simple cases where the scale may not encounter such a need for 0,
+    We simply fill from minVal to maxVal
+  */ const dataPointsArray = [
+        minVal < 0 && maxVal >= 0 ? 0 : minVal
     ];
+    /*For the case of all positive or all negative, we need to add another value
+     in array for atleast one interval, but in case of mix of positive and negative,
+     there will always be one more entry that will be added by the logic we have*/ if (dataPointsArray[0] === minVal) {
+        dataPointsArray.push(minVal + val);
+    }
+    if (minVal < 0 && maxVal >= 0) {
+        while(dataPointsArray[dataPointsArray.length - 1] > minVal){
+            dataPointsArray.push(dataPointsArray[dataPointsArray.length - 1] - val);
+        }
+        dataPointsArray.reverse();
+    }
     while(dataPointsArray[dataPointsArray.length - 1] < maxVal){
         dataPointsArray.push(dataPointsArray[dataPointsArray.length - 1] + val);
     }
     return dataPointsArray;
 }
-function createYAxis(yAxisParams, isRtl, axisData, chartType, barWidth, isIntegralDataset, useSecondaryYScale = false) {
+function createYAxis(yAxisParams, isRtl, axisData, chartType, barWidth, isIntegralDataset, useSecondaryYScale = false, roundedTicks = false) {
     switch(chartType){
         case 6:
             return createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl, axisData, barWidth);
         default:
-            return createYAxisForOtherCharts(yAxisParams, isRtl, axisData, isIntegralDataset, useSecondaryYScale);
+            return createYAxisForOtherCharts(yAxisParams, isRtl, axisData, isIntegralDataset, chartType, useSecondaryYScale, roundedTicks);
     }
 }
 function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl, axisData, barWidth) {
@@ -397,10 +459,10 @@ function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl, axisData,
     const axis = isRtl ? (0, _d3axis.axisRight)(yAxisScale) : (0, _d3axis.axisLeft)(yAxisScale);
     const yAxis = axis.tickPadding(tickPadding).ticks(yAxisTickCount);
     yAxisTickFormat ? yAxis.tickFormat(yAxisTickFormat) : yAxis.tickFormat((0, _d3format.format)('.2~s'));
-    yAxisElement ? (0, _d3selection.select)(yAxisElement).call((g)=>yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
+    yAxisElement ? (0, _d3selection.select)(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
     return yAxisScale;
 }
-function createYAxisForOtherCharts(yAxisParams, isRtl, axisData, isIntegralDataset, useSecondaryYScale = false) {
+function createYAxisForOtherCharts(yAxisParams, isRtl, axisData, isIntegralDataset, chartType, useSecondaryYScale = false, roundedTicks = false) {
     const { yMinMaxValues = {
         startValue: 0,
         endValue: 0
@@ -408,11 +470,18 @@ function createYAxisForOtherCharts(yAxisParams, isRtl, axisData, isIntegralDatas
     // maxOfYVal coming from only area chart and Grouped vertical bar chart(Calculation done at base file)
     const tempVal = maxOfYVal || yMinMaxValues.endValue;
     const finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
-    const finalYmin = yMinMaxValues.startValue < yMinValue ? 0 : yMinValue;
-    const domainValues = prepareDatapoints(finalYmax, finalYmin, yAxisTickCount, isIntegralDataset);
+    const finalYmin = Math.min(yMinMaxValues.startValue, yMinValue || 0);
+    const domainValues = prepareDatapoints(finalYmax, finalYmin, yAxisTickCount, isIntegralDataset, roundedTicks);
+    let yMin = finalYmin;
+    let yMax = domainValues[domainValues.length - 1];
+    if (chartType === 7) {
+        const yPadding = (yMax - yMin) * 0.1;
+        yMin = yMin - yPadding;
+        yMax = yMax + yPadding;
+    }
     const yAxisScale = (0, _d3scale.scaleLinear)().domain([
-        finalYmin,
-        domainValues[domainValues.length - 1]
+        domainValues[0],
+        yMax
     ]).range([
         containerHeight - margins.bottom,
         margins.top + (eventAnnotationProps ? eventLabelHeight : 0)
@@ -443,7 +512,7 @@ const createStringYAxisForHorizontalBarChartWithAxis = (yAxisParams, dataPoints,
     if (yAxisTickFormat) {
         yAxis.tickFormat(yAxisTickFormat);
     }
-    yAxisElement ? (0, _d3selection.select)(yAxisElement).call((g)=>yAxis).selectAll('text') : '';
+    yAxisElement ? (0, _d3selection.select)(yAxisElement).call(yAxis).selectAll('text') : '';
     return yAxisScale;
 };
 const createStringYAxisForOtherCharts = (yAxisParams, dataPoints, isRtl)=>{
@@ -457,7 +526,7 @@ const createStringYAxisForOtherCharts = (yAxisParams, dataPoints, isRtl)=>{
     if (yAxisTickFormat) {
         yAxis.tickFormat(yAxisTickFormat);
     }
-    yAxisElement ? (0, _d3selection.select)(yAxisElement).call((g)=>yAxis).selectAll('text') : '';
+    yAxisElement ? (0, _d3selection.select)(yAxisElement).call(yAxis).selectAll('text') : '';
     return yAxisScale;
 };
 function calloutData(values) {
@@ -501,8 +570,9 @@ function calloutData(values) {
         }
     });
     const result = Object.keys(xValToDataPoints).map((xValue)=>{
+        const originalXValue = isNaN(Number(xValue)) ? xValue : Number(xValue);
         return {
-            x: Number(xValue),
+            x: originalXValue,
             values: xValToDataPoints[xValue]
         };
     });
@@ -531,7 +601,7 @@ function createWrapOfXLabels(wrapLabelProps) {
     if (node === null) {
         return;
     }
-    const axisNode = (0, _d3selection.select)(node).call((g)=>xAxis);
+    const axisNode = (0, _d3selection.select)(node).call(xAxis);
     let removeVal = 0;
     const width = 10;
     const arr = [];
@@ -596,6 +666,7 @@ function createYAxisLabels(node, yAxis, noOfCharsToTruncate, truncateLabel, xVal
     if (node === null) {
         return;
     }
+    let tickIndex = 0;
     const axisNode = (0, _d3selection.select)(node).call(yAxis);
     axisNode.selectAll('.tick text').each(function() {
         const text = (0, _d3selection.select)(this);
@@ -607,11 +678,12 @@ function createYAxisLabels(node, yAxis, noOfCharsToTruncate, truncateLabel, xVal
         const x = text.attr('x');
         const dy = parseFloat(text.attr('dy'));
         const dx = 0;
-        text.text(null).append('tspan').attr('x', x).attr('y', y).attr('id', 'BaseSpan').attr('dy', dy + 'em').attr('data-', totalWord);
+        const uid = tickIndex++;
+        text.text(null).append('tspan').attr('x', x).attr('y', y).attr('id', `BaseSpan-${uid}`).attr('dy', dy + 'em').attr('data-', totalWord);
         if (truncateLabel && totalWordLength > noOfCharsToTruncate) {
-            text.append('tspan').attr('id', 'showDots').attr('x', isRtl ? 0 : x).attr('y', y).attr('dy', dy).attr('dx', padding + dx + 'em').text(truncatedWord);
+            text.append('tspan').attr('id', `showDots-${uid}`).attr('x', isRtl ? 0 : 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 ? 0 : x).attr('y', y).attr('dx', padding + dx + 'em').text(totalWord);
+            text.attr('text-align', 'start').append('tspan').attr('id', `LessLength-${uid}`).attr('x', isRtl ? 0 : x).attr('y', y).attr('dx', padding + dx + 'em').text(totalWord);
         }
     });
 }
@@ -713,6 +785,32 @@ function domainRangeOfNumericForAreaChart(points, margins, width, isRTL) {
         rEndValue
     };
 }
+function domainRangeOfNumericForScatterChart(points, margins, width, isRTL) {
+    let xMin = (0, _d3array.min)(points, (point)=>{
+        return (0, _d3array.min)(point.data, (item)=>item.x);
+    });
+    let xMax = (0, _d3array.max)(points, (point)=>{
+        return (0, _d3array.max)(point.data, (item)=>{
+            return item.x;
+        });
+    });
+    const xPadding = (xMax - xMin) * 0.1;
+    xMin = xMin - xPadding;
+    xMax = xMax + xPadding;
+    const rStartValue = margins.left;
+    const rEndValue = width - margins.right;
+    return isRTL ? {
+        dStartValue: xMax,
+        dEndValue: xMin,
+        rStartValue,
+        rEndValue
+    } : {
+        dStartValue: xMin,
+        dEndValue: xMax,
+        rStartValue,
+        rEndValue
+    };
+}
 function domainRangeOfNumericForHorizontalBarChartWithAxis(points, margins, containerWidth, isRTL, shiftX) {
     const xMax = (0, _d3array.max)(points, (point)=>point.x);
     const rMin = isRTL ? margins.left : margins.left + shiftX;
@@ -809,6 +907,50 @@ function domainRangeOfDateForAreaLineVerticalBarChart(points, margins, width, is
         rEndValue
     };
 }
+function domainRangeOfDateForScatterChart(points, margins, width, isRTL, tickValues = []) {
+    let sDate;
+    let lDate;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    sDate = (0, _d3array.min)(points, (point)=>{
+        return (0, _d3array.min)(point.data, (item)=>{
+            return item.x;
+        });
+    });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    lDate = (0, _d3array.max)(points, (point)=>{
+        return (0, _d3array.max)(point.data, (item)=>{
+            return item.x;
+        });
+    });
+    const 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, _d3array.min)([
+        ...tickValues,
+        sDate
+    ]);
+    lDate = (0, _d3array.max)([
+        ...tickValues,
+        lDate
+    ]);
+    const rStartValue = margins.left;
+    const rEndValue = width - margins.right;
+    return isRTL ? {
+        dStartValue: lDate,
+        dEndValue: sDate,
+        rStartValue,
+        rEndValue
+    } : {
+        dStartValue: sDate,
+        dEndValue: lDate,
+        rStartValue,
+        rEndValue
+    };
+}
 function domainRageOfVerticalNumeric(points, margins, containerWidth, isRTL, barWidth) {
     const xMax = (0, _d3array.max)(points, (point)=>point.x);
     const xMin = (0, _d3array.min)(points, (point)=>point.x);
@@ -843,6 +985,9 @@ function getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisTy
             case 6:
                 domainNRangeValue = domainRangeOfNumericForHorizontalBarChartWithAxis(points, margins, width, isRTL, shiftX);
                 break;
+            case 7:
+                domainNRangeValue = domainRangeOfNumericForScatterChart(points, margins, width, isRTL);
+                break;
             default:
                 domainNRangeValue = {
                     dStartValue: 0,
@@ -859,6 +1004,9 @@ function getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisTy
             case 3:
                 domainNRangeValue = domainRangeOfDateForAreaLineVerticalBarChart(points, margins, width, isRTL, tickValues, chartType, barWidth);
                 break;
+            case 7:
+                domainNRangeValue = domainRangeOfDateForScatterChart(points, margins, width, isRTL, tickValues);
+                break;
             default:
                 domainNRangeValue = {
                     dStartValue: 0,
@@ -874,6 +1022,7 @@ function getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisTy
             case 4:
             case 2:
             case 5:
+            case 7:
                 domainNRangeValue = domainRangeOfXStringAxis(margins, width, isRTL);
                 break;
             default:
@@ -954,6 +1103,7 @@ function getMinMaxOfYAxis(points, chartType, yAxisType = 0) {
     switch(chartType){
         case 0:
         case 1:
+        case 7:
             minMaxValues = findNumericMinMaxOfY(points);
             break;
         case 3:
@@ -1175,6 +1325,20 @@ const formatDate = (date, useUTC)=>{
     const timeFormat = useUTC ? _d3timeformat.utcFormat : _d3timeformat.timeFormat;
     return timeFormat('%-e %b %Y, %H:%M')(date) + (useUTC ? ' GMT' : '');
 };
+function areArraysEqual(arr1, arr2) {
+    if (arr1 === arr2 || !arr1 && !arr2) {
+        return true;
+    }
+    if (!arr1 || !arr2 || arr1.length !== arr2.length) {
+        return false;
+    }
+    for(let i = 0; i < arr1.length; i++){
+        if (arr1[i] !== arr2[i]) {
+            return false;
+        }
+    }
+    return true;
+}
 const cssVarRegExp = /var\((--[a-zA-Z0-9\-]+)\)/g;
 function resolveCSSVariables(chartContainer, styleRules) {
     const containerStyles = getComputedStyle(chartContainer);
@@ -1182,3 +1346,26 @@ function resolveCSSVariables(chartContainer, styleRules) {
         return containerStyles.getPropertyValue(group1);
     });
 }
+function getSecureProps(props = {}) {
+    const { dangerouslySetInnerHTML, ...result } = props;
+    return result;
+}
+function getCurveFactory(curve, defaultFactory = _d3shape.curveLinear) {
+    if (typeof curve === 'function') {
+        return curve;
+    }
+    switch(curve){
+        case 'linear':
+            return _d3shape.curveLinear;
+        case 'natural':
+            return _d3shape.curveNatural;
+        case 'step':
+            return _d3shape.curveStep;
+        case 'stepAfter':
+            return _d3shape.curveStepAfter;
+        case 'stepBefore':
+            return _d3shape.curveStepBefore;
+        default:
+            return defaultFactory;
+    }
+}