@fluentui/react-charts 9.3.2 → 9.3.4

package/lib/components/AreaChart/AreaChart.js

@@ -7,7 +7,7 @@ import { select as d3Select } from 'd3-selection';
 import { tokens } from '@fluentui/react-theme';
 import { area as d3Area, stack as d3Stack, curveMonotoneX as d3CurveBasis, line as d3Line } from 'd3-shape';
 import { CartesianChart } from '../../index';
-import { calloutData, getXAxisType, ChartTypes, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, getNextColor, getColorFromToken, getSecureProps, areArraysEqual, getCurveFactory, find, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfNumericForAreaLineScatterCharts, domainRangeOfDateForAreaLineScatterVerticalBarCharts, createStringYAxis, useRtl } from '../../utilities/index';
+import { calloutData, getXAxisType, ChartTypes, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, getNextColor, getColorFromToken, getSecureProps, areArraysEqual, getCurveFactory, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfNumericForAreaLineScatterCharts, domainRangeOfDateForAreaLineScatterVerticalBarCharts, createStringYAxis, useRtl, findCalloutPoints } from '../../utilities/index';
 import { useId } from '@fluentui/react-utilities';
 import { Legends } from '../Legends/index';
 import { toImage } from '../../utilities/image-export-utils';
@@ -33,6 +33,8 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     const _firstRenderOptimization = true;
     const _emptyChartId = useId('_AreaChart_empty');
     let _containsSecondaryYAxis = false;
+    let _hasMissingXValues = _containsMissingXValues();
+    let _hasDuplicateXValues = _xCoordinateContainsMultipleY();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let _calloutPoints;
     let _createSet;
@@ -161,11 +163,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         // eslint-disable-next-line @typescript-eslint/no-shadow
         const { xAxisCalloutData, xAxisCalloutAccessibilityData } = lineChartData[0].data[index];
         const formattedDate = pointToHighlight instanceof Date ? formatDateToLocaleString(pointToHighlight, props.culture, props.useUTC) : pointToHighlight;
-        const modifiedXVal = pointToHighlight instanceof Date ? pointToHighlight.getTime() : pointToHighlight;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const found = find(_calloutPoints, (element)=>{
-            return element.x === modifiedXVal;
-        });
+        const found = findCalloutPoints(_calloutPoints, pointToHighlight);
         // eslint-disable-next-line @typescript-eslint/no-shadow
         const _nearestCircleToHighlight = axisType === XAxisTypes.DateAxis ? pointToHighlight.getTime() : pointToHighlight;
         // if no points need to be called out then don't show vertical line and callout card
