[pull] master from microsoft:master

change/@fluentui-react-charting-e1e04cc0-cfc1-4801-bfa9-ec969b3ffc55.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: improve x-axis tick label layout with automatic wrapping, truncation, or multi-level rendering based on available space",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-charting-f3e7b651-4e32-4bab-895c-16f41bfaa4ee.json

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

change/@fluentui-react-charts-a6a464de-ad68-4188-b6a2-8100f18a88f8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: resolve minor bugs",
+  "packageName": "@fluentui/react-charts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-divider-ae589058-df1f-4fef-bec7-06fb3b3c8f39.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add base hooks",
+  "packageName": "@fluentui/react-divider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tabs-5fc7af63-58db-4cc1-b8ba-5fd46b90945f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add base hooks for tabs components",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charting/UnitTests/__snapshots__/VerticalBarChartUT.test.tsx.snap

@@ -15,12 +15,13 @@ exports[`vertical bar chart with numeric x-axis data Should render the vertical
           font-weight: 400;
           height: 100%;
           overflow: hidden;
+          position: relative;
           width: 100%;
         }
-    id="chart_3"
+    id="chart_2"
   >
     <div
-      id="defaultTabbableElement_4"
+      id="defaultTabbableElement_3"
     />
     <div
       class=
@@ -31,7 +32,7 @@ exports[`vertical bar chart with numeric x-axis data Should render the vertical
           {
             position: relative;
           }
-      data-focuszone-id="FocusZone6"
+      data-focuszone-id="FocusZone5"
       data-tabster="{\\"uncontrolled\\": {}}"
     >
       <svg
@@ -44,7 +45,7 @@ exports[`vertical bar chart with numeric x-axis data Should render the vertical
       >
         <g
           class=
-
+              fui-cart__xAxis
               & text {
                 -moz-osx-font-smoothing: grayscale;
                 -webkit-font-smoothing: antialiased;
@@ -71,7 +72,7 @@ exports[`vertical bar chart with numeric x-axis data Should render the vertical
           fill="none"
           font-family="sans-serif"
           font-size="10"
-          id="xAxisGElementchart_3"
+          id="xAxisGElementchart_2"
           text-anchor="middle"
           transform="translate(0, 257)"
         >
@@ -217,7 +218,7 @@ exports[`vertical bar chart with numeric x-axis data Should render the vertical
           fill="none"
           font-family="sans-serif"
           font-size="10"
-          id="yAxisGElementchart_3"
+          id="yAxisGElementchart_2"
           text-anchor="end"
           transform="translate(40, 0)"
         >
@@ -329,7 +330,7 @@ exports[`vertical bar chart with numeric x-axis data Should render the vertical
               data-is-focusable="true"
               fill="#0078d4"
               height="47.400000000000006"
-              id="_VBC_bar_9"
+              id="_VBC_bar_8"
               role="img"
               rx="0"
               tabindex="0"
@@ -367,7 +368,7 @@ exports[`vertical bar chart with numeric x-axis data Should render the vertical
               data-is-focusable="true"
               fill="#002050"
               height="237"
-              id="_VBC_bar_11"
+              id="_VBC_bar_10"
               role="img"
               rx="0"
               tabindex="-1"
@@ -405,7 +406,7 @@ exports[`vertical bar chart with numeric x-axis data Should render the vertical
               data-is-focusable="true"
               fill="#00188f"
               height="142.2"
-              id="_VBC_bar_13"
+              id="_VBC_bar_12"
               role="img"
               rx="0"
               tabindex="-1"
@@ -472,7 +473,7 @@ exports[`vertical bar chart with numeric x-axis data Should render the vertical
                     &:focus {
                       outline: none;
                     }
-                data-focuszone-id="FocusZone7"
+                data-focuszone-id="FocusZone6"
                 data-tabster="{\\"uncontrolled\\": {}}"
                 role="listbox"
               >

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

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

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

@@ -9,6 +9,7 @@ import { FocusZoneDirection } from '@fluentui/react-focus';
 import { ICalloutContentStyleProps } from '@fluentui/react/lib/Callout';
 import { ICalloutContentStyles } from '@fluentui/react/lib/Callout';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
+import { ICalloutProps as ICalloutProps_2 } from '@fluentui/react';
 import { IFocusZoneProps } from '@fluentui/react-focus';
 import { IHoverCardStyleProps } from '@fluentui/react/lib/HoverCard';
 import { IHoverCardStyles } from '@fluentui/react/lib/HoverCard';
@@ -450,7 +451,9 @@ export interface ICartesianChartProps {
     useUTC?: boolean;
     width?: number;
     wrapXAxisLables?: boolean;
-    xAxis?: AxisProps;
+    xAxis?: AxisProps & {
+        tickLayout?: 'default' | 'auto';
+    };
     xAxisAnnotation?: string;
     xAxisCategoryOrder?: AxisCategoryOrder;
     xAxisTickCount?: number;
@@ -1529,6 +1532,52 @@ export interface IPieChartStyles {
     root?: IStyle;
 }
 
+// @public
+export interface IPolarChartProps {
+    angularAxis?: PolarAxisProps & {
+        unit?: 'radians' | 'degrees';
+    };
+    calloutProps?: Partial<ICalloutProps_2>;
+    chartTitle?: string;
+    componentRef?: React_2.Ref<IChart>;
+    culture?: string;
+    // Warning: (ae-forgotten-export) The symbol "IAreaPolarSeries" needs to be exported by the entry point index.d.ts
+    // Warning: (ae-forgotten-export) The symbol "ILinePolarSeries" needs to be exported by the entry point index.d.ts
+    // Warning: (ae-forgotten-export) The symbol "IScatterPolarSeries" needs to be exported by the entry point index.d.ts
+    data: (IAreaPolarSeries | ILinePolarSeries | IScatterPolarSeries)[];
+    dateLocalizeOptions?: Intl.DateTimeFormatOptions;
+    direction?: 'clockwise' | 'counterclockwise';
+    height?: number;
+    hideLegend?: boolean;
+    hideTooltip?: boolean;
+    hole?: number;
+    // (undocumented)
+    legendProps?: Partial<ILegendsProps>;
+    margins?: IMargins;
+    radialAxis?: PolarAxisProps;
+    shape?: 'circle' | 'polygon';
+    styles?: IStyleFunctionOrObject_2<IPolarChartStyleProps, IPolarChartStyles>;
+    theme?: ITheme_2;
+    useUTC?: boolean;
+    width?: number;
+}
+
+// @public
+export interface IPolarChartStyleProps {
+    theme: ITheme_2;
+}
+
+// @public
+export interface IPolarChartStyles {
+    chart?: IStyle_2;
+    chartWrapper?: IStyle_2;
+    gridLineInner?: IStyle_2;
+    gridLineOuter?: IStyle_2;
+    legendContainer?: IStyle_2;
+    root?: IStyle_2;
+    tickLabel?: IStyle_2;
+}
+
 // @public (undocumented)
 export interface IRefArrayData {
     // (undocumented)
@@ -2028,6 +2077,20 @@ export enum NodesComposition {
 // @public
 export const PieChart: React_2.FunctionComponent<IPieChartProps>;
 
+// @public
+export type PolarAxisProps = AxisProps & {
+    tickValues?: number[] | Date[] | string[];
+    tickFormat?: string;
+    tickCount?: number;
+    categoryOrder?: AxisCategoryOrder;
+    scaleType?: AxisScaleType;
+    rangeStart?: number | Date;
+    rangeEnd?: number | Date;
+};
+
+// @public
+export const PolarChart: React_2.FunctionComponent<IPolarChartProps>;
+
 // @public
 export const ResponsiveContainer: React_2.FC<IResponsiveContainerProps>;
 

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

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

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

@@ -1,15 +1,8 @@
 import * as React from 'react';
 import { max as d3Max, bisector } from 'd3-array';
 import { pointer } from 'd3-selection';
-import { select as d3Select } from 'd3-selection';
 import { area as d3Area, stack as d3Stack, curveMonotoneX as d3CurveBasis, line as d3Line } from 'd3-shape';
-import {
-  classNamesFunction,
-  getId,
-  getRTL,
-  initializeComponentRef,
-  memoizeFunction,
-} from '@fluentui/react/lib/Utilities';
+import { getId, getRTL, initializeComponentRef, memoizeFunction } from '@fluentui/react/lib/Utilities';
 import {
   IAccessibilityProps,
   CartesianChart,
@@ -20,8 +13,6 @@ import {
   ILineChartPoints,
   IChildProps,
   IMargins,
-  IAreaChartStyleProps,
-  IAreaChartStyles,
 } from '../../index';
 import { warnDeprecations } from '@fluentui/react/lib/Utilities';
 import { formatDateToLocaleString } from '@fluentui/chart-utilities';
@@ -31,7 +22,6 @@ import {
   ChartTypes,
   XAxisTypes,
   getTypeOfAxis,
-  tooltipOfAxislabels,
   getNextColor,
   getColorFromToken,
   findNumericMinMaxOfY,
@@ -53,8 +43,6 @@ import { exportChartsAsImage } from '../../utilities/image-export-utils';
 import { ScaleLinear } from 'd3-scale';
 import type { JSXElement } from '@fluentui/utilities';
 
-const getClassNames = classNamesFunction<IAreaChartStyleProps, IAreaChartStyles>();
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const bisect = bisector((d: any) => d.x).left;
 
@@ -140,7 +128,6 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   private _xAxisRectScale: any;
   // determines if the given area chart has multiple stacked bar charts
   private _isMultiStackChart: boolean;
-  private _tooltipId: string;
   private _highlightedCircleId: string;
   //enableComputationOptimization is used for optimized code to group data points by x value
   //from O(n^2) to O(n) using a map.
@@ -181,7 +168,6 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     this._verticalLineId = getId('verticalLine_');
     this._circleId = getId('circle');
     this._rectId = getId('rectangle');
-    this._tooltipId = getId('AreaChartTooltipID');
     this._enableComputationOptimization = true;
     this._firstRenderOptimization = true;
     this._emptyChartId = getId('_AreaChart_empty');
@@ -1026,30 +1012,6 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
         {...getSecureProps(pointLineOptions)}
       />,
     );
-    const classNames = getClassNames(this.props.styles!, {
-      theme: this.props.theme!,
-    });
-    // Removing un wanted tooltip div from DOM, when prop not provided.
-    if (!this.props.showXAxisLablesTooltip) {
-      try {
-        document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId)!.remove();
-        // eslint-disable-next-line no-empty
-      } catch (e) {}
-    }
-    // Used to display tooltip at x axis labels.
-    if (!this.props.wrapXAxisLables && this.props.showXAxisLablesTooltip) {
-      const xAxisElement = d3Select(xElement).call(xScale);
-      try {
-        document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId)!.remove();
-        // eslint-disable-next-line no-empty
-      } catch (e) {}
-      const tooltipProps = {
-        tooltipCls: classNames.tooltip!,
-        id: this._tooltipId,
-        axis: xAxisElement,
-      };
-      xAxisElement && tooltipOfAxislabels(tooltipProps);
-    }
     return graph;
   };
 

packages/charts/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx

@@ -700,10 +700,10 @@ describe('Area chart - Subcomponent xAxis Labels', () => {
     AreaChart,
     { data: chartDataWithDates, showXAxisLablesTooltip: true },
     container => {
-      const xAxisLabels = getById(container, /showDots/i);
+      const xAxisLabels = container.querySelectorAll('tspan');
       fireEvent.mouseOver(xAxisLabels[0]);
       // Assert
-      expect(getById(container, /showDots/i)[0]!.textContent!).toEqual('Jan ...');
+      expect(xAxisLabels[0].textContent).toEqual('Jan ...');
     },
     undefined,
     undefined,