From 885386e2235b1443ecac366f980bd8d22c5eca36 Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Thu, 15 Dec 2022 15:12:19 +0530 Subject: [PATCH 1/2] hide callout on legend hover --- .../src/components/AreaChart/AreaChart.base.tsx | 1 + .../src/components/DonutChart/DonutChart.base.tsx | 1 + .../GroupedVerticalBarChart.base.tsx | 1 + .../components/HeatMapChart/HeatMapChart.base.tsx | 1 + .../src/components/LineChart/LineChart.base.tsx | 2 ++ .../StackedBarChart/MultiStackedBarChart.base.tsx | 2 ++ .../StackedBarChart/StackedBarChart.base.tsx | 1 + .../VerticalBarChart/VerticalBarChart.base.tsx | 2 ++ .../VerticalStackedBarChart.base.tsx | 14 ++++++++++++-- 9 files changed, 23 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 b464ef428cee3..514a61c217b73 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -476,6 +476,7 @@ export class AreaChartBase extends React.Component { + this._handleChartMouseLeave(); this._onLegendHover(singleChartData.legend); }, onMouseOutAction: () => { diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx index 3ac925f9cb9fb..be7f1189d3e70 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx +++ b/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx @@ -201,6 +201,7 @@ export class DonutChartBase extends React.Component { + this._handleChartMouseLeave(); this.setState({ activeLegend: point.legend! }); }, onMouseOutAction: () => { diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx index 6de55baa6c18c..824584c511b5a 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx @@ -475,6 +475,7 @@ export class GroupedVerticalBarChartBase extends React.Component< this._onLegendClick(point.legend); }, hoverAction: () => { + this._handleChartMouseLeave(); this._onLegendHover(point.legend); }, onMouseOutAction: () => { diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx index bb09cf019775e..04e6d95443251 100644 --- a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx +++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx @@ -399,6 +399,7 @@ export class HeatMapChartBase extends React.Component { + this._handleChartMouseLeave(); this._onLegendHover(item.legend); }, onMouseOutAction: () => { diff --git a/packages/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/react-charting/src/components/LineChart/LineChart.base.tsx index b01272cff9b38..286b574666960 100644 --- a/packages/react-charting/src/components/LineChart/LineChart.base.tsx +++ b/packages/react-charting/src/components/LineChart/LineChart.base.tsx @@ -383,6 +383,7 @@ export class LineChartBase extends React.Component { + this._handleChartMouseLeave(); this.setState({ activeLegend: point.legend }); }, ...(point.legendShape && { @@ -412,6 +413,7 @@ export class LineChartBase extends React.Component { + this._handleChartMouseLeave(); this.setState({ activeLegend: title }); }, opacity: this._getColorFillBarOpacity(colorFillBar), diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx index e107254bcee5d..96dbbba29971f 100644 --- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx @@ -338,6 +338,7 @@ export class MultiStackedBarChartBase extends React.Component { + this._handleChartMouseLeave(); this._onHover(point.legend!); }, onMouseOutAction: () => { @@ -363,6 +364,7 @@ export class MultiStackedBarChartBase extends React.Component { + this._handleChartMouseLeave(); this._onHover(point.legend!); }, onMouseOutAction: () => { diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx index b44d67627a08e..54ddd468de6d9 100644 --- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx @@ -241,6 +241,7 @@ export class StackedBarChartBase extends React.Component 0 ? () => { + this._handleChartMouseLeave(); this._onHover(point.legend!); } : undefined, diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx index 6f660ad768145..2c4325b74a114 100644 --- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx @@ -640,6 +640,7 @@ export class VerticalBarChartBase extends React.Component { + this._handleChartMouseLeave(); this._onLegendHover(point.legend!); }, onMouseOutAction: () => { @@ -656,6 +657,7 @@ export class VerticalBarChartBase extends React.Component { + this._handleChartMouseLeave(); this._onLegendHover(lineLegendText); }, onMouseOutAction: () => { diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index 21aa0b7098059..c0b972dc96918 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -497,7 +497,12 @@ export class VerticalStackedBarChartBase extends React.Component< action: () => { this._onLegendClick(point.legend); }, - hoverAction: allowHoverOnLegend ? () => this._onLegendHover(point.legend) : undefined, + hoverAction: allowHoverOnLegend + ? () => { + this._handleChartMouseLeave(); + this._onLegendHover(point.legend); + } + : undefined, onMouseOutAction: allowHoverOnLegend ? () => this._onLegendLeave() : undefined, }; @@ -514,7 +519,12 @@ export class VerticalStackedBarChartBase extends React.Component< action: () => { this._onLegendClick(point.title); }, - hoverAction: allowHoverOnLegend ? () => this._onLegendHover(point.title) : undefined, + hoverAction: allowHoverOnLegend + ? () => { + this._handleChartMouseLeave(); + this._onLegendHover(point.title); + } + : undefined, onMouseOutAction: allowHoverOnLegend ? () => this._onLegendLeave() : undefined, }; legendsOfLine.push(legend); From 690e9e45198a0bc59e2d665412d829611f6e4660 Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Thu, 15 Dec 2022 15:12:52 +0530 Subject: [PATCH 2/2] add change file --- ...eact-charting-f2e133de-6ad2-4585-8f2b-a9115bfa9341.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charting-f2e133de-6ad2-4585-8f2b-a9115bfa9341.json diff --git a/change/@fluentui-react-charting-f2e133de-6ad2-4585-8f2b-a9115bfa9341.json b/change/@fluentui-react-charting-f2e133de-6ad2-4585-8f2b-a9115bfa9341.json new file mode 100644 index 0000000000000..698d16f10cac0 --- /dev/null +++ b/change/@fluentui-react-charting-f2e133de-6ad2-4585-8f2b-a9115bfa9341.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Hide callout on legend hover", + "packageName": "@fluentui/react-charting", + "email": "kumarkshitij@microsoft.com", + "dependentChangeType": "patch" +}