@@ -272,7 +270,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         };
     }
     function _createDataSet(points) {
-        if (props.enablePerfOptimization && _enableComputationOptimization) {
+        if (props.enablePerfOptimization && _enableComputationOptimization && !_hasDuplicateXValues) {
             const allChartPoints = [];
             const dataSet = [];
             const colors = [];
@@ -327,35 +325,50 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
             const colors = [];
             const opacity = [];
             const calloutPoints = calloutData(points);
+            let data = {};
+            const keys = [];
+            let index = 0;
             points && points.length && points.forEach((singleChartPoint)=>{
+                // if legend is not populated, then assign a legend
+                if (_hasDuplicateXValues && !singleChartPoint.legend) {
+                    singleChartPoint.legend = `chart${index}`;
+                    ++index;
+                }
+                singleChartPoint.data.forEach((point)=>{
+                    point.legend = singleChartPoint.legend;
+                });
                 colors.push(singleChartPoint.color);
                 opacity.push(singleChartPoint.opacity || 1);
                 allChartPoints.push(...singleChartPoint.data);
             });
-            let tempArr = allChartPoints;
-            while(tempArr.length){
-                const valToCheck = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
-                const filteredChartPoints = tempArr.filter((point)=>(point.x instanceof Date ? point.x.toLocaleString() : point.x) === valToCheck);
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const singleDataset = {};
-                filteredChartPoints.forEach((singleDataPoint, index)=>{
-                    singleDataset.xVal = singleDataPoint.x;
-                    singleDataset[`chart${index}`] = singleDataPoint.y;
-                });
-                dataSet.push(singleDataset);
-                // removing compared objects from array
-                const val = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
-                tempArr = tempArr.filter((point)=>(point.x instanceof Date ? point.x.toLocaleString() : point.x) !== val);
-            }
-            // get keys from dataset, used to create stacked data
-            const keysLength = dataSet && Object.keys(dataSet[0]).length;
-            const keys = [];
-            for(let i = 0; i < keysLength - 1; i++){
-                const keyVal = `chart${i}`;
-                keys.push(keyVal);
+            if (!_hasDuplicateXValues) {
+                let tempArr = allChartPoints;
+                while(tempArr.length){
+                    const valToCheck = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
+                    const filteredChartPoints = tempArr.filter((point)=>(point.x instanceof Date ? point.x.toLocaleString() : point.x) === valToCheck);
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const singleDataset = {};
+                    filteredChartPoints.forEach((singleDataPoint, id)=>{
+                        singleDataset.xVal = singleDataPoint.x;
+                        singleDataset[`chart${id}`] = singleDataPoint.y;
+                    });
+                    dataSet.push(singleDataset);
+                    // removing compared objects from array
+                    const val = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
+                    tempArr = tempArr.filter((point)=>(point.x instanceof Date ? point.x.toLocaleString() : point.x) !== val);
+                }
+                // get keys from dataset, used to create stacked data
+                const keysLength = dataSet && Object.keys(dataSet[0]).length;
+                for(let i = 0; i < keysLength - 1; i++){
+                    const keyVal = `chart${i}`;
+                    keys.push(keyVal);
+                }
+                // Data used to draw graph
+                data = _getDataPoints(keys, dataSet);
+            } else {
+                const datasetForDuplicateValues = _createDatasetForXCoordinateWithMultipleYValues(allChartPoints);
+                data = _getDataPoints(datasetForDuplicateValues.keys, datasetForDuplicateValues.filteredDataSet);
             }
-            // Data used to draw graph
-            const data = _getDataPoints(keys, dataSet);
             return {
                 colors,
                 opacity,
@@ -365,6 +378,56 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
             };
         }
     }
+    function _createDatasetForXCoordinateWithMultipleYValues(allChartPoints) {
+        const dataSet = [];
+        // Group data points by x-axis value
+        const groupedData = {};
+        allChartPoints.forEach((dataPoint)=>{
+            const xValue = dataPoint.x instanceof Date ? dataPoint.x.toLocaleString() : dataPoint.x;
+            if (!groupedData[xValue]) {
+                groupedData[xValue] = [];
+            }
+            groupedData[xValue].push(dataPoint);
+        });
+        // Aggregate data points for each x-axis value
+        Object.keys(groupedData).forEach((xValue)=>{
+            const dataPoints = groupedData[xValue];
+            dataPoints.forEach((dataPoint, id)=>{
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const singleDataset = {
+                    xVal: dataPoints[0].x
+                };
+                const key = dataPoint.legend ? dataPoint.legend : `chart${id}`;
+                singleDataset[key] = dataPoint.y;
+                dataSet.push(singleDataset);
+            });
+        });
+        // get all unique keys from each array within the dataSet
+        const allLegends = [];
+        dataSet.forEach((item)=>{
+            Object.keys(item).forEach((key)=>{
+                if (key !== 'xVal' && !allLegends.includes(key)) {
+                    allLegends.push(key);
+                }
+            });
+        });
+        dataSet.forEach((item)=>{
+            allLegends.forEach((legend)=>{
+                if (!item[legend]) {
+                    item[legend] = 0; // Fill with 0 if the legend is missing
+                }
+            });
+        });
+        // exclude all items within dataset having all legend values 0
+        const filteredDataSet = dataSet.filter((item)=>{
+            return allLegends.some((legend)=>item[legend] !== 0);
+        });
+        const keys = Array.from(new Set(filteredDataSet.flatMap((item)=>Object.keys(item).filter((key)=>key !== 'xVal'))));
+        return {
+            keys,
+            filteredDataSet
+        };
+    }
     function _getCustomizedCallout() {
         return props.onRenderCalloutPerStack ? props.onRenderCalloutPerStack(stackCalloutProps) : props.onRenderCalloutPerDataPoint ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps) : null;
     }
@@ -466,9 +529,9 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         let lineColor;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         _data.forEach((singleStackedData, index)=>{
-            var _points_index_lineOptions, _points_index_lineOptions1, _points_index_lineOptions2, _points_index_lineOptions3, _points_index_lineOptions4;
-            const yScale = points[index].useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
-            const curveFactory = getCurveFactory((_points_index_lineOptions = points[index].lineOptions) === null || _points_index_lineOptions === void 0 ? void 0 : _points_index_lineOptions.curve, d3CurveBasis);
+            var _points_index, _points_index_lineOptions, _points_index1, _points_index_lineOptions1, _points_index2, _points_index_lineOptions2, _points_index3, _points_index_lineOptions3, _points_index4, _points_index_lineOptions4, _points_index5;
+            const yScale = ((_points_index = points[index]) === null || _points_index === void 0 ? void 0 : _points_index.useSecondaryYScale) && yScaleSecondary ? yScaleSecondary : yScalePrimary;
+            const curveFactory = getCurveFactory((_points_index1 = points[index]) === null || _points_index1 === void 0 ? void 0 : (_points_index_lineOptions = _points_index1.lineOptions) === null || _points_index_lineOptions === void 0 ? void 0 : _points_index_lineOptions.curve, d3CurveBasis);
             const area = d3Area()// eslint-disable-next-line @typescript-eslint/no-explicit-any
             .x((d)=>xScale(d.xVal))// eslint-disable-next-line @typescript-eslint/no-explicit-any
             .y0((d)=>yScale(d.values[0]))// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -496,15 +559,15 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
                 id: `${index}-line-${_uniqueIdForGraph}`,
                 d: line(singleStackedData),
                 fill: 'transparent',
-                strokeWidth: (_points_index_lineOptions_strokeWidth = (_points_index_lineOptions1 = points[index].lineOptions) === null || _points_index_lineOptions1 === void 0 ? void 0 : _points_index_lineOptions1.strokeWidth) !== null && _points_index_lineOptions_strokeWidth !== void 0 ? _points_index_lineOptions_strokeWidth : 3,
+                strokeWidth: (_points_index_lineOptions_strokeWidth = (_points_index2 = points[index]) === null || _points_index2 === void 0 ? void 0 : (_points_index_lineOptions1 = _points_index2.lineOptions) === null || _points_index_lineOptions1 === void 0 ? void 0 : _points_index_lineOptions1.strokeWidth) !== null && _points_index_lineOptions_strokeWidth !== void 0 ? _points_index_lineOptions_strokeWidth : 3,
                 stroke: _colors[index],
                 opacity: _getLineOpacity(points[index].legend),
                 onMouseMove: (event)=>_onRectMouseMove(event),
                 onMouseOut: _onRectMouseOut,
                 onMouseOver: (event)=>_onRectMouseMove(event),
-                strokeDasharray: (_points_index_lineOptions2 = points[index].lineOptions) === null || _points_index_lineOptions2 === void 0 ? void 0 : _points_index_lineOptions2.strokeDasharray,
-                strokeDashoffset: (_points_index_lineOptions3 = points[index].lineOptions) === null || _points_index_lineOptions3 === void 0 ? void 0 : _points_index_lineOptions3.strokeDashoffset,
-                strokeLinecap: (_points_index_lineOptions4 = points[index].lineOptions) === null || _points_index_lineOptions4 === void 0 ? void 0 : _points_index_lineOptions4.strokeLinecap
+                strokeDasharray: (_points_index3 = points[index]) === null || _points_index3 === void 0 ? void 0 : (_points_index_lineOptions2 = _points_index3.lineOptions) === null || _points_index_lineOptions2 === void 0 ? void 0 : _points_index_lineOptions2.strokeDasharray,
+                strokeDashoffset: (_points_index4 = points[index]) === null || _points_index4 === void 0 ? void 0 : (_points_index_lineOptions3 = _points_index4.lineOptions) === null || _points_index_lineOptions3 === void 0 ? void 0 : _points_index_lineOptions3.strokeDashoffset,
+                strokeLinecap: (_points_index5 = points[index]) === null || _points_index5 === void 0 ? void 0 : (_points_index_lineOptions4 = _points_index5.lineOptions) === null || _points_index_lineOptions4 === void 0 ? void 0 : _points_index_lineOptions4.strokeLinecap
             }), singleStackedData.length === 1 ? /*#__PURE__*/ React.createElement("circle", {
                 id: `${index}-graph-${_uniqueIdForGraph}`,
                 cx: xScale(singleStackedData[0].xVal),
@@ -538,10 +601,11 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         const circleRadius = pointOptions && pointOptions.r ? Number(pointOptions.r) : 8;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         _data.forEach((singleStackedData, index)=>{
+            var _points_index;
             if (points.length === index) {
                 return;
             }
-            const yScale = points[index].useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
+            const yScale = ((_points_index = points[index]) === null || _points_index === void 0 ? void 0 : _points_index.useSecondaryYScale) && yScaleSecondary ? yScaleSecondary : yScalePrimary;
             if (!props.optimizeLargeData || singleStackedData.length === 1) {
                 // Render circles for all data points
                 graph.push(/*#__PURE__*/ React.createElement("g", {
@@ -565,13 +629,13 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
                         fill: _updateCircleFillColor(xDataPoint, lineColor, circleId),
                         onMouseOut: _onRectMouseOut,
                         onMouseOver: (event)=>_onRectMouseMove(event),
-                        onClick: ()=>_onDataPointClick(points[index].data[pointIndex].onDataPointClick),
+                        ..._getOnClickHandler(points, index, pointIndex),
                         onFocus: (event)=>_handleFocus(event, index, pointIndex, circleId),
                         onBlur: _handleBlur,
                         ...getSecureProps(pointOptions),
                         r: _getCircleRadius(xDataPoint, circleRadius, circleId, legend),
                         role: "img",
-                        "aria-label": _getAriaLabel(index, pointIndex)
+                        "aria-label": !_hasDuplicateXValues && !_hasMissingXValues && _getAriaLabel(index, pointIndex) || undefined
                     });
                 })));
             } else {
@@ -593,7 +657,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
                             onMouseOut: _onRectMouseOut,
                             onMouseOver: (event)=>_onRectMouseMove(event),
                             onFocus: (event)=>_handleFocus(event, index, pointIndex, circleId),
-                            onClick: ()=>_onDataPointClick(points[index].data[pointIndex].onDataPointClick),
+                            ..._getOnClickHandler(points, index, pointIndex),
                             ...getSecureProps(pointOptions),
                             r: _getCircleRadius(xDataPoint, circleRadius, circleId, legend)
                         }));
