[pull] master from microsoft:master

change/@fluentui-react-charts-cf1a832b-57b7-4532-95d6-f6f285a103da.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: Add PolarChart",
+  "packageName": "@fluentui/react-charts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charts/library/bundle-size/PolarChart.fixture.js

@@ -0,0 +1,7 @@
+import { PolarChart } from '@fluentui/react-charts';
+
+console.log(PolarChart);
+
+export default {
+  name: 'PolarChart',
+};

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

@@ -110,6 +110,13 @@ export interface AreaChartStyleProps extends CartesianChartStyleProps {
 export interface AreaChartStyles extends CartesianChartStyles {
 }
 
+// @public
+export interface AreaPolarSeries extends DataSeries {
+    data: PolarDataPoint[];
+    lineOptions?: LineChartLineOptions;
+    type: 'areapolar';
+}
+
 // @public
 export type AxisCategoryOrder = 'default' | 'data' | string[] | 'category ascending' | 'category descending' | 'total ascending' | 'total descending' | 'min ascending' | 'min descending' | 'max ascending' | 'max descending' | 'sum ascending' | 'sum descending' | 'mean ascending' | 'mean descending' | 'median ascending' | 'median descending';
 
@@ -1420,6 +1427,13 @@ export interface LineDataInVerticalStackedBarChart {
     yAxisCalloutData?: string;
 }
 
+// @public
+export interface LinePolarSeries extends DataSeries {
+    data: PolarDataPoint[];
+    lineOptions?: LineChartLineOptions;
+    type: 'linepolar';
+}
+
 // @public
 export interface LineSeries<X extends string | number | Date, Y extends string | number | Date> extends DataSeries {
     data: DataPointV2<X, Y>[];
@@ -1491,6 +1505,73 @@ export interface ModifiedCartesianChartProps extends CartesianChartProps {
     yAxisType?: YAxisType;
 }
 
+// @public
+export type PolarAxisProps = AxisProps & {
+    tickValues?: number[] | Date[] | string[];
+    tickFormat?: string;
+    tickCount?: number;
+    categoryOrder?: AxisCategoryOrder;
+    scaleType?: AxisScaleType;
+    rangeStart?: number | Date;
+    rangeEnd?: number | Date;
+};
+
+// @public (undocumented)
+export const PolarChart: React_2.FunctionComponent<PolarChartProps>;
+
+// @public
+export interface PolarChartProps {
+    angularAxis?: PolarAxisProps & {
+        unit?: 'radians' | 'degrees';
+    };
+    chartTitle?: string;
+    componentRef?: React_2.Ref<Chart>;
+    culture?: string;
+    data: (AreaPolarSeries | LinePolarSeries | ScatterPolarSeries)[];
+    dateLocalizeOptions?: Intl.DateTimeFormatOptions;
+    direction?: 'clockwise' | 'counterclockwise';
+    height?: number;
+    hideLegend?: boolean;
+    hideTooltip?: boolean;
+    hole?: number;
+    // (undocumented)
+    legendProps?: Partial<LegendsProps>;
+    margins?: Margins;
+    radialAxis?: PolarAxisProps;
+    shape?: 'circle' | 'polygon';
+    styles?: PolarChartStyles;
+    useUTC?: boolean;
+    width?: number;
+}
+
+// @public
+export interface PolarChartStyleProps {
+}
+
+// @public
+export interface PolarChartStyles {
+    chart?: string;
+    chartWrapper?: string;
+    gridLineInner?: string;
+    gridLineOuter?: string;
+    legendContainer?: string;
+    root?: string;
+    tickLabel?: string;
+}
+
+// @public
+export interface PolarDataPoint {
+    angularAxisCalloutData?: string;
+    callOutAccessibilityData?: AccessibilityProps;
+    color?: string;
+    markerSize?: number;
+    onClick?: () => void;
+    r: string | number | Date;
+    radialAxisCalloutData?: string;
+    text?: string;
+    theta: string | number;
+}
+
 // @public (undocumented)
 export interface PopoverComponentStyles {
     // (undocumented)
@@ -1689,6 +1770,12 @@ export interface ScatterChartStyles extends CartesianChartStyles {
     markerLabel?: string;
 }
 
+// @public
+export interface ScatterPolarSeries extends DataSeries {
+    data: PolarDataPoint[];
+    type: 'scatterpolar';
+}
+
 // @public
 export interface Schema {
     plotlySchema: any;

packages/charts/react-charts/library/src/PolarChart.ts

@@ -0,0 +1 @@
+export * from './components/PolarChart/index';

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

@@ -32,13 +32,14 @@ import {
   transformPlotlyJsonToVBCProps,
   transformPlotlyJsonToChartTableProps,
   transformPlotlyJsonToScatterChartProps,
-  projectPolarToCartesian,
   getAllupLegendsProps,
   NON_PLOT_KEY_PREFIX,
   SINGLE_REPEAT,
   transformPlotlyJsonToFunnelChartProps,
   transformPlotlyJsonToGanttChartProps,
   transformPlotlyJsonToAnnotationChartProps,
+  transformPlotlyJsonToPolarChartProps,
+  DEFAULT_POLAR_SUBPLOT,
 } from './PlotlySchemaAdapter';
 import { getChartTitleInlineStyles } from '../../utilities/index';
 import type { ColorwayType } from './PlotlyColorAdapter';
@@ -57,6 +58,7 @@ import { Chart, ImageExportOptions } from '../../types/index';
 import { ScatterChart } from '../ScatterChart/index';
 import { FunnelChart } from '../FunnelChart/FunnelChart';
 import { GanttChart } from '../GanttChart/index';
+import { PolarChart } from '../PolarChart/index';
 
 import { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';
 import { ChartTable } from '../ChartTable/index';
@@ -80,6 +82,7 @@ const ResponsiveChartTable = withResponsiveContainer(ChartTable);
 const ResponsiveGanttChart = withResponsiveContainer(GanttChart);
 // Removing responsive wrapper for FunnelChart as responsive container is not working with FunnelChart
 //const ResponsiveFunnelChart = withResponsiveContainer(FunnelChart);
+const ResponsivePolarChart = withResponsiveContainer(PolarChart);
 
 // Default x-axis key for grouping traces. Also applicable for PieData and SankeyData where x-axis is not defined.
 const DEFAULT_XAXIS = 'x';
@@ -244,6 +247,10 @@ type ChartTypeMap = {
     transformer: typeof transformPlotlyJsonToFunnelChartProps;
     renderer: typeof FunnelChart;
   } & PreTransformHooks;
+  scatterpolar: {
+    transformer: typeof transformPlotlyJsonToPolarChartProps;
+    renderer: typeof ResponsivePolarChart;
+  } & PreTransformHooks;
   fallback: {
     transformer: typeof transformPlotlyJsonToVSBCProps;
     renderer: typeof ResponsiveVerticalStackedBarChart;
@@ -318,6 +325,10 @@ const chartMap: ChartTypeMap = {
     transformer: transformPlotlyJsonToFunnelChartProps,
     renderer: FunnelChart,
   },
+  scatterpolar: {
+    transformer: transformPlotlyJsonToPolarChartProps,
+    renderer: ResponsivePolarChart,
+  },
   fallback: {
     transformer: transformPlotlyJsonToVSBCProps,
     renderer: ResponsiveVerticalStackedBarChart,
@@ -459,23 +470,6 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
     [exportAsImage],
   );
 
-  if (chart.type === 'scatterpolar') {
-    const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);
-    plotlyInputWithValidData.data = cartesianProjection.data;
-    plotlyInputWithValidData.layout = cartesianProjection.layout;
-    validTracesFilteredIndex.forEach((trace, index) => {
-      if (trace.type === 'scatterpolar') {
-        const mode = (plotlyInputWithValidData.data[index] as PlotData)?.mode ?? '';
-        if (mode.includes('line')) {
-          validTracesFilteredIndex[index].type = 'line';
-        } else if (mode.includes('markers') || mode === 'text') {
-          validTracesFilteredIndex[index].type = 'scatter';
-        } else {
-          validTracesFilteredIndex[index].type = 'line';
-        }
-      }
-    });
-  }
   const groupedTraces: Record<string, number[]> = {};
   let nonCartesianTraceCount = 0;
 
@@ -489,7 +483,10 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
         traceKey = `${NON_PLOT_KEY_PREFIX}${nonCartesianTraceCount + 1}`;
         nonCartesianTraceCount++;
       } else {
-        traceKey = (trace as PlotData).xaxis ?? DEFAULT_XAXIS;
+        traceKey =
+          chart.validTracesInfo![index].type === 'scatterpolar'
+            ? (trace as { subplot?: string }).subplot ?? DEFAULT_POLAR_SUBPLOT
+            : (trace as PlotData).xaxis ?? DEFAULT_XAXIS;
       }
       if (!groupedTraces[traceKey]) {
         groupedTraces[traceKey] = [];