From 8de0c124c5affa4ab8b7a0cb2037c4b6c4dbb9cd Mon Sep 17 00:00:00 2001 From: Yush Singla Date: Tue, 25 Jul 2023 16:50:21 +0530 Subject: [PATCH 01/24] testing with adding the component to the application --- apps/vr-tests/package.json | 1 + .../vr-tests/src/stories/PieChart.stories.tsx | 35 +++++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 apps/vr-tests/src/stories/PieChart.stories.tsx diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index cc8c03918903b..f4d70dcecba7b 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -27,6 +27,7 @@ "@fluentui/react-hooks": "*", "@fluentui/react-icons-mdl2": "*", "@fluentui/storybook": "*", + "@fluentui/react-charting": "*", "react": "17.0.2", "react-dom": "17.0.2", "tslib": "^2.1.0" diff --git a/apps/vr-tests/src/stories/PieChart.stories.tsx b/apps/vr-tests/src/stories/PieChart.stories.tsx new file mode 100644 index 0000000000000..683fc01fd581f --- /dev/null +++ b/apps/vr-tests/src/stories/PieChart.stories.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { Steps, StoryWright } from 'storywright'; +import { storiesOf } from '@storybook/react'; +import { TestWrapperDecorator } from '../utilities/index'; +import { PieChart } from '@fluentui/react-charting'; +import { DefaultPalette } from '@fluentui/react/lib/Styling'; + +storiesOf('PieChart', module) + .addDecorator(TestWrapperDecorator) + .addDecorator(story => + // prettier-ignore + + {story()} + , + ) + .addStory('Root', () => { + const points = [ + { y: 50, x: 'A' }, + { y: 25, x: 'B' }, + { y: 25, x: 'C' }, + ]; + const colors = [DefaultPalette.red, DefaultPalette.blue, DefaultPalette.green]; + return ( + + ); + }); From 2f5a77db15de52ca80907fc6bc5a56601ec234bf Mon Sep 17 00:00:00 2001 From: Yush Singla Date: Wed, 26 Jul 2023 13:23:53 +0530 Subject: [PATCH 02/24] line chart vr test --- apps/vr-tests/package.json | 1 + .../src/stories/LineChart.stories.tsx | 21 +++++++++++ .../vr-tests/src/stories/PieChart.stories.tsx | 35 ------------------- 3 files changed, 22 insertions(+), 35 deletions(-) create mode 100644 apps/vr-tests/src/stories/LineChart.stories.tsx delete mode 100644 apps/vr-tests/src/stories/PieChart.stories.tsx diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index f4d70dcecba7b..65834ab11e128 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -28,6 +28,7 @@ "@fluentui/react-icons-mdl2": "*", "@fluentui/storybook": "*", "@fluentui/react-charting": "*", + "@fluentui/react-examples": "*", "react": "17.0.2", "react-dom": "17.0.2", "tslib": "^2.1.0" diff --git a/apps/vr-tests/src/stories/LineChart.stories.tsx b/apps/vr-tests/src/stories/LineChart.stories.tsx new file mode 100644 index 0000000000000..a5435de0e1517 --- /dev/null +++ b/apps/vr-tests/src/stories/LineChart.stories.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { Steps, StoryWright } from 'storywright'; +import { storiesOf } from '@storybook/react'; +import { TestWrapperDecorator } from '../utilities/index'; +import { LineChartBasicExample } from '@fluentui/react-examples/lib/react-charting/LineChart/LineChart.Basic.Example'; + +storiesOf('LineChart', module) + .addDecorator(TestWrapperDecorator) + .addDecorator(story => + // prettier-ignore + + {story()} + , + ) + .addStory('Root', () => { + return ; + }); diff --git a/apps/vr-tests/src/stories/PieChart.stories.tsx b/apps/vr-tests/src/stories/PieChart.stories.tsx deleted file mode 100644 index 683fc01fd581f..0000000000000 --- a/apps/vr-tests/src/stories/PieChart.stories.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; -import { Steps, StoryWright } from 'storywright'; -import { storiesOf } from '@storybook/react'; -import { TestWrapperDecorator } from '../utilities/index'; -import { PieChart } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; - -storiesOf('PieChart', module) - .addDecorator(TestWrapperDecorator) - .addDecorator(story => - // prettier-ignore - - {story()} - , - ) - .addStory('Root', () => { - const points = [ - { y: 50, x: 'A' }, - { y: 25, x: 'B' }, - { y: 25, x: 'C' }, - ]; - const colors = [DefaultPalette.red, DefaultPalette.blue, DefaultPalette.green]; - return ( - - ); - }); From 00fa353ae9f7c588d82a48985b42a1e46601c075 Mon Sep 17 00:00:00 2001 From: Yush Singla Date: Wed, 26 Jul 2023 14:24:15 +0530 Subject: [PATCH 03/24] testing for change of vr snapshot --- apps/vr-tests/src/stories/ActivityItem.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/vr-tests/src/stories/ActivityItem.stories.tsx b/apps/vr-tests/src/stories/ActivityItem.stories.tsx index 18b3d0214ad1e..041d43784ec0a 100644 --- a/apps/vr-tests/src/stories/ActivityItem.stories.tsx +++ b/apps/vr-tests/src/stories/ActivityItem.stories.tsx @@ -21,7 +21,7 @@ storiesOf('ActivityItem', module) () => ( } - activityDescription={description text} + activityDescription={description text (Something has been changed)} comments={comment text} timeStamp="timeStamp text" /> From 53594633ed73bbc100c0bba43f4f301df9d67f47 Mon Sep 17 00:00:00 2001 From: Yush Singla Date: Thu, 27 Jul 2023 14:55:14 +0530 Subject: [PATCH 04/24] testing vr-test for nested folder --- .../src/stories/{ => react-charting}/LineChart.stories.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) rename apps/vr-tests/src/stories/{ => react-charting}/LineChart.stories.tsx (69%) diff --git a/apps/vr-tests/src/stories/LineChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx similarity index 69% rename from apps/vr-tests/src/stories/LineChart.stories.tsx rename to apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx index a5435de0e1517..11dd29e65294a 100644 --- a/apps/vr-tests/src/stories/LineChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; -import { TestWrapperDecorator } from '../utilities/index'; +import { TestWrapperDecorator } from '../../utilities/index'; import { LineChartBasicExample } from '@fluentui/react-examples/lib/react-charting/LineChart/LineChart.Basic.Example'; +import { LineChartEventsExample } from '@fluentui/react-examples/src/react-charting/LineChart/LineChart.Events.Example'; storiesOf('LineChart', module) .addDecorator(TestWrapperDecorator) @@ -18,4 +19,7 @@ storiesOf('LineChart', module) ) .addStory('Root', () => { return ; + }) + .addStory('Events', () => { + return ; }); From b809e24440bc3da3f8c92970fe32545029e7ef04 Mon Sep 17 00:00:00 2001 From: Yush Singla Date: Thu, 27 Jul 2023 14:59:25 +0530 Subject: [PATCH 05/24] testing change in vr --- apps/vr-tests/src/stories/ActivityItem.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/vr-tests/src/stories/ActivityItem.stories.tsx b/apps/vr-tests/src/stories/ActivityItem.stories.tsx index 041d43784ec0a..ce95f0b1daf1d 100644 --- a/apps/vr-tests/src/stories/ActivityItem.stories.tsx +++ b/apps/vr-tests/src/stories/ActivityItem.stories.tsx @@ -21,7 +21,7 @@ storiesOf('ActivityItem', module) () => ( } - activityDescription={description text (Something has been changed)} + activityDescription={description. text} comments={comment text} timeStamp="timeStamp text" /> From 19c6f1d4e66c27eb24ed19e6cb8c46d02fb0e90b Mon Sep 17 00:00:00 2001 From: Yush Singla Date: Thu, 27 Jul 2023 15:48:39 +0530 Subject: [PATCH 06/24] modified the folder structure to support react-charting in the vr-tests application --- .../react-charting/AreaChart.stories.tsx | 0 .../react-charting/LineChart.stories.tsx | 281 +++++++++++++++++- 2 files changed, 276 insertions(+), 5 deletions(-) create mode 100644 apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx diff --git a/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx new file mode 100644 index 0000000000000..e69de29bb2d1d 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 11dd29e65294a..a3b4e10736ac0 100644 --- a/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx @@ -2,10 +2,12 @@ import * as React from 'react'; import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { TestWrapperDecorator } from '../../utilities/index'; -import { LineChartBasicExample } from '@fluentui/react-examples/lib/react-charting/LineChart/LineChart.Basic.Example'; -import { LineChartEventsExample } from '@fluentui/react-examples/src/react-charting/LineChart/LineChart.Events.Example'; +import { IChartProps } from '../../../../../packages/react-charting/src/HorizontalBarChart'; +import { LineChart } from '../../../../../packages/react-charting/src/LineChart'; +import { DefaultPalette } from '../../../../../packages/theme/src/index'; +import { mergeStyles } from '../../../../../packages/merge-styles/src/mergeStyles'; -storiesOf('LineChart', module) +storiesOf('react-charting/LineChart', module) .addDecorator(TestWrapperDecorator) .addDecorator(story => // prettier-ignore @@ -18,8 +20,277 @@ storiesOf('LineChart', module) , ) .addStory('Root', () => { - return ; + const margins = { left: 35, top: 20, bottom: 35, right: 20 }; + const data: IChartProps = { + chartTitle: 'Line Chart', + lineChartData: [ + { + legend: 'From_Legacy_to_O365', + data: [ + { + x: new Date('2020-03-03T00:00:00.000Z'), + y: 216000, + onDataPointClick: () => alert('click on 217000'), + }, + { + x: new Date('2020-03-03T10:00:00.000Z'), + y: 218123, + onDataPointClick: () => alert('click on 217123'), + }, + { + x: new Date('2020-03-03T11:00:00.000Z'), + y: 217124, + onDataPointClick: () => alert('click on 217124'), + }, + { + x: new Date('2020-03-04T00:00:00.000Z'), + y: 248000, + onDataPointClick: () => alert('click on 248000'), + }, + { + x: new Date('2020-03-05T00:00:00.000Z'), + y: 252000, + onDataPointClick: () => alert('click on 252000'), + }, + { + x: new Date('2020-03-06T00:00:00.000Z'), + y: 274000, + onDataPointClick: () => alert('click on 274000'), + }, + { + x: new Date('2020-03-07T00:00:00.000Z'), + y: 260000, + onDataPointClick: () => alert('click on 260000'), + }, + { + x: new Date('2020-03-08T00:00:00.000Z'), + y: 304000, + onDataPointClick: () => alert('click on 300000'), + }, + { + x: new Date('2020-03-09T00:00:00.000Z'), + y: 218000, + onDataPointClick: () => alert('click on 218000'), + }, + ], + color: DefaultPalette.blue, + lineOptions: { + lineBorderWidth: '4', + }, + onLineClick: () => console.log('From_Legacy_to_O365'), + }, + { + legend: 'All', + data: [ + { + x: new Date('2020-03-03T00:00:00.000Z'), + y: 297000, + }, + { + x: new Date('2020-03-04T00:00:00.000Z'), + y: 284000, + }, + { + x: new Date('2020-03-05T00:00:00.000Z'), + y: 282000, + }, + { + x: new Date('2020-03-06T00:00:00.000Z'), + y: 294000, + }, + { + x: new Date('2020-03-07T00:00:00.000Z'), + y: 224000, + }, + { + x: new Date('2020-03-08T00:00:00.000Z'), + y: 300000, + }, + { + x: new Date('2020-03-09T00:00:00.000Z'), + y: 298000, + }, + ], + color: DefaultPalette.green, + lineOptions: { + lineBorderWidth: '4', + }, + }, + { + legend: 'single point', + data: [ + { + x: new Date('2020-03-05T00:00:00.000Z'), + y: 282000, + }, + ], + color: DefaultPalette.yellow, + }, + ], + }; + + const rootStyle = { width: `700px`, height: `300px` }; + + return ( +
+ +
+ ); }) .addStory('Events', () => { - return ; + const data: IChartProps = { + chartTitle: 'Line Chart', + lineChartData: [ + { + legend: 'From_Legacy_to_O365', + data: [ + { + x: new Date('2020-03-03T00:00:00.000Z'), + y: 297, + }, + { + x: new Date('2020-03-04T00:00:00.000Z'), + y: 284, + }, + { + x: new Date('2020-03-05T00:00:00.000Z'), + y: 282, + }, + { + x: new Date('2020-03-06T00:00:00.000Z'), + y: 294, + }, + { + x: new Date('2020-03-07T00:00:00.000Z'), + y: 294, + }, + { + x: new Date('2020-03-08T00:00:00.000Z'), + y: 300, + }, + { + x: new Date('2020-03-09T00:00:00.000Z'), + y: 298, + }, + ], + color: DefaultPalette.blue, + lineOptions: { + lineBorderWidth: '4', + }, + }, + { + legend: 'All', + data: [ + { + x: new Date('2020-03-03T00:00:00.000Z'), + y: 292, + }, + { + x: new Date('2020-03-04T00:00:00.000Z'), + y: 287, + }, + { + x: new Date('2020-03-05T00:00:00.000Z'), + y: 287, + }, + { + x: new Date('2020-03-06T00:00:00.000Z'), + y: 292, + }, + { + x: new Date('2020-03-07T00:00:00.000Z'), + y: 287, + }, + { + x: new Date('2020-03-08T00:00:00.000Z'), + y: 297, + }, + { + x: new Date('2020-03-09T00:00:00.000Z'), + y: 292, + }, + ], + color: DefaultPalette.green, + lineOptions: { + lineBorderWidth: '4', + }, + }, + ], + }; + + const calloutItemStyle = mergeStyles({ + borderBottom: '1px solid #D9D9D9', + padding: '3px', + }); + + const rootStyle = { width: `700px`, height: `300px` }; + + return ( +
+
event 1 message
, + }, + { + event: 'event 2', + date: new Date('2020-03-04T00:00:00.000Z'), + onRenderCard: () =>
event 2 message
, + }, + { + event: 'event 3', + date: new Date('2020-03-04T00:00:00.000Z'), + onRenderCard: () =>
event 3 message
, + }, + { + event: 'event 4', + date: new Date('2020-03-06T00:00:00.000Z'), + onRenderCard: () =>
event 4 message
, + }, + { + event: 'event 5', + date: new Date('2020-03-08T00:00:00.000Z'), + onRenderCard: () =>
event 5 message
, + }, + ], + labelHeight: 18, + labelWidth: 50, + mergedLabel: (count: number) => `${count} events`, + }} + height={300} + width={700} + enablePerfOptimization={true} + /> +
+ ); }); From 0db39b8624f167cf25a99c5f0575ebf1f40019e8 Mon Sep 17 00:00:00 2001 From: Yush Singla Date: Thu, 27 Jul 2023 16:24:49 +0530 Subject: [PATCH 07/24] testing for dark mode and rtl cases --- .../react-charting/LineChart.stories.tsx | 268 +++++++++--------- 1 file changed, 136 insertions(+), 132 deletions(-) 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 a3b4e10736ac0..c50303ed1c9c7 100644 --- a/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx @@ -149,148 +149,152 @@ storiesOf('react-charting/LineChart', module) ); }) - .addStory('Events', () => { - const data: IChartProps = { - chartTitle: 'Line Chart', - lineChartData: [ - { - legend: 'From_Legacy_to_O365', - data: [ - { - x: new Date('2020-03-03T00:00:00.000Z'), - y: 297, - }, - { - x: new Date('2020-03-04T00:00:00.000Z'), - y: 284, - }, - { - x: new Date('2020-03-05T00:00:00.000Z'), - y: 282, - }, - { - x: new Date('2020-03-06T00:00:00.000Z'), - y: 294, - }, - { - x: new Date('2020-03-07T00:00:00.000Z'), - y: 294, - }, - { - x: new Date('2020-03-08T00:00:00.000Z'), - y: 300, - }, - { - x: new Date('2020-03-09T00:00:00.000Z'), - y: 298, - }, - ], - color: DefaultPalette.blue, - lineOptions: { - lineBorderWidth: '4', - }, - }, - { - legend: 'All', - data: [ - { - x: new Date('2020-03-03T00:00:00.000Z'), - y: 292, - }, - { - x: new Date('2020-03-04T00:00:00.000Z'), - y: 287, - }, - { - x: new Date('2020-03-05T00:00:00.000Z'), - y: 287, - }, - { - x: new Date('2020-03-06T00:00:00.000Z'), - y: 292, - }, - { - x: new Date('2020-03-07T00:00:00.000Z'), - y: 287, - }, - { - x: new Date('2020-03-08T00:00:00.000Z'), - y: 297, - }, - { - x: new Date('2020-03-09T00:00:00.000Z'), - y: 292, + .addStory( + 'Events', + () => { + const data: IChartProps = { + chartTitle: 'Line Chart', + lineChartData: [ + { + legend: 'From_Legacy_to_O365', + data: [ + { + x: new Date('2020-03-03T00:00:00.000Z'), + y: 297, + }, + { + x: new Date('2020-03-04T00:00:00.000Z'), + y: 284, + }, + { + x: new Date('2020-03-05T00:00:00.000Z'), + y: 282, + }, + { + x: new Date('2020-03-06T00:00:00.000Z'), + y: 294, + }, + { + x: new Date('2020-03-07T00:00:00.000Z'), + y: 294, + }, + { + x: new Date('2020-03-08T00:00:00.000Z'), + y: 300, + }, + { + x: new Date('2020-03-09T00:00:00.000Z'), + y: 298, + }, + ], + color: DefaultPalette.blue, + lineOptions: { + lineBorderWidth: '4', }, - ], - color: DefaultPalette.green, - lineOptions: { - lineBorderWidth: '4', }, - }, - ], - }; - - const calloutItemStyle = mergeStyles({ - borderBottom: '1px solid #D9D9D9', - padding: '3px', - }); - - const rootStyle = { width: `700px`, height: `300px` }; - - return ( -
-
event 1 message
, + x: new Date('2020-03-04T00:00:00.000Z'), + y: 287, }, { - event: 'event 2', - date: new Date('2020-03-04T00:00:00.000Z'), - onRenderCard: () =>
event 2 message
, + x: new Date('2020-03-05T00:00:00.000Z'), + y: 287, }, { - event: 'event 3', - date: new Date('2020-03-04T00:00:00.000Z'), - onRenderCard: () =>
event 3 message
, + x: new Date('2020-03-06T00:00:00.000Z'), + y: 292, }, { - event: 'event 4', - date: new Date('2020-03-06T00:00:00.000Z'), - onRenderCard: () =>
event 4 message
, + x: new Date('2020-03-07T00:00:00.000Z'), + y: 287, }, { - event: 'event 5', - date: new Date('2020-03-08T00:00:00.000Z'), - onRenderCard: () =>
event 5 message
, + x: new Date('2020-03-08T00:00:00.000Z'), + y: 297, + }, + { + x: new Date('2020-03-09T00:00:00.000Z'), + y: 292, }, ], - labelHeight: 18, - labelWidth: 50, - mergedLabel: (count: number) => `${count} events`, - }} - height={300} - width={700} - enablePerfOptimization={true} - /> -
- ); - }); + color: DefaultPalette.green, + lineOptions: { + lineBorderWidth: '4', + }, + }, + ], + }; + + const calloutItemStyle = mergeStyles({ + borderBottom: '1px solid #D9D9D9', + padding: '3px', + }); + + const rootStyle = { width: `700px`, height: `300px` }; + + return ( +
+
event 1 message
, + }, + { + event: 'event 2', + date: new Date('2020-03-04T00:00:00.000Z'), + onRenderCard: () =>
event 2 message
, + }, + { + event: 'event 3', + date: new Date('2020-03-04T00:00:00.000Z'), + onRenderCard: () =>
event 3 message
, + }, + { + event: 'event 4', + date: new Date('2020-03-06T00:00:00.000Z'), + onRenderCard: () =>
event 4 message
, + }, + { + event: 'event 5', + date: new Date('2020-03-08T00:00:00.000Z'), + onRenderCard: () =>
event 5 message
, + }, + ], + labelHeight: 18, + labelWidth: 50, + mergedLabel: (count: number) => `${count} events`, + }} + height={300} + width={700} + enablePerfOptimization={true} + /> +
+ ); + }, + { includeDarkMode: true, includeRtl: true }, + ); From 68313b59426f269ed59e9da5dcdbe681a1b4ce1a Mon Sep 17 00:00:00 2001 From: Yush Singla Date: Fri, 28 Jul 2023 16:18:45 +0530 Subject: [PATCH 08/24] vr-tests for line chart + dark mode changes --- apps/vr-tests/.storybook/preview.js | 8 + apps/vr-tests/package.json | 1 - .../src/stories/ActivityItem.stories.tsx | 2 +- .../react-charting/LineChart.stories.tsx | 919 +++++++++++++++--- 4 files changed, 802 insertions(+), 128 deletions(-) diff --git a/apps/vr-tests/.storybook/preview.js b/apps/vr-tests/.storybook/preview.js index 46f31395be92c..e5ca6a773c709 100644 --- a/apps/vr-tests/.storybook/preview.js +++ b/apps/vr-tests/.storybook/preview.js @@ -2,6 +2,8 @@ import * as React from 'react'; import { setAddon } from '@storybook/react'; import { setRTL } from '@fluentui/react/lib/Utilities'; +import { ThemeProvider } from '@fluentui/react'; +import { DarkTheme } from '@fluentui/theme-samples'; /** * @deprecated https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-setaddon @@ -28,6 +30,12 @@ setAddon({ setRTL(false); return storyFn(context); }); + if (config.includeDarkMode) { + this.add(storyName + ' - Dark Mode', context => { + setRTL(false); + return {storyFn(context)}; + }); + } if (config.includeRtl) { this.add(storyName + ' - RTL', context => { setRTL(true); diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index 65834ab11e128..f4d70dcecba7b 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -28,7 +28,6 @@ "@fluentui/react-icons-mdl2": "*", "@fluentui/storybook": "*", "@fluentui/react-charting": "*", - "@fluentui/react-examples": "*", "react": "17.0.2", "react-dom": "17.0.2", "tslib": "^2.1.0" diff --git a/apps/vr-tests/src/stories/ActivityItem.stories.tsx b/apps/vr-tests/src/stories/ActivityItem.stories.tsx index ce95f0b1daf1d..18b3d0214ad1e 100644 --- a/apps/vr-tests/src/stories/ActivityItem.stories.tsx +++ b/apps/vr-tests/src/stories/ActivityItem.stories.tsx @@ -21,7 +21,7 @@ storiesOf('ActivityItem', module) () => ( } - activityDescription={description. text} + activityDescription={description text} comments={comment text} timeStamp="timeStamp text" /> 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 c50303ed1c9c7..8b6c6a321a289 100644 --- a/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx @@ -3,9 +3,13 @@ import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { TestWrapperDecorator } from '../../utilities/index'; import { IChartProps } from '../../../../../packages/react-charting/src/HorizontalBarChart'; -import { LineChart } from '../../../../../packages/react-charting/src/LineChart'; +import { ILineChartPoints, LineChart } from '../../../../../packages/react-charting/src/LineChart'; import { DefaultPalette } from '../../../../../packages/theme/src/index'; import { mergeStyles } from '../../../../../packages/merge-styles/src/mergeStyles'; +import { + DataVizPalette, + ICustomizedCalloutData, +} from '../../../../../packages/react-charting/src/index'; storiesOf('react-charting/LineChart', module) .addDecorator(TestWrapperDecorator) @@ -19,136 +23,140 @@ storiesOf('react-charting/LineChart', module) {story()} , ) - .addStory('Root', () => { - const margins = { left: 35, top: 20, bottom: 35, right: 20 }; - const data: IChartProps = { - chartTitle: 'Line Chart', - lineChartData: [ - { - legend: 'From_Legacy_to_O365', - data: [ - { - x: new Date('2020-03-03T00:00:00.000Z'), - y: 216000, - onDataPointClick: () => alert('click on 217000'), - }, - { - x: new Date('2020-03-03T10:00:00.000Z'), - y: 218123, - onDataPointClick: () => alert('click on 217123'), - }, - { - x: new Date('2020-03-03T11:00:00.000Z'), - y: 217124, - onDataPointClick: () => alert('click on 217124'), - }, - { - x: new Date('2020-03-04T00:00:00.000Z'), - y: 248000, - onDataPointClick: () => alert('click on 248000'), - }, - { - x: new Date('2020-03-05T00:00:00.000Z'), - y: 252000, - onDataPointClick: () => alert('click on 252000'), - }, - { - x: new Date('2020-03-06T00:00:00.000Z'), - y: 274000, - onDataPointClick: () => alert('click on 274000'), - }, - { - x: new Date('2020-03-07T00:00:00.000Z'), - y: 260000, - onDataPointClick: () => alert('click on 260000'), - }, - { - x: new Date('2020-03-08T00:00:00.000Z'), - y: 304000, - onDataPointClick: () => alert('click on 300000'), - }, - { - x: new Date('2020-03-09T00:00:00.000Z'), - y: 218000, - onDataPointClick: () => alert('click on 218000'), + .addStory( + 'Root', + () => { + const margins = { left: 35, top: 20, bottom: 35, right: 20 }; + const data: IChartProps = { + chartTitle: 'Line Chart', + lineChartData: [ + { + legend: 'From_Legacy_to_O365', + data: [ + { + x: new Date('2020-03-03T00:00:00.000Z'), + y: 216000, + onDataPointClick: () => alert('click on 217000'), + }, + { + x: new Date('2020-03-03T10:00:00.000Z'), + y: 218123, + onDataPointClick: () => alert('click on 217123'), + }, + { + x: new Date('2020-03-03T11:00:00.000Z'), + y: 217124, + onDataPointClick: () => alert('click on 217124'), + }, + { + x: new Date('2020-03-04T00:00:00.000Z'), + y: 248000, + onDataPointClick: () => alert('click on 248000'), + }, + { + x: new Date('2020-03-05T00:00:00.000Z'), + y: 252000, + onDataPointClick: () => alert('click on 252000'), + }, + { + x: new Date('2020-03-06T00:00:00.000Z'), + y: 274000, + onDataPointClick: () => alert('click on 274000'), + }, + { + x: new Date('2020-03-07T00:00:00.000Z'), + y: 260000, + onDataPointClick: () => alert('click on 260000'), + }, + { + x: new Date('2020-03-08T00:00:00.000Z'), + y: 304000, + onDataPointClick: () => alert('click on 300000'), + }, + { + x: new Date('2020-03-09T00:00:00.000Z'), + y: 218000, + onDataPointClick: () => alert('click on 218000'), + }, + ], + color: DefaultPalette.blue, + lineOptions: { + lineBorderWidth: '4', }, - ], - color: DefaultPalette.blue, - lineOptions: { - lineBorderWidth: '4', + onLineClick: () => console.log('From_Legacy_to_O365'), }, - onLineClick: () => console.log('From_Legacy_to_O365'), - }, - { - legend: 'All', - data: [ - { - x: new Date('2020-03-03T00:00:00.000Z'), - y: 297000, - }, - { - x: new Date('2020-03-04T00:00:00.000Z'), - y: 284000, - }, - { - x: new Date('2020-03-05T00:00:00.000Z'), - y: 282000, - }, - { - x: new Date('2020-03-06T00:00:00.000Z'), - y: 294000, - }, - { - x: new Date('2020-03-07T00:00:00.000Z'), - y: 224000, - }, - { - x: new Date('2020-03-08T00:00:00.000Z'), - y: 300000, - }, - { - x: new Date('2020-03-09T00:00:00.000Z'), - y: 298000, + { + legend: 'All', + data: [ + { + x: new Date('2020-03-03T00:00:00.000Z'), + y: 297000, + }, + { + x: new Date('2020-03-04T00:00:00.000Z'), + y: 284000, + }, + { + x: new Date('2020-03-05T00:00:00.000Z'), + y: 282000, + }, + { + x: new Date('2020-03-06T00:00:00.000Z'), + y: 294000, + }, + { + x: new Date('2020-03-07T00:00:00.000Z'), + y: 224000, + }, + { + x: new Date('2020-03-08T00:00:00.000Z'), + y: 300000, + }, + { + x: new Date('2020-03-09T00:00:00.000Z'), + y: 298000, + }, + ], + color: DefaultPalette.green, + lineOptions: { + lineBorderWidth: '4', }, - ], - color: DefaultPalette.green, - lineOptions: { - lineBorderWidth: '4', }, - }, - { - legend: 'single point', - data: [ - { - x: new Date('2020-03-05T00:00:00.000Z'), - y: 282000, - }, - ], - color: DefaultPalette.yellow, - }, - ], - }; + { + legend: 'single point', + data: [ + { + x: new Date('2020-03-05T00:00:00.000Z'), + y: 282000, + }, + ], + color: DefaultPalette.yellow, + }, + ], + }; - const rootStyle = { width: `700px`, height: `300px` }; + const rootStyle = { width: `700px`, height: `300px` }; - return ( -
- -
- ); - }) + return ( +
+ +
+ ); + }, + { includeRtl: true, includeDarkMode: true }, + ) .addStory( 'Events', () => { @@ -296,5 +304,664 @@ storiesOf('react-charting/LineChart', module) ); }, - { includeDarkMode: true, includeRtl: true }, + { includeRtl: true, includeDarkMode: true }, + ) + .addStory( + 'Multiple', + () => { + const _onLegendClickHandler = (selectedLegend: string | null): void => { + if (selectedLegend !== null) { + console.log(`Selected legend - ${selectedLegend}`); + } + }; + + const points: ILineChartPoints[] = [ + { + data: [ + { + x: new Date('2018/01/01'), + y: 10, + xAxisCalloutData: '2018/01/01', + yAxisCalloutData: '10%', + }, + { + x: new Date('2018/02/01'), + y: 30, + xAxisCalloutData: '2018/01/15', + yAxisCalloutData: '18%', + }, + { + x: new Date('2018/03/01'), + y: 10, + xAxisCalloutData: '2018/01/28', + yAxisCalloutData: '24%', + }, + { + x: new Date('2018/04/01'), + y: 30, + xAxisCalloutData: '2018/02/01', + yAxisCalloutData: '25%', + }, + { + x: new Date('2018/05/01'), + y: 10, + xAxisCalloutData: '2018/03/01', + yAxisCalloutData: '15%', + }, + { + x: new Date('2018/06/01'), + y: 30, + xAxisCalloutData: '2018/03/15', + yAxisCalloutData: '30%', + }, + ], + legend: 'First', + lineOptions: { + lineBorderWidth: '4', + }, + onLegendClick: _onLegendClickHandler, + }, + { + data: [ + { x: new Date('2018/01/01'), y: 30 }, + { x: new Date('2018/02/01'), y: 50 }, + { x: new Date('2018/03/01'), y: 30 }, + { x: new Date('2018/04/01'), y: 50 }, + { x: new Date('2018/05/01'), y: 30 }, + { x: new Date('2018/06/01'), y: 50 }, + ], + legend: 'Second', + lineOptions: { + lineBorderWidth: '4', + }, + onLegendClick: _onLegendClickHandler, + }, + { + data: [ + { x: new Date('2018/01/01'), y: 50 }, + { x: new Date('2018/02/01'), y: 70 }, + { x: new Date('2018/03/01'), y: 50 }, + { x: new Date('2018/04/01'), y: 70 }, + { x: new Date('2018/05/01'), y: 50 }, + { x: new Date('2018/06/01'), y: 70 }, + ], + legend: 'Third', + lineOptions: { + lineBorderWidth: '4', + }, + onLegendClick: _onLegendClickHandler, + }, + { + data: [ + { x: new Date('2018/01/01'), y: 70 }, + { x: new Date('2018/02/01'), y: 90 }, + { x: new Date('2018/03/01'), y: 70 }, + { x: new Date('2018/04/01'), y: 90 }, + { x: new Date('2018/05/01'), y: 70 }, + { x: new Date('2018/06/01'), y: 90 }, + ], + legend: 'Fourth', + lineOptions: { + lineBorderWidth: '4', + }, + onLegendClick: _onLegendClickHandler, + }, + { + data: [ + { x: new Date('2018/01/01'), y: 90 }, + { x: new Date('2018/02/01'), y: 110 }, + { x: new Date('2018/03/01'), y: 90 }, + { x: new Date('2018/04/01'), y: 110 }, + { x: new Date('2018/05/01'), y: 90 }, + { x: new Date('2018/06/01'), y: 110 }, + ], + legend: 'Fifth', + lineOptions: { + lineBorderWidth: '4', + }, + onLegendClick: _onLegendClickHandler, + }, + { + data: [ + { x: new Date('2018/01/01'), y: 110 }, + { x: new Date('2018/02/01'), y: 130 }, + { x: new Date('2018/03/01'), y: 110 }, + { x: new Date('2018/04/01'), y: 130 }, + { x: new Date('2018/05/01'), y: 110 }, + { x: new Date('2018/06/01'), y: 130 }, + ], + legend: 'Sixth', + lineOptions: { + lineBorderWidth: '4', + }, + onLegendClick: _onLegendClickHandler, + }, + { + data: [ + { x: new Date('2018/01/01'), y: 130 }, + { x: new Date('2018/02/01'), y: 150 }, + { x: new Date('2018/03/01'), y: 130 }, + { x: new Date('2018/04/01'), y: 150 }, + { x: new Date('2018/05/01'), y: 130 }, + { x: new Date('2018/06/01'), y: 150 }, + ], + legend: 'Seventh', + lineOptions: { + lineBorderWidth: '4', + }, + onLegendClick: _onLegendClickHandler, + }, + { + data: [ + { x: new Date('2018/01/01'), y: 150 }, + { x: new Date('2018/02/01'), y: 170 }, + { x: new Date('2018/03/01'), y: 150 }, + { x: new Date('2018/04/01'), y: 170 }, + { x: new Date('2018/05/01'), y: 150 }, + { x: new Date('2018/06/01'), y: 170 }, + ], + legend: 'Eight', + lineOptions: { + lineBorderWidth: '4', + }, + onLegendClick: _onLegendClickHandler, + }, + { + data: [ + { x: new Date('2018/01/01'), y: 170 }, + { x: new Date('2018/02/01'), y: 190 }, + { x: new Date('2018/03/01'), y: 170 }, + { x: new Date('2018/04/01'), y: 190 }, + { x: new Date('2018/05/01'), y: 170 }, + { x: new Date('2018/06/01'), y: 190 }, + ], + legend: 'Ninth', + lineOptions: { + lineBorderWidth: '4', + }, + onLegendClick: _onLegendClickHandler, + }, + { + data: [ + { x: new Date('2018/01/01'), y: 190 }, + { x: new Date('2018/02/01'), y: 210 }, + { x: new Date('2018/03/01'), y: 190 }, + { x: new Date('2018/04/01'), y: 210 }, + { x: new Date('2018/05/01'), y: 190 }, + { x: new Date('2018/06/01'), y: 210 }, + ], + legend: 'Tenth', + lineOptions: { + lineBorderWidth: '4', + }, + onLegendClick: _onLegendClickHandler, + }, + { + data: [ + { x: new Date('2018/01/01'), y: 210 }, + { x: new Date('2018/02/01'), y: 230 }, + { x: new Date('2018/03/01'), y: 210 }, + { x: new Date('2018/04/01'), y: 230 }, + { x: new Date('2018/05/01'), y: 210 }, + { x: new Date('2018/06/01'), y: 230 }, + ], + legend: 'Eleventh', + lineOptions: { + lineBorderWidth: '4', + }, + onLegendClick: _onLegendClickHandler, + }, + { + data: [ + { x: new Date('2018/01/01'), y: 230 }, + { x: new Date('2018/02/01'), y: 250 }, + { x: new Date('2018/03/01'), y: 230 }, + { x: new Date('2018/04/01'), y: 250 }, + { x: new Date('2018/05/01'), y: 230 }, + { x: new Date('2018/06/01'), y: 250 }, + ], + legend: 'Tweleth', + lineOptions: { + lineBorderWidth: '4', + }, + onLegendClick: _onLegendClickHandler, + }, + ]; + + const data: IChartProps = { + chartTitle: 'Line Chart', + lineChartData: points, + }; + const rootStyle = { width: `${700}px`, height: `${300}px` }; + const timeFormat = '%m/%d'; + // Passing tick values is optional, for more control. + // If you do not pass them the line chart will render them for you based on D3's standard. + const tickValues: Date[] = [ + new Date('01-01-2018'), + new Date('02-01-2018'), + new Date('03-01-2018'), + new Date('04-01-2018'), + new Date('05-01-2018'), + new Date('06-01-2018'), + new Date('07-01-2018'), + ]; + const colorFillBarData = [ + { + legend: 'Time range 1', + color: DataVizPalette.color19, + data: [ + { + startX: new Date('2018/01/06'), + endX: new Date('2018/01/25'), + }, + ], + }, + { + legend: 'Time range 2', + color: DataVizPalette.color20, + data: [ + { + startX: new Date('2018/01/18'), + endX: new Date('2018/02/20'), + }, + { + startX: new Date('2018/04/17'), + endX: new Date('2018/05/10'), + }, + ], + applyPattern: true, + }, + ]; + return ( +
+ +
+ ); + }, + { includeRtl: true, includeDarkMode: true }, + ) + .addStory( + 'Gaps', + () => { + const _calculateCalloutDescription = ( + calloutDataProps: ICustomizedCalloutData, + ): string | undefined => { + if ( + calloutDataProps.values.filter(value => value.legend === 'Low Confidence Data*').length > + 0 + ) { + return '* This data was below our confidence threshold.'; + } + return undefined; + }; + + const data: IChartProps = { + chartTitle: 'Line Chart', + lineChartData: [ + { + legend: 'Confidence Level', + legendShape: 'dottedLine', + hideNonActiveDots: true, + lineOptions: { + strokeDasharray: '5', + strokeLinecap: 'butt', + strokeWidth: '2', + lineBorderWidth: '4', + }, + data: [ + { + x: new Date('2020-03-03T00:00:00.000Z'), + y: 250000, + hideCallout: true, + }, + { + x: new Date('2020-03-10T00:00:00.000Z'), + y: 250000, + hideCallout: true, + }, + ], + color: DefaultPalette.black, + }, + { + legend: 'Normal Data', + gaps: [ + { + startIndex: 3, + endIndex: 4, + }, + { + startIndex: 6, + endIndex: 7, + }, + { + startIndex: 1, + endIndex: 2, + }, + ], + hideNonActiveDots: true, + lineOptions: { + lineBorderWidth: '4', + }, + data: [ + { + x: new Date('2020-03-03T00:00:00.000Z'), + y: 216000, + }, + { + x: new Date('2020-03-03T10:30:00.000Z'), + y: 218123, + hideCallout: true, + }, + // gap here + { + x: new Date('2020-03-03T11:00:00.000Z'), + y: 219000, + hideCallout: true, + }, + { + x: new Date('2020-03-04T00:00:00.000Z'), + y: 248000, + hideCallout: true, + }, + // gap here + { + x: new Date('2020-03-05T00:00:00.000Z'), + y: 252000, + hideCallout: true, + }, + { + x: new Date('2020-03-06T00:00:00.000Z'), + y: 274000, + }, + { + x: new Date('2020-03-07T00:00:00.000Z'), + y: 260000, + hideCallout: true, + }, + // gap here + { + x: new Date('2020-03-08T00:00:00.000Z'), + y: 300000, + hideCallout: true, + }, + { + x: new Date('2020-03-08T12:00:00.000Z'), + y: 218000, + }, + { + x: new Date('2020-03-09T00:00:00.000Z'), + y: 218000, + }, + { + x: new Date('2020-03-10T00:00:00.000Z'), + y: 269000, + }, + ], + color: DefaultPalette.blue, + }, + { + legend: 'Low Confidence Data*', + legendShape: 'dottedLine', + hideNonActiveDots: true, + lineOptions: { + strokeDasharray: '2', + strokeDashoffset: '-1', + strokeLinecap: 'butt', + lineBorderWidth: '4', + }, + gaps: [ + { + startIndex: 3, + endIndex: 4, + }, + { + startIndex: 1, + endIndex: 2, + }, + ], + data: [ + { + x: new Date('2020-03-03T10:30:00.000Z'), + y: 218123, + }, + { + x: new Date('2020-03-03T11:00:00.000Z'), + y: 219000, + }, + // gap here + { + x: new Date('2020-03-04T00:00:00.000Z'), + y: 248000, + }, + { + x: new Date('2020-03-05T00:00:00.000Z'), + y: 252000, + }, + // gap here + { + x: new Date('2020-03-07T00:00:00.000Z'), + y: 260000, + }, + { + x: new Date('2020-03-08T00:00:00.000Z'), + y: 300000, + }, + ], + color: DefaultPalette.blue, + }, + { + legend: 'Green Data', + lineOptions: { + lineBorderWidth: '4', + }, + data: [ + { + x: new Date('2020-03-03T00:00:00.000Z'), + y: 297000, + }, + { + x: new Date('2020-03-04T00:00:00.000Z'), + y: 284000, + }, + { + x: new Date('2020-03-05T00:00:00.000Z'), + y: 282000, + }, + { + x: new Date('2020-03-06T00:00:00.000Z'), + y: 294000, + }, + { + x: new Date('2020-03-07T00:00:00.000Z'), + y: 224000, + }, + { + x: new Date('2020-03-08T00:00:00.000Z'), + y: 300000, + }, + { + x: new Date('2020-03-09T00:00:00.000Z'), + y: 298000, + }, + { + x: new Date('2020-03-10T00:00:00.000Z'), + y: 299000, + }, + ], + color: DefaultPalette.green, + }, + ], + }; + + const rootStyle = { width: `${700}px`, height: `${300}px` }; + const margins = { left: 35, top: 20, bottom: 35, right: 20 }; + + return ( + <> +
+ +
+ + ); + }, + { includeRtl: true, includeDarkMode: true }, + ) + .addStory( + 'Date_Axis', + () => { + const data: IChartProps = { + chartTitle: 'Line Chart', + lineChartData: [ + { + legend: 'From_Legacy_to_O365', + data: [ + { + x: new Date('2020-03-03T00:00:00.000Z'), + y: 216000, + onDataPointClick: () => alert('click on 217000'), + }, + { + x: new Date('2020-04-03T10:00:00.000Z'), + y: 218123, + onDataPointClick: () => alert('click on 217123'), + }, + { + x: new Date('2020-05-05T11:00:00.000Z'), + y: 217124, + onDataPointClick: () => alert('click on 217124'), + }, + { + x: new Date('2020-07-14T00:00:00.000Z'), + y: 248000, + onDataPointClick: () => alert('click on 248000'), + }, + { + x: new Date('2020-11-15T00:00:00.000Z'), + y: 252000, + onDataPointClick: () => alert('click on 252000'), + }, + { + x: new Date('2020-12-06T00:00:00.000Z'), + y: 274000, + onDataPointClick: () => alert('click on 274000'), + }, + { + x: new Date('2021-01-07T00:00:00.000Z'), + y: 260000, + onDataPointClick: () => alert('click on 260000'), + }, + { + x: new Date('2021-02-14T00:00:00.000Z'), + y: 304000, + onDataPointClick: () => alert('click on 300000'), + }, + { + x: new Date('2021-03-09T00:00:00.000Z'), + y: 218000, + onDataPointClick: () => alert('click on 218000'), + }, + ], + color: DefaultPalette.blue, + lineOptions: { + lineBorderWidth: '4', + }, + onLineClick: () => console.log('From_Legacy_to_O365'), + }, + { + legend: 'All', + data: [ + { + x: new Date('2020-03-03T00:00:00.000Z'), + y: 297000, + }, + { + x: new Date('2020-04-04T00:00:00.000Z'), + y: 284000, + }, + { + x: new Date('2020-05-05T00:00:00.000Z'), + y: 282000, + }, + { + x: new Date('2020-06-06T00:00:00.000Z'), + y: 294000, + }, + { + x: new Date('2020-09-16T00:00:00.000Z'), + y: 224000, + }, + { + x: new Date('2021-02-08T00:00:00.000Z'), + y: 300000, + }, + { + x: new Date('2021-03-09T00:00:00.000Z'), + y: 298000, + }, + ], + color: DefaultPalette.green, + lineOptions: { + lineBorderWidth: '4', + }, + }, + { + legend: 'single point', + data: [ + { + x: new Date('2020-07-05T00:00:00.000Z'), + y: 282000, + }, + ], + color: DefaultPalette.yellow, + }, + ], + }; + + const rootStyle = { width: `${700}px`, height: `${300}px` }; + const margins = { left: 35, top: 20, bottom: 35, right: 20 }; + + return ( +
+ +
+ ); + }, + { includeRtl: true, includeDarkMode: true }, ); From 912ca5fcc9e7ce923eb9216d1373459112771d72 Mon Sep 17 00:00:00 2001 From: yush singla Date: Tue, 1 Aug 2023 15:19:05 +0530 Subject: [PATCH 09/24] added area chart to vr-tests --- .../react-charting/AreaChart.stories.tsx | 597 ++++++++++++++++++ 1 file changed, 597 insertions(+) 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 e69de29bb2d1d..53c9904ce408e 100644 --- a/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx @@ -0,0 +1,597 @@ +import * as React from 'react'; +import { storiesOf } from '@storybook/react'; +import { StoryWright, Steps } from 'storywright'; +import { TestWrapperDecorator } from '../../utilities/TestWrapperDecorator'; +import { AreaChart, ICustomizedCalloutData, ChartHoverCard } from '@fluentui/react-charting'; +import { DefaultPalette } from '@fluentui/react'; + +storiesOf('react-charting/AreaChart', module) + .addDecorator(TestWrapperDecorator) + .addDecorator(story => + // prettier-ignore + + {story()} + , + ) + .addStory( + 'Root', + () => { + const chart1Points = [ + { + x: 20, + y: 7000, + xAxisCalloutData: '2018/01/01', + yAxisCalloutData: '10%', + }, + { + x: 25, + y: 9000, + xAxisCalloutData: '2018/01/15', + yAxisCalloutData: '18%', + }, + { + x: 30, + y: 13000, + xAxisCalloutData: '2018/01/28', + yAxisCalloutData: '24%', + }, + { + x: 35, + y: 15000, + xAxisCalloutData: '2018/02/01', + yAxisCalloutData: '25%', + }, + { + x: 40, + y: 11000, + xAxisCalloutData: '2018/03/01', + yAxisCalloutData: '15%', + }, + { + x: 45, + y: 8760, + xAxisCalloutData: '2018/03/15', + yAxisCalloutData: '30%', + }, + { + x: 50, + y: 3500, + xAxisCalloutData: '2018/03/28', + yAxisCalloutData: '18%', + }, + { + x: 55, + y: 20000, + xAxisCalloutData: '2018/04/04', + yAxisCalloutData: '32%', + }, + { + x: 60, + y: 17000, + xAxisCalloutData: '2018/04/15', + yAxisCalloutData: '29%', + }, + { + x: 65, + y: 1000, + xAxisCalloutData: '2018/05/05', + yAxisCalloutData: '43%', + }, + { + x: 70, + y: 12000, + xAxisCalloutData: '2018/06/01', + yAxisCalloutData: '45%', + }, + { + x: 75, + y: 6876, + xAxisCalloutData: '2018/01/15', + yAxisCalloutData: '18%', + }, + { + x: 80, + y: 12000, + xAxisCalloutData: '2018/04/30', + yAxisCalloutData: '55%', + }, + { + x: 85, + y: 7000, + xAxisCalloutData: '2018/05/04', + yAxisCalloutData: '12%', + }, + { + x: 90, + y: 10000, + xAxisCalloutData: '2018/06/01', + yAxisCalloutData: '45%', + }, + ]; + + const chartPoints = [ + { + legend: 'legend1', + data: chart1Points, + color: '#0099BC', + }, + ]; + + const chartData = { + chartTitle: 'Area chart basic example', + lineChartData: chartPoints, + }; + + const rootStyle = { width: `${700}px`, height: `${300}px` }; + + return ( +
+ + props ? ( + + ) : null + } + /> +
+ ); + }, + { includeDarkMode: true, includeRtl: true }, + ) + .addStory( + 'Styled', + () => { + const chart1Points = [ + { + x: 20, + y: 7000, + xAxisCalloutData: '2018/01/01', + yAxisCalloutData: '10%', + }, + { + x: 25, + y: 9000, + xAxisCalloutData: '2018/01/15', + yAxisCalloutData: '18%', + }, + { + x: 30, + y: 13000, + xAxisCalloutData: '2018/01/28', + yAxisCalloutData: '24%', + }, + { + x: 35, + y: 15000, + xAxisCalloutData: '2018/02/01', + yAxisCalloutData: '25%', + }, + { + x: 40, + y: 11000, + xAxisCalloutData: '2018/03/01', + yAxisCalloutData: '15%', + }, + { + x: 45, + y: 8760, + xAxisCalloutData: '2018/03/15', + yAxisCalloutData: '30%', + }, + { + x: 50, + y: 3500, + xAxisCalloutData: '2018/03/28', + yAxisCalloutData: '18%', + }, + { + x: 55, + y: 20000, + xAxisCalloutData: '2018/04/04', + yAxisCalloutData: '32%', + }, + { + x: 60, + y: 17000, + xAxisCalloutData: '2018/04/15', + yAxisCalloutData: '29%', + }, + { + x: 65, + y: 1000, + xAxisCalloutData: '2018/05/05', + yAxisCalloutData: '43%', + }, + { + x: 70, + y: 12000, + xAxisCalloutData: '2018/06/01', + yAxisCalloutData: '45%', + }, + { + x: 75, + y: 6876, + xAxisCalloutData: '2018/01/15', + yAxisCalloutData: '18%', + }, + { + x: 80, + y: 12000, + xAxisCalloutData: '2018/04/30', + yAxisCalloutData: '55%', + }, + { + x: 85, + y: 7000, + xAxisCalloutData: '2018/05/04', + yAxisCalloutData: '12%', + }, + { + x: 90, + y: 10000, + xAxisCalloutData: '2018/06/01', + yAxisCalloutData: '45%', + }, + ]; + + const chartPoints = [ + { + legend: 'legend1', + data: chart1Points, + color: '#0099BC', + }, + ]; + + const chartData = { + chartTitle: 'Area chart basic example', + lineChartData: chartPoints, + }; + + const rootStyle = { width: `${700}px`, height: `${300}px` }; + + return ( +
+ + props ? ( + + ) : null + } + /> +
+ ); + }, + { includeDarkMode: true, includeRtl: true }, + ) + .addStory( + 'Custom_Accessibility', + () => { + const chart1Points = [ + { + x: 20, + y: 9, + xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 20' }, + callOutAccessibilityData: { ariaLabel: 'Line series 1 of 5 Point 1 First 9' }, + }, + { + x: 40, + y: 20, + xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 40' }, + callOutAccessibilityData: { ariaLabel: 'Line series 2 of 5 Point 1 First 20' }, + }, + { + x: 55, + y: 27, + xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 55' }, + callOutAccessibilityData: { ariaLabel: 'Line series 3 of 5 Point 1 First 27' }, + }, + { + x: 60, + y: 37, + xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 60' }, + callOutAccessibilityData: { ariaLabel: 'Line series 4 of 5 Point 1 First 37' }, + }, + { + x: 65, + y: 51, + xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 65' }, + callOutAccessibilityData: { ariaLabel: 'Line series 5 of 5 Point 1 First 51' }, + }, + ]; + + const chart2Points = [ + { + x: 20, + y: 21, + callOutAccessibilityData: { ariaLabel: 'Point 2 Second 21' }, + }, + { + x: 40, + y: 25, + callOutAccessibilityData: { ariaLabel: 'Point 2 Second 25' }, + }, + { + x: 55, + y: 23, + callOutAccessibilityData: { ariaLabel: 'Point 2 Second 23' }, + }, + { + x: 60, + y: 7, + callOutAccessibilityData: { ariaLabel: 'Point 2 Second 7' }, + }, + { + x: 65, + y: 55, + callOutAccessibilityData: { ariaLabel: 'Point 2 Second 55' }, + }, + ]; + + const chart3Points = [ + { + x: 20, + y: 30, + callOutAccessibilityData: { ariaLabel: 'Point 3 Third 30' }, + }, + { + x: 40, + y: 35, + callOutAccessibilityData: { ariaLabel: 'Point 3 Third 35' }, + }, + { + x: 55, + y: 33, + callOutAccessibilityData: { ariaLabel: 'Point 3 Third 33' }, + }, + { + x: 60, + y: 40, + callOutAccessibilityData: { ariaLabel: 'Point 3 Third 40' }, + }, + { + x: 65, + y: 10, + callOutAccessibilityData: { ariaLabel: 'Point 3 Third 10' }, + }, + ]; + + const chartPoints = [ + { + legend: 'First', + data: chart1Points, + color: DefaultPalette.accent, + }, + { + legend: 'Second', + data: chart2Points, + color: DefaultPalette.blueLight, + }, + { + legend: 'Third', + data: chart3Points, + color: DefaultPalette.blueDark, + }, + ]; + + const chartData = { + chartTitle: 'Area chart Custom Accessibility example', + lineChartData: chartPoints, + }; + const rootStyle = { width: `${700}px`, height: `${300}px` }; + + return ( +
+ +
+ ); + }, + { includeDarkMode: true, includeRtl: true }, + ) + .addStory( + 'Multiple', + () => { + const chart1Points = [ + { + x: 20, + y: 9, + }, + { + x: 25, + y: 14, + }, + { + x: 30, + y: 14, + }, + { + x: 35, + y: 23, + }, + { + x: 40, + y: 20, + }, + { + x: 45, + y: 31, + }, + { + x: 50, + y: 29, + }, + { + x: 55, + y: 27, + }, + { + x: 60, + y: 37, + }, + { + x: 65, + y: 51, + }, + ]; + + const chart2Points = [ + { + x: 20, + y: 21, + }, + { + x: 25, + y: 25, + }, + { + x: 30, + y: 10, + }, + { + x: 35, + y: 10, + }, + { + x: 40, + y: 14, + }, + { + x: 45, + y: 18, + }, + { + x: 50, + y: 9, + }, + { + x: 55, + y: 23, + }, + { + x: 60, + y: 7, + }, + { + x: 65, + y: 55, + }, + ]; + + const chart3Points = [ + { + x: 20, + y: 30, + }, + { + x: 25, + y: 35, + }, + { + x: 30, + y: 33, + }, + { + x: 35, + y: 40, + }, + { + x: 40, + y: 10, + }, + { + x: 45, + y: 40, + }, + { + x: 50, + y: 34, + }, + { + x: 55, + y: 40, + }, + { + x: 60, + y: 60, + }, + { + x: 65, + y: 40, + }, + ]; + + const chartPoints = [ + { + legend: 'legend1', + data: chart1Points, + }, + { + legend: 'legend2', + data: chart2Points, + }, + { + legend: 'legend3', + data: chart3Points, + }, + ]; + + const chartData = { + chartTitle: 'Area chart multiple example', + lineChartData: chartPoints, + }; + const rootStyle = { width: `${700}px`, height: `${300}px` }; + + return ( +
+ +
+ ); + }, + { includeDarkMode: true, includeRtl: true }, + ); From 7807a270b27ff923b6c8260d9e2074929cce0162 Mon Sep 17 00:00:00 2001 From: yush singla Date: Tue, 1 Aug 2023 19:23:10 +0530 Subject: [PATCH 10/24] vr-tests fix --- .../react-charting/AreaChart.stories.tsx | 153 +--------------- .../react-charting/LineChart.stories.tsx | 166 ++---------------- 2 files changed, 17 insertions(+), 302 deletions(-) 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 53c9904ce408e..0b175bbc64b0b 100644 --- a/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx @@ -7,155 +7,12 @@ import { DefaultPalette } from '@fluentui/react'; storiesOf('react-charting/AreaChart', module) .addDecorator(TestWrapperDecorator) - .addDecorator(story => - // prettier-ignore - - {story()} - , - ) - .addStory( - 'Root', - () => { - const chart1Points = [ - { - x: 20, - y: 7000, - xAxisCalloutData: '2018/01/01', - yAxisCalloutData: '10%', - }, - { - x: 25, - y: 9000, - xAxisCalloutData: '2018/01/15', - yAxisCalloutData: '18%', - }, - { - x: 30, - y: 13000, - xAxisCalloutData: '2018/01/28', - yAxisCalloutData: '24%', - }, - { - x: 35, - y: 15000, - xAxisCalloutData: '2018/02/01', - yAxisCalloutData: '25%', - }, - { - x: 40, - y: 11000, - xAxisCalloutData: '2018/03/01', - yAxisCalloutData: '15%', - }, - { - x: 45, - y: 8760, - xAxisCalloutData: '2018/03/15', - yAxisCalloutData: '30%', - }, - { - x: 50, - y: 3500, - xAxisCalloutData: '2018/03/28', - yAxisCalloutData: '18%', - }, - { - x: 55, - y: 20000, - xAxisCalloutData: '2018/04/04', - yAxisCalloutData: '32%', - }, - { - x: 60, - y: 17000, - xAxisCalloutData: '2018/04/15', - yAxisCalloutData: '29%', - }, - { - x: 65, - y: 1000, - xAxisCalloutData: '2018/05/05', - yAxisCalloutData: '43%', - }, - { - x: 70, - y: 12000, - xAxisCalloutData: '2018/06/01', - yAxisCalloutData: '45%', - }, - { - x: 75, - y: 6876, - xAxisCalloutData: '2018/01/15', - yAxisCalloutData: '18%', - }, - { - x: 80, - y: 12000, - xAxisCalloutData: '2018/04/30', - yAxisCalloutData: '55%', - }, - { - x: 85, - y: 7000, - xAxisCalloutData: '2018/05/04', - yAxisCalloutData: '12%', - }, - { - x: 90, - y: 10000, - xAxisCalloutData: '2018/06/01', - yAxisCalloutData: '45%', - }, - ]; - - const chartPoints = [ - { - legend: 'legend1', - data: chart1Points, - color: '#0099BC', - }, - ]; - - const chartData = { - chartTitle: 'Area chart basic example', - lineChartData: chartPoints, - }; - - const rootStyle = { width: `${700}px`, height: `${300}px` }; - - return ( -
- - props ? ( - - ) : null - } - /> -
- ); - }, - { includeDarkMode: true, includeRtl: true }, - ) + .addDecorator(story => { + const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); + return {story()}; + }) .addStory( - 'Styled', + 'Basic', () => { const chart1Points = [ { 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 8b6c6a321a289..4a7121e4d7a57 100644 --- a/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx @@ -2,29 +2,22 @@ import * as React from 'react'; import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { TestWrapperDecorator } from '../../utilities/index'; -import { IChartProps } from '../../../../../packages/react-charting/src/HorizontalBarChart'; -import { ILineChartPoints, LineChart } from '../../../../../packages/react-charting/src/LineChart'; -import { DefaultPalette } from '../../../../../packages/theme/src/index'; -import { mergeStyles } from '../../../../../packages/merge-styles/src/mergeStyles'; -import { - DataVizPalette, - ICustomizedCalloutData, -} from '../../../../../packages/react-charting/src/index'; +import { ILineChartPoints, LineChart, IChartProps } from '@fluentui/react-charting'; +import { mergeStyles, DefaultPalette } from '@fluentui/react'; +import { DataVizPalette, ICustomizedCalloutData } from '@fluentui/react-charting'; storiesOf('react-charting/LineChart', module) .addDecorator(TestWrapperDecorator) - .addDecorator(story => - // prettier-ignore - - {story()} - , - ) + .addDecorator(story => { + const steps = + story.name === 'Basic' + ? new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() + : new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); + + return {story()}; + }) .addStory( - 'Root', + 'Basic', () => { const margins = { left: 35, top: 20, bottom: 35, right: 20 }; const data: IChartProps = { @@ -829,139 +822,4 @@ storiesOf('react-charting/LineChart', module) ); }, { includeRtl: true, includeDarkMode: true }, - ) - .addStory( - 'Date_Axis', - () => { - const data: IChartProps = { - chartTitle: 'Line Chart', - lineChartData: [ - { - legend: 'From_Legacy_to_O365', - data: [ - { - x: new Date('2020-03-03T00:00:00.000Z'), - y: 216000, - onDataPointClick: () => alert('click on 217000'), - }, - { - x: new Date('2020-04-03T10:00:00.000Z'), - y: 218123, - onDataPointClick: () => alert('click on 217123'), - }, - { - x: new Date('2020-05-05T11:00:00.000Z'), - y: 217124, - onDataPointClick: () => alert('click on 217124'), - }, - { - x: new Date('2020-07-14T00:00:00.000Z'), - y: 248000, - onDataPointClick: () => alert('click on 248000'), - }, - { - x: new Date('2020-11-15T00:00:00.000Z'), - y: 252000, - onDataPointClick: () => alert('click on 252000'), - }, - { - x: new Date('2020-12-06T00:00:00.000Z'), - y: 274000, - onDataPointClick: () => alert('click on 274000'), - }, - { - x: new Date('2021-01-07T00:00:00.000Z'), - y: 260000, - onDataPointClick: () => alert('click on 260000'), - }, - { - x: new Date('2021-02-14T00:00:00.000Z'), - y: 304000, - onDataPointClick: () => alert('click on 300000'), - }, - { - x: new Date('2021-03-09T00:00:00.000Z'), - y: 218000, - onDataPointClick: () => alert('click on 218000'), - }, - ], - color: DefaultPalette.blue, - lineOptions: { - lineBorderWidth: '4', - }, - onLineClick: () => console.log('From_Legacy_to_O365'), - }, - { - legend: 'All', - data: [ - { - x: new Date('2020-03-03T00:00:00.000Z'), - y: 297000, - }, - { - x: new Date('2020-04-04T00:00:00.000Z'), - y: 284000, - }, - { - x: new Date('2020-05-05T00:00:00.000Z'), - y: 282000, - }, - { - x: new Date('2020-06-06T00:00:00.000Z'), - y: 294000, - }, - { - x: new Date('2020-09-16T00:00:00.000Z'), - y: 224000, - }, - { - x: new Date('2021-02-08T00:00:00.000Z'), - y: 300000, - }, - { - x: new Date('2021-03-09T00:00:00.000Z'), - y: 298000, - }, - ], - color: DefaultPalette.green, - lineOptions: { - lineBorderWidth: '4', - }, - }, - { - legend: 'single point', - data: [ - { - x: new Date('2020-07-05T00:00:00.000Z'), - y: 282000, - }, - ], - color: DefaultPalette.yellow, - }, - ], - }; - - const rootStyle = { width: `${700}px`, height: `${300}px` }; - const margins = { left: 35, top: 20, bottom: 35, right: 20 }; - - return ( -
- -
- ); - }, - { includeRtl: true, includeDarkMode: true }, ); From b29bd1333cb8cc00ad0c17cc06d18165a09d7bd3 Mon Sep 17 00:00:00 2001 From: yush singla Date: Wed, 2 Aug 2023 11:49:23 +0530 Subject: [PATCH 11/24] testing for hovered image --- .../src/stories/react-charting/LineChart.stories.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 4a7121e4d7a57..df3c26188b2b4 100644 --- a/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx @@ -11,7 +11,12 @@ storiesOf('react-charting/LineChart', module) .addDecorator(story => { const steps = story.name === 'Basic' - ? new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() + ? new Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + // Selector to select a point on the line, to capture the callout + .hover('path[id^="circle"][id$="_0_5"]') + .snapshot('hover', { cropTo: '.testWrapper' }) + .end() : new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); return {story()}; From 91188ad6588d6a6e1f23f880ff7643994f6edd10 Mon Sep 17 00:00:00 2001 From: yush singla Date: Wed, 2 Aug 2023 12:51:48 +0530 Subject: [PATCH 12/24] testing for hover effect --- .../react-charting/AreaChart.stories.tsx | 12 +++++++++-- .../react-charting/LineChart.stories.tsx | 20 +++++++++---------- 2 files changed, 20 insertions(+), 12 deletions(-) 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 0b175bbc64b0b..b6172bb4db0d5 100644 --- a/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx @@ -7,8 +7,16 @@ import { DefaultPalette } from '@fluentui/react'; storiesOf('react-charting/AreaChart', module) .addDecorator(TestWrapperDecorator) - .addDecorator(story => { - const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); + .addDecorator((story, context) => { + const steps = + context.name.startsWith('Basic') || context.name.startsWith('Multiple') + ? new Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + // to hover over the area charts and show the callout + .hover('circle[id^="circle"]') + .snapshot('hover', { cropTo: '.testWrapper' }) + .end() + : new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); return {story()}; }) .addStory( 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 df3c26188b2b4..9f07156c3c0fb 100644 --- a/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx @@ -8,16 +8,16 @@ import { DataVizPalette, ICustomizedCalloutData } from '@fluentui/react-charting storiesOf('react-charting/LineChart', module) .addDecorator(TestWrapperDecorator) - .addDecorator(story => { - const steps = - story.name === 'Basic' - ? new Steps() - .snapshot('default', { cropTo: '.testWrapper' }) - // Selector to select a point on the line, to capture the callout - .hover('path[id^="circle"][id$="_0_5"]') - .snapshot('hover', { cropTo: '.testWrapper' }) - .end() - : new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); + .addDecorator((story, context) => { + console.log(context); + const steps = context.name.startsWith('Basic') + ? new Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + // Selector to select a point on the line, to capture the callout displayed + .hover('path[id^="circle"][id$="_0_5"]') + .snapshot('hover', { cropTo: '.testWrapper' }) + .end() + : new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); return {story()}; }) From 2f9fc8324debe66fa33be16bdc7e2310c2b74776 Mon Sep 17 00:00:00 2001 From: yush singla Date: Wed, 2 Aug 2023 12:53:14 +0530 Subject: [PATCH 13/24] hover event added --- apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 9f07156c3c0fb..a5fc8c5678631 100644 --- a/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx @@ -9,11 +9,10 @@ import { DataVizPalette, ICustomizedCalloutData } from '@fluentui/react-charting storiesOf('react-charting/LineChart', module) .addDecorator(TestWrapperDecorator) .addDecorator((story, context) => { - console.log(context); const steps = context.name.startsWith('Basic') ? new Steps() .snapshot('default', { cropTo: '.testWrapper' }) - // Selector to select a point on the line, to capture the callout displayed + // Selector to select a point on the line, to capture the callout .hover('path[id^="circle"][id$="_0_5"]') .snapshot('hover', { cropTo: '.testWrapper' }) .end() From 7e53ef47647c1c57d00e49afbcb89713853bbd59 Mon Sep 17 00:00:00 2001 From: yush singla Date: Wed, 2 Aug 2023 13:23:39 +0530 Subject: [PATCH 14/24] hover effect --- apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b6172bb4db0d5..7d226856daf04 100644 --- a/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx @@ -157,7 +157,7 @@ storiesOf('react-charting/AreaChart', module) { includeDarkMode: true, includeRtl: true }, ) .addStory( - 'Custom_Accessibility', + 'Custom Accessibility', () => { const chart1Points = [ { From a58d1855ce4bb72a1442cc21652c72f83b8a9ca9 Mon Sep 17 00:00:00 2001 From: yush singla Date: Thu, 3 Aug 2023 15:37:12 +0530 Subject: [PATCH 15/24] added area chart and line chart with hover effects defined --- .../react-charting/AreaChart.stories.tsx | 10 +++++++--- .../react-charting/LineChart.stories.tsx | 20 +++++++++++-------- 2 files changed, 19 insertions(+), 11 deletions(-) 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 7d226856daf04..65f8b32b9abe7 100644 --- a/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx @@ -6,14 +6,18 @@ import { AreaChart, ICustomizedCalloutData, ChartHoverCard } from '@fluentui/rea import { DefaultPalette } from '@fluentui/react'; storiesOf('react-charting/AreaChart', module) - .addDecorator(TestWrapperDecorator) + .addDecorator((story, context) => TestWrapperDecorator(story, context)) .addDecorator((story, context) => { const steps = - context.name.startsWith('Basic') || context.name.startsWith('Multiple') + (context.name.startsWith('Basic') || context.name.startsWith('Multiple')) && + !context.name.includes('RTL') ? new Steps() .snapshot('default', { cropTo: '.testWrapper' }) // to hover over the area charts and show the callout - .hover('circle[id^="circle"]') + .executeScript( + // eslint-disable-next-line @fluentui/max-len + `document.querySelector('rect').dispatchEvent(new MouseEvent('mouseover',{bubbles: true,cancelable: true,clientX:400,clientY:100}))`, + ) .snapshot('hover', { cropTo: '.testWrapper' }) .end() : new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); 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 a5fc8c5678631..dfe130b708bc4 100644 --- a/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/LineChart.stories.tsx @@ -9,14 +9,18 @@ import { DataVizPalette, ICustomizedCalloutData } from '@fluentui/react-charting storiesOf('react-charting/LineChart', module) .addDecorator(TestWrapperDecorator) .addDecorator((story, context) => { - const steps = context.name.startsWith('Basic') - ? new Steps() - .snapshot('default', { cropTo: '.testWrapper' }) - // Selector to select a point on the line, to capture the callout - .hover('path[id^="circle"][id$="_0_5"]') - .snapshot('hover', { cropTo: '.testWrapper' }) - .end() - : new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); + const steps = + context.name.startsWith('Basic') && !context.name.includes('RTL') + ? new Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + // Selector to select a point on the line, to capture the callout + .executeScript( + // eslint-disable-next-line @fluentui/max-len + `document.querySelectorAll('line[id^="line"]')[3].dispatchEvent(new MouseEvent('mouseover',{bubbles: true,cancelable: true}))`, + ) + .snapshot('hover', { cropTo: '.testWrapper' }) + .end() + : new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); return {story()}; }) From 1d7c5de43e658f25aad19002fce87b3b8569233d Mon Sep 17 00:00:00 2001 From: yush singla Date: Tue, 8 Aug 2023 17:42:14 +0530 Subject: [PATCH 16/24] added vr-tests for react-charting --- .../react-charting/DonutChart.stories.tsx | 87 ++++ .../react-charting/GaugeChart.stories.tsx | 59 +++ .../react-charting/HeatMapChart.stories.tsx | 320 ++++++++++++++ .../HorizontalBarChart.stories.tsx | 356 +++++++++++++++ .../MultiStackBarChart.stories.tsx | 261 +++++++++++ .../react-charting/Pichart.stories.tsx | 32 ++ .../react-charting/SankeyChart.stories.tsx | 272 ++++++++++++ .../react-charting/SparklineChart.stories.tsx | 403 +++++++++++++++++ .../VerticalBarChart.stories.tsx | 405 ++++++++++++++++++ .../MultiStackedBarChart.base.tsx | 2 +- 10 files changed, 2196 insertions(+), 1 deletion(-) create mode 100644 apps/vr-tests/src/stories/react-charting/DonutChart.stories.tsx create mode 100644 apps/vr-tests/src/stories/react-charting/GaugeChart.stories.tsx create mode 100644 apps/vr-tests/src/stories/react-charting/HeatMapChart.stories.tsx create mode 100644 apps/vr-tests/src/stories/react-charting/HorizontalBarChart.stories.tsx create mode 100644 apps/vr-tests/src/stories/react-charting/MultiStackBarChart.stories.tsx create mode 100644 apps/vr-tests/src/stories/react-charting/Pichart.stories.tsx create mode 100644 apps/vr-tests/src/stories/react-charting/SankeyChart.stories.tsx create mode 100644 apps/vr-tests/src/stories/react-charting/SparklineChart.stories.tsx create mode 100644 apps/vr-tests/src/stories/react-charting/VerticalBarChart.stories.tsx 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..0ff9122cbfeee --- /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 === 'Basic' + ? 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/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/Pichart.stories.tsx b/apps/vr-tests/src/stories/react-charting/Pichart.stories.tsx new file mode 100644 index 0000000000000..afbfb1c4d98b8 --- /dev/null +++ b/apps/vr-tests/src/stories/react-charting/Pichart.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()}; + }) + .addStory( + 'Basic', + () => { + 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 }, + ); 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..0c690f7d89d29 --- /dev/null +++ b/apps/vr-tests/src/stories/react-charting/VerticalBarChart.stories.tsx @@ -0,0 +1,405 @@ +import * as React from 'react'; +import { storiesOf } from '@storybook/react'; +import { TestWrapperDecorator } from '../../utilities/TestWrapperDecorator'; +import { Steps, StoryWright } from 'storywright'; +import { + ILineChartLineOptions, + IVSChartDataPoint, + IVerticalBarChartDataPoint, + IVerticalStackedChartProps, + VerticalBarChart, + VerticalStackedBarChart, +} from '@fluentui/react-charting'; +import { DefaultPalette } from '../../../../../packages/theme/src/index'; + +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', + () => { + 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', + () => { + 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 by tooltip', + y: 3000, + color: '#00188f', + }, + { + x: 'Data', + y: 2000, + color: '#0078d4', + }, + ]; + + const rootStyle = { width: '650px', height: '350px' }; + return ( +
+ +
+ ); + }, + { includeRtl: true }, + ) + .addStory( + 'Rotated Label', + () => { + 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', // Replaced DefaultPalette.blue + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '40%', + }, + { + legend: 'Metadata2', + data: 5, + color: '#00188f', // Replaced DefaultPalette.blueMid + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '5%', + }, + { + legend: 'Metadata3', + data: 20, + color: '#00bcf2', // Replaced DefaultPalette.blueLight + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '20%', + }, + ]; + + const secondChartPoints: IVSChartDataPoint[] = [ + { + legend: 'Metadata1', + data: 30, + color: '#0078d4', // Replaced DefaultPalette.blue + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '30%', + }, + { + legend: 'Metadata2', + data: 20, + color: '#00188f', // Replaced DefaultPalette.blueMid + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '20%', + }, + { + legend: 'Metadata3', + data: 40, + color: '#00bcf2', // Replaced DefaultPalette.blueLight + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '40%', + }, + ]; + + const thirdChartPoints: IVSChartDataPoint[] = [ + { + legend: 'Metadata1', + data: 44, + color: '#0078d4', // Replaced DefaultPalette.blue + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '44%', + }, + { + legend: 'Metadata2', + data: 28, + color: '#00188f', // Replaced DefaultPalette.blueMid + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '28%', + }, + { + legend: 'Metadata3', + data: 30, + color: '#00bcf2', // Replaced DefaultPalette.blueLight + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '30%', + }, + ]; + + const fourthChartPoints: IVSChartDataPoint[] = [ + { + legend: 'Metadata1', + data: 88, + color: '#0078d4', // Replaced DefaultPalette.blue + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '88%', + }, + { + legend: 'Metadata2', + data: 22, + color: '#00188f', // Replaced DefaultPalette.blueMid + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '22%', + }, + { + legend: 'Metadata3', + data: 30, + color: '#00bcf2', // Replaced DefaultPalette.blueLight + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '30%', + }, + ]; + + const data: IVerticalStackedChartProps[] = [ + { + chartData: firstChartPoints, + xAxisPoint: 0, + + ...(showLine && { + lineData: [ + { y: 42, legend: 'Supported Builds', color: DefaultPalette.magentaLight }, + { y: 10, legend: 'Recommended Builds', color: DefaultPalette.redDark }, + ], + }), + }, + { + chartData: secondChartPoints, + xAxisPoint: 20, + ...(showLine && { + lineData: [{ y: 33, legend: 'Supported Builds', color: DefaultPalette.magentaLight }], + }), + }, + { + chartData: thirdChartPoints, + xAxisPoint: 40, + ...(showLine && { + lineData: [ + { y: 60, legend: 'Supported Builds', color: DefaultPalette.magentaLight }, + { y: 20, legend: 'Recommended Builds', color: DefaultPalette.redDark }, + ], + }), + }, + { + chartData: firstChartPoints, + xAxisPoint: 60, + ...(showLine && { + lineData: [ + { y: 41, legend: 'Supported Builds', color: DefaultPalette.magentaLight }, + { y: 10, legend: 'Recommended Builds', color: DefaultPalette.redDark }, + ], + }), + }, + { + chartData: fourthChartPoints, + xAxisPoint: 80, + ...(showLine && { + lineData: [ + { y: 100, legend: 'Supported Builds', color: DefaultPalette.magentaLight }, + { y: 70, legend: 'Recommended Builds', color: DefaultPalette.redDark }, + ], + }), + }, + { + chartData: firstChartPoints, + xAxisPoint: 100, + }, + ]; + + const lineOptions: ILineChartLineOptions = { lineBorderWidth: '2' }; + + const rootStyle = { width: `${650}px`, height: `${350}px` }; + + return ( +
+ +
+ ); + }, + { includeDarkMode: true, includeRtl: true }, + ); diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx index b2f39a9d6132c..af60ce15be164 100644 --- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx @@ -163,6 +163,7 @@ export class MultiStackedBarChartBase extends React.Component { @@ -194,7 +195,6 @@ export class MultiStackedBarChartBase extends React.Component { const color: string = point.color From 99db8f9a489ccd833edf932270492d02b2ffafb1 Mon Sep 17 00:00:00 2001 From: yush singla Date: Tue, 8 Aug 2023 17:46:15 +0530 Subject: [PATCH 17/24] added yarn change file --- ...eact-charting-db3502d6-ad5b-4426-bcf7-9644b4a9db7b.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charting-db3502d6-ad5b-4426-bcf7-9644b4a9db7b.json 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" +} From 4f342a2dcad10e71d24aa6f6bea60304ebfe196d Mon Sep 17 00:00:00 2001 From: yush singla Date: Wed, 9 Aug 2023 10:33:10 +0530 Subject: [PATCH 18/24] linting error fixed --- .../src/stories/react-charting/HorizontalBarChart.stories.tsx | 2 +- .../components/StackedBarChart/MultiStackedBarChart.base.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/vr-tests/src/stories/react-charting/HorizontalBarChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/HorizontalBarChart.stories.tsx index 0ff9122cbfeee..c04c640297689 100644 --- a/apps/vr-tests/src/stories/react-charting/HorizontalBarChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/HorizontalBarChart.stories.tsx @@ -15,7 +15,7 @@ storiesOf('react-charting/HorizontalBarChart', module) .addDecorator((story, context) => TestWrapperDecorator(story, context)) .addDecorator((story, context) => { const steps = - context.name === 'Basic' + context.name.includes('Basic') && !context.name.includes('RTL') ? new Steps() .snapshot('default', { cropTo: '.testWrapper' }) .executeScript( diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx index af60ce15be164..67bd45710fb25 100644 --- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx @@ -163,12 +163,11 @@ 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) { @@ -195,6 +194,7 @@ export class MultiStackedBarChartBase extends React.Component { const color: string = point.color From fb6e8294a81a62bfe6e81bebdb2591e3501eb852 Mon Sep 17 00:00:00 2001 From: yush singla Date: Wed, 9 Aug 2023 11:47:15 +0530 Subject: [PATCH 19/24] code refactor fixes --- .../react-charting/LineChart.stories.tsx | 9 +++- .../VerticalBarChart.stories.tsx | 43 +++++++++---------- 2 files changed, 28 insertions(+), 24 deletions(-) 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/VerticalBarChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/VerticalBarChart.stories.tsx index 0c690f7d89d29..5e52debafbf00 100644 --- a/apps/vr-tests/src/stories/react-charting/VerticalBarChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/VerticalBarChart.stories.tsx @@ -10,7 +10,6 @@ import { VerticalBarChart, VerticalStackedBarChart, } from '@fluentui/react-charting'; -import { DefaultPalette } from '../../../../../packages/theme/src/index'; storiesOf('react-charting/VerticalBarChart', module) .addDecorator((story, context) => TestWrapperDecorator(story, context)) @@ -232,21 +231,21 @@ storiesOf('react-charting/VerticalBarChart', module) { legend: 'Metadata1', data: 40, - color: '#0078d4', // Replaced DefaultPalette.blue + color: '#0078d4', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '40%', }, { legend: 'Metadata2', data: 5, - color: '#00188f', // Replaced DefaultPalette.blueMid + color: '#00188f', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '5%', }, { legend: 'Metadata3', data: 20, - color: '#00bcf2', // Replaced DefaultPalette.blueLight + color: '#00bcf2', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '20%', }, @@ -256,21 +255,21 @@ storiesOf('react-charting/VerticalBarChart', module) { legend: 'Metadata1', data: 30, - color: '#0078d4', // Replaced DefaultPalette.blue + color: '#0078d4', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '30%', }, { legend: 'Metadata2', data: 20, - color: '#00188f', // Replaced DefaultPalette.blueMid + color: '#00188f', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '20%', }, { legend: 'Metadata3', data: 40, - color: '#00bcf2', // Replaced DefaultPalette.blueLight + color: '#00bcf2', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '40%', }, @@ -280,21 +279,21 @@ storiesOf('react-charting/VerticalBarChart', module) { legend: 'Metadata1', data: 44, - color: '#0078d4', // Replaced DefaultPalette.blue + color: '#0078d4', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '44%', }, { legend: 'Metadata2', data: 28, - color: '#00188f', // Replaced DefaultPalette.blueMid + color: '#00188f', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '28%', }, { legend: 'Metadata3', data: 30, - color: '#00bcf2', // Replaced DefaultPalette.blueLight + color: '#00bcf2', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '30%', }, @@ -304,21 +303,21 @@ storiesOf('react-charting/VerticalBarChart', module) { legend: 'Metadata1', data: 88, - color: '#0078d4', // Replaced DefaultPalette.blue + color: '#0078d4', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '88%', }, { legend: 'Metadata2', data: 22, - color: '#00188f', // Replaced DefaultPalette.blueMid + color: '#00188f', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '22%', }, { legend: 'Metadata3', data: 30, - color: '#00bcf2', // Replaced DefaultPalette.blueLight + color: '#00bcf2', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '30%', }, @@ -331,8 +330,8 @@ storiesOf('react-charting/VerticalBarChart', module) ...(showLine && { lineData: [ - { y: 42, legend: 'Supported Builds', color: DefaultPalette.magentaLight }, - { y: 10, legend: 'Recommended Builds', color: DefaultPalette.redDark }, + { y: 42, legend: 'Supported Builds', color: '#e3008c' }, + { y: 10, legend: 'Recommended Builds', color: '#a4262c' }, ], }), }, @@ -340,7 +339,7 @@ storiesOf('react-charting/VerticalBarChart', module) chartData: secondChartPoints, xAxisPoint: 20, ...(showLine && { - lineData: [{ y: 33, legend: 'Supported Builds', color: DefaultPalette.magentaLight }], + lineData: [{ y: 33, legend: 'Supported Builds', color: '#e3008c' }], }), }, { @@ -348,8 +347,8 @@ storiesOf('react-charting/VerticalBarChart', module) xAxisPoint: 40, ...(showLine && { lineData: [ - { y: 60, legend: 'Supported Builds', color: DefaultPalette.magentaLight }, - { y: 20, legend: 'Recommended Builds', color: DefaultPalette.redDark }, + { y: 60, legend: 'Supported Builds', color: '#e3008c' }, + { y: 20, legend: 'Recommended Builds', color: '#a4262c' }, ], }), }, @@ -358,8 +357,8 @@ storiesOf('react-charting/VerticalBarChart', module) xAxisPoint: 60, ...(showLine && { lineData: [ - { y: 41, legend: 'Supported Builds', color: DefaultPalette.magentaLight }, - { y: 10, legend: 'Recommended Builds', color: DefaultPalette.redDark }, + { y: 41, legend: 'Supported Builds', color: '#e3008c' }, + { y: 10, legend: 'Recommended Builds', color: '#a4262c' }, ], }), }, @@ -368,8 +367,8 @@ storiesOf('react-charting/VerticalBarChart', module) xAxisPoint: 80, ...(showLine && { lineData: [ - { y: 100, legend: 'Supported Builds', color: DefaultPalette.magentaLight }, - { y: 70, legend: 'Recommended Builds', color: DefaultPalette.redDark }, + { y: 100, legend: 'Supported Builds', color: '#e3008c' }, + { y: 70, legend: 'Recommended Builds', color: '#a4262c' }, ], }), }, From d16a0883be9914dbdbfcb854073ef14b147c992c Mon Sep 17 00:00:00 2001 From: yush singla Date: Thu, 10 Aug 2023 16:28:27 +0530 Subject: [PATCH 20/24] added more charts to vr-test, covered more scenarios --- .../react-charting/AreaChart.stories.tsx | 1 - .../stories/react-charting/Legend.stories.tsx | 286 ++++++++++++++++++ .../react-charting/Pichart.stories.tsx | 6 +- .../StackedBarChart.stories.tsx | 128 ++++++++ .../react-charting/TreeChart.stories.tsx | 211 +++++++++++++ .../VerticalBarChart.stories.tsx | 117 ++++++- 6 files changed, 743 insertions(+), 6 deletions(-) create mode 100644 apps/vr-tests/src/stories/react-charting/Legend.stories.tsx create mode 100644 apps/vr-tests/src/stories/react-charting/StackedBarChart.stories.tsx 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/Legend.stories.tsx b/apps/vr-tests/src/stories/react-charting/Legend.stories.tsx new file mode 100644 index 0000000000000..6a17b23b600cb --- /dev/null +++ b/apps/vr-tests/src/stories/react-charting/Legend.stories.tsx @@ -0,0 +1,286 @@ +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' }) + : 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/Pichart.stories.tsx b/apps/vr-tests/src/stories/react-charting/Pichart.stories.tsx index afbfb1c4d98b8..ac1e46d25173d 100644 --- a/apps/vr-tests/src/stories/react-charting/Pichart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/Pichart.stories.tsx @@ -8,11 +8,11 @@ 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()}; + return {story(context)}; }) .addStory( 'Basic', - () => { + (context: any) => { const points = [ { y: 50, x: 'A' }, { y: 25, x: 'B' }, @@ -23,7 +23,7 @@ storiesOf('react-charting/PieChart', module) ); diff --git a/apps/vr-tests/src/stories/react-charting/StackedBarChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/StackedBarChart.stories.tsx new file mode 100644 index 0000000000000..e3732504b4727 --- /dev/null +++ b/apps/vr-tests/src/stories/react-charting/StackedBarChart.stories.tsx @@ -0,0 +1,128 @@ +import * as React from 'react'; +import { storiesOf } from '@storybook/react'; +import { TestWrapperDecorator } from '../../utilities/TestWrapperDecorator'; +import { Steps, StoryWright } from 'storywright'; +import { IChartDataPoint, IChartProps, StackedBarChart } from '@fluentui/react-charting'; + +storiesOf('react-charting/StackedBarChart', 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: 3000000, + color: '#0078d4', + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '40%', + }, + { + legend: 'second', + data: 1, + color: '#107c10', + }, + ]; + + const data0: IChartProps = { + chartTitle: 'Stacked Bar chart example', + chartData: points, + }; + + const data1: IChartProps = { + chartTitle: 'Stacked Bar chart example with ignore fix style', + chartData: points, + }; + + return ( +
+ +
+ +
+ ); + }, + { 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 index e69de29bb2d1d..9a15f87609269 100644 --- a/apps/vr-tests/src/stories/react-charting/TreeChart.stories.tsx +++ 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 index 0aa12fa430bc9..421a6fa5e99c9 100644 --- a/apps/vr-tests/src/stories/react-charting/VerticalBarChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/VerticalBarChart.stories.tsx @@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react'; import { TestWrapperDecorator } from '../../utilities/TestWrapperDecorator'; import { Steps, StoryWright } from 'storywright'; import { + GroupedVerticalBarChart, ILineChartLineOptions, IVSChartDataPoint, IVerticalBarChartDataPoint, @@ -171,13 +172,14 @@ storiesOf('react-charting/VerticalBarChart', module) hideLegend={true} hideTooltip={false} showXAxisLablesTooltip={true} - wrapXAxisLables={false} + wrapXAxisLables={true} hideLabels={true} + secondaryYScaleOptions={{ yMaxValue: 17, yMinValue: 5 }} /> ); }, - { includeRtl: true }, + { includeRtl: true, includeDarkMode: true }, ) .addStory( 'Rotated Label', @@ -397,9 +399,120 @@ storiesOf('react-charting/VerticalBarChart', module) allowFocusOnLegends: true, }} hideLabels={false} + wrapXAxisLables={true} /> ); }, { includeDarkMode: true, includeRtl: true }, + ) + .addStory( + 'Grouped', + () => { + 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 }, ); From c5fdc4b7872765ba0ca5f36d56ff6cbcad4b9007 Mon Sep 17 00:00:00 2001 From: yush singla Date: Thu, 10 Aug 2023 17:10:03 +0530 Subject: [PATCH 21/24] legend vr fix --- apps/vr-tests/src/stories/react-charting/Legend.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/vr-tests/src/stories/react-charting/Legend.stories.tsx b/apps/vr-tests/src/stories/react-charting/Legend.stories.tsx index 6a17b23b600cb..7d56afc143923 100644 --- a/apps/vr-tests/src/stories/react-charting/Legend.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/Legend.stories.tsx @@ -15,6 +15,7 @@ storiesOf('react-charting/Legend', module) `document.querySelectorAll('div[class^="overflowIndicationTextStyle"]')[0].click()`, ) .snapshot('expanded', { cropTo: '.testWrapper' }) + .end() : new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); return {story()}; }) @@ -272,7 +273,7 @@ storiesOf('react-charting/Legend', module) ]; return ( -
+
Date: Thu, 10 Aug 2023 17:31:04 +0530 Subject: [PATCH 22/24] spell fixes --- .../{Pichart.stories.tsx => Piechart.stories.tsx} | 0 .../react-charting/src/components/AreaChart/AreaChart.base.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename apps/vr-tests/src/stories/react-charting/{Pichart.stories.tsx => Piechart.stories.tsx} (100%) diff --git a/apps/vr-tests/src/stories/react-charting/Pichart.stories.tsx b/apps/vr-tests/src/stories/react-charting/Piechart.stories.tsx similarity index 100% rename from apps/vr-tests/src/stories/react-charting/Pichart.stories.tsx rename to apps/vr-tests/src/stories/react-charting/Piechart.stories.tsx diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx index fec870d897a17..5a03d7c585b7c 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -134,7 +134,7 @@ export class AreaChartBase extends React.Component Date: Wed, 16 Aug 2023 13:04:45 +0530 Subject: [PATCH 23/24] added named tags for wrapped labels, secondary axis, etc --- .../VerticalBarChart.stories.tsx | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/apps/vr-tests/src/stories/react-charting/VerticalBarChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/VerticalBarChart.stories.tsx index 421a6fa5e99c9..6b8ef559da224 100644 --- a/apps/vr-tests/src/stories/react-charting/VerticalBarChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/VerticalBarChart.stories.tsx @@ -19,7 +19,7 @@ storiesOf('react-charting/VerticalBarChart', module) return {story()}; }) .addStory( - 'Basic', + 'Basic - Secondary Y Axis', () => { const points: IVerticalBarChartDataPoint[] = [ { @@ -129,6 +129,7 @@ storiesOf('react-charting/VerticalBarChart', module) lineLegendColor={'brown'} lineOptions={lineOptions} hideLabels={false} + secondaryYScaleOptions={{ yMaxValue: 17, yMinValue: 5 }} />
); @@ -136,7 +137,7 @@ storiesOf('react-charting/VerticalBarChart', module) { includeDarkMode: true, includeRtl: true }, ) .addStory( - 'Dynamic', + 'Dynamic - Wrap Labels', () => { const points: IVerticalBarChartDataPoint[] = [ { @@ -150,7 +151,7 @@ storiesOf('react-charting/VerticalBarChart', module) color: '#005a9e', }, { - x: 'Large data, showing all text by tooltip', + x: 'Large data, showing all text', y: 3000, color: '#00188f', }, @@ -170,11 +171,7 @@ storiesOf('react-charting/VerticalBarChart', module) height={350} width={650} hideLegend={true} - hideTooltip={false} - showXAxisLablesTooltip={true} - wrapXAxisLables={true} - hideLabels={true} - secondaryYScaleOptions={{ yMaxValue: 17, yMinValue: 5 }} + wrapXAxisLables />
); @@ -182,7 +179,7 @@ storiesOf('react-charting/VerticalBarChart', module) { includeRtl: true, includeDarkMode: true }, ) .addStory( - 'Rotated Label', + 'Rotated Label- Hide Legends', () => { const points: IVerticalBarChartDataPoint[] = [ { @@ -399,7 +396,6 @@ storiesOf('react-charting/VerticalBarChart', module) allowFocusOnLegends: true, }} hideLabels={false} - wrapXAxisLables={true} /> ); @@ -407,7 +403,7 @@ storiesOf('react-charting/VerticalBarChart', module) { includeDarkMode: true, includeRtl: true }, ) .addStory( - 'Grouped', + 'Grouped - Wrap Labels', () => { const data = [ { From c81937ce16029a6c6e8f45e8275958cbebaa5796 Mon Sep 17 00:00:00 2001 From: Yush Singla Date: Wed, 16 Aug 2023 17:14:16 +0530 Subject: [PATCH 24/24] spell fixes --- apps/vr-tests/src/stories/react-charting/Piechart.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/vr-tests/src/stories/react-charting/Piechart.stories.tsx b/apps/vr-tests/src/stories/react-charting/Piechart.stories.tsx index ac1e46d25173d..99f0e627f3909 100644 --- a/apps/vr-tests/src/stories/react-charting/Piechart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/Piechart.stories.tsx @@ -23,7 +23,7 @@ storiesOf('react-charting/PieChart', module) );