@fluentui/react-charts 9.1.2 → 9.1.3

package/lib/components/LineChart/LineChart.js

@@ -94,7 +94,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let _xAxisScale = '';
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let _yAxisScale = '';
+    let _yScalePrimary = '';
     let _circleId = useId('circle');
     let _lineId = useId('lineID');
     let _borderId = useId('borderID');
@@ -116,6 +116,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
     const _isRTL = useRtl();
     let xAxisCalloutAccessibilityData = {};
     const cartesianChartRef = React.useRef(null);
+    let _yScaleSecondary;
     props.eventAnnotationProps && props.eventAnnotationProps.labelHeight && (eventLabelHeight = props.eventAnnotationProps.labelHeight);
     const [hoverXValue, setHoverXValue] = React.useState('');
     const [activeLegend, setActiveLegend] = React.useState('');
@@ -197,9 +198,10 @@ const PATH_MULTIPLY_SIZE = 2.5;
     function _getMargins(_margins) {
         margins = _margins;
     }
-    function _initializeLineChartData(xScale, yScale, containerHeight, containerWidth, xElement) {
+    function _initializeLineChartData(xScale, yScalePrimary, containerHeight, containerWidth, xElement, yAxisElement, yScaleSecondary) {
         _xAxisScale = xScale;
-        _yAxisScale = yScale;
+        _yScalePrimary = yScalePrimary;
+        _yScaleSecondary = yScaleSecondary;
         _renderedColorFillBars = props.colorFillBars ? _createColorFillBars(containerHeight) : [];
         lines = _createLines(xElement, containerHeight);
     }
@@ -357,6 +359,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
             const legendVal = _points[i].legend;
             const lineColor = _points[i].color;
             const verticaLineHeight = containerHeight - margins.bottom + 6;
+            const yScale = _points[i].useSecondaryYScale && _yScaleSecondary ? _yScaleSecondary : _yScalePrimary;
             if (_points[i].data.length === 1) {
                 // eslint-disable-next-line @typescript-eslint/no-shadow
                 const { x: x1, y: y1, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points[i].data[0];
@@ -367,12 +370,12 @@ const PATH_MULTIPLY_SIZE = 2.5;
                     key: circleId,
                     r: activePoint === circleId ? 5.5 : 3.5,
                     cx: _xAxisScale(x1),
-                    cy: _yAxisScale(y1),
+                    cy: yScale(y1),
                     fill: activePoint === circleId ? tokens.colorNeutralBackground1 : lineColor,
                     opacity: isLegendSelected ? 1 : 0.1,
                     tabIndex: isLegendSelected ? 0 : undefined,
-                    onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event),
-                    onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event),
+                    onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
+                    onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
                     onMouseOut: _handleMouseOut,
                     strokeWidth: activePoint === circleId ? DEFAULT_LINE_STROKE_SIZE : 0,
                     stroke: activePoint === circleId ? lineColor : '',
@@ -396,7 +399,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                 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(getCurveFactory(lineCurve));
+                .y((d)=>yScale(d[1])).curve(getCurveFactory(lineCurve));
                 const lineId = `${_lineId}_${i}`;
                 const borderId = `${_borderId}_${i}`;
                 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;
@@ -435,8 +438,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
                         stroke: lineColor,
                         strokeWidth: strokeWidth,
                         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),
+                        onMouseMove: (event)=>_onMouseOverLargeDataset.bind(i, verticaLineHeight, event, yScale),
+                        onMouseOver: (event)=>_onMouseOverLargeDataset.bind(i, verticaLineHeight, event, yScale),
                         onMouseOut: _handleMouseOut,
                         ..._getClickHandler(_points[i].onLineClick),
                         opacity: 1,
@@ -467,8 +470,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
                     strokeWidth: DEFAULT_LINE_STROKE_SIZE,
                     stroke: lineColor,
                     visibility: 'hidden',
