v8 snap: LineChart cherry-picks (#16634)

- Line chart: Last circle callout issue fixed (#16556) - Charting: Tooltip disappear on escape click issue fixed in line chart (#16491) Co-authored-by: Jameela Kowsar Shaik (Zen3 Infosolutions America Inc) <[email protected]>
microsoft · Jan 27, 2021 · 540e928 · 540e928
1 parent 7f659ff
commit 540e928
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/change/@fluentui-react-charting-2021-01-26-13-07-28-cherry-16556.json b/change/@fluentui-react-charting-2021-01-26-13-07-28-cherry-16556.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "LineChart fixes backported from v7 branch",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2021-01-26T12:07:28.833Z"
+}
diff --git a/packages/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
@@ -123,6 +123,9 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       target: this.state.refSelected,
       isBeakVisible: false,
       gapSpace: 15,
+      onDismiss: this._closeCallout,
+      preventDismissOnEvent: () => true,
+      hidden: !(!this.props.hideTooltip && this.state.isCalloutVisible),
       ...this.props.calloutProps,
     };
     const tickParams = {
@@ -292,6 +295,12 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     return legends;
   }
 
+  private _closeCallout = () => {
+    this.setState({
+      isCalloutVisible: false,
+    });
+  };
+
   private _createLines(): JSX.Element[] {
     const lines = [];
     if (this.state.isSelectedLegend) {
@@ -375,6 +384,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
           );
           if (j + 1 === this._points[i].data.length) {
             const lastCircleId = `${circleId}${j}L`;
+            const lastCirlceXCallout = this._points[i].data[j].xAxisCalloutData;
             lines.push(
               <circle
                 id={lastCircleId}
@@ -383,10 +393,10 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
                 cx={this._xAxisScale(x2)}
                 cy={this._yAxisScale(y2)}
                 data-is-focusable={i === 0 ? true : false}
-                onMouseOver={this._handleHover.bind(this, x2, y2, lineColor, xAxisCalloutData, lastCircleId)}
-                onMouseMove={this._handleHover.bind(this, x2, y2, lineColor, xAxisCalloutData, lastCircleId)}
+                onMouseOver={this._handleHover.bind(this, x2, y2, lineColor, lastCirlceXCallout, lastCircleId)}
+                onMouseMove={this._handleHover.bind(this, x2, y2, lineColor, lastCirlceXCallout, lastCircleId)}
                 onMouseOut={this._handleMouseOut.bind(this, lastCircleId, lineColor)}
-                onFocus={this._handleFocus.bind(this, lineId, x2, y2, lineColor, xAxisCalloutData, lastCircleId)}
+                onFocus={this._handleFocus.bind(this, lineId, x2, y2, lineColor, lastCirlceXCallout, lastCircleId)}
                 onBlur={this._handleMouseOut.bind(this, lastCircleId, lineColor)}
                 onClick={this._onDataPointClick.bind(
                   this,