feat(react-charts): support string y axis in scatter chart (microsoft#35120)

Co-authored-by: Anush <[email protected]>

Author: Anush2303

change/@fluentui-react-charts-a5532530-8f6e-485d-b3a0-8193adc92df5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "support string y axis in scatter chart",
+  "packageName": "@fluentui/react-charts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -1419,6 +1419,7 @@ export interface ScatterChartProps extends CartesianChartProps {
     data: ChartProps;
     getCalloutDescriptionMessage?: (calloutDataProps: CustomizedCalloutData) => string | undefined;
     onRenderCalloutPerDataPoint?: RenderFunction<CustomizedCalloutData>;
+    showYAxisLablesTooltip?: boolean;
     styles?: ScatterChartStyles;
 }
 

packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx

@@ -72,6 +72,7 @@ export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps
     ChartTypes.HeatMapChart,
     ChartTypes.VerticalStackedBarChart,
     ChartTypes.GanttChart,
+    ChartTypes.ScatterChart,
   ];
   /**
    * In RTL mode, Only graph will be rendered left/right. We need to provide left and right margins manually.

packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts

@@ -1081,6 +1081,12 @@ const transformPlotlyJsonToScatterTraceProps = (
       roundedTicks: true,
       ...commonProps,
       ...yMinMax,
+      ...(isScatterChart
+        ? {
+            showYAxisLablesTooltip: true,
+            ...getAxisCategoryOrderProps(input.data, input.layout),
+          }
+        : {}),
     } as LineChartProps;
   }
 };

packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap

@@ -5202,6 +5202,7 @@ Object {
   "hideTickOverlap": true,
   "optimizeLargeData": false,
   "roundedTicks": true,
+  "showYAxisLablesTooltip": true,
   "supportNegativeData": true,
   "useUTC": false,
   "width": undefined,

packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.tsx

@@ -24,6 +24,7 @@ import {
   getRangeForScatterMarkerSize,
   domainRangeOfDateForAreaLineScatterVerticalBarCharts,
   domainRangeOfNumericForAreaLineScatterCharts,
+  sortAxisCategories,
 } from '../../utilities/index';
 import {
   AccessibilityProps,
@@ -135,6 +136,17 @@ export const ScatterChart: React.FunctionComponent<ScatterChartProps> = React.fo
       ? (getTypeOfAxis(props.data.scatterChartData![0].data[0].x, true) as XAxisTypes)
       : XAxisTypes.StringAxis;
 
+  // Detect y axis type (numeric or string)
+  const _yAxisType: YAxisType =
+    props.data.scatterChartData &&
+    props.data.scatterChartData.length > 0 &&
+    props.data.scatterChartData[0].data &&
+    props.data.scatterChartData[0].data.length > 0
+      ? typeof props.data.scatterChartData[0].data[0].y === 'string'
+        ? YAxisType.StringAxis
+        : YAxisType.NumericAxis
+      : YAxisType.NumericAxis;
+
   const pointsRef = React.useRef<ScatterChartDataWithIndex[] | []>([]);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const calloutPointsRef = React.useRef<any[]>([]);
@@ -300,6 +312,47 @@ export const ScatterChart: React.FunctionComponent<ScatterChartProps> = React.fo
     );
   }
 
+  function _getOrderedYAxisLabels() {
+    const shouldOrderYAxisLabelsByCategoryOrder =
+      _yAxisType === YAxisType.StringAxis && props.yAxisCategoryOrder !== 'default';
+    if (!shouldOrderYAxisLabelsByCategoryOrder) {
+      // Collect all unique string y values from all data points in all series, in reverse order
+      const yLabelsSet = new Set<string>();
+      for (let i = _points.length - 1; i >= 0; i--) {
+        const point = _points[i];
+        if (point.data && Array.isArray(point.data)) {
+          for (const d of point.data) {
+            if (typeof d.y === 'string') {
+              yLabelsSet.add(d.y);
+            }
+          }
+        }
+      }
+      return Array.from(yLabelsSet);
+    }
+
+    return sortAxisCategories(_mapCategoryToValues(), props.yAxisCategoryOrder);
+  }
+
+  function _mapCategoryToValues() {
+    const categoryToValues: Record<string, number[]> = {};
+    _points.forEach(point => {
+      if (point.data && Array.isArray(point.data)) {
+        point.data.forEach(d => {
+          if (typeof d.y === 'string') {
+            if (!categoryToValues[d.y]) {
+              categoryToValues[d.y] = [];
+            }
+            if (typeof d.x === 'number') {
+              categoryToValues[d.y].push(d.x);
+            }
+          }
+        });
+      }
+    });
+    return categoryToValues;
+  }
+
   function _onLegendSelectionChange(
     legendsSelected: string[],
     event: React.MouseEvent<HTMLButtonElement>,
@@ -343,7 +396,7 @@ export const ScatterChart: React.FunctionComponent<ScatterChartProps> = React.fo
     })!;
 
     const extraMaxPixels =
-      _xAxisType !== XAxisTypes.StringAxis
+      _xAxisType !== XAxisTypes.StringAxis && _yAxisType !== YAxisType.StringAxis
         ? getRangeForScatterMarkerSize({
             data: _points,
             xScale: _xAxisScale,
@@ -363,7 +416,11 @@ export const ScatterChart: React.FunctionComponent<ScatterChartProps> = React.fo
       for (let j = 0; j < _points[i].data.length; j++) {
         const { x, y, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points?.[i]?.data[j];
         const xPoint = _xAxisScale?.(x);
-        const yPoint = _yAxisScale?.(y);
+        // Use string y axis scale if needed
+        const yPoint =
+          _yAxisType === YAxisType.StringAxis
+            ? _yAxisScale?.(y) + (_yAxisScale?.bandwidth ? _yAxisScale.bandwidth() / 2 : 0)
+            : _yAxisScale?.(y);
         if (!isPlottable(xPoint, yPoint)) {
           continue;
         }
@@ -673,6 +730,9 @@ export const ScatterChart: React.FunctionComponent<ScatterChartProps> = React.fo
 
   _xAxisLabels = [...new Set(xAxisLabels)];
 
+  // Compute unique y axis labels for string y axis
+  const _yAxisLabels: string[] = _getOrderedYAxisLabels();
+
   return !_isChartEmpty() ? (
     <CartesianChart
       {...props}
@@ -685,6 +745,9 @@ export const ScatterChart: React.FunctionComponent<ScatterChartProps> = React.fo
       getmargins={_getMargins}
       getGraphData={_initializeScatterChartData}
       xAxisType={_xAxisType}
+      yAxisType={_yAxisType}
+      // Pass stringDatasetForYAxisDomain only if y axis is string
+      {...(_yAxisType === YAxisType.StringAxis ? { stringDatasetForYAxisDomain: _yAxisLabels } : {})}
       getMinMaxOfYAxis={_getNumericMinMaxOfY}
       getDomainNRangeValues={_getDomainNRangeValues}
       createYAxis={createNumericYAxis}

packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.types.ts

@@ -46,6 +46,11 @@ export interface ScatterChartProps extends CartesianChartProps {
    * The prop used to define the culture to localized the numbers
    */
   culture?: string;
+
+  /**
+   * The prop used to define the y axis labels tooltip visibility
+   */
+  showYAxisLablesTooltip?: boolean;
 }
 
 /**