Added styles to the styled legends story

apps/public-docsite-v9/package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@fluentui/react-calendar-compat": "*",
+    "@fluentui/react-charts-preview": "*",
     "@fluentui/react-datepicker-compat": "*",
     "@fluentui/react-migration-v8-v9": "*",
     "@fluentui/react-migration-v0-v9": "*",

apps/vr-tests-react-components/package.json

@@ -25,6 +25,7 @@
     "@fluentui/react-button": "*",
     "@fluentui/react-calendar-compat": "*",
     "@fluentui/react-card": "*",
+    "@fluentui/react-charts-preview": "*",
     "@fluentui/react-checkbox": "*",
     "@fluentui/react-combobox": "*",
     "@fluentui/react-context-selector": "*",

apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { DARK_MODE, getStoryVariant, RTL, TestWrapperDecorator } from '../../utilities';
+import { Steps, StoryWright } from 'storywright';
+import { ChartProps, ChartDataPoint, DonutChart } from '@fluentui/react-charts-preview';
+
+export default {
+  title: 'Charts/DonutChart',
+
+  decorators: [
+    (story, context) => TestWrapperDecorator(story, context),
+    (story, context) => {
+      const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+      return <StoryWright steps={steps}>{story(context)}</StoryWright>;
+    },
+  ],
+} satisfies Meta<typeof DonutChart>;
+
+export const Basic = () => {
+  const points: ChartDataPoint[] = [
+    { legend: 'first', data: 20000, color: '#DADADA', xAxisCalloutData: '2020/04/30' },
+    { legend: 'second', data: 39000, color: '#0078D4', xAxisCalloutData: '2020/04/20' },
+  ];
+
+  const data: ChartProps = {
+    chartTitle: 'Donut chart basic example',
+    chartData: points,
+  };
+  return (
+    <div style={{ padding: 10 }}>
+      <DonutChart
+        culture={window.navigator.language}
+        data={data}
+        innerRadius={55}
+        href="https://developer.microsoft.com/en-us/"
+        legendsOverflowText={'overflow Items'}
+        hideLegend={false}
+        height={220}
+        width={176}
+        valueInsideDonut={39000}
+      />
+    </div>
+  );
+};
+
+export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE);
+
+export const BasicRTL = getStoryVariant(Basic, RTL);
+
+export const Dynamic = () => {
+  const data: ChartProps = {
+    chartTitle: 'Donut chart dynamic example',
+    chartData: [
+      {
+        legend: 'first',
+        data: Math.floor(120),
+        color: '#00bcf2',
+      },
+      {
+        legend: 'second',
+        data: Math.floor(130),
+        color: '#b4a0ff',
+      },
+      {
+        legend: 'third',
+        data: Math.floor(10),
+        color: '#fff100',
+      },
+      {
+        legend: 'fourth',
+        data: Math.floor(270),
+        color: '#605e5c',
+      },
+    ],
+  };
+
+  return (
+    <div style={{ padding: 10 }}>
+      <DonutChart
+        data={data}
+        innerRadius={35}
+        legendProps={{
+          allowFocusOnLegends: true,
+        }}
+        hideLabels={false}
+        showLabelsInPercent={false}
+      />
+    </div>
+  );
+};
+
+export const DynamicDarkMode = getStoryVariant(Dynamic, DARK_MODE);
+
+export const DynamicRTL = getStoryVariant(Dynamic, RTL);

apps/vr-tests-react-components/src/stories/Charts/HorizontalBarChart.stories.tsx

