feat(react-charting): add support for secondary y-axis in cartesian charts (#34301)

Author: krkshitij

change/@fluentui-react-charting-48941f58-a7d6-4ab9-84a0-8bec428a1c2d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add support for secondary y-axis in cartesian charts",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charting/etc/react-charting.api.md

@@ -439,7 +439,7 @@ export interface IChildProps {
     // (undocumented)
     xScale?: any;
     // (undocumented)
-    yScale?: any;
+    yScalePrimary?: any;
     // (undocumented)
     yScaleSecondary?: any;
 }
@@ -679,6 +679,7 @@ export interface IGVBarChartSeriesPoint {
     key: string;
     legend: string;
     onClick?: VoidFunction;
+    useSecondaryYScale?: boolean;
     xAxisCalloutData?: string;
     yAxisCalloutData?: string;
 }
@@ -1008,6 +1009,7 @@ export interface ILineChartPoints {
     onLegendClick?: (selectedLegend: string | null | string[]) => void;
     onLineClick?: () => void;
     opacity?: number;
+    useSecondaryYScale?: boolean;
 }
 
 // @public
@@ -1104,7 +1106,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     getDomainNRangeValues: (points: ILineChartPoints[] | IVerticalBarChartDataPoint[] | IVerticalStackedBarDataPoint[] | IHorizontalBarChartWithAxisDataPoint[] | IGroupedVerticalBarChartData[] | IHeatMapChartDataPoint[], margins: IMargins, width: number, chartType: ChartTypes, isRTL: boolean, xAxisType: XAxisTypes, barWidth: number, tickValues: Date[] | number[] | string[] | undefined, shiftX: number) => IDomainNRange;
     getGraphData?: any;
     getmargins?: (margins: IMargins) => void;
-    getMinMaxOfYAxis: (points: ILineChartPoints[] | IHorizontalBarChartWithAxisDataPoint[] | IVerticalBarChartDataPoint[] | IDataPoint[], yAxisType: YAxisType | undefined) => {
+    getMinMaxOfYAxis: (points: ILineChartPoints[] | IHorizontalBarChartWithAxisDataPoint[] | IVerticalBarChartDataPoint[] | IDataPoint[], yAxisType: YAxisType | undefined, useSecondaryYScale?: boolean) => {
         startValue: number;
         endValue: number;
     };

packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx

@@ -49,6 +49,7 @@ import { ILegend, ILegendContainer, Legends } from '../Legends/index';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { IChart, IImageExportOptions } from '../../types/index';
 import { toImage } from '../../utilities/image-export-utils';
+import { ScaleLinear } from 'd3-scale';
 
 const getClassNames = classNamesFunction<IAreaChartStyleProps, IAreaChartStyles>();
 
@@ -133,6 +134,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   private _emptyChartId: string;
   private _cartesianChartRef: React.RefObject<IChart>;
   private _legendsRef: React.RefObject<ILegendContainer>;
+  private _containsSecondaryYAxis = false;
 
   public constructor(props: IAreaChartProps) {
     super(props);
@@ -189,6 +191,8 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     if (!this._isChartEmpty()) {
       const { lineChartData } = this.props.data;
       const points = this._addDefaultColors(lineChartData);
+      this._containsSecondaryYAxis =
+        !!this.props.secondaryYScaleOptions && points.some(point => point.useSecondaryYScale);
       const { colors, opacity, data, calloutPoints } = this._createSet(points);
       this._calloutPoints = calloutPoints;
       const isXAxisDateType = getXAxisType(points);
@@ -443,7 +447,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     const renderPoints: Array<IAreaChartDataSetPoint[]> = [];
     let maxOfYVal = 0;
 
-    if (this.props.mode === 'tozeroy') {
+    if (this._shouldFillToZeroY()) {
       keys.forEach((key, index) => {
         const currentLayer: IAreaChartDataSetPoint[] = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -480,7 +484,12 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
       : renderPoints?.length > 1);
     return {
       renderData: renderPoints,
-      maxOfYVal,
+      // The maxOfYVal prop is only required for the primary y-axis. When the data includes
+      // a secondary y-axis, the mode defaults to tozeroy, so maxOfYVal should be calculated using
+      // only the data points associated with the primary y-axis.
+      maxOfYVal: this._containsSecondaryYAxis
+        ? findNumericMinMaxOfY(this.props.data.lineChartData!).endValue
+        : maxOfYVal,
     };
   };
 
@@ -613,8 +622,10 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     containerHeight: number,
     containerWidth: number,
     xElement: SVGElement | null,
+    yAxisElement?: SVGElement | null,
+    yScaleSecondary?: ScaleLinear<number, number>,
   ) => {
-    this._chart = this._drawGraph(containerHeight, xAxis, yAxis, xElement!);
+    this._chart = this._drawGraph(containerHeight, xAxis, yAxis, yScaleSecondary, xElement!);
   };
 
   private _onLegendHover(legend: string): void {
@@ -727,15 +738,22 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     return fillColor;
   };
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private _drawGraph = (containerHeight: number, xScale: any, yScale: any, xElement: SVGElement): JSX.Element[] => {
+  private _drawGraph = (
+    containerHeight: number,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    xScale: any,
+    yScalePrimary: ScaleLinear<number, number>,
+    yScaleSecondary: ScaleLinear<number, number> | undefined,
+    xElement: SVGElement,
+  ): JSX.Element[] => {
     const points = this._addDefaultColors(this.props.data.lineChartData);
     const { pointOptions, pointLineOptions } = this.props.data;
 
     const graph: JSX.Element[] = [];
     let lineColor: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     this._data.forEach((singleStackedData: Array<any>, index: number) => {
+      const yScale = points[index].useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
       const curveFactory = getCurveFactory(points[index].lineOptions?.curve, d3CurveBasis);
       const area = d3Area()
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -751,7 +769,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         .y((d: any) => yScale(d.values[1]))
         .curve(curveFactory);
-      const layerOpacity = this.props.mode === 'tozeroy' ? 0.8 : this._opacity[index];
+      const layerOpacity = this._shouldFillToZeroY() ? 0.8 : this._opacity[index];
       graph.push(
         <React.Fragment key={`${index}-graph-${this._uniqueIdForGraph}`}>
           {this.props.enableGradient && (
@@ -821,6 +839,8 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
         return;
       }
 
+      const yScale = points[index].useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
+
       if (!this.props.optimizeLargeData || singleStackedData.length === 1) {
         // Render circles for all data points
         graph.push(
@@ -1064,4 +1084,8 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     const { chartTitle, lineChartData } = this.props.data;
     return (chartTitle ? `${chartTitle}. ` : '') + `Area chart with ${lineChartData?.length || 0} data series. `;
   };
+
+  private _shouldFillToZeroY() {
+    return this.props.mode === 'tozeroy' || this._containsSecondaryYAxis;
+  }
 }

packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx

@@ -394,18 +394,23 @@ export class CartesianChartBase
        * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.
        */
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      let yScale: any;
+      let yScalePrimary: any;
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       let yScaleSecondary: any;
       const axisData: IAxisData = { yAxisDomainValues: [] };
       if (this.props.yAxisType && this.props.yAxisType === YAxisType.StringAxis) {
-        yScale = this.props.createStringYAxis(
+        yScalePrimary = this.props.createStringYAxis(
           YAxisParams,
           this.props.stringDatasetForYAxisDomain!,
           this._isRtl,
           this.props.barwidth,
         );
       } else {
+        // TODO: Since the scale domain values are now computed independently for both the primary and
+        // secondary y-axes, the yMinValue and yMaxValue props are no longer necessary for accurately
+        // rendering the secondary y-axis. Therefore, rather than checking the secondaryYScaleOptions
+        // prop to determine whether to create a secondary y-axis, it's more appropriate to check if any
+        // data points are assigned to use the secondary y-scale.
         if (this.props?.secondaryYScaleOptions) {
           const YAxisParamsSecondary = {
             margins: this.margins,
@@ -417,12 +422,11 @@ export class CartesianChartBase
             yMinValue: this.props.secondaryYScaleOptions?.yMinValue || 0,
             yMaxValue: this.props.secondaryYScaleOptions?.yMaxValue ?? 100,
             tickPadding: 10,
-            maxOfYVal: this.props.secondaryYScaleOptions?.yMaxValue ?? 100,
-            yMinMaxValues: this.props.getMinMaxOfYAxis(points, this.props.yAxisType),
+            yMinMaxValues: this.props.getMinMaxOfYAxis(points, this.props.yAxisType, true),
             yAxisPadding: this.props.yAxisPadding,
           };
 
-          yScaleSecondary = yScaleSecondary = this.props.createYAxis(
+          yScaleSecondary = this.props.createYAxis(
             YAxisParamsSecondary,
             this._isRtl,
             axisData,
@@ -432,7 +436,7 @@ export class CartesianChartBase
             this.props.roundedTicks!,
           );
         }
-        yScale = this.props.createYAxis(
+        yScalePrimary = this.props.createYAxis(
           YAxisParams,
           this._isRtl,
           axisData,
@@ -449,23 +453,23 @@ export class CartesianChartBase
     or showing the whole string,
      * */
       chartTypesToCheck.includes(this.props.chartType) &&
-        yScale &&
+        yScalePrimary &&
         createYAxisLabels(
           this.yAxisElement,
-          yScale,
+          yScalePrimary,
           this.props.noOfCharsToTruncate || 4,
           this.props.showYAxisLablesTooltip || false,
           this._isRtl,
         );
 
       this.props.getAxisData && this.props.getAxisData(axisData);
       // Callback function for chart, returns axis
-      this._getData(xScale, yScale);
+      this._getData(xScale, yScalePrimary, yScaleSecondary);
 
       children = this.props.children({
         ...this.state,
         xScale,
-        yScale,
+        yScalePrimary,
         yScaleSecondary,
       });
 
@@ -889,15 +893,16 @@ export class CartesianChartBase
 
   // Call back to the chart.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private _getData = (xScale: any, yScale: any) => {
+  private _getData = (xScale: any, yScalePrimary: any, yScaleSecondary: any) => {
     this.props.getGraphData &&
       this.props.getGraphData(
         xScale,
-        yScale,
+        yScalePrimary,
         this.state.containerHeight - this.state._removalValueForTextTuncate!,
         this.state.containerWidth,
         this.xAxisElement,
         this.yAxisElement,
+        yScaleSecondary,
       );
   };
 

packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts

@@ -486,7 +486,7 @@ export interface IChildProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   xScale?: any;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  yScale?: any;
+  yScalePrimary?: any;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   yScaleSecondary?: any;
   containerHeight?: number;
@@ -670,6 +670,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
   getMinMaxOfYAxis: (
     points: ILineChartPoints[] | IHorizontalBarChartWithAxisDataPoint[] | IVerticalBarChartDataPoint[] | IDataPoint[],
     yAxisType: YAxisType | undefined,
+    useSecondaryYScale?: boolean,
   ) => { startValue: number; endValue: number };
 
   /**