Additional VR tests Charting Library

apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx

@@ -283,7 +283,6 @@ storiesOf('react-charting/AreaChart', module)
             width={700}
             data={chartData}
             legendsOverflowText={'Overflow Items'}
-            // yAxisTickFormat={d3.format('$,')}
             enablePerfOptimization={true}
             legendProps={{
               allowFocusOnLegends: true,

apps/vr-tests/src/stories/react-charting/DonutChart.stories.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TestWrapperDecorator } from '../../utilities/TestWrapperDecorator';
+import { Steps, StoryWright } from 'storywright';
+import { IChartProps, IChartDataPoint, DonutChart } from '@fluentui/react-charting';
+
+storiesOf('react-charting/DonutChart', module)
+  .addDecorator((story, context) => TestWrapperDecorator(story, context))
+  .addDecorator((story, context) => {
+    const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+    return <StoryWright steps={steps}>{story()}</StoryWright>;
+  })
+  .addStory(
+    'Basic',
+    () => {
+      const points: IChartDataPoint[] = [
+        { legend: 'first', data: 20000, color: '#DADADA', xAxisCalloutData: '2020/04/30' },
+        { legend: 'second', data: 39000, color: '#0078D4', xAxisCalloutData: '2020/04/20' },
+      ];
+
+      const data: IChartProps = {
+        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>
+      );
+    },
+    { includeDarkMode: true, includeRtl: true },
+  )
+  .addStory(
+    'Dynamic',
+    () => {
+      const data: IChartProps = {
+        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>
+      );
+    },
+    { includeDarkMode: true, includeRtl: true },
+  );

apps/vr-tests/src/stories/react-charting/GaugeChart.stories.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TestWrapperDecorator } from '../../utilities/TestWrapperDecorator';
+import { Steps, StoryWright } from 'storywright';
+import { DataVizPalette, GaugeChart, GaugeValueFormat } from '@fluentui/react-charting';
+
+storiesOf('react-charting/GaugeChart', module)
+  .addDecorator((story, context) => TestWrapperDecorator(story, context))
+  .addDecorator((story, context) => {
+    const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+    return <StoryWright steps={steps}>{story()}</StoryWright>;
+  })
+  .addStory(
+    'Basic',
+    () => {
+      return (
+        <div style={{ padding: '10px' }}>
+          <GaugeChart
+            width={252}
+            height={128}
+            segments={[
+              { size: 33, color: DataVizPalette.success, legend: 'Low Risk' },
+              { size: 34, color: DataVizPalette.warning, legend: 'Medium Risk' },
+              { size: 33, color: DataVizPalette.error, legend: 'High Risk' },
+            ]}
+            chartValue={50}
+            hideMinMax={false}
+          />
+        </div>
+      );
+    },
+    { includeDarkMode: true, includeRtl: true },
+  )
+  .addStory(
+    'Variant',
+    () => {
+      return (
+        <>
+          <GaugeChart
+            width={252}
+            height={173}
+            segments={[
+              { size: 50, legend: 'Used' },
+              {
+                size: 100 - 50,
+                color: DataVizPalette.disabled,
+                legend: 'Available',
+              },
+            ]}
+            chartValue={50}
+            chartTitle="Storage capacity"
+            sublabel="used"
+            chartValueFormat={GaugeValueFormat.Fraction}
+          />
+        </>
+      );
+    },
+    { includeDarkMode: true, includeRtl: true },
+  );