From 15c00e497dae8adf9a10b95f1f42460aa908eb86 Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Thu, 28 Sep 2023 13:32:34 +0530 Subject: [PATCH 1/4] Fixing the issue of Going from stack callout to single callout and back to stack callout still shows the single callout --- ...VerticalStackedBarChart.Styled.Example.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx index 8d5ddcd722a09..ff16bd5467853 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx @@ -195,16 +195,18 @@ export class VerticalStackedBarChartStyledExample extends React.Component<{}, IV }, }} // eslint-disable-next-line react/jsx-no-bind - onRenderCalloutPerDataPoint={props => - props ? ( - - ) : null - } + {...(this.state.selectedCallout === 'singleCallout' && { + onRenderCalloutPerDataPoint: (props: IVSChartDataPoint) => { + return props ? ( + + ) : null; + }, + })} svgProps={{ 'aria-label': 'Example chart with metadata per month', }} From 955fd09422b8d10da040f87ac3006d53001ce16e Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Thu, 28 Sep 2023 17:31:52 +0530 Subject: [PATCH 2/4] Fix for if the bar y value is same, the single callout does not move from the first instance where the callout was shown --- .../VerticalStackedBarChart.base.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index b13c9fce25237..bb15cd610d7b2 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -62,6 +62,11 @@ enum CircleVisbility { hide = 'hidden', } +type CalloutAnchorPointType = { + xAxisDataPoint: string; + chartDataPoint: IVSChartDataPoint; +}; + export interface IVerticalStackedBarChartState extends IBasestate { dataPointCalloutProps?: IVSChartDataPoint; stackCalloutProps?: IVerticalStackedChartProps; @@ -87,7 +92,7 @@ export class VerticalStackedBarChartBase extends React.Component< private _lineObject: LineObject; private _tooltipId: string; private _yMax: number; - private _calloutAnchorPoint: IVSChartDataPoint | null; + private _calloutAnchorPoint: CalloutAnchorPointType | null; private _domainMargin: number; private _classNames: IProcessedStyleSet; private _emptyChartId: string; @@ -593,8 +598,11 @@ export class VerticalStackedBarChartBase extends React.Component< color: string, refSelected: React.MouseEvent | SVGGElement, ): void { - if (this._calloutAnchorPoint !== point) { - this._calloutAnchorPoint = point; + if (this._calloutAnchorPoint?.chartDataPoint !== point || this._calloutAnchorPoint?.xAxisDataPoint !== xAxisPoint) { + this._calloutAnchorPoint = { + chartDataPoint: point, + xAxisDataPoint: xAxisPoint, + }; this.setState({ refSelected, /** From aed61fb0af523f5f33bac2eecc93bb63be7d48c2 Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Thu, 28 Sep 2023 17:34:28 +0530 Subject: [PATCH 3/4] change file --- ...eact-charting-e365c5ce-592e-422f-9329-1bee461a0dc3.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charting-e365c5ce-592e-422f-9329-1bee461a0dc3.json diff --git a/change/@fluentui-react-charting-e365c5ce-592e-422f-9329-1bee461a0dc3.json b/change/@fluentui-react-charting-e365c5ce-592e-422f-9329-1bee461a0dc3.json new file mode 100644 index 0000000000000..89bfe6bef87d7 --- /dev/null +++ b/change/@fluentui-react-charting-e365c5ce-592e-422f-9329-1bee461a0dc3.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Fix for bug 9136 and 7997", + "packageName": "@fluentui/react-charting", + "email": "ankityadav@microsoft.com", + "dependentChangeType": "patch" +} From a175330eb0abe2f9abd9deb7b59f3d9bfac9236b Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Thu, 5 Oct 2023 13:50:51 +0530 Subject: [PATCH 4/4] Review commits --- ...i-react-charting-e365c5ce-592e-422f-9329-1bee461a0dc3.json | 2 +- .../VerticalStackedBarChart/VerticalStackedBarChart.base.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/change/@fluentui-react-charting-e365c5ce-592e-422f-9329-1bee461a0dc3.json b/change/@fluentui-react-charting-e365c5ce-592e-422f-9329-1bee461a0dc3.json index 89bfe6bef87d7..375f7e74e9222 100644 --- a/change/@fluentui-react-charting-e365c5ce-592e-422f-9329-1bee461a0dc3.json +++ b/change/@fluentui-react-charting-e365c5ce-592e-422f-9329-1bee461a0dc3.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "Fix for bug 9136 and 7997", + "comment": "Fix for bug 9136 and 7997 Fixing the issue of Going from stack callout to single callout and back to stack callout still shows the single callout. Also this consist of Fix for if the bar y value is same, the single callout does not move from the first instance where the callout was shown", "packageName": "@fluentui/react-charting", "email": "ankityadav@microsoft.com", "dependentChangeType": "patch" diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index bb15cd610d7b2..825e5b8da5eb5 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -62,7 +62,7 @@ enum CircleVisbility { hide = 'hidden', } -type CalloutAnchorPointType = { +type CalloutAnchorPointData = { xAxisDataPoint: string; chartDataPoint: IVSChartDataPoint; }; @@ -92,7 +92,7 @@ export class VerticalStackedBarChartBase extends React.Component< private _lineObject: LineObject; private _tooltipId: string; private _yMax: number; - private _calloutAnchorPoint: CalloutAnchorPointType | null; + private _calloutAnchorPoint: CalloutAnchorPointData | null; private _domainMargin: number; private _classNames: IProcessedStyleSet; private _emptyChartId: string;