-                    onMouseMove: (event)=>_onMouseOverLargeDataset.bind(i, verticaLineHeight, event),
-                    onMouseOver: (event)=>_onMouseOverLargeDataset.bind(i, verticaLineHeight, event),
+                    onMouseMove: (event)=>_onMouseOverLargeDataset.bind(i, verticaLineHeight, event, yScale),
+                    onMouseOver: (event)=>_onMouseOverLargeDataset.bind(i, verticaLineHeight, event, yScale),
                     onMouseOut: _handleMouseOut
                 }));
             } else if (!props.optimizeLargeData) {
@@ -482,7 +485,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                     const circleId = `${_circleId}_${i}_${j}`;
                     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);
+                    let path = _getPath(_xAxisScale(x1), yScale(y1), circleId, j, false, _points[i].index);
                     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;
@@ -491,8 +494,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
                         key: circleId,
                         d: path,
                         "data-is-focusable": isLegendSelected,
-                        onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event),
-                        onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event),
+                        onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
+                        onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
                         onMouseOut: _handleMouseOut,
                         onFocus: ()=>_handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
                         onBlur: _handleMouseOut,
@@ -510,7 +513,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                         const lastCircleId = `${circleId}${j}L`;
                         const hiddenHoverCircleId = `${circleId}${j}D`;
                         const lastPointHidden = _points[i].hideNonActiveDots && activePoint !== lastCircleId;
-                        path = _getPath(_xAxisScale(x2), _yAxisScale(y2), lastCircleId, j, true, _points[i].index);
+                        path = _getPath(_xAxisScale(x2), yScale(y2), lastCircleId, j, true, _points[i].index);
                         const { xAxisCalloutData: lastCirlceXCallout, xAxisCalloutAccessibilityData: lastCirlceXCalloutAccessibilityData } = _points[i].data[j];
                         pointsForLine.push(/*#__PURE__*/ React.createElement(React.Fragment, {
                             key: `${lastCircleId}_container`
@@ -519,8 +522,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
                             key: lastCircleId,
                             d: path,
                             "data-is-focusable": isLegendSelected,
-                            onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event),
-                            onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event),
+                            onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale),
+                            onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale),
                             onMouseOut: _handleMouseOut,
                             onFocus: ()=>_handleFocus(lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
                             onBlur: _handleMouseOut,
@@ -537,11 +540,11 @@ const PATH_MULTIPLY_SIZE = 2.5;
                             key: hiddenHoverCircleId,
                             r: 8,
                             cx: _xAxisScale(x2),
-                            cy: _yAxisScale(y2),
+                            cy: yScale(y2),
                             opacity: 0,
                             width: 0,
-                            onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event),
-                            onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event),
+                            onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale),
+                            onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale),
                             onMouseOut: _handleMouseOut,
                             strokeWidth: 0,
                             focusable: false,
@@ -560,9 +563,9 @@ const PATH_MULTIPLY_SIZE = 2.5;
                                     id: borderId,
                                     key: borderId,
                                     x1: _xAxisScale(x1),
-                                    y1: _yAxisScale(y1),
+                                    y1: yScale(y1),
                                     x2: _xAxisScale(x2),
-                                    y2: _yAxisScale(y2),
+                                    y2: yScale(y2),
                                     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,
                                     ...((_points_i_lineOptions13 = _points[i].lineOptions) === null || _points_i_lineOptions13 === void 0 ? void 0 : _points_i_lineOptions13.lineBorderColor) && {
@@ -577,15 +580,15 @@ const PATH_MULTIPLY_SIZE = 2.5;
                                 id: lineId,
                                 key: lineId,
                                 x1: _xAxisScale(x1),
-                                y1: _yAxisScale(y1),
+                                y1: yScale(y1),
                                 x2: _xAxisScale(x2),
-                                y2: _yAxisScale(y2),
+                                y2: yScale(y2),
                                 strokeWidth: strokeWidth,
                                 ref: (e)=>{
                                     _refCallback(e, lineId);
                                 },
-                                onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event),
-                                onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event),
+                                onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
+                                onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
                                 onMouseOut: _handleMouseOut,
                                 stroke: lineColor,
                                 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',
