feat(charts): Create chart web components - Donut and Horizontal Bar Chart

[AtishayMsft]

Previous Behavior

New Behavior

Create chart controls as web components.
This PR introduces the following charts:

• Horizontal Bar Chart - https://fluentuipr.z22.web.core.windows.net/pull/33084/chart-web-components/storybook/index.html?path=/docs/components-horizontalbarchart--docs
• Donut Chart - https://fluentuipr.z22.web.core.windows.net/pull/33084/chart-web-components/storybook/index.html?path=/docs/components-donutchart--docs

The functionality and design is aligned with their corresponding v8 implementation.

Related Issue(s)

• Fixes #

[fabricteam]

🕵 FluentUIV0 No visual regressions between this PR and main

[fabricteam]

Perf Analysis (@fluentui/react-components)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender	36	35	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	624	632	5000
Button	mount	308	300	5000
Field	mount	1141	1151	5000
FluentProvider	mount	709	730	5000
FluentProviderWithTheme	mount	86	87	10
FluentProviderWithTheme	virtual-rerender	36	35	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	74	82	10
MakeStyles	mount	865	880	50000
Persona	mount	1757	1690	5000
SpinButton	mount	1373	1440	5000
SwatchPicker	mount	1649	1646	5000

[fabricteam]

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	94	76	1.24:1
TreeWith60ListItems.default	97	85	1.14:1
AvatarMinimalPerf.default	112	101	1.11:1
ChatWithPopoverPerf.default	201	183	1.1:1
LoaderMinimalPerf.default	199	181	1.1:1
ReactionMinimalPerf.default	222	205	1.08:1
AccordionMinimalPerf.default	90	84	1.07:1
ButtonMinimalPerf.default	91	85	1.07:1
ProviderMinimalPerf.default	212	199	1.07:1
StatusMinimalPerf.default	408	382	1.07:1
ListNestedPerf.default	332	312	1.06:1
ChatDuplicateMessagesPerf.default	165	157	1.05:1
HeaderMinimalPerf.default	213	203	1.05:1
MenuMinimalPerf.default	517	491	1.05:1
SkeletonMinimalPerf.default	205	195	1.05:1
TooltipMinimalPerf.default	1275	1218	1.05:1
CardMinimalPerf.default	328	314	1.04:1
DialogMinimalPerf.default	456	440	1.04:1
FlexMinimalPerf.default	159	153	1.04:1
ListWith60ListItems.default	376	362	1.04:1
RefMinimalPerf.default	115	111	1.04:1
AlertMinimalPerf.default	165	160	1.03:1
CarouselMinimalPerf.default	277	269	1.03:1
CheckboxMinimalPerf.default	1164	1132	1.03:1
DropdownManyItemsPerf.default	414	402	1.03:1
ItemLayoutMinimalPerf.default	719	700	1.03:1
ButtonOverridesMissPerf.default	675	661	1.02:1
EmbedMinimalPerf.default	1923	1883	1.02:1
GridMinimalPerf.default	191	188	1.02:1
InputMinimalPerf.default	561	549	1.02:1
ListCommonPerf.default	397	390	1.02:1
SliderMinimalPerf.default	755	740	1.02:1
TextMinimalPerf.default	191	187	1.02:1
CustomToolbarPrototype.default	1466	1440	1.02:1
BoxMinimalPerf.default	194	193	1.01:1
DividerMinimalPerf.default	206	203	1.01:1
HeaderSlotsPerf.default	467	461	1.01:1
LabelMinimalPerf.default	217	215	1.01:1
MenuButtonMinimalPerf.default	963	949	1.01:1
PortalMinimalPerf.default	85	84	1.01:1
RadioGroupMinimalPerf.default	274	270	1.01:1
SegmentMinimalPerf.default	195	194	1.01:1
TreeMinimalPerf.default	487	484	1.01:1
AnimationMinimalPerf.default	304	303	1:1
DropdownMinimalPerf.default	1466	1463	1:1
FormMinimalPerf.default	220	221	1:1
ImageMinimalPerf.default	227	227	1:1
LayoutMinimalPerf.default	201	202	1:1
TextAreaMinimalPerf.default	290	290	1:1
DatepickerMinimalPerf.default	3615	3642	0.99:1
ListMinimalPerf.default	311	315	0.99:1
RosterPerf.default	1570	1593	0.99:1
ToolbarMinimalPerf.default	546	550	0.99:1
VideoMinimalPerf.default	453	456	0.99:1
AttachmentSlotsPerf.default	648	662	0.98:1
ButtonSlotsPerf.default	304	310	0.98:1
TableManyItemsPerf.default	1123	1146	0.98:1
PopupMinimalPerf.default	346	358	0.97:1
SplitButtonMinimalPerf.default	2209	2269	0.97:1
ChatMinimalPerf.default	424	440	0.96:1
ProviderMergeThemesPerf.default	640	664	0.96:1
IconMinimalPerf.default	387	403	0.96:1
TableMinimalPerf.default	219	239	0.92:1

[fabricteam]

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	649	633	5000
Breadcrumb	mount	1738	1722	1000
Checkbox	mount	1763	1736	5000
CheckboxBase	mount	1517	1486	5000
ChoiceGroup	mount	2988	3026	5000
ComboBox	mount	678	696	1000
CommandBar	mount	6807	6797	1000
ContextualMenu	mount	15990	15798	1000
DefaultButton	mount	822	827	5000
DetailsRow	mount	2269	2213	5000
DetailsRowFast	mount	2219	2248	5000
DetailsRowNoStyles	mount	2065	2054	5000
Dialog	mount	2799	2873	1000
DocumentCardTitle	mount	237	228	1000
Dropdown	mount	2033	2038	5000
FocusTrapZone	mount	1136	1167	5000
FocusZone	mount	1105	1120	5000
GroupedList	mount	43313	42988	2
GroupedList	virtual-rerender	20578	20669	2
GroupedList	virtual-rerender-with-unmount	52992	52847	2
GroupedListV2	mount	234	243	2
GroupedListV2	virtual-rerender	226	229	2
GroupedListV2	virtual-rerender-with-unmount	244	243	2
IconButton	mount	1155	1159	5000
Label	mount	347	356	5000
Layer	mount	2747	2756	5000
Link	mount	418	407	5000
MenuButton	mount	995	1021	5000
MessageBar	mount	21548	21493	5000
Nav	mount	2033	2027	1000
OverflowSet	mount	802	798	5000
Panel	mount	1852	1885	1000
Persona	mount	754	776	1000
Pivot	mount	936	924	1000
PrimaryButton	mount	949	935	5000
Rating	mount	4664	4735	5000
SearchBox	mount	931	954	5000
Shimmer	mount	1919	1920	5000
Slider	mount	1355	1350	5000
SpinButton	mount	3031	2981	5000
Spinner	mount	399	398	5000
SplitButton	mount	1936	1886	5000
Stack	mount	424	413	5000
StackWithIntrinsicChildren	mount	881	891	5000
StackWithTextChildren	mount	2778	2801	5000
SwatchColorPicker	mount	6466	6387	5000
TagPicker	mount	1473	1458	5000
Text	mount	393	388	5000
TextField	mount	965	947	5000
ThemeProvider	mount	857	849	5000
ThemeProvider	virtual-rerender	581	591	5000
ThemeProvider	virtual-rerender-with-unmount	1308	1312	5000
Toggle	mount	593	636	5000
buttonNative	mount	201	196	5000

[davatron5000]

Saw this request and fui-wc review, so I've added some initial comments. I think the main areas of concern for me are:

• Use of Tabster - this would increase our bundle size by 50~75%
• Render functions seem overloaded with DOM manipulation functions. Seems like some of that could be cleaned up and abstracted out to the template.

[AtishayMsft]

A high-level note is, both components should probably use ElementInternals to set role as image, If keyboard users are expected to be able to interact with the generated charts (as opposed to just having aria-label to describe the entire chart), I'm not sure if having every element in the tab sequence is very accessible, because a visual impaired user could feel stuck inside the chart and hard to get out of it.

We want the chart to be interactive rather than a single static image, as its individual elements contain valuable information. For keyboard accessibility, we’ll use Tabster to create focusable groups within the chart. This will allow users to navigate within groups using arrow keys, while keeping the tab sequence concise and efficient.

Generally, interactive controls need a role. Image is not an interactive element. In terms of focus ability - that’s fine, besides “convenience”, why is tabster a necessary dependency?

We have added element internal apis for accessibility support.

[fabricteam]

🕵🏾‍♀️ visual regressions to review in the fluentui-web-components-v3 Visual Regression Report

Avatar 1 screenshots

Image Name	Diff(in Pixels)	Image Type
Avatar.Image.chromium.png	248	Changed

[fabricteam]

🕵 fluentui-web-components-v3 No visual regressions between this PR and main