fix(react-charts): fixed text mode for scatter polar (microsoft#35104)

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

Author: Anush2303

change/@fluentui-react-charts-4cf43c0e-9c0e-48fa-b97a-c39bbdfb659b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix text mode for scatter polar",
+  "packageName": "@fluentui/react-charts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -409,7 +409,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
         const mode = (plotlyInputWithValidData.data[index] as PlotData)?.mode ?? '';
         if (mode.includes('line')) {
           validTracesFilteredIndex[index].type = 'line';
-        } else if (mode.includes('markers')) {
+        } else if (mode.includes('markers') || mode === 'text') {
           validTracesFilteredIndex[index].type = 'scatter';
         } else {
           validTracesFilteredIndex[index].type = 'line';

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

@@ -854,6 +854,9 @@ const transformPlotlyJsonToScatterTraceProps = (
                   originXOffset: (input.layout as { __polarOriginX?: number } | undefined)?.__polarOriginX,
                   direction: input.layout?.polar?.angularaxis?.direction,
                   rotation: input.layout?.polar?.angularaxis?.rotation,
+                  axisLabel: (series as { __axisLabel: string[] }).__axisLabel
+                    ? (series as { __axisLabel: string[] }).__axisLabel
+                    : {},
                 }
               : {}),
           },
