diff --git a/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx
index 65f8b32b9abe7..9bf30d5050e56 100644
--- a/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx
+++ b/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,
diff --git a/apps/vr-tests/src/stories/react-charting/DonutChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/DonutChart.stories.tsx
new file mode 100644
index 0000000000000..3727d38c6d8dd
--- /dev/null
+++ b/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 {story()};
+ })
+ .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 (
+
+
+
+ );
+ },
+ { 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 (
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ );
diff --git a/apps/vr-tests/src/stories/react-charting/GaugeChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/GaugeChart.stories.tsx
new file mode 100644
index 0000000000000..a8b1c8bd7e2c7
--- /dev/null
+++ b/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 {story()};
+ })
+ .addStory(
+ 'Basic',
+ () => {
+ return (
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ )
+ .addStory(
+ 'Variant',
+ () => {
+ return (
+ <>
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ );
diff --git a/apps/vr-tests/src/stories/react-charting/HeatMapChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/HeatMapChart.stories.tsx
new file mode 100644
index 0000000000000..531ec347bf366
--- /dev/null
+++ b/apps/vr-tests/src/stories/react-charting/HeatMapChart.stories.tsx
@@ -0,0 +1,320 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TestWrapperDecorator } from '../../utilities/TestWrapperDecorator';
+import { Steps, StoryWright } from 'storywright';
+import { IHeatMapChartProps, HeatMapChart } from '@fluentui/react-charting';
+
+storiesOf('react-charting/HeatMapChart', module)
+ .addDecorator((story, context) => TestWrapperDecorator(story, context))
+ .addDecorator((story, context) => {
+ const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+ return {story()};
+ })
+ .addStory(
+ 'Basic',
+ () => {
+ const rootStyle = { width: `${450}px`, height: `${350}px` };
+ const ypointMapping: { [key: string]: string } = {
+ p1: 'ohio',
+ p2: 'Alaska',
+ p3: 'Texas',
+ p4: 'DC',
+ p5: 'NYC',
+ };
+ const yPoint: string[] = ['p1', 'p2', 'p3', 'p4', 'p5'];
+
+ const xPoint: Date[] = [
+ new Date('2020-03-03'),
+ new Date('2020-03-04'),
+ new Date('2020-03-05'),
+ new Date('2020-03-06'),
+ new Date('2020-03-07'),
+ new Date('2020-03-08'),
+ new Date('2020-03-09'),
+ new Date('2020-03-10'),
+ ];
+ const HeatMapData: IHeatMapChartProps['data'] = [
+ {
+ value: 100,
+ legend: 'Execllent (0-200)',
+ data: [],
+ },
+ {
+ value: 250,
+ legend: 'Good (201-300)',
+ data: [
+ {
+ x: xPoint[2],
+ y: yPoint[2],
+ value: 246,
+ rectText: 246,
+ ratio: [246, 2391],
+ descriptionMessage: 'air quality is seems to be very nice today',
+ },
+ {
+ x: xPoint[0],
+ y: yPoint[1],
+ value: 265,
+ rectText: 265,
+ ratio: [265, 2479],
+ descriptionMessage: 'today we have a good air quality in the alaska',
+ },
+ {
+ x: xPoint[1],
+ y: yPoint[0],
+ value: 250,
+ rectText: 250,
+ ratio: [250, 2043],
+ descriptionMessage: 'a sudden rise of 150 units in the ohio today',
+ },
+ {
+ x: xPoint[2],
+ y: yPoint[0],
+ value: 235,
+ rectText: 235,
+ ratio: [235, 2043],
+ descriptionMessage: 'air quality seems to decrease only 15 units from yesterday',
+ },
+ {
+ x: xPoint[6],
+ y: yPoint[2],
+ value: 300,
+ rectText: 300,
+ ratio: [300, 2391],
+ descriptionMessage: 'air comes to control little bit more that yesterday',
+ },
+ {
+ x: xPoint[0],
+ y: yPoint[3],
+ value: 290,
+ rectText: 290,
+ ratio: [290, 2462],
+ descriptionMessage: '1st day in the week, DC witnesses a good air quality',
+ },
+ {
+ x: xPoint[4],
+ y: yPoint[4],
+ value: 280,
+ rectText: 280,
+ ratio: [280, 2486],
+ descriptionMessage: `Air quality index is decreases exactly 200 units
+ giving the people of NYC a good hope`,
+ },
+ ],
+ },
+ {
+ value: 350,
+ legend: 'Medium (301-400)',
+ data: [
+ {
+ x: xPoint[1],
+ y: yPoint[1],
+ value: 345,
+ rectText: 345,
+ ratio: [345, 2479],
+ descriptionMessage: 'alaska has just reported nearly 100 units hike air quality',
+ },
+ {
+ x: xPoint[6],
+ y: yPoint[1],
+ value: 325,
+ rectText: 325,
+ ratio: [325, 2479],
+ descriptionMessage: `alaska to 300`,
+ },
+ {
+ x: xPoint[5],
+ y: yPoint[2],
+ value: 390,
+ rectText: 390,
+ ratio: [390, 2391],
+ descriptionMessage: 'air comes to control little bit',
+ },
+ {
+ x: xPoint[1],
+ y: yPoint[3],
+ value: 385,
+ rectText: 385,
+ ratio: [385, 2462],
+ descriptionMessage:
+ 'washington DC witnesses a hike of nearly 100 units in air quality',
+ },
+ {
+ x: xPoint[4],
+ y: yPoint[3],
+ value: 360,
+ rectText: 360,
+ ratio: [360, 2462],
+ descriptionMessage: 'a 200% hike in the air quality index',
+ },
+ {
+ x: xPoint[5],
+ y: yPoint[3],
+ value: 300,
+ rectText: 300,
+ ratio: [300, 2462],
+ descriptionMessage: '60 units decreased form yesterday.',
+ },
+ ],
+ },
+ {
+ value: 450,
+ legend: 'Danger (401-500)',
+ data: [
+ {
+ x: xPoint[1],
+ y: yPoint[2],
+ value: 400,
+ rectText: 400,
+ ratio: [400, 2391],
+ descriptionMessage: 'a sudden spike in the badness of the air quality',
+ },
+ {
+ x: xPoint[3],
+ y: yPoint[0],
+ value: 400,
+ rectText: 400,
+ ratio: [400, 2043],
+ descriptionMessage: 'stuation gor worse in air quality, due to industrial smoke',
+ },
+ {
+ x: xPoint[4],
+ y: yPoint[0],
+ value: 423,
+ rectText: 423,
+ ratio: [423, 2043],
+ descriptionMessage: 'we can see increase by 23 units',
+ },
+ {
+ x: xPoint[2],
+ y: yPoint[1],
+ value: 463,
+ rectText: 463,
+ ratio: [463, 2479],
+ descriptionMessage: 'day by day situation is getting worse in the alaska',
+ },
+ {
+ x: xPoint[3],
+ y: yPoint[2],
+ value: 480,
+ rectText: 480,
+ ratio: [480, 2391],
+ descriptionMessage:
+ 'same story, tolday also air quality decreases. a bad day in texas',
+ },
+ {
+ x: xPoint[2],
+ y: yPoint[3],
+ value: 491,
+ rectText: 491,
+ ratio: [491, 2462],
+ descriptionMessage: 'Day by Day 100 units are increasing in air quality',
+ },
+ {
+ x: xPoint[1],
+ y: yPoint[4],
+ value: 433,
+ rectText: 433,
+ ratio: [433, 2486],
+ descriptionMessage: `They say good things stay for shor time, today
+ this saying becaome reality, new york has witnessed nearly 300% bad air quality`,
+ },
+ {
+ x: xPoint[5],
+ y: yPoint[4],
+ value: 473,
+ rectText: 473,
+ ratio: [473, 2486],
+ descriptionMessage: `Today is the same fate as the 2nd day. still air quality
+ stay's above 400`,
+ },
+ ],
+ },
+ {
+ value: 550,
+ legend: 'Very Danger (501-600)',
+ data: [
+ {
+ x: xPoint[5],
+ y: yPoint[0],
+ value: 600,
+ rectText: 600,
+ ratio: [600, 2043],
+ descriptionMessage:
+ 'looks like the god has cursed us with the poision air. worst air quality index',
+ },
+ {
+ x: xPoint[5],
+ y: yPoint[1],
+ value: 536,
+ rectText: 536,
+ ratio: [536, 2479],
+ descriptionMessage: `shhh!, all the hopes are washed away in the rain yesterday,
+ again hike of 400% in air quality`,
+ },
+ {
+ x: xPoint[3],
+ y: yPoint[1],
+ value: 520,
+ rectText: 520,
+ ratio: [520, 2479],
+ descriptionMessage:
+ 'Alaska planning to bulild the air purifier to control in the air quality',
+ },
+ {
+ x: xPoint[4],
+ y: yPoint[2],
+ value: 525,
+ rectText: 525,
+ ratio: [525, 2391],
+ descriptionMessage: 'air decreases badly today due to farmer bufing the harvest',
+ },
+ {
+ x: xPoint[6],
+ y: yPoint[3],
+ value: 560,
+ rectText: 560,
+ ratio: [560, 2462],
+ descriptionMessage: `Due to industiral pollution and the
+ burning of harvest in the alaska, resulted to bad air quality in the washington DC`,
+ },
+ {
+ x: xPoint[3],
+ y: yPoint[4],
+ value: 580,
+ rectText: 580,
+ ratio: [580, 2486],
+ descriptionMessage: `Air quality index is becoming worse day by day, leaving the
+ people of NYC in very bad medical conditions.`,
+ },
+ {
+ x: xPoint[6],
+ y: yPoint[4],
+ value: 590,
+ rectText: 590,
+ ratio: [590, 2486],
+ descriptionMessage: `finally the Weekend end's with very bad air quality in the new your city`,
+ },
+ ],
+ },
+ ];
+ return (
+
+ ypointMapping[point as string]}
+ xAxisNumberFormatString=".7s"
+ yAxisNumberFormatString=".3s"
+ width={450}
+ height={350}
+ domainValuesForColorScale={[0, 600]}
+ rangeValuesForColorScale={['lightblue', 'darkblue']}
+ />
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ );
diff --git a/apps/vr-tests/src/stories/react-charting/HorizontalBarChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/HorizontalBarChart.stories.tsx
new file mode 100644
index 0000000000000..c04c640297689
--- /dev/null
+++ b/apps/vr-tests/src/stories/react-charting/HorizontalBarChart.stories.tsx
@@ -0,0 +1,356 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TestWrapperDecorator } from '../../utilities/TestWrapperDecorator';
+import { Steps, StoryWright } from 'storywright';
+import {
+ IChartProps,
+ HorizontalBarChart,
+ HorizontalBarChartVariant,
+ IHorizontalBarChartWithAxisDataPoint,
+ HorizontalBarChartWithAxis,
+} from '@fluentui/react-charting';
+import { DefaultPalette } from '@fluentui/react';
+
+storiesOf('react-charting/HorizontalBarChart', module)
+ .addDecorator((story, context) => TestWrapperDecorator(story, context))
+ .addDecorator((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 {story()};
+ })
+ .addStory(
+ 'Basic',
+ () => {
+ const hideRatio: boolean[] = [true, false];
+ const data: IChartProps[] = [
+ {
+ chartTitle: 'one',
+ chartData: [
+ {
+ legend: 'one',
+ horizontalBarChartdata: { x: 1543, y: 15000 },
+ color: DefaultPalette.tealDark,
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '10%',
+ },
+ ],
+ },
+ {
+ chartTitle: 'two',
+ chartData: [
+ {
+ legend: 'two',
+ horizontalBarChartdata: { x: 800, y: 15000 },
+ color: DefaultPalette.purple,
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '5%',
+ },
+ ],
+ },
+ {
+ chartTitle: 'three',
+ chartData: [
+ {
+ legend: 'three',
+ horizontalBarChartdata: { x: 8888, y: 15000 },
+ color: DefaultPalette.redDark,
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '59%',
+ },
+ ],
+ },
+ {
+ chartTitle: 'four',
+ chartData: [
+ {
+ legend: 'four',
+ horizontalBarChartdata: { x: 15888, y: 15000 },
+ color: DefaultPalette.themeDarkAlt,
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '105%',
+ },
+ ],
+ },
+ {
+ chartTitle: 'five',
+ chartData: [
+ {
+ legend: 'five',
+ horizontalBarChartdata: { x: 11444, y: 15000 },
+ color: DefaultPalette.themePrimary,
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '76%',
+ },
+ ],
+ },
+ {
+ chartTitle: 'six',
+ chartData: [
+ {
+ legend: 'six',
+ horizontalBarChartdata: { x: 14000, y: 15000 },
+ color: DefaultPalette.greenDark,
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '93%',
+ },
+ ],
+ },
+ {
+ chartTitle: 'seven',
+ chartData: [
+ {
+ legend: 'seven',
+ horizontalBarChartdata: { x: 9855, y: 15000 },
+ color: DefaultPalette.accent,
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '65%',
+ },
+ ],
+ },
+ {
+ chartTitle: 'eight',
+ chartData: [
+ {
+ legend: 'eight',
+ horizontalBarChartdata: { x: 4250, y: 15000 },
+ color: DefaultPalette.blueLight,
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '28%',
+ },
+ ],
+ },
+ ];
+
+ return (
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ )
+ .addStory(
+ 'With_Benchmark',
+ () => {
+ const hideRatio: boolean[] = [true, false];
+
+ const data: IChartProps[] = [
+ {
+ chartTitle: 'one',
+ chartData: [
+ {
+ legend: 'one',
+ data: 50,
+ horizontalBarChartdata: { x: 10, y: 100 },
+ color: DefaultPalette.tealDark,
+ },
+ ],
+ },
+ {
+ chartTitle: 'two',
+ chartData: [
+ {
+ legend: 'two',
+ data: 30,
+ horizontalBarChartdata: { x: 30, y: 200 },
+ color: DefaultPalette.purple,
+ },
+ ],
+ },
+ {
+ chartTitle: 'three',
+ chartData: [
+ {
+ legend: 'three',
+ data: 5,
+ horizontalBarChartdata: { x: 15, y: 50 },
+ color: DefaultPalette.redDark,
+ },
+ ],
+ },
+ ];
+
+ return (
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ )
+ .addStory(
+ 'Variant',
+ () => {
+ const data: IChartProps[] = [
+ {
+ chartTitle: 'one',
+ chartData: [
+ {
+ legend: 'one',
+ horizontalBarChartdata: { x: 1543, y: 15000 },
+ color: DefaultPalette.tealDark,
+ },
+ ],
+ },
+ {
+ chartTitle: 'two',
+ chartData: [
+ {
+ legend: 'two',
+ horizontalBarChartdata: { x: 800, y: 15000 },
+ color: DefaultPalette.purple,
+ },
+ ],
+ },
+ {
+ chartTitle: 'three',
+ chartData: [
+ {
+ legend: 'three',
+ horizontalBarChartdata: { x: 8888, y: 15000 },
+ color: DefaultPalette.redDark,
+ },
+ ],
+ },
+ {
+ chartTitle: 'four',
+ chartData: [
+ {
+ legend: 'four',
+ horizontalBarChartdata: { x: 15888, y: 15000 },
+ color: DefaultPalette.themeDarkAlt,
+ },
+ ],
+ },
+ {
+ chartTitle: 'five',
+ chartData: [
+ {
+ legend: 'five',
+ horizontalBarChartdata: { x: 11444, y: 15000 },
+ color: DefaultPalette.themePrimary,
+ },
+ ],
+ },
+ {
+ chartTitle: 'six',
+ chartData: [
+ {
+ legend: 'six',
+ horizontalBarChartdata: { x: 14000, y: 15000 },
+ color: DefaultPalette.greenDark,
+ },
+ ],
+ },
+ {
+ chartTitle: 'seven',
+ chartData: [
+ {
+ legend: 'seven',
+ horizontalBarChartdata: { x: 9855, y: 15000 },
+ color: DefaultPalette.accent,
+ },
+ ],
+ },
+ {
+ chartTitle: 'eight',
+ chartData: [
+ {
+ legend: 'eight',
+ horizontalBarChartdata: { x: 4250, y: 15000 },
+ color: DefaultPalette.blueLight,
+ },
+ ],
+ },
+ ];
+
+ return (
+
+
+
+ );
+ },
+
+ { includeDarkMode: true, includeRtl: true },
+ )
+ .addStory(
+ 'With_Axis',
+ () => {
+ const points: IHorizontalBarChartWithAxisDataPoint[] = [
+ {
+ x: 10000,
+ y: 5000,
+ legend: 'Oranges',
+ color: DefaultPalette.accent,
+ yAxisCalloutData: '2020/04/30',
+ xAxisCalloutData: '10%',
+ },
+ {
+ x: 20000,
+ y: 50000,
+ legend: 'Dogs',
+ color: DefaultPalette.blueDark,
+ yAxisCalloutData: '2020/04/30',
+ xAxisCalloutData: '20%',
+ },
+ {
+ x: 25000,
+ y: 30000,
+ legend: 'Apples',
+ color: DefaultPalette.blueMid,
+ yAxisCalloutData: '2020/04/30',
+ xAxisCalloutData: '37%',
+ },
+
+ {
+ x: 40000,
+ y: 13000,
+ legend: 'Bananas',
+ color: DefaultPalette.blueLight,
+ yAxisCalloutData: '2020/04/30',
+ xAxisCalloutData: '88%',
+ },
+ ];
+
+ //const lineOptions: ILineChartLineOptions = { lineBorderWidth: '2' };
+
+ const rootStyle = { width: `${650}px`, height: `${350}px`, padding: '10px' };
+
+ return (
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ );
diff --git a/apps/vr-tests/src/stories/react-charting/Legend.stories.tsx b/apps/vr-tests/src/stories/react-charting/Legend.stories.tsx
new file mode 100644
index 0000000000000..7d56afc143923
--- /dev/null
+++ b/apps/vr-tests/src/stories/react-charting/Legend.stories.tsx
@@ -0,0 +1,287 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TestWrapperDecorator } from '../../utilities/TestWrapperDecorator';
+import { Steps, StoryWright } from 'storywright';
+import { ILegend, Legends } from '@fluentui/react-charting';
+
+storiesOf('react-charting/Legend', module)
+ .addDecorator((story, context) => TestWrapperDecorator(story, context))
+ .addDecorator((story, context) => {
+ const steps = context.name.includes('Overflow')
+ ? new Steps()
+ .snapshot('default', { cropTo: '.testWrapper' })
+ .executeScript(
+ // eslint-disable-next-line @fluentui/max-len
+ `document.querySelectorAll('div[class^="overflowIndicationTextStyle"]')[0].click()`,
+ )
+ .snapshot('expanded', { cropTo: '.testWrapper' })
+ .end()
+ : new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+ return {story()};
+ })
+ .addStory(
+ 'Basic',
+ () => {
+ const legends: ILegend[] = [
+ {
+ title: 'fsd 1',
+ color: '#0078d4',
+ action: () => {
+ console.log('click from LegendsPage');
+ alert('Legend1 clicked');
+ },
+ onMouseOutAction: () => {
+ console.log('On mouse out action');
+ },
+ hoverAction: () => {
+ console.log('hover action');
+ },
+ },
+ {
+ title: 'Legend 2',
+ color: '#e81123',
+ action: () => {
+ alert('Legend2 clicked');
+ },
+ hoverAction: () => {
+ console.log('hover action');
+ },
+ },
+ {
+ title: 'Legend 3',
+ color: '#107c10',
+ action: () => {
+ alert('Legend3 clicked');
+ },
+ hoverAction: () => {
+ console.log('hover action');
+ },
+ shape: 'diamond',
+ },
+ {
+ title: 'Legend 4',
+ color: '#ffb900',
+ shape: 'triangle',
+ action: () => {
+ alert('Legend4 clicked');
+ },
+ hoverAction: () => {
+ console.log('hover action');
+ },
+ },
+ ];
+
+ return (
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ )
+ .addStory(
+ 'Overflow',
+ () => {
+ const legends: ILegend[] = [
+ {
+ title: 'Legend 1',
+ color: '#e81123',
+ action: () => {
+ console.log('Legend1 clicked');
+ },
+ hoverAction: () => {
+ console.log('Hover action for legend1');
+ },
+ onMouseOutAction: () => undefined,
+ },
+ {
+ title: 'Legend 2',
+ color: '#107c10',
+ action: () => {
+ console.log('Legend2 clicked');
+ },
+ hoverAction: () => {
+ console.log('Hover action for legend2');
+ },
+ onMouseOutAction: () => undefined,
+ },
+ {
+ title: 'Legend 3',
+ color: '#ffb900',
+ action: () => {
+ console.log('Legend3 clicked');
+ },
+ hoverAction: () => {
+ console.log('Hover action for legend3');
+ },
+ onMouseOutAction: () => undefined,
+ },
+ {
+ title: 'Legend 4',
+ color: '#0078d4',
+ action: () => {
+ console.log('Legend4 clicked');
+ },
+ hoverAction: () => {
+ console.log('Hover action for legend4');
+ },
+ onMouseOutAction: () => undefined,
+ },
+ {
+ title: 'Legend 5',
+ color: '#b4a0ff',
+ action: () => {
+ console.log('Legend5 clicked');
+ },
+ hoverAction: () => {
+ console.log('Hover action for legend5');
+ },
+ onMouseOutAction: () => undefined,
+ },
+ {
+ title: 'Legend 6',
+ color: '#ea4300',
+ action: () => {
+ console.log('Legend6 clicked');
+ },
+ hoverAction: () => {
+ console.log('Hover action for legend6');
+ },
+ onMouseOutAction: () => undefined,
+ },
+ {
+ title: 'Legend 7',
+ color: '#b4009e',
+ action: () => {
+ console.log('Legend7 clicked');
+ },
+ hoverAction: () => {
+ console.log('Hover action for legend7');
+ },
+ onMouseOutAction: () => undefined,
+ },
+ {
+ title: 'Legend 8',
+ color: '#005a9e',
+ action: () => {
+ console.log('Legend8 clicked');
+ },
+ hoverAction: () => {
+ console.log('Hover action for legend8');
+ },
+ onMouseOutAction: () => undefined,
+ },
+ {
+ title: 'Legend 9',
+ color: '#a4262c',
+ action: () => {
+ console.log('Legend9 clicked');
+ },
+ hoverAction: () => {
+ console.log('Hover action for legend9');
+ },
+ onMouseOutAction: () => undefined,
+ },
+ {
+ title: 'Legend 10',
+ color: '#00188f',
+ action: () => {
+ console.log('Legend10 clicked');
+ },
+ hoverAction: () => {
+ console.log('Hover action for legend10');
+ },
+ onMouseOutAction: () => undefined,
+ },
+ {
+ title: 'Legend 11',
+ color: 'rgba(0,0,0,.4)',
+ action: () => {
+ console.log('Legend11 clicked');
+ },
+ hoverAction: () => {
+ console.log('Hover action for legend11');
+ },
+ onMouseOutAction: () => undefined,
+ },
+ {
+ title: 'Legend 12',
+ color: '#004b1c',
+ action: () => {
+ console.log('Legend12 clicked');
+ },
+ hoverAction: () => {
+ console.log('Hover action for legend12');
+ },
+ onMouseOutAction: () => undefined,
+ },
+ {
+ title: 'Legend 13',
+ color: '#fff100',
+ action: () => {
+ console.log('Legend13 clicked');
+ },
+ hoverAction: () => {
+ console.log('Hover action for legend13');
+ },
+ onMouseOutAction: () => undefined,
+ },
+ {
+ title: 'Legend 14',
+ color: '#e3008c',
+ action: () => {
+ console.log('Legend14 clicked');
+ },
+ hoverAction: () => {
+ console.log('Hover action for legend14');
+ },
+ onMouseOutAction: () => undefined,
+ },
+ {
+ title: 'Legend 15',
+ color: '#32145a',
+ action: () => {
+ console.log('Legend15 clicked');
+ },
+ hoverAction: () => {
+ console.log('Hover action for legend15');
+ },
+ onMouseOutAction: () => undefined,
+ },
+ {
+ title: 'Legend 16',
+ color: '#00188f',
+ action: () => {
+ console.log('Legend16 clicked');
+ },
+ hoverAction: () => {
+ console.log('Hover action for legend16');
+ },
+ onMouseOutAction: () => undefined,
+ },
+ {
+ title: 'Legend 17',
+ color: '#0078d4',
+ action: () => {
+ console.log('Legend17 clicked');
+ },
+ hoverAction: () => {
+ console.log('Hover action for legend17');
+ },
+ onMouseOutAction: () => undefined,
+ },
+ ];
+
+ return (
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ );
diff --git a/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx
index dfe130b708bc4..e1f559d2f7d2e 100644
--- a/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx
+++ b/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx
@@ -2,9 +2,14 @@ import * as React from 'react';
import { Steps, StoryWright } from 'storywright';
import { storiesOf } from '@storybook/react';
import { TestWrapperDecorator } from '../../utilities/index';
-import { ILineChartPoints, LineChart, IChartProps } from '@fluentui/react-charting';
+import {
+ ILineChartPoints,
+ LineChart,
+ IChartProps,
+ DataVizPalette,
+ ICustomizedCalloutData,
+} from '@fluentui/react-charting';
import { mergeStyles, DefaultPalette } from '@fluentui/react';
-import { DataVizPalette, ICustomizedCalloutData } from '@fluentui/react-charting';
storiesOf('react-charting/LineChart', module)
.addDecorator(TestWrapperDecorator)
diff --git a/apps/vr-tests/src/stories/react-charting/MultiStackBarChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/MultiStackBarChart.stories.tsx
new file mode 100644
index 0000000000000..c927c97a3fa61
--- /dev/null
+++ b/apps/vr-tests/src/stories/react-charting/MultiStackBarChart.stories.tsx
@@ -0,0 +1,261 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TestWrapperDecorator } from '../../utilities/TestWrapperDecorator';
+import { Steps, StoryWright } from 'storywright';
+import {
+ IChartProps,
+ IChartDataPoint,
+ MultiStackedBarChart,
+ MultiStackedBarChartVariant,
+} from '@fluentui/react-charting';
+
+storiesOf('react-charting/MultiStackBarChart', module)
+ .addDecorator((story, context) => TestWrapperDecorator(story, context))
+ .addDecorator((story, context) => {
+ const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+ return {story()};
+ })
+ .addStory(
+ 'Basic_Absolute',
+ () => {
+ const chartPoints1: IChartDataPoint[] = [
+ {
+ legend: 'Debit card numbers (EU and USA)',
+ data: 40,
+ color: '#0099BC',
+ },
+ {
+ legend: 'Passport numbers (USA)',
+ data: 23,
+ color: '#77004D',
+ },
+ {
+ legend: 'Social security numbers',
+ data: 35,
+ color: '#4F68ED',
+ },
+ {
+ legend: 'Credit card numbers',
+ data: 87,
+ color: '#AE8C00',
+ },
+ {
+ legend: 'Tax identification numbers (USA)',
+ data: 87,
+ color: '#004E8C',
+ },
+ ];
+
+ const chartPoints2: IChartDataPoint[] = [
+ {
+ legend: 'Debit card numbers (EU and USA)',
+ data: 40,
+ color: '#0099BC',
+ },
+ {
+ legend: 'Passport numbers (USA)',
+ data: 56,
+ color: '#77004D',
+ },
+ {
+ legend: 'Social security numbers',
+ data: 35,
+ color: '#4F68ED',
+ },
+ {
+ legend: 'Credit card numbers',
+ data: 92,
+ color: '#AE8C00',
+ },
+ {
+ legend: 'Tax identification numbers (USA)',
+ data: 87,
+ color: '#004E8C',
+ },
+ ];
+
+ const chartPoints3: IChartDataPoint[] = [
+ {
+ legend: 'Phone Numbers',
+ data: 40,
+ color: '#881798',
+ },
+ {
+ legend: 'Credit card Numbers',
+ data: 23,
+ color: '#AE8C00',
+ },
+ ];
+
+ const data: IChartProps[] = [
+ {
+ chartTitle: 'Monitored First',
+ chartData: chartPoints1,
+ },
+ {
+ chartTitle: 'Monitored Second',
+ chartData: chartPoints2,
+ },
+ {
+ chartTitle: 'Unmonitored',
+ chartData: chartPoints3,
+ },
+ ];
+
+ return (
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ )
+ .addStory(
+ 'Basic_PartToWhole',
+ () => {
+ const chartPoints1: IChartDataPoint[] = [
+ {
+ legend: 'Debit card numbers (EU and USA)',
+ data: 40,
+ color: '#0099BC',
+ },
+ {
+ legend: 'Passport numbers (USA)',
+ data: 23,
+ color: '#77004D',
+ },
+ {
+ legend: 'Social security numbers',
+ data: 35,
+ color: '#4F68ED',
+ },
+ {
+ legend: 'Credit card numbers',
+ data: 87,
+ color: '#AE8C00',
+ },
+ {
+ legend: 'Tax identification numbers (USA)',
+ data: 87,
+ color: '#004E8C',
+ },
+ ];
+
+ const chartPoints2: IChartDataPoint[] = [
+ {
+ legend: 'Debit card numbers (EU and USA)',
+ data: 40,
+ color: '#0099BC',
+ },
+ {
+ legend: 'Passport numbers (USA)',
+ data: 56,
+ color: '#77004D',
+ },
+ {
+ legend: 'Social security numbers',
+ data: 35,
+ color: '#4F68ED',
+ },
+ {
+ legend: 'Credit card numbers',
+ data: 92,
+ color: '#AE8C00',
+ },
+ {
+ legend: 'Tax identification numbers (USA)',
+ data: 87,
+ color: '#004E8C',
+ },
+ ];
+
+ const chartPoints3: IChartDataPoint[] = [
+ {
+ legend: 'Phone Numbers',
+ data: 40,
+ color: '#881798',
+ },
+ {
+ legend: 'Credit card Numbers',
+ data: 23,
+ color: '#AE8C00',
+ },
+ ];
+
+ const data: IChartProps[] = [
+ {
+ chartTitle: 'Monitored First',
+ chartData: chartPoints1,
+ },
+ {
+ chartTitle: 'Monitored Second',
+ chartData: chartPoints2,
+ },
+ {
+ chartTitle: 'Unmonitored',
+ chartData: chartPoints3,
+ },
+ ];
+
+ return (
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ )
+ .addStory(
+ 'With_Placeholders',
+ () => {
+ const firstChartPoints: IChartDataPoint[] = [
+ { legend: 'Malware', data: 40, color: '#0099BC' },
+ { legend: 'Phishing', data: 23, color: '#77004D' },
+ { legend: 'Spam and bulk', data: 35, color: '#4F68ED' },
+ { data: 87, placeHolder: true },
+ ];
+
+ const secondChartPoints: IChartDataPoint[] = [
+ { legend: 'Malicious links', data: 40, color: '#AE8C00' },
+ {
+ legend: 'Malicious attachments',
+ data: 23,
+ color: '#004E8C',
+ },
+ { data: 106, placeHolder: true },
+ ];
+
+ const hideRatio: boolean[] = [true, true];
+
+ const data: IChartProps[] = [
+ {
+ chartTitle: 'Currently blocked',
+ chartData: firstChartPoints,
+ },
+ {
+ chartTitle: 'Increased protection needed against detected threats',
+ chartData: secondChartPoints,
+ },
+ ];
+
+ return (
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ );
diff --git a/apps/vr-tests/src/stories/react-charting/Piechart.stories.tsx b/apps/vr-tests/src/stories/react-charting/Piechart.stories.tsx
new file mode 100644
index 0000000000000..99f0e627f3909
--- /dev/null
+++ b/apps/vr-tests/src/stories/react-charting/Piechart.stories.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TestWrapperDecorator } from '../../utilities/TestWrapperDecorator';
+import { Steps, StoryWright } from 'storywright';
+import { PieChart } from '@fluentui/react-charting';
+
+storiesOf('react-charting/PieChart', module)
+ .addDecorator((story, context) => TestWrapperDecorator(story, context))
+ .addDecorator((story, context) => {
+ const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+ return {story(context)};
+ })
+ .addStory(
+ 'Basic',
+ (context: any) => {
+ const points = [
+ { y: 50, x: 'A' },
+ { y: 25, x: 'B' },
+ { y: 25, x: 'C' },
+ ];
+ const colors = ['#e81123', '#0078d4', '#107c10'];
+ return (
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ );
diff --git a/apps/vr-tests/src/stories/react-charting/SankeyChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/SankeyChart.stories.tsx
new file mode 100644
index 0000000000000..9350188d0fb83
--- /dev/null
+++ b/apps/vr-tests/src/stories/react-charting/SankeyChart.stories.tsx
@@ -0,0 +1,272 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TestWrapperDecorator } from '../../utilities/TestWrapperDecorator';
+import { Steps, StoryWright } from 'storywright';
+import { IChartProps, SankeyChart } from '@fluentui/react-charting';
+
+storiesOf('react-charting/SankeyChart', module)
+ .addDecorator((story, context) => TestWrapperDecorator(story, context))
+ .addDecorator((story, context) => {
+ const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+ return {story()};
+ })
+ .addStory(
+ 'Basic',
+ () => {
+ const data: IChartProps = {
+ chartTitle: 'Sankey Chart',
+ SankeyChartData: {
+ nodes: [
+ {
+ nodeId: 0,
+ name: 'node0',
+ color: '#00758F',
+ borderColor: '#002E39',
+ },
+ {
+ nodeId: 1,
+ name: 'node1',
+ color: '#77004D',
+ borderColor: '#43002C',
+ },
+ {
+ nodeId: 2,
+ name: 'node2',
+ color: '#4F6BED',
+ borderColor: '#3B52B4',
+ },
+ {
+ nodeId: 3,
+ name: 'node3',
+ color: '#937600',
+ borderColor: '#6D5700',
+ },
+ {
+ nodeId: 4,
+ name: 'node4',
+ color: '#286EA8',
+ borderColor: '#00457E',
+ },
+ {
+ nodeId: 5,
+ name: 'node5',
+ color: '#A43FB1',
+ borderColor: '#7C158A',
+ },
+ ],
+ links: [
+ {
+ source: 0,
+ target: 2,
+ value: 2,
+ },
+ {
+ source: 1,
+ target: 2,
+ value: 2,
+ },
+ {
+ source: 1,
+ target: 3,
+ value: 2,
+ },
+ {
+ source: 0,
+ target: 4,
+ value: 2,
+ },
+ {
+ source: 2,
+ target: 3,
+ value: 2,
+ },
+ {
+ source: 2,
+ target: 4,
+ value: 2,
+ },
+ {
+ source: 3,
+ target: 4,
+ value: 4,
+ },
+ {
+ source: 3,
+ target: 4,
+ value: 4,
+ },
+ {
+ source: 3,
+ target: 5,
+ value: 4,
+ },
+ ],
+ },
+ };
+
+ const rootStyle = { width: `${912}px`, height: `${412}px` };
+
+ return (
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ )
+ .addStory(
+ 'PlaceHolder',
+ () => {
+ const data: IChartProps = {
+ chartTitle: 'Sankey Chart',
+ SankeyChartData: {
+ nodes: [
+ {
+ nodeId: 0,
+ name: '192.168.42.72',
+ color: '#8764B8',
+ borderColor: '#4B3867',
+ },
+ {
+ nodeId: 1,
+ name: '172.152.48.13',
+ color: '#8764B8',
+ borderColor: '#4B3867',
+ },
+ {
+ nodeId: 2,
+ name: '124.360.55.1',
+ color: '#8764B8',
+ borderColor: '#4B3867',
+ },
+ {
+ nodeId: 3,
+ name: '192.564.10.2',
+ color: '#8764B8',
+ borderColor: '#4B3867',
+ },
+ {
+ nodeId: 4,
+ name: '124.124.50.1',
+ color: '#8764B8',
+ borderColor: '#4B3867',
+ },
+ {
+ nodeId: 5,
+ name: '172.630.89.4',
+ color: '#8764B8',
+ borderColor: '#4B3867',
+ },
+ {
+ nodeId: 6,
+ name: 'inbox',
+ color: '#0E7878',
+ borderColor: '#004E4E',
+ },
+ {
+ nodeId: 7,
+ name: 'Junk Folder',
+ color: '#0E7878',
+ borderColor: '#004E4E',
+ },
+ {
+ nodeId: 8,
+ name: 'Deleted Folder',
+ color: '#0E7878',
+ borderColor: '#004E4E',
+ },
+ {
+ nodeId: 9,
+ name: 'Clicked',
+ color: '#4F6BED',
+ borderColor: '#3B52B4',
+ },
+ {
+ nodeId: 10,
+ name: 'Opened',
+ color: '#4F6BED',
+ borderColor: '#3B52B4',
+ },
+ {
+ nodeId: 11,
+ name: ' No further action required',
+ color: '#4F6BED',
+ borderColor: '#3B52B4',
+ },
+ ],
+ links: [
+ {
+ source: 0,
+ target: 6,
+ value: 80,
+ },
+ {
+ source: 1,
+ target: 6,
+ value: 50,
+ },
+ {
+ source: 1,
+ target: 7,
+ value: 28,
+ },
+ {
+ source: 2,
+ target: 7,
+ value: 14,
+ },
+ {
+ source: 3,
+ target: 7,
+ value: 7,
+ },
+ {
+ source: 3,
+ target: 8,
+ value: 20,
+ },
+ {
+ source: 4,
+ target: 7,
+ value: 10,
+ },
+ {
+ source: 5,
+ target: 7,
+ value: 10,
+ },
+
+ {
+ source: 6,
+ target: 9,
+ value: 30,
+ },
+ {
+ source: 6,
+ target: 10,
+ value: 55,
+ },
+ {
+ source: 7,
+ target: 11,
+ value: 60,
+ },
+ {
+ source: 8,
+ target: 11,
+ value: 2,
+ },
+ ],
+ },
+ };
+
+ const rootStyle = { width: `${912}px`, height: `${400}px` };
+
+ return (
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ );
diff --git a/apps/vr-tests/src/stories/react-charting/SparklineChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/SparklineChart.stories.tsx
new file mode 100644
index 0000000000000..7ecea1a6397a8
--- /dev/null
+++ b/apps/vr-tests/src/stories/react-charting/SparklineChart.stories.tsx
@@ -0,0 +1,403 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TestWrapperDecorator } from '../../utilities/TestWrapperDecorator';
+import { Steps, StoryWright } from 'storywright';
+import { IChartProps, Sparkline } from '@fluentui/react-charting';
+
+storiesOf('react-charting/SparkLineChart', module)
+ .addDecorator((story, context) => TestWrapperDecorator(story, context))
+ .addDecorator((story, context) => {
+ const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+ return {story()};
+ })
+ .addStory(
+ 'Basic',
+ () => {
+ const sl1: IChartProps = {
+ chartTitle: '10.21',
+ lineChartData: [
+ {
+ legend: '19.64',
+ color: '#00AA00',
+ data: [
+ {
+ x: 1,
+ y: 58.13,
+ },
+ {
+ x: 2,
+ y: 140.98,
+ },
+ {
+ x: 3,
+ y: 20,
+ },
+ {
+ x: 4,
+ y: 89.7,
+ },
+ {
+ x: 5,
+ y: 99,
+ },
+ {
+ x: 6,
+ y: 13.28,
+ },
+ {
+ x: 7,
+ y: 31.32,
+ },
+ {
+ x: 8,
+ y: 10.21,
+ },
+ ],
+ },
+ ],
+ };
+ const sl2: IChartProps = {
+ chartTitle: '49.44',
+ lineChartData: [
+ {
+ legend: '19.64',
+ color: '#E60000',
+ data: [
+ {
+ x: 1,
+ y: 29.13,
+ },
+ {
+ x: 2,
+ y: 70.98,
+ },
+ {
+ x: 3,
+ y: 60,
+ },
+ {
+ x: 4,
+ y: 89.7,
+ },
+ {
+ x: 5,
+ y: 19,
+ },
+ {
+ x: 6,
+ y: 49.44,
+ },
+ ],
+ },
+ ],
+ };
+ const sl3: IChartProps = {
+ chartTitle: '49.44',
+ lineChartData: [
+ {
+ legend: '19.64',
+ color: '#00AA00',
+ data: [
+ {
+ x: 1,
+ y: 29.13,
+ },
+ {
+ x: 2,
+ y: 70.98,
+ },
+ {
+ x: 3,
+ y: 60,
+ },
+ {
+ x: 4,
+ y: 89.7,
+ },
+ {
+ x: 5,
+ y: 19,
+ },
+ {
+ x: 6,
+ y: 49.44,
+ },
+ ],
+ },
+ ],
+ };
+ const sl4: IChartProps = {
+ chartTitle: '49.44',
+ lineChartData: [
+ {
+ legend: '464.64',
+ color: '#E60000',
+ data: [
+ {
+ x: 1,
+ y: 29.13,
+ },
+ {
+ x: 2,
+ y: 70.98,
+ },
+ {
+ x: 3,
+ y: 60,
+ },
+ {
+ x: 4,
+ y: 89.7,
+ },
+ {
+ x: 5,
+ y: 19,
+ },
+ {
+ x: 6,
+ y: 49.44,
+ },
+ ],
+ },
+ ],
+ };
+ const sl5: IChartProps = {
+ chartTitle: '49.44',
+ lineChartData: [
+ {
+ legend: '46.49',
+ color: '#E3008C',
+ data: [
+ {
+ x: 1,
+ y: 29.13,
+ },
+ {
+ x: 2,
+ y: 70.98,
+ },
+ {
+ x: 3,
+ y: 60,
+ },
+ {
+ x: 4,
+ y: 89.7,
+ },
+ {
+ x: 5,
+ y: 19,
+ },
+ {
+ x: 6,
+ y: 49.44,
+ },
+ ],
+ },
+ ],
+ };
+ const sl6: IChartProps = {
+ chartTitle: '49.44',
+ lineChartData: [
+ {
+ legend: '49.44',
+ color: '#627CEF',
+ data: [
+ {
+ x: new Date('2020-03-03T00:00:00.000Z'),
+ y: 29.13,
+ },
+ {
+ x: new Date('2020-03-04T00:00:00.000Z'),
+ y: 70.98,
+ },
+ {
+ x: new Date('2020-03-05T00:00:00.000Z'),
+ y: 60,
+ },
+ {
+ x: new Date('2020-03-07T00:00:00.000Z'),
+ y: 89.7,
+ },
+ {
+ x: new Date('2020-03-12T00:00:00.000Z'),
+ y: 19,
+ },
+ {
+ x: new Date('2020-03-15T00:00:00.000Z'),
+ y: 49.44,
+ },
+ ],
+ },
+ ],
+ };
+ const sl7: IChartProps = {
+ chartTitle: '49.44',
+ lineChartData: [
+ {
+ legend: '49.44',
+ color: '#0078D4',
+ data: [
+ {
+ x: 1,
+ y: 29.13,
+ },
+ {
+ x: 2,
+ y: 70.98,
+ },
+ {
+ x: 3,
+ y: 60,
+ },
+ {
+ x: 4,
+ y: 89.7,
+ },
+ {
+ x: 5,
+ y: 19,
+ },
+ {
+ x: 6,
+ y: 49.44,
+ },
+ ],
+ },
+ ],
+ };
+ const sl8: IChartProps = {
+ chartTitle: '541.44',
+ lineChartData: [
+ {
+ legend: '541.44',
+ color: '#0078D4',
+ data: [
+ {
+ x: 1,
+ y: 291.13,
+ },
+ {
+ x: 2,
+ y: 170.98,
+ },
+ {
+ x: 3,
+ y: 260,
+ },
+ {
+ x: 4,
+ y: 89.7,
+ },
+ {
+ x: 5,
+ y: 664,
+ },
+ {
+ x: 6,
+ y: 66.44,
+ },
+ {
+ x: 7,
+ y: 541.44,
+ },
+ {
+ x: 8,
+ y: 32.44,
+ },
+ {
+ x: 9,
+ y: 499.14,
+ },
+ {
+ x: 10,
+ y: 350.48,
+ },
+ {
+ x: 11,
+ y: 32.44,
+ },
+ {
+ x: 12,
+ y: 400.44,
+ },
+ ],
+ },
+ ],
+ };
+
+ return (
+
+
+
+
+ |
+ Row 1
+ |
+
+
+ |
+
+
+ |
+ Row 2
+ |
+
+
+ |
+
+
+ |
+ Row 3
+ |
+
+
+ |
+
+
+ |
+ Row 4
+ |
+
+
+ |
+
+
+ |
+ Row 5
+ |
+
+
+ |
+
+
+ |
+ Row 6
+ |
+
+
+ |
+
+
+ |
+ Row 7
+ |
+
+
+ |
+
+
+ |
+ Row 8
+ |
+
+
+ |
+
+
+
+
+
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ )
+ .addStory(
+ 'Multiple',
+ () => {
+ const points: IChartDataPoint[] = [
+ {
+ legend: 'This is the first legend of the chart',
+ data: 40,
+ color: '#5c005c',
+ },
+ {
+ legend: 'This is the second legend of the chart',
+ data: 23,
+ color: '#e81123',
+ },
+ {
+ legend: 'This is the third legend of the chart',
+ data: 35,
+ color: '#00bcf2',
+ },
+ {
+ legend: 'This is the fourth legend of the chart',
+ data: 87,
+ color: '#bad80a',
+ },
+ ];
+ const chartTitle = 'Stacked bar chart 2nd example';
+
+ const data: IChartProps = {
+ chartTitle: chartTitle,
+ chartData: points,
+ };
+
+ return (
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ )
+ .addStory(
+ 'Benchmark',
+ () => {
+ const points: IChartDataPoint[] = [
+ { legend: 'first', data: 10, color: '#a4262c' },
+ {
+ legend: 'second',
+ data: 90,
+ color: '#c8c6c4',
+ placeHolder: true,
+ },
+ ];
+
+ const data: IChartProps = {
+ chartData: points,
+ };
+
+ return (
+
+
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ );
diff --git a/apps/vr-tests/src/stories/react-charting/TreeChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/TreeChart.stories.tsx
new file mode 100644
index 0000000000000..9a15f87609269
--- /dev/null
+++ b/apps/vr-tests/src/stories/react-charting/TreeChart.stories.tsx
@@ -0,0 +1,211 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TestWrapperDecorator } from '../../utilities/TestWrapperDecorator';
+import { Steps, StoryWright } from 'storywright';
+import { NodesComposition, TreeChart, TreeTraverse } from '@fluentui/react-charting';
+
+storiesOf('react-charting/TreeChart', module)
+ .addDecorator((story, context) => TestWrapperDecorator(story, context))
+ .addDecorator((story, context) => {
+ const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+ return {story()};
+ })
+ .addStory(
+ 'Basic',
+ () => {
+ const threeLayerChart = {
+ name: 'Root Node',
+ subname: 'subtext',
+ bodytext: 'bodytext',
+ fill: '#0099BC',
+ children: [
+ {
+ name: 'Child 1',
+ subname: 'subtext',
+ metric: '100%',
+ fill: '#4F6BED',
+ children: [
+ {
+ name: 'leaf1',
+ subname: 'sub',
+ fill: '#4F6BED',
+ },
+ {
+ name: 'leaf2',
+ fill: '#4F6BED',
+ },
+ {
+ name: 'leaf3',
+ subname: 'The subtext is as follows: sub',
+ fill: '#4F6BED',
+ },
+ {
+ name: 'leaf4',
+ subname: 'sub',
+ fill: '#4F6BED',
+ },
+ ],
+ },
+ {
+ name: 'Child 2 is the child name',
+ fill: '#881798',
+ children: [
+ {
+ name: 'leaf5',
+ subname: 'sub',
+ fill: '#881798',
+ },
+ {
+ name: 'leaf6',
+ subname: 'sub',
+ fill: '#881798',
+ },
+ ],
+ },
+ {
+ name: 'Child 3',
+ subname: 'The subtext is as follows: subtext',
+ fill: '#AE8C00',
+ children: [
+ {
+ name: 'leaf7',
+ subname: 'sub',
+ fill: '#AE8C00',
+ },
+ {
+ name: 'leaf8',
+ subname: 'sub',
+ fill: '#AE8C00',
+ },
+ {
+ name: 'leaf9',
+ subname: 'sub',
+ fill: '#AE8C00',
+ },
+ ],
+ },
+ {
+ name: 'Child 4',
+ subname: 'subtext',
+ metric: '90%',
+ fill: '#FF00FF',
+ children: [
+ {
+ name: 'leaf10',
+ subname: 'sub',
+ fill: '#FF00FF',
+ },
+ ],
+ },
+ ],
+ };
+
+ return (
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ )
+ .addStory(
+ 'Compact',
+ () => {
+ const threeLayerChart = {
+ name: 'Root Node',
+ subname: 'subtext',
+ fill: '#0099BC',
+ children: [
+ {
+ name: 'Child 1',
+ subname: 'subtext',
+ metric: '100%',
+ fill: '#4F6BED',
+ children: [
+ {
+ name: 'leaf1',
+ subname: 'sub',
+ fill: '#4F6BED',
+ },
+ {
+ name: 'leaf2',
+ fill: '#4F6BED',
+ },
+ {
+ name: 'leaf3',
+ subname: 'The subtext is as follows: sub',
+ fill: '#4F6BED',
+ },
+ {
+ name: 'leaf4',
+ subname: 'sub',
+ fill: '#4F6BED',
+ },
+ ],
+ },
+ {
+ name: 'Child 2 is the child name',
+ fill: '#881798',
+ children: [
+ {
+ name: 'leaf5',
+ subname: 'sub',
+ fill: '#881798',
+ },
+ {
+ name: 'leaf6',
+ subname: 'sub',
+ fill: '#881798',
+ },
+ ],
+ },
+ {
+ name: 'Child 3',
+ subname: 'The subtext is as follows: subtext',
+ fill: '#AE8C00',
+ children: [
+ {
+ name: 'leaf7',
+ subname: 'sub',
+ fill: '#AE8C00',
+ },
+ {
+ name: 'leaf8',
+ subname: 'sub',
+ fill: '#AE8C00',
+ },
+ {
+ name: 'leaf9',
+ subname: 'sub',
+ fill: '#AE8C00',
+ },
+ ],
+ },
+ {
+ name: 'Child 4',
+ subname: 'subtext',
+ metric: '90%',
+ fill: '#FF00FF',
+ children: [
+ {
+ name: 'leaf10',
+ subname: 'sub',
+ fill: '#FF00FF',
+ },
+ ],
+ },
+ ],
+ };
+ return (
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ );
diff --git a/apps/vr-tests/src/stories/react-charting/VerticalBarChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/VerticalBarChart.stories.tsx
new file mode 100644
index 0000000000000..6b8ef559da224
--- /dev/null
+++ b/apps/vr-tests/src/stories/react-charting/VerticalBarChart.stories.tsx
@@ -0,0 +1,514 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TestWrapperDecorator } from '../../utilities/TestWrapperDecorator';
+import { Steps, StoryWright } from 'storywright';
+import {
+ GroupedVerticalBarChart,
+ ILineChartLineOptions,
+ IVSChartDataPoint,
+ IVerticalBarChartDataPoint,
+ IVerticalStackedChartProps,
+ VerticalBarChart,
+ VerticalStackedBarChart,
+} from '@fluentui/react-charting';
+
+storiesOf('react-charting/VerticalBarChart', module)
+ .addDecorator((story, context) => TestWrapperDecorator(story, context))
+ .addDecorator((story, context) => {
+ const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+ return {story()};
+ })
+ .addStory(
+ 'Basic - Secondary Y Axis',
+ () => {
+ const points: IVerticalBarChartDataPoint[] = [
+ {
+ x: 0,
+ y: 10000,
+ legend: 'Oranges',
+ color: '#0078d4',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '10%',
+ lineData: {
+ y: 7000,
+ yAxisCalloutData: '34%',
+ },
+ },
+ {
+ x: 10000,
+ y: 50000,
+ legend: 'Dogs',
+ color: '#005a9e',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '20%',
+ lineData: {
+ y: 30000,
+ },
+ },
+ {
+ x: 25000,
+ y: 30000,
+ legend: 'Apples',
+ color: '#00188f',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '37%',
+ lineData: {
+ y: 3000,
+ yAxisCalloutData: '43%',
+ },
+ },
+ {
+ x: 40000,
+ y: 13000,
+ legend: 'Bananas',
+ color: '#00bcf2',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '88%',
+ },
+ {
+ x: 52000,
+ y: 43000,
+ legend: 'Giraffes',
+ color: '#0078d4',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '71%',
+ lineData: {
+ y: 30000,
+ },
+ },
+ {
+ x: 68000,
+ y: 30000,
+ legend: 'Cats',
+ color: '#005a9e',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '40%',
+ lineData: {
+ y: 5000,
+ },
+ },
+ {
+ x: 80000,
+ y: 20000,
+ legend: 'Elephants',
+ color: '#0078d4',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '87%',
+ lineData: {
+ y: 16000,
+ },
+ },
+ {
+ x: 92000,
+ y: 45000,
+ legend: 'Monkeys',
+ color: '#00bcf2',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '33%',
+ lineData: {
+ y: 40000,
+ yAxisCalloutData: '45%',
+ },
+ },
+ ];
+
+ const lineOptions: ILineChartLineOptions = { lineBorderWidth: '2' };
+
+ const rootStyle = { width: `${650}px`, height: `${350}px` };
+
+ return (
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ )
+ .addStory(
+ 'Dynamic - Wrap Labels',
+ () => {
+ const points: IVerticalBarChartDataPoint[] = [
+ {
+ x: 'Simple Text',
+ y: 1000,
+ color: '#0078d4',
+ },
+ {
+ x: 'Showing all text here',
+ y: 5000,
+ color: '#005a9e',
+ },
+ {
+ x: 'Large data, showing all text',
+ y: 3000,
+ color: '#00188f',
+ },
+ {
+ x: 'Data',
+ y: 2000,
+ color: '#0078d4',
+ },
+ ];
+
+ const rootStyle = { width: '650px', height: '350px' };
+ return (
+
+
+
+ );
+ },
+ { includeRtl: true, includeDarkMode: true },
+ )
+ .addStory(
+ 'Rotated Label- Hide Legends',
+ () => {
+ const points: IVerticalBarChartDataPoint[] = [
+ {
+ x: 'This is a medium long label. ',
+ y: 3500,
+ color: '#627CEF',
+ },
+ {
+ x: 'This is a long label This is a long label',
+ y: 2500,
+ color: '#C19C00',
+ },
+ {
+ x: 'This label is as long as the previous one',
+ y: 1900,
+ color: '#E650AF',
+ },
+ {
+ x: 'A short label',
+ y: 2800,
+ color: '#0E7878',
+ },
+ ];
+
+ const rootStyle = { width: '650px', height: '500px' };
+ return (
+ <>
+
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ )
+ .addStory(
+ 'Stacked',
+ () => {
+ const showLine = true;
+
+ const firstChartPoints: IVSChartDataPoint[] = [
+ {
+ legend: 'Metadata1',
+ data: 40,
+ color: '#0078d4',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '40%',
+ },
+ {
+ legend: 'Metadata2',
+ data: 5,
+ color: '#00188f',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '5%',
+ },
+ {
+ legend: 'Metadata3',
+ data: 20,
+ color: '#00bcf2',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '20%',
+ },
+ ];
+
+ const secondChartPoints: IVSChartDataPoint[] = [
+ {
+ legend: 'Metadata1',
+ data: 30,
+ color: '#0078d4',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '30%',
+ },
+ {
+ legend: 'Metadata2',
+ data: 20,
+ color: '#00188f',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '20%',
+ },
+ {
+ legend: 'Metadata3',
+ data: 40,
+ color: '#00bcf2',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '40%',
+ },
+ ];
+
+ const thirdChartPoints: IVSChartDataPoint[] = [
+ {
+ legend: 'Metadata1',
+ data: 44,
+ color: '#0078d4',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '44%',
+ },
+ {
+ legend: 'Metadata2',
+ data: 28,
+ color: '#00188f',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '28%',
+ },
+ {
+ legend: 'Metadata3',
+ data: 30,
+ color: '#00bcf2',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '30%',
+ },
+ ];
+
+ const fourthChartPoints: IVSChartDataPoint[] = [
+ {
+ legend: 'Metadata1',
+ data: 88,
+ color: '#0078d4',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '88%',
+ },
+ {
+ legend: 'Metadata2',
+ data: 22,
+ color: '#00188f',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '22%',
+ },
+ {
+ legend: 'Metadata3',
+ data: 30,
+ color: '#00bcf2',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '30%',
+ },
+ ];
+
+ const data: IVerticalStackedChartProps[] = [
+ {
+ chartData: firstChartPoints,
+ xAxisPoint: 0,
+
+ ...(showLine && {
+ lineData: [
+ { y: 42, legend: 'Supported Builds', color: '#e3008c' },
+ { y: 10, legend: 'Recommended Builds', color: '#a4262c' },
+ ],
+ }),
+ },
+ {
+ chartData: secondChartPoints,
+ xAxisPoint: 20,
+ ...(showLine && {
+ lineData: [{ y: 33, legend: 'Supported Builds', color: '#e3008c' }],
+ }),
+ },
+ {
+ chartData: thirdChartPoints,
+ xAxisPoint: 40,
+ ...(showLine && {
+ lineData: [
+ { y: 60, legend: 'Supported Builds', color: '#e3008c' },
+ { y: 20, legend: 'Recommended Builds', color: '#a4262c' },
+ ],
+ }),
+ },
+ {
+ chartData: firstChartPoints,
+ xAxisPoint: 60,
+ ...(showLine && {
+ lineData: [
+ { y: 41, legend: 'Supported Builds', color: '#e3008c' },
+ { y: 10, legend: 'Recommended Builds', color: '#a4262c' },
+ ],
+ }),
+ },
+ {
+ chartData: fourthChartPoints,
+ xAxisPoint: 80,
+ ...(showLine && {
+ lineData: [
+ { y: 100, legend: 'Supported Builds', color: '#e3008c' },
+ { y: 70, legend: 'Recommended Builds', color: '#a4262c' },
+ ],
+ }),
+ },
+ {
+ chartData: firstChartPoints,
+ xAxisPoint: 100,
+ },
+ ];
+
+ const lineOptions: ILineChartLineOptions = { lineBorderWidth: '2' };
+
+ const rootStyle = { width: `${650}px`, height: `${350}px` };
+
+ return (
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ )
+ .addStory(
+ 'Grouped - Wrap Labels',
+ () => {
+ const data = [
+ {
+ name: 'Metadata info multi lines text Completed',
+ series: [
+ {
+ key: 'series1',
+ data: 33000,
+ color: '#00bcf2',
+ legend: 'MetaData1',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '33%',
+ },
+ {
+ key: 'series2',
+ data: 44000,
+ color: '#0078d4',
+ legend: 'MetaData4',
+ xAxisCalloutData: '2020/04/30',
+ yAxisCalloutData: '44%',
+ },
+ ],
+ },
+ {
+ name: 'Meta Data2',
+ series: [
+ {
+ key: 'series1',
+ data: 33000,
+ color: '#00bcf2',
+ legend: 'MetaData1',
+ xAxisCalloutData: '2020/05/30',
+ yAxisCalloutData: '33%',
+ },
+ {
+ key: 'series2',
+ data: 3000,
+ color: '#0078d4',
+ legend: 'MetaData4',
+ xAxisCalloutData: '2020/05/30',
+ yAxisCalloutData: '3%',
+ },
+ ],
+ },
+ {
+ name: 'Single line text ',
+ series: [
+ {
+ key: 'series1',
+ data: 14000,
+ color: '#00bcf2',
+ legend: 'MetaData1',
+ xAxisCalloutData: '2020/06/30',
+ yAxisCalloutData: '14%',
+ },
+ {
+ key: 'series2',
+ data: 50000,
+ color: '#0078d4',
+ legend: 'MetaData4',
+ xAxisCalloutData: '2020/06/30',
+ yAxisCalloutData: '50%',
+ },
+ ],
+ },
+ {
+ name: 'Hello World!!!',
+ series: [
+ {
+ key: 'series1',
+ data: 33000,
+ color: '#00bcf2',
+ legend: 'MetaData1',
+ xAxisCalloutData: '2020/07/30',
+ yAxisCalloutData: '33%',
+ },
+ {
+ key: 'series2',
+ data: 3000,
+ color: '#0078d4',
+ legend: 'MetaData4',
+ xAxisCalloutData: '2020/07/30',
+ yAxisCalloutData: '3%',
+ },
+ ],
+ },
+ ];
+
+ const rootStyle = { width: `${700}px`, height: `${400}px` };
+ return (
+ <>
+
+
+
+
+ );
+ },
+ { includeDarkMode: true, includeRtl: true },
+ );
diff --git a/change/@fluentui-react-charting-db3502d6-ad5b-4426-bcf7-9644b4a9db7b.json b/change/@fluentui-react-charting-db3502d6-ad5b-4426-bcf7-9644b4a9db7b.json
new file mode 100644
index 0000000000000..baabb11e06ff4
--- /dev/null
+++ b/change/@fluentui-react-charting-db3502d6-ad5b-4426-bcf7-9644b4a9db7b.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "multistack bar chart bug fix and vr-test integration",
+ "packageName": "@fluentui/react-charting",
+ "email": "yuhshsingla@microsoft.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
index 551bdfa41da64..7064560bed3d6 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
@@ -177,7 +177,7 @@ export class MultiStackedBarChartBase extends React.Component {
const pointData = point.data ? point.data : 0;
- value = (pointData / total) * 100 ? (pointData / total) * 100 : 0;
+ let value = (pointData / total) * 100 ? (pointData / total) * 100 : 0;
if (value < 1 && value !== 0) {
value = 1;
} else if (value > 99 && value !== 100) {