@fluentui/react-charts 9.0.2 → 9.0.3

package/lib/components/LineChart/LineChart.js

@@ -3,13 +3,13 @@ import { useLineChartStyles } from './useLineChartStyles.styles';
 import { select as d3Select, pointer } from 'd3-selection';
 import { bisector } from 'd3-array';
 import { Legends } from '../Legends/index';
-import { line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';
+import { line as d3Line } from 'd3-shape';
 import { useId } from '@fluentui/react-utilities';
 import { find } from '../../utilities/index';
 import { CartesianChart } from '../../index';
 import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
 import { tokens } from '@fluentui/react-theme';
-import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfXAxislabels, Points, pointTypes, getMinMaxOfYAxis, getTypeOfAxis, getNextColor, getColorFromToken, useRtl, formatDate } from '../../utilities/index';
+import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfXAxislabels, Points, pointTypes, getMinMaxOfYAxis, getTypeOfAxis, getNextColor, getColorFromToken, useRtl, formatDate, getCurveFactory } from '../../utilities/index';
 var PointSize;
 (function(PointSize) {
     PointSize[PointSize["hoverSize"] = 11] = "hoverSize";
@@ -87,6 +87,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
  * Linechart component
  * {@docCategory LineChart}
  */ export const LineChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    var _props_legendProps_selectedLegends, _props_legendProps;
     let _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let _calloutPoints = calloutData(_points) || [];
@@ -120,9 +121,10 @@ const PATH_MULTIPLY_SIZE = 2.5;
     const [activeLegend, setActiveLegend] = React.useState('');
     const [YValueHover, setYValueHover] = React.useState([]);
     const [selectedLegend, setSelectedLegend] = React.useState('');
-    const [selectedLegendPoints, setSelectedLegendPoints] = React.useState([]);
+    const [selectedLegendPoints, setSelectedLegendPoints] = React.useState(_injectIndexPropertyInLineChartData(props.data.lineChartData, true));
     const [selectedColorBarLegend, setSelectedColorBarLegend] = React.useState([]);
-    const [isSelectedLegend, setIsSelectedLegend] = React.useState(false);
+    var _props_legendProps_selectedLegends_length;
+    const [isSelectedLegend, setIsSelectedLegend] = React.useState(((_props_legendProps_selectedLegends_length = (_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : (_props_legendProps_selectedLegends = _props_legendProps.selectedLegends) === null || _props_legendProps_selectedLegends === void 0 ? void 0 : _props_legendProps_selectedLegends.length) !== null && _props_legendProps_selectedLegends_length !== void 0 ? _props_legendProps_selectedLegends_length : 0) > 0);
     const [activePoint, setActivePoint] = React.useState('');
     const [nearestCircleToHighlight, setNearestCircleToHighlight] = React.useState(null);
     const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState();
@@ -153,9 +155,14 @@ const PATH_MULTIPLY_SIZE = 2.5;
             chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : null
         };
     }, []);
-    function _injectIndexPropertyInLineChartData(lineChartData) {
+    function _injectIndexPropertyInLineChartData(lineChartData, isFilterSelectedLegends = false) {
         const { allowMultipleShapesForPoints = false } = props;
-        return lineChartData ? lineChartData.map((item, index)=>{
+        // Apply filter only if isPropChange is true
+        const filteredData = isFilterSelectedLegends ? lineChartData === null || lineChartData === void 0 ? void 0 : lineChartData.filter((item)=>{
+            var _props_legendProps_selectedLegends, _props_legendProps, _props_legendProps1;
+            return ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : (_props_legendProps_selectedLegends = _props_legendProps.selectedLegends) === null || _props_legendProps_selectedLegends === void 0 ? void 0 : _props_legendProps_selectedLegends.includes(item.legend)) || ((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.selectedLegend) === item.legend;
+        }) : lineChartData;
+        return filteredData ? filteredData.map((item, index)=>{
             let color;
             if (typeof item.color === 'undefined') {
                 color = getNextColor(index, 0);
@@ -342,7 +349,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
             _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
         }
         for(let i = _points.length - 1; i >= 0; i--){
-            var _points_i_gaps;
+            var _points_i_gaps, _points_i_lineOptions;
             const linesForLine = [];
             const bordersForLine = [];
             const pointsForLine = [];
@@ -382,15 +389,16 @@ const PATH_MULTIPLY_SIZE = 2.5;
             let gapIndex = 0;
             var _points_i_gaps_sort;
             const gaps = (_points_i_gaps_sort = (_points_i_gaps = _points[i].gaps) === null || _points_i_gaps === void 0 ? void 0 : _points_i_gaps.sort((a, b)=>a.startIndex - b.startIndex)) !== null && _points_i_gaps_sort !== void 0 ? _points_i_gaps_sort : [];
+            const lineCurve = (_points_i_lineOptions = _points[i].lineOptions) === null || _points_i_lineOptions === void 0 ? void 0 : _points_i_lineOptions.curve;
             // Use path rendering technique for larger datasets to optimize performance.
-            if (props.optimizeLargeData && _points[i].data.length > 1) {
-                var _points_i_lineOptions;
+            if ((props.optimizeLargeData || lineCurve) && _points[i].data.length > 1) {
+                var _points_i_lineOptions1;
                 const line = d3Line()// eslint-disable-next-line @typescript-eslint/no-explicit-any
                 .x((d)=>_xAxisScale(d[0]))// eslint-disable-next-line @typescript-eslint/no-explicit-any
-                .y((d)=>_yAxisScale(d[1])).curve(d3curveLinear);
+                .y((d)=>_yAxisScale(d[1])).curve(getCurveFactory(lineCurve));
                 const lineId = `${_lineId}_${i}`;
                 const borderId = `${_borderId}_${i}`;
-                const strokeWidth = ((_points_i_lineOptions = _points[i].lineOptions) === null || _points_i_lineOptions === void 0 ? void 0 : _points_i_lineOptions.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
+                const strokeWidth = ((_points_i_lineOptions1 = _points[i].lineOptions) === null || _points_i_lineOptions1 === void 0 ? void 0 : _points_i_lineOptions1.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
                 const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
                 const lineData = [];
                 for(let k = 0; k < _points[i].data.length; k++){
@@ -400,19 +408,19 @@ const PATH_MULTIPLY_SIZE = 2.5;
                     ]);
                 }
                 if (isLegendSelected) {
-                    var _points_i_lineOptions1, _points_i_lineOptions2;
-                    const lineBorderWidth = ((_points_i_lineOptions1 = _points[i].lineOptions) === null || _points_i_lineOptions1 === void 0 ? void 0 : _points_i_lineOptions1.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
+                    var _points_i_lineOptions2, _points_i_lineOptions3;
+                    const lineBorderWidth = ((_points_i_lineOptions2 = _points[i].lineOptions) === null || _points_i_lineOptions2 === void 0 ? void 0 : _points_i_lineOptions2.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
                     if (lineBorderWidth > 0) {
-                        var _points_i_lineOptions3, _points_i_lineOptions4;
+                        var _points_i_lineOptions4, _points_i_lineOptions5;
                         var _points_i_lineOptions_strokeLinecap;
                         bordersForLine.push(/*#__PURE__*/ React.createElement("path", {
                             id: borderId,
                             key: borderId,
                             d: line(lineData),
                             fill: "transparent",
-                            strokeLinecap: (_points_i_lineOptions_strokeLinecap = (_points_i_lineOptions3 = _points[i].lineOptions) === null || _points_i_lineOptions3 === void 0 ? void 0 : _points_i_lineOptions3.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap !== void 0 ? _points_i_lineOptions_strokeLinecap : 'round',
+                            strokeLinecap: (_points_i_lineOptions_strokeLinecap = (_points_i_lineOptions4 = _points[i].lineOptions) === null || _points_i_lineOptions4 === void 0 ? void 0 : _points_i_lineOptions4.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap !== void 0 ? _points_i_lineOptions_strokeLinecap : 'round',
                             strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
-                            stroke: ((_points_i_lineOptions4 = _points[i].lineOptions) === null || _points_i_lineOptions4 === void 0 ? void 0 : _points_i_lineOptions4.lineBorderColor) || tokens.colorNeutralBackground1,
+                            stroke: ((_points_i_lineOptions5 = _points[i].lineOptions) === null || _points_i_lineOptions5 === void 0 ? void 0 : _points_i_lineOptions5.lineBorderColor) || tokens.colorNeutralBackground1,
                             opacity: 1
                         }));
                     }
@@ -425,7 +433,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                         "data-is-focusable": true,
                         stroke: lineColor,
                         strokeWidth: strokeWidth,
-                        strokeLinecap: (_points_i_lineOptions_strokeLinecap1 = (_points_i_lineOptions2 = _points[i].lineOptions) === null || _points_i_lineOptions2 === void 0 ? void 0 : _points_i_lineOptions2.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap1 !== void 0 ? _points_i_lineOptions_strokeLinecap1 : 'round',
+                        strokeLinecap: (_points_i_lineOptions_strokeLinecap1 = (_points_i_lineOptions3 = _points[i].lineOptions) === null || _points_i_lineOptions3 === void 0 ? void 0 : _points_i_lineOptions3.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap1 !== void 0 ? _points_i_lineOptions_strokeLinecap1 : 'round',
                         onMouseMove: (event)=>_onMouseOverLargeDataset.bind(i, verticaLineHeight, event),
                         onMouseOver: (event)=>_onMouseOverLargeDataset.bind(i, verticaLineHeight, event),
                         onMouseOut: _handleMouseOut,
@@ -434,7 +442,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                         tabIndex: _points[i].legend !== '' ? 0 : undefined
                     }));
                 } else {
-                    var _points_i_lineOptions5;
+                    var _points_i_lineOptions6;
                     var _points_i_lineOptions_strokeLinecap2;
                     linesForLine.push(/*#__PURE__*/ React.createElement("path", {
                         id: lineId,
@@ -444,7 +452,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                         "data-is-focusable": false,
                         stroke: lineColor,
                         strokeWidth: strokeWidth,
-                        strokeLinecap: (_points_i_lineOptions_strokeLinecap2 = (_points_i_lineOptions5 = _points[i].lineOptions) === null || _points_i_lineOptions5 === void 0 ? void 0 : _points_i_lineOptions5.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap2 !== void 0 ? _points_i_lineOptions_strokeLinecap2 : 'round',
+                        strokeLinecap: (_points_i_lineOptions_strokeLinecap2 = (_points_i_lineOptions6 = _points[i].lineOptions) === null || _points_i_lineOptions6 === void 0 ? void 0 : _points_i_lineOptions6.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap2 !== void 0 ? _points_i_lineOptions_strokeLinecap2 : 'round',
                         opacity: 0.1
                     }));
                 }
@@ -464,7 +472,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                 }));
             } else if (!props.optimizeLargeData) {
                 for(let j = 1; j < _points[i].data.length; j++){
-                    var _points_i_lineOptions6;
+                    var _points_i_lineOptions7;
                     const gapResult = _checkInGap(j, gaps, gapIndex);
                     const isInGap = gapResult.isInGap;
                     gapIndex = gapResult.gapIndex;
@@ -474,7 +482,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                     const { x: x1, y: y1, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points[i].data[j - 1];
                     const { x: x2, y: y2 } = _points[i].data[j];
                     let path = _getPath(_xAxisScale(x1), _yAxisScale(y1), circleId, j, false, _points[i].index);
-                    const strokeWidth = ((_points_i_lineOptions6 = _points[i].lineOptions) === null || _points_i_lineOptions6 === void 0 ? void 0 : _points_i_lineOptions6.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
+                    const strokeWidth = ((_points_i_lineOptions7 = _points[i].lineOptions) === null || _points_i_lineOptions7 === void 0 ? void 0 : _points_i_lineOptions7.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
                     const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
                     const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
                     pointsForLine.push(/*#__PURE__*/ React.createElement("path", {
@@ -542,10 +550,10 @@ const PATH_MULTIPLY_SIZE = 2.5;
                     if (isLegendSelected) {
                         // don't draw line if it is in a gap
                         if (!isInGap) {
-                            var _points_i_lineOptions7, _points_i_lineOptions8, _points_i_lineOptions9, _points_i_lineOptions10;
-                            const lineBorderWidth = ((_points_i_lineOptions7 = _points[i].lineOptions) === null || _points_i_lineOptions7 === void 0 ? void 0 : _points_i_lineOptions7.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
+                            var _points_i_lineOptions8, _points_i_lineOptions9, _points_i_lineOptions10, _points_i_lineOptions11;
+                            const lineBorderWidth = ((_points_i_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : _points_i_lineOptions8.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
                             if (lineBorderWidth > 0) {
-                                var _points_i_lineOptions11, _points_i_lineOptions12;
+                                var _points_i_lineOptions12, _points_i_lineOptions13;
                                 var _points_i_lineOptions_strokeLinecap3;
                                 bordersForLine.push(/*#__PURE__*/ React.createElement("line", {
                                     id: borderId,
@@ -554,9 +562,9 @@ const PATH_MULTIPLY_SIZE = 2.5;
                                     y1: _yAxisScale(y1),
                                     x2: _xAxisScale(x2),
                                     y2: _yAxisScale(y2),
-                                    strokeLinecap: (_points_i_lineOptions_strokeLinecap3 = (_points_i_lineOptions11 = _points[i].lineOptions) === null || _points_i_lineOptions11 === void 0 ? void 0 : _points_i_lineOptions11.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap3 !== void 0 ? _points_i_lineOptions_strokeLinecap3 : 'round',
+                                    strokeLinecap: (_points_i_lineOptions_strokeLinecap3 = (_points_i_lineOptions12 = _points[i].lineOptions) === null || _points_i_lineOptions12 === void 0 ? void 0 : _points_i_lineOptions12.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap3 !== void 0 ? _points_i_lineOptions_strokeLinecap3 : 'round',
                                     strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
-                                    stroke: ((_points_i_lineOptions12 = _points[i].lineOptions) === null || _points_i_lineOptions12 === void 0 ? void 0 : _points_i_lineOptions12.lineBorderColor) || tokens.colorNeutralBackground1,
+                                    stroke: ((_points_i_lineOptions13 = _points[i].lineOptions) === null || _points_i_lineOptions13 === void 0 ? void 0 : _points_i_lineOptions13.lineBorderColor) || tokens.colorNeutralBackground1,
                                     opacity: 1
                                 }));
                             }
@@ -576,16 +584,16 @@ const PATH_MULTIPLY_SIZE = 2.5;
                                 onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event),
                                 onMouseOut: _handleMouseOut,
                                 stroke: lineColor,
-                                strokeLinecap: (_points_i_lineOptions_strokeLinecap4 = (_points_i_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : _points_i_lineOptions8.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap4 !== void 0 ? _points_i_lineOptions_strokeLinecap4 : 'round',
-                                strokeDasharray: (_points_i_lineOptions9 = _points[i].lineOptions) === null || _points_i_lineOptions9 === void 0 ? void 0 : _points_i_lineOptions9.strokeDasharray,
-                                strokeDashoffset: (_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : _points_i_lineOptions10.strokeDashoffset,
+                                strokeLinecap: (_points_i_lineOptions_strokeLinecap4 = (_points_i_lineOptions9 = _points[i].lineOptions) === null || _points_i_lineOptions9 === void 0 ? void 0 : _points_i_lineOptions9.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap4 !== void 0 ? _points_i_lineOptions_strokeLinecap4 : 'round',
+                                strokeDasharray: (_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : _points_i_lineOptions10.strokeDasharray,
+                                strokeDashoffset: (_points_i_lineOptions11 = _points[i].lineOptions) === null || _points_i_lineOptions11 === void 0 ? void 0 : _points_i_lineOptions11.strokeDashoffset,
                                 opacity: 1,
                                 ..._getClickHandler(_points[i].onLineClick)
                             }));
                         }
                     } else {
                         if (!isInGap) {
-                            var _points_i_lineOptions13, _points_i_lineOptions14, _points_i_lineOptions15;
+                            var _points_i_lineOptions14, _points_i_lineOptions15, _points_i_lineOptions16;
                             var _points_i_lineOptions_strokeLinecap5;
                             linesForLine.push(/*#__PURE__*/ React.createElement("line", {
                                 id: lineId,
@@ -596,9 +604,9 @@ const PATH_MULTIPLY_SIZE = 2.5;
                                 y2: _yAxisScale(y2),
                                 strokeWidth: strokeWidth,
                                 stroke: lineColor,
-                                strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (_points_i_lineOptions13 = _points[i].lineOptions) === null || _points_i_lineOptions13 === void 0 ? void 0 : _points_i_lineOptions13.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap5 !== void 0 ? _points_i_lineOptions_strokeLinecap5 : 'round',
-                                strokeDasharray: (_points_i_lineOptions14 = _points[i].lineOptions) === null || _points_i_lineOptions14 === void 0 ? void 0 : _points_i_lineOptions14.strokeDasharray,
-                                strokeDashoffset: (_points_i_lineOptions15 = _points[i].lineOptions) === null || _points_i_lineOptions15 === void 0 ? void 0 : _points_i_lineOptions15.strokeDashoffset,
+                                strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (_points_i_lineOptions14 = _points[i].lineOptions) === null || _points_i_lineOptions14 === void 0 ? void 0 : _points_i_lineOptions14.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap5 !== void 0 ? _points_i_lineOptions_strokeLinecap5 : 'round',
+                                strokeDasharray: (_points_i_lineOptions15 = _points[i].lineOptions) === null || _points_i_lineOptions15 === void 0 ? void 0 : _points_i_lineOptions15.strokeDasharray,
+                                strokeDashoffset: (_points_i_lineOptions16 = _points[i].lineOptions) === null || _points_i_lineOptions16 === void 0 ? void 0 : _points_i_lineOptions16.strokeDashoffset,
                                 opacity: 0.1
                             }));
                         }
@@ -760,7 +768,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
         if (found && pointToHighlightUpdated) {
             _uniqueCallOutID = `#${_staticHighlightCircle}_${linenumber}`;
             d3Select(`#${_staticHighlightCircle}_${linenumber}`).attr('cx', `${_xAxisScale(pointToHighlight.x)}`).attr('cy', `${_yAxisScale(pointToHighlight.y)}`).attr('visibility', 'visibility');
-            d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(pointToHighlight.x)}, ${_yAxisScale(pointToHighlight.y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - _yAxisScale(pointToHighlight.y)}`);
+            d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(pointToHighlight.x)}, ${_yAxisScale(pointToHighlight.y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - _yAxisScale(pointToHighlight.y)}`);
             setNearestCircleToHighlight(pointToHighlight);
             updatePosition(mouseEvent.clientX, mouseEvent.clientY);
             setStackCalloutProps(found);
@@ -804,7 +812,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
         const found = find(_calloutPoints, (element)=>element.x === xVal);
         // if no points need to be called out then don't show vertical line and callout card
         if (found) {
-            d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(x)}, ${_yAxisScale(y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - _yAxisScale(y)}`);
+            d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(x)}, ${_yAxisScale(y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - _yAxisScale(y)}`);
             if (_uniqueCallOutID !== circleId) {
                 _uniqueCallOutID = circleId;
                 updatePosition(mouseEvent.clientX, mouseEvent.clientY);