@@ -1510,7 +1513,7 @@ export const transformPlotlyJsonToChartTableProps = (
 export const projectPolarToCartesian = (input: PlotlySchema): PlotlySchema => {
   const projection: PlotlySchema = { ...input };
 
-  // 1. Find the global min and max radius across all series
+  // Find the global min and max radius across all series
   let minRadius = 0;
   let maxRadius = 0;
   for (let sindex = 0; sindex < input.data.length; sindex++) {
@@ -1525,18 +1528,27 @@ export const projectPolarToCartesian = (input: PlotlySchema): PlotlySchema => {
     }
   }
 
-  // 2. If there are negative radii, compute the shift
+  // If there are negative radii, compute the shift
   const radiusShift = minRadius < 0 ? -minRadius : 0;
 
-  // 3. Project all points and create a perfect square domain
+  // Collect all unique theta values from all scatterpolar series for equal spacing
+  const allThetaValues: Set<string> = new Set();
+  for (let sindex = 0; sindex < input.data.length; sindex++) {
+    const series = input.data[sindex] as Partial<PlotData>;
+    if (series.theta && isArrayOrTypedArray(series.theta)) {
+      series.theta.forEach(theta => allThetaValues.add(String(theta)));
+    }
+  }
+
+  // Project all points and create a perfect square domain
   const allX: number[] = [];
   const allY: number[] = [];
   let originX: number | null = null;
   for (let sindex = 0; sindex < input.data.length; sindex++) {
     const series = input.data[sindex] as Partial<PlotData>;
-    // If scatterpolar, set text to theta values as strings
-    if (series.type === 'scatterpolar' && Array.isArray(series.theta)) {
-      series.text = series.theta.map(v => String(v));
+    // If scatterpolar, set __axisLabel to all unique theta values for equal spacing
+    if (isArrayOrTypedArray(series.theta)) {
+      (series as { __axisLabel: string[] }).__axisLabel = Array.from(allThetaValues);
     }
     series.x = [] as Datum[];
     series.y = [] as Datum[];
@@ -1566,7 +1578,7 @@ export const projectPolarToCartesian = (input: PlotlySchema): PlotlySchema => {
         continue;
       }
 
-      // 4. Map theta to angle in radians
+      // Map theta to angle in radians
       let thetaRad: number;
       if (categorical) {
         const idx = uniqueTheta.indexOf(thetas[ptindex]);
@@ -1575,10 +1587,10 @@ export const projectPolarToCartesian = (input: PlotlySchema): PlotlySchema => {
       } else {
         thetaRad = startAngleInRad + dirMultiplier * (((thetas[ptindex] as number) * Math.PI) / 180);
       }
-      // 5. Shift only the polar origin (not the cartesian)
+      // Shift only the polar origin (not the cartesian)
       const rawRadius = rVals[ptindex] as number;
       const polarRadius = rawRadius + radiusShift; // Only for projection
-      // 6. Calculate cartesian coordinates (with shifted polar origin)
+      // Calculate cartesian coordinates (with shifted polar origin)
       const x = polarRadius * Math.cos(thetaRad);
       const y = polarRadius * Math.sin(thetaRad);
 

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

@@ -1179,15 +1179,8 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
         }
 
         if (_isScatterPolar) {
-          // Render category labels for all series at once to avoid overlap
-          const allSeriesData = _points.map(series => ({
-            data: series.data
-              .filter(pt => typeof pt.x === 'number' && typeof pt.y === 'number')
-              .map(pt => ({ x: pt.x as number, y: pt.y as number, text: pt.text })),
-          }));
           pointsForLine.push(
             ...renderScatterPolarCategoryLabels({
-              allSeriesData,
               xAxisScale: _xAxisScale,
               yAxisScale: yScale,
               className: classes.markerLabel || '',

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

@@ -458,15 +458,8 @@ export const ScatterChart: React.FunctionComponent<ScatterChartProps> = React.fo
       }
 
       if (_isScatterPolarRef.current) {
-        // Render category labels for all series at once to avoid overlap
-        const allSeriesData = _points.map(s => ({
-          data: s.data
-            .filter(pt => typeof pt.x === 'number' && typeof pt.y === 'number')
-            .map(pt => ({ x: pt.x as number, y: pt.y as number, text: pt.text })),
-        }));
         pointsForSeries.push(
           ...renderScatterPolarCategoryLabels({
-            allSeriesData,
             xAxisScale: _xAxisScale.current,
             yAxisScale: _yAxisScale.current,
             className: classes.markerLabel || '',

packages/charts/react-charts/library/src/utilities/scatterpolar-utils.tsx

@@ -7,14 +7,12 @@ import { JSXElement } from '@fluentui/react-utilities';
  * Now places labels at equal angles for all unique texts, regardless of data positions.
  */
 export function renderScatterPolarCategoryLabels({
-  allSeriesData,
   xAxisScale,
   yAxisScale,
   className,
   lineOptions,
   minPixelGap = 40,
 }: {
-  allSeriesData: { data: { x: number; y: number; text?: string }[] }[];
   xAxisScale: ScaleLinear<number, number>;
   yAxisScale: ScaleLinear<number, number>;
   className: string;
@@ -24,20 +22,10 @@ export function renderScatterPolarCategoryLabels({
 }): JSXElement[] {
   const maybeLineOptions = extractMaybeLineOptions(lineOptions);
 
-  // 1. Aggregate all data points from all series
-  const allLabels: { x: number; y: number; text: string }[] = [];
-  allSeriesData.forEach(series => {
-    series.data.forEach(pt => {
-      if (pt.text) {
-        allLabels.push({ x: pt.x, y: pt.y, text: pt.text });
-      }
-    });
-  });
-
-  // 2. Deduplicate by text (angle label)
-  const uniqueTexts = Array.from(new Set(allLabels.map(l => l.text)));
+  // Always use axisLabel from lineOptions to display the labels
+  const uniqueTexts: string[] = maybeLineOptions?.axisLabel ?? [];
 
-  // 3. Place labels at equal angles
+  // Place labels at equal angles
   const renderedLabels: JSXElement[] = [];
   const placedPositions: { x: number; y: number }[] = [];
   const labelRadius = 0.7; // You can adjust this value for more/less offset
@@ -83,6 +71,7 @@ export function extractMaybeLineOptions(lineOptions: any):
       originXOffset?: number;
       direction?: 'clockwise' | 'counterclockwise';
       rotation?: number;
+      axisLabel?: string[];
     }
   | undefined {
   return lineOptions
@@ -93,6 +82,7 @@ export function extractMaybeLineOptions(lineOptions: any):
             ? lineOptions.direction
             : undefined,
         rotation: lineOptions.rotation,
+        axisLabel: Array.isArray(lineOptions.axisLabel) ? lineOptions.axisLabel : undefined,
       }
     : undefined;
 }