@@ -603,9 +606,9 @@ const PATH_MULTIPLY_SIZE = 2.5;
                                 id: lineId,
                                 key: lineId,
                                 x1: _xAxisScale(x1),
-                                y1: _yAxisScale(y1),
+                                y1: yScale(y1),
                                 x2: _xAxisScale(x2),
-                                y2: _yAxisScale(y2),
+                                y2: yScale(y2),
                                 strokeWidth: strokeWidth,
                                 stroke: lineColor,
                                 strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (_points_i_lineOptions15 = _points[i].lineOptions) === null || _points_i_lineOptions15 === void 0 ? void 0 : _points_i_lineOptions15.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap5 !== void 0 ? _points_i_lineOptions_strokeLinecap5 : 'round',
@@ -671,9 +674,9 @@ const PATH_MULTIPLY_SIZE = 2.5;
                     fill: colorFillBar.applyPattern ? `url(#${_colorFillBarPatternId}_${i})` : color,
                     fillOpacity: opacity,
                     x: _isRTL ? _xAxisScale(endX) : _xAxisScale(startX),
-                    y: _yAxisScale(yMinMaxValues.endValue) - FILL_Y_PADDING,
+                    y: _yScalePrimary(yMinMaxValues.endValue) - FILL_Y_PADDING,
                     width: Math.abs(_xAxisScale(endX) - _xAxisScale(startX)),
-                    height: _yAxisScale(props.yMinValue || 0) - _yAxisScale(yMinMaxValues.endValue) + FILL_Y_PADDING,
+                    height: _yScalePrimary(props.yMinValue || 0) - _yScalePrimary(yMinMaxValues.endValue) + FILL_Y_PADDING,
                     key: `${colorFillBarId}${j}`
                 }));
             }
@@ -716,7 +719,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
             refElement: element
         });
     }
-    const _onMouseOverLargeDataset = (linenumber, lineHeight, mouseEvent)=>{
+    const _onMouseOverLargeDataset = (linenumber, lineHeight, mouseEvent, yScale)=>{
         mouseEvent.persist();
         const { data } = props;
         const { lineChartData } = data;
@@ -770,8 +773,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
         // if no points need to be called out then don't show vertical line and callout card
         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 - 5 - _yAxisScale(pointToHighlight.y)}`);
+            d3Select(`#${_staticHighlightCircle}_${linenumber}`).attr('cx', `${_xAxisScale(pointToHighlight.x)}`).attr('cy', `${yScale(pointToHighlight.y)}`).attr('visibility', 'visibility');
+            d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(pointToHighlight.x)}, ${yScale(pointToHighlight.y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yScale(pointToHighlight.y)}`);
             setNearestCircleToHighlight(pointToHighlight);
             updatePosition(mouseEvent.clientX, mouseEvent.clientY);
             setStackCalloutProps(found);
@@ -808,14 +811,14 @@ const PATH_MULTIPLY_SIZE = 2.5;
             setActivePoint(circleId);
         }
     }
-    function _handleHover(x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent) {
+    function _handleHover(x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent, yScale) {
         mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
         const formattedData = x instanceof Date ? formatDate(x, props.useUTC) : x;
         const xVal = x instanceof Date ? x.getTime() : x;
         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 - 5 - _yAxisScale(y)}`);
+            d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(x)}, ${yScale(y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yScale(y)}`);
             if (_uniqueCallOutID !== circleId) {
                 _uniqueCallOutID = circleId;
                 updatePosition(mouseEvent.clientX, mouseEvent.clientY);
@@ -1003,7 +1006,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
         /* eslint-disable react/jsx-no-bind */ // eslint-disable-next-line react/no-children-prop
         children: (props)=>{
             _xAxisScale = props.xScale;
-            _yAxisScale = props.yScale;
+            _yScalePrimary = props.yScalePrimary;
+            _yScaleSecondary = props.yScaleSecondary;
             return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("g", null, /*#__PURE__*/ React.createElement("line", {
                 x1: 0,
                 y1: 0,