@@ -640,6 +704,14 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         }
         return graph;
     }
+    function _getOnClickHandler(points, index, pointIndex) {
+        if (!_hasDuplicateXValues && !_hasMissingXValues) {
+            return {
+                onClick: ()=>_onDataPointClick(points[index].data[pointIndex].onDataPointClick)
+            };
+        }
+        return {};
+    }
     function _getCircleRadius(xDataPoint, circleRadius, circleId, legend) {
         // Show the circle if no legends are selected or if the point's legend is in the selected legends
         if (!_noLegendHighlighted() && !_legendHighlighted(legend)) {
@@ -672,6 +744,36 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         ] : [];
     }
     function _addDefaultColors(lineChartData) {
+        if (_hasMissingXValues) {
+            // get union of all x values
+            const allXValues = new Set();
+            lineChartData && lineChartData.forEach((line)=>{
+                line.data.forEach((point)=>{
+                    const xValue = point.x instanceof Date ? point.x.toLocaleString() : point.x;
+                    allXValues.add(xValue);
+                });
+            });
+            lineChartData && lineChartData.forEach((line)=>{
+                allXValues.forEach((xValue)=>{
+                    const point = line.data.find((item)=>{
+                        return item.x instanceof Date ? item.x.toLocaleString() === xValue : item.x === xValue;
+                    });
+                    if (!point) {
+                        line.data.push({
+                            x: typeof xValue === 'string' ? new Date(xValue) : xValue,
+                            y: 0,
+                            legend: line.legend
+                        });
+                    }
+                });
+                // sort the data points by x value
+                line.data.sort((a, b)=>{
+                    const xA = a.x instanceof Date ? a.x.getTime() : a.x;
+                    const xB = b.x instanceof Date ? b.x.getTime() : b.x;
+                    return xA < xB ? -1 : xA > xB ? 1 : 0;
+                });
+            });
+        }
         return lineChartData ? lineChartData.map((item, index)=>{
             let color;
             // isInverted property is applicable to v8 themes only
@@ -695,24 +797,24 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         _updatePosition(cx, cy);
         const { x, y, xAxisCalloutData } = props.data.lineChartData[lineIndex].data[pointIndex];
         const formattedDate = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
-        const modifiedXVal = x instanceof Date ? x.getTime() : x;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const found = _calloutPoints.find((e)=>e.x === modifiedXVal);
-        // Show details in the callout for the focused point only
-        found.values = found.values.filter((e)=>e.y === y);
-        const filteredValues = _getFilteredLegendValues(found.values);
-        setPopoverOpen(true);
-        setHoverXValue(xAxisCalloutData ? xAxisCalloutData : formattedDate);
-        setYValueHover(filteredValues);
-        setStackCalloutProps({
-            ...found,
-            values: filteredValues
-        });
-        setDataPointCalloutProps({
-            ...found,
-            values: filteredValues
-        });
-        setActivePoint(circleId);
+        const found = findCalloutPoints(_calloutPoints, x);
+        if (found) {
+            // Show details in the callout for the focused point only
+            found.values = found.values.filter((e)=>e.y === y);
+            const filteredValues = _getFilteredLegendValues(found.values);
+            setPopoverOpen(true);
+            setHoverXValue(xAxisCalloutData ? xAxisCalloutData : formattedDate);
+            setYValueHover(filteredValues);
+            setStackCalloutProps({
+                ...found,
+                values: filteredValues
+            });
+            setDataPointCalloutProps({
+                ...found,
+                values: filteredValues
+            });
+            setActivePoint(circleId);
+        }
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function _getFilteredLegendValues(values) {
@@ -744,6 +846,52 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         const { chartTitle, lineChartData } = props.data;
         return (chartTitle ? `${chartTitle}. ` : '') + `Area chart with ${(lineChartData === null || lineChartData === void 0 ? void 0 : lineChartData.length) || 0} data series. `;
     }
+    function _xCoordinateContainsMultipleY() {
+        const { lineChartData } = props.data;
+        if (!lineChartData) {
+            return false;
+        }
+        for (const item of lineChartData){
+            const xValueMap = {};
+            for (const point of item.data){
+                const xValue = point.x instanceof Date ? point.x.toLocaleString() : point.x;
+                if (!xValueMap[xValue]) {
+                    xValueMap[xValue] = [];
+                }
+                xValueMap[xValue].push(point.y);
+                if (xValueMap[xValue].length > 1) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    function _containsMissingXValues() {
+        const { lineChartData } = props.data;
+        if (!lineChartData) {
+            return false;
+        }
+        const allXValues = new Set();
+        lineChartData.forEach((line)=>{
+            line.data.forEach((point)=>{
+                const xValue = point.x instanceof Date ? point.x.toLocaleString() : point.x;
+                allXValues.add(xValue);
+            });
+        });
+        // for all x values, check if the x value is present in all series
+        let hasMissingValues = false;
+        lineChartData.forEach((line)=>{
+            allXValues.forEach((xValue)=>{
+                const point = line.data.find((item)=>{
+                    return item.x instanceof Date ? item.x.toLocaleString() === xValue : item.x === xValue;
+                });
+                if (!point) {
+                    hasMissingValues = true;
+                }
+            });
+        });
+        return hasMissingValues;
+    }
     function _shouldFillToZeroY() {
         return props.mode === 'tozeroy' || _containsSecondaryYAxis;
     }
@@ -769,7 +917,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
             xAxisCalloutAccessibilityData,
             ...props.calloutProps,
             clickPosition,
-            isPopoverOpen,
+            isPopoverOpen: isPopoverOpen && !_hasDuplicateXValues && !_hasMissingXValues,
             isCartesian: true,
             customCallout: {
                 customizedCallout: _getCustomizedCallout() !== null ? _getCustomizedCallout() : undefined,