Charting: Donut and Horizontal Bar Chart

[gouttierre]

Component Name

Component Description

Create chart controls as web components.

• Horizontal Bar Chart - https://fluentuipr.z22.web.core.windows.net/pull/33084/web-components/storybook/index.html?path=/docs/components-horizontalbarchart--docs
• Donut Chart - https://fluentuipr.z22.web.core.windows.net/pull/33084/web-components/storybook/index.html?path=/docs/components-donutchart--docs
  The functionality and design is aligned with their corresponding v8 implementation.

Design Spec

Link to Design Spec in Figma

Engineering Spec

Inputs

• [List all inputs into the component]
• [e.g. @attr public paused: boolean | false]

Outputs

• [List all outputs from the component]

Events

• [List all inputs into the component]

Slots

• [List all named and unnamed slots for the component]
• [e.g. Indeterminate: The slot for a custom indeterminate indicator]

CSS Variables

• [Any component-specific CSS variables that allow the user to change the appearance of the component]

Accessibility

• Find the matching component through WCAG's patterns: https://www.w3.org/WAI/ARIA/apg/patterns/https://www.w3.org/WAI/ARIA/apg/patterns/
• Are there any accessibility elements unique to this component?
• List ARIA attributes
  • ARIA attribute
• Does the component support 400% zoom?

Preparation

• Find the base FAST Component this component will inherit from and document
  • FAST Component
• Check the Fluent UI React V9 Component Spec for differences and document
  • Difference How to use a primary button with an icon? #1
• Fluent UI React V9 Storybook for implementation differences and document
  • Difference How to use a primary button with an icon? #1
• Open GitHub issues related to component
  • [link to each issue]
• (Optional) Draft implementation
  • [link to draft implementation, if applicable]
• Component Spec authored and reviewed

Implementation

• Initial conformance and unit tests (validate basic functionality)
• Initial documentation
  • Storybook stories
  • README.md covering basic usage
• Uses design tokens for styling
• Renders correctly in High Contrast mode

Validation

• Add tests
  • Unit and conformance tests
  • Bundle size fixtures
  • Performance test scenario
  • Accessibility behavior tests
  • Create an issue and run manual accessibility tests: [link to issue]
• Validate with partners
• Finalize documentation
  • Review and add any missing storybook stories
  • Finalize migration guide
  • In package.json: Remove the alpha/beta tag from the version number in package.json
  • In package.json: Change beachball's disallowedChangeTypes to "major", "prerelease"

[gouttierre]

📢

• This PR introduces the charts: feat(charts): Create chart web components - Donut and Horizontal Bar Chart #33084