@@ -0,0 +1,286 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { DARK_MODE, getStoryVariant, RTL, TestWrapperDecorator } from '../../utilities';
+import { Steps, StoryWright } from 'storywright';
+import { ChartProps, HorizontalBarChart, HorizontalBarChartVariant } from '@fluentui/react-charts-preview';
+
+export default {
+  title: 'Charts/HorizontalBarChart',
+
+  decorators: [
+    (story, context) => TestWrapperDecorator(story, context),
+    (story, context) => {
+      const steps =
+        context.name.includes('Basic') && !context.name.includes('RTL')
+          ? new Steps()
+              .snapshot('default', { cropTo: '.testWrapper' })
+              .executeScript(
+                // eslint-disable-next-line @fluentui/max-len
+                `document.querySelectorAll('g[id^="_HorizontalLine"]')[2].children[0].dispatchEvent(new MouseEvent('mouseover', { bubbles: true, cancelable: true }));`,
+              )
+              .snapshot('hover', { cropTo: '.testWrapper' })
+              .end()
+          : new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+      return <StoryWright steps={steps}>{story(context)}</StoryWright>;
+    },
+  ],
+} satisfies Meta<typeof HorizontalBarChart>;
+
+export const Basic = () => {
+  const hideRatio: boolean[] = [true, false];
+  const data: ChartProps[] = [
+    {
+      chartTitle: 'one',
+      chartData: [
+        {
+          legend: 'one',
+          horizontalBarChartdata: { x: 1543, y: 15000 },
+          color: '#4cb4b7',
+          xAxisCalloutData: '2020/04/30',
+          yAxisCalloutData: '10%',
+        },
+      ],
+    },
+    {
+      chartTitle: 'two',
+      chartData: [
+        {
+          legend: 'two',
+          horizontalBarChartdata: { x: 800, y: 15000 },
+          color: '#800080',
+          xAxisCalloutData: '2020/04/30',
+          yAxisCalloutData: '5%',
+        },
+      ],
+    },
+    {
+      chartTitle: 'three',
+      chartData: [
+        {
+          legend: 'three',
+          horizontalBarChartdata: { x: 8888, y: 15000 },
+          color: '#ff0000',
+          xAxisCalloutData: '2020/04/30',
+          yAxisCalloutData: '59%',
+        },
+      ],
+    },
+    {
+      chartTitle: 'four',
+      chartData: [
+        {
+          legend: 'four',
+          horizontalBarChartdata: { x: 15888, y: 15000 },
+          color: '#fbc0c3',
+          xAxisCalloutData: '2020/04/30',
+          yAxisCalloutData: '105%',
+        },
+      ],
+    },
+    {
+      chartTitle: 'five',
+      chartData: [
+        {
+          legend: 'five',
+          horizontalBarChartdata: { x: 11444, y: 15000 },
+          color: '#f7630c',
+          xAxisCalloutData: '2020/04/30',
+          yAxisCalloutData: '76%',
+        },
+      ],
+    },
+    {
+      chartTitle: 'six',
+      chartData: [
+        {
+          legend: 'six',
+          horizontalBarChartdata: { x: 14000, y: 15000 },
+          color: '#107c10',
+          xAxisCalloutData: '2020/04/30',
+          yAxisCalloutData: '93%',
+        },
+      ],
+    },
+    {
+      chartTitle: 'seven',
+      chartData: [
+        {
+          legend: 'seven',
+          horizontalBarChartdata: { x: 9855, y: 15000 },
+          color: '#6e0811',
+          xAxisCalloutData: '2020/04/30',
+          yAxisCalloutData: '65%',
+        },
+      ],
+    },
+    {
+      chartTitle: 'eight',
+      chartData: [
+        {
+          legend: 'eight',
+          horizontalBarChartdata: { x: 4250, y: 15000 },
+          color: '#3a96dd',
+          xAxisCalloutData: '2020/04/30',
+          yAxisCalloutData: '28%',
+        },
+      ],
+    },
+  ];
+
+  return (
+    <div style={{ padding: '10px' }}>
+      <HorizontalBarChart culture={window.navigator.language} data={data} hideRatio={hideRatio} width={600} />
+    </div>
+  );
+};
+
+export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE);
+
+export const BasicRTL = getStoryVariant(Basic, RTL);
+
+export const WithBenchmark = () => {
+  const hideRatio: boolean[] = [true, false];
+
+  const data: ChartProps[] = [
+    {
+      chartTitle: 'one',
+      chartData: [
+        {
+          legend: 'one',
+          data: 50,
+          horizontalBarChartdata: { x: 10, y: 100 },
+          color: '#4cb4b7',
+        },
+      ],
+    },
+    {
+      chartTitle: 'two',
+      chartData: [
+        {
+          legend: 'two',
+          data: 30,
+          horizontalBarChartdata: { x: 30, y: 200 },
+          color: '#800080',
+        },
+      ],
+    },
+    {
+      chartTitle: 'three',
+      chartData: [
+        {
+          legend: 'three',
+          data: 5,
+          horizontalBarChartdata: { x: 15, y: 50 },
+          color: '#ff0000',
+        },
+      ],
+    },
+  ];
+
+  return (
+    <div style={{ padding: '10px' }}>
+      <HorizontalBarChart data={data} hideRatio={hideRatio} width={600} chartDataMode="fraction" />
+    </div>
+  );
+};
+
+WithBenchmark.storyName = 'With_Benchmark';
+
+export const WithBenchmarkDarkMode = getStoryVariant(WithBenchmark, DARK_MODE);
+
+export const WithBenchmarkRTL = getStoryVariant(WithBenchmark, RTL);
+
+export const Variant = () => {
+  const data: ChartProps[] = [
+    {
+      chartTitle: 'one',
+      chartData: [
+        {
+          legend: 'one',
+          horizontalBarChartdata: { x: 1543, y: 15000 },
+          color: '#4cb4b7',
+        },
+      ],
+    },
+    {
+      chartTitle: 'two',
+      chartData: [
+        {
+          legend: 'two',
+          horizontalBarChartdata: { x: 800, y: 15000 },
+          color: '#800080',
+        },
+      ],
+    },
+    {
+      chartTitle: 'three',
+      chartData: [
+        {
+          legend: 'three',
+          horizontalBarChartdata: { x: 8888, y: 15000 },
+          color: '#ff0000',
+        },
+      ],
+    },
+    {
+      chartTitle: 'four',
+      chartData: [
+        {
+          legend: 'four',
+          horizontalBarChartdata: { x: 15888, y: 15000 },
+          color: '#fbc0c3',
+        },
+      ],
+    },
+    {
+      chartTitle: 'five',
+      chartData: [
+        {
+          legend: 'five',
+          horizontalBarChartdata: { x: 11444, y: 15000 },
+          color: '#f7630c',
+        },
+      ],
+    },
+    {
+      chartTitle: 'six',
+      chartData: [
+        {
+          legend: 'six',
+          horizontalBarChartdata: { x: 14000, y: 15000 },
+          color: '#107c10',
+        },
+      ],
+    },
+    {
+      chartTitle: 'seven',
+      chartData: [
+        {
+          legend: 'seven',
+          horizontalBarChartdata: { x: 9855, y: 15000 },
+          color: '#6e0811',
+        },
+      ],
+    },
+    {
+      chartTitle: 'eight',
+      chartData: [
+        {
+          legend: 'eight',
+          horizontalBarChartdata: { x: 4250, y: 15000 },
+          color: '#3a96dd',
+        },
+      ],
+    },
+  ];
+
+  return (
+    <div style={{ padding: '10px' }}>
+      <HorizontalBarChart data={data} variant={HorizontalBarChartVariant.AbsoluteScale} hideLabels={false} />
+    </div>
+  );
+};
+
+export const VariantDarkMode = getStoryVariant(Variant, DARK_MODE);
+
+export const VariantRTL = getStoryVariant(Variant, RTL);