From 13b1ddc74783b6a0bf00aefcad5c329603b62bcb Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Wed, 4 Oct 2023 22:11:59 +0530 Subject: [PATCH 1/7] Adding comment in Hovercard that we support cumulative area chart currently --- .../react-charting/src/components/AreaChart/AreaChart.base.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx index 40209941efafa..0607112332918 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -178,6 +178,7 @@ export class AreaChartBase extends React.Component 1 ? 'Shown Y values are cumulative' : undefined, }; return ( Date: Wed, 4 Oct 2023 22:14:58 +0530 Subject: [PATCH 2/7] change file --- ...eact-charting-acfa7b51-4c62-47b3-b7fd-09a97c5e9d67.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charting-acfa7b51-4c62-47b3-b7fd-09a97c5e9d67.json diff --git a/change/@fluentui-react-charting-acfa7b51-4c62-47b3-b7fd-09a97c5e9d67.json b/change/@fluentui-react-charting-acfa7b51-4c62-47b3-b7fd-09a97c5e9d67.json new file mode 100644 index 0000000000000..733151944e4e6 --- /dev/null +++ b/change/@fluentui-react-charting-acfa7b51-4c62-47b3-b7fd-09a97c5e9d67.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "bug- 8599 Adding comment in Hovercard that we support cumulative area chart currently", + "packageName": "@fluentui/react-charting", + "email": "ankityadav@microsoft.com", + "dependentChangeType": "patch" +} From 36fe439668563b4de649172db42bd06a92b5fac1 Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Thu, 12 Oct 2023 16:39:45 +0530 Subject: [PATCH 3/7] Fixing review comments --- .../src/components/AreaChart/AreaChart.base.tsx | 1 - .../src/components/CommonComponents/CartesianChart.types.ts | 4 +++- .../react-charting/AreaChart/AreaChart.DataChange.Example.tsx | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx index 0607112332918..40209941efafa 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -178,7 +178,6 @@ export class AreaChartBase extends React.Component 1 ? 'Shown Y values are cumulative' : undefined, }; return ( ; + calloutProps?: Partial & { + descriptionMessage?: string; + }; /** * props for the svg; use this to include aria-* or other attributes on the tag diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx index 2e9ebc570340f..4da80ce6026ae 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx @@ -98,6 +98,7 @@ export class AreaChartDataChangeExample extends React.Component<{}, IAreaChartBa allowFocusOnLegends: true, }} enableReflow={true} + calloutProps={{ descriptionMessage: 'Shown Y values are cumulative' }} /> From 6f1127b1f2e103c8b096af40789f5c14346b1225 Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Thu, 12 Oct 2023 19:04:51 +0530 Subject: [PATCH 4/7] Fixing build failure --- packages/react-charting/etc/react-charting.api.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-charting/etc/react-charting.api.md b/packages/react-charting/etc/react-charting.api.md index 34749cf684792..caf8b854da723 100644 --- a/packages/react-charting/etc/react-charting.api.md +++ b/packages/react-charting/etc/react-charting.api.md @@ -207,7 +207,9 @@ export interface IBasestate { // @public export interface ICartesianChartProps { - calloutProps?: Partial; + calloutProps?: Partial & { + descriptionMessage?: string; + }; // @deprecated chartLabel?: string; className?: string; From 2424d2cdf5850096fe5b30cc86a85ab17e3b9cd0 Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Fri, 13 Oct 2023 16:31:04 +0530 Subject: [PATCH 5/7] Fixing review comment --- .../react-charting/etc/react-charting.api.md | 4 +- .../CommonComponents/CartesianChart.types.ts | 4 +- .../AreaChart.DataChange.Example.tsx | 44 ++++++++++++++++++- 3 files changed, 44 insertions(+), 8 deletions(-) diff --git a/packages/react-charting/etc/react-charting.api.md b/packages/react-charting/etc/react-charting.api.md index caf8b854da723..34749cf684792 100644 --- a/packages/react-charting/etc/react-charting.api.md +++ b/packages/react-charting/etc/react-charting.api.md @@ -207,9 +207,7 @@ export interface IBasestate { // @public export interface ICartesianChartProps { - calloutProps?: Partial & { - descriptionMessage?: string; - }; + calloutProps?: Partial; // @deprecated chartLabel?: string; className?: string; diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts index d6ebcb3b3392b..096d6c012596f 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts @@ -385,9 +385,7 @@ export interface ICartesianChartProps { /** * Callout customization props */ - calloutProps?: Partial & { - descriptionMessage?: string; - }; + calloutProps?: Partial; /** * props for the svg; use this to include aria-* or other attributes on the tag diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx index 4da80ce6026ae..9ca764dc0fe8a 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { AreaChart, IChartProps } from '@fluentui/react-charting'; +import { AreaChart, IChartProps, ICustomizedCalloutData } from '@fluentui/react-charting'; import * as d3 from 'd3-format'; import { ILineChartProps } from '@fluentui/react-charting'; import { DefaultButton } from '@fluentui/react/lib/Button'; @@ -98,7 +98,47 @@ export class AreaChartDataChangeExample extends React.Component<{}, IAreaChartBa allowFocusOnLegends: true, }} enableReflow={true} - calloutProps={{ descriptionMessage: 'Shown Y values are cumulative' }} + {...{ + onRenderCalloutPerStack: (props: ICustomizedCalloutData) => { + if (!props) { + return null; + } + const listOfElements: JSX.Element[] = []; + props.values.forEach(value => { + const element: JSX.Element = ( + <> +
+
+
+
+
{value.legend}
+
{value.y}
+
+
+
+
+ + ); + listOfElements.push(element); + }); + + return ( +
+
+
+
+ {props.x} +
+
+
{listOfElements}
+
Shown Y values are cumulative
+
+
+ ); + }, + }} /> From 0ee0046d29770d726126b8ee47d1aabcbd30474b Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Mon, 23 Oct 2023 18:35:24 +0530 Subject: [PATCH 6/7] Resolving review comments --- .../AreaChart.DataChange.Example.tsx | 47 ++----------------- 1 file changed, 5 insertions(+), 42 deletions(-) diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx index 9ca764dc0fe8a..8b5a3050bbfb6 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { AreaChart, IChartProps, ICustomizedCalloutData } from '@fluentui/react-charting'; +import { AreaChart, IChartProps } from '@fluentui/react-charting'; import * as d3 from 'd3-format'; import { ILineChartProps } from '@fluentui/react-charting'; import { DefaultButton } from '@fluentui/react/lib/Button'; @@ -98,48 +98,11 @@ export class AreaChartDataChangeExample extends React.Component<{}, IAreaChartBa allowFocusOnLegends: true, }} enableReflow={true} - {...{ - onRenderCalloutPerStack: (props: ICustomizedCalloutData) => { - if (!props) { - return null; - } - const listOfElements: JSX.Element[] = []; - props.values.forEach(value => { - const element: JSX.Element = ( - <> -
-
-
-
-
{value.legend}
-
{value.y}
-
-
-
-
- - ); - listOfElements.push(element); - }); - - return ( -
-
-
-
- {props.x} -
-
-
{listOfElements}
-
Shown Y values are cumulative
-
-
- ); - }, - }} /> +
+ Note: Y values in callout display individual values. Y value plotted on chart are cumulative for the + datapoint. +
From 2cf47003a9294dd3b6c6ebb2d1cd2cf7ea45db90 Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Mon, 23 Oct 2023 22:26:32 +0530 Subject: [PATCH 7/7] Resolving review comments --- ...eact-charting-acfa7b51-4c62-47b3-b7fd-09a97c5e9d67.json | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 change/@fluentui-react-charting-acfa7b51-4c62-47b3-b7fd-09a97c5e9d67.json diff --git a/change/@fluentui-react-charting-acfa7b51-4c62-47b3-b7fd-09a97c5e9d67.json b/change/@fluentui-react-charting-acfa7b51-4c62-47b3-b7fd-09a97c5e9d67.json deleted file mode 100644 index 733151944e4e6..0000000000000 --- a/change/@fluentui-react-charting-acfa7b51-4c62-47b3-b7fd-09a97c5e9d67.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "bug- 8599 Adding comment in Hovercard that we support cumulative area chart currently", - "packageName": "@fluentui/react-charting", - "email": "ankityadav@microsoft.com", - "dependentChangeType": "patch" -}