Charting: Adding customized callout support to AreaChart and LineChart (

microsoft#15684)

Cherry-pick of microsoft#15361.

change/@fluentui-react-charting-2020-10-23-16-37-48-customCalloutForCharts.json

@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Charting: Adding customized callout support to AreaChart and LineChart.",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-23T23:37:48.170Z"
+}

packages/react-charting/src/components/AreaChart/AreaChart.base.tsx

@@ -7,6 +7,7 @@ import { find, getId, memoizeFunction } from '@fluentui/react/lib/Utilities';
 import {
   CartesianChart,
   IChartProps,
+  ICustomizedCalloutData,
   IAreaChartProps,
   IChildProps,
   IRefArrayData,
@@ -37,6 +38,8 @@ export interface IAreaChartState extends IBasestate {
   displayOfLine: string;
   activeCircleId: string;
   isCircleClicked: boolean;
+  dataPointCalloutProps?: ICustomizedCalloutData;
+  stackCalloutProps?: ICustomizedCalloutData;
 }
 
 export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartState> {
@@ -116,6 +119,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
         tickParams={tickParams}
         maxOfYVal={stackedInfo.maxOfYVal}
         getGraphData={this._getGraphData}
+        customizedCallout={this._getCustomizedCallout()}
         /* eslint-disable react/jsx-no-bind */
         // eslint-disable-next-line react/no-children-prop
         children={(props: IChildProps) => {
@@ -201,6 +205,14 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     };
   };
 
+  private _getCustomizedCallout = () => {
+    return this.props.onRenderCalloutPerStack
+      ? this.props.onRenderCalloutPerStack(this.state.stackCalloutProps)
+      : this.props.onRenderCalloutPerDataPoint
+      ? this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)
+      : null;
+  };
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private _getGraphData = (xAxis: any, yAxis: any, containerHeight: number, containerWidth: number) => {
     this._chart = this._drawGraph(containerHeight, xAxis, yAxis);
@@ -316,6 +328,8 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
       displayOfLine: 'visibility',
       activeCircleId: circleId,
       isCircleClicked: false,
+      stackCalloutProps: found!,
+      dataPointCalloutProps: found!,
     });
   };
 
@@ -349,6 +363,8 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
           displayOfLine: 'visibility',
           activeCircleId: circleId,
           isCircleClicked: false,
+          stackCalloutProps: found!,
+          dataPointCalloutProps: found!,
         });
       }
     });

packages/react-charting/src/components/AreaChart/AreaChart.types.ts

@@ -1,10 +1,11 @@
-import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 import {
   IChartProps,
   IRefArrayData,
   IBasestate,
   ILineChartDataPoint,
   ILineChartPoints,
+  ICustomizedCalloutData,
   IMargins,
 } from '../../types/index';
 import {
@@ -32,6 +33,16 @@ export interface IAreaChartProps extends ICartesianChartProps {
    * Call to provide customized styling that will layer on top of the variant rules.
    */
   styles?: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;
+
+  /**
+   * Define a custom callout renderer for a data point
+   */
+  onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;
+
+  /**
+   * Define a custom callout renderer for a stack; default is to render per data point
+   */
+  onRenderCalloutPerStack?: IRenderFunction<ICustomizedCalloutData>;
 }
 
 export interface IAreaChartStyles extends ICartesianChartStyles {}

packages/react-charting/src/components/LineChart/LineChart.base.tsx

@@ -9,6 +9,7 @@ import {
   IChildProps,
   ILineChartProps,
   ILineChartPoints,
+  ICustomizedCalloutData,
   IMargins,
   IRefArrayData,
   IColorFillBarsProps,
@@ -33,6 +34,10 @@ export interface ILineChartState extends IBasestate {
   // This is a boolean value which is set to true
   // when at least one legend is selected
   isSelectedLegend: boolean;
+  // This value will be used as customized callout props - point callout.
+  dataPointCalloutProps?: ICustomizedCalloutData;
+  // This value will be used as Customized callout props - For stack callout.
+  stackCalloutProps?: ICustomizedCalloutData;
 }
 
 export class LineChartBase extends React.Component<ILineChartProps, ILineChartState> {
@@ -137,6 +142,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
         getmargins={this._getMargins}
         getGraphData={this._initializeLineChartData}
         xAxisType={isXAxisDateType ? XAxisTypes.DateAxis : XAxisTypes.NumericAxis}
+        customizedCallout={this._getCustomizedCallout()}
         /* eslint-disable react/jsx-no-bind */
         // eslint-disable-next-line react/no-children-prop
         children={(props: IChildProps) => {
@@ -175,6 +181,14 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     );
   }
 
+  private _getCustomizedCallout = () => {
+    return this.props.onRenderCalloutPerStack
+      ? this.props.onRenderCalloutPerStack(this.state.stackCalloutProps)
+      : this.props.onRenderCalloutPerDataPoint
+      ? this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)
+      : null;
+  };
+
   private _getMargins = (margins: IMargins) => {
     this.margins = margins;
   };
@@ -498,6 +512,8 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
           refSelected: obj.refElement,
           hoverXValue: xAxisCalloutData ? xAxisCalloutData : '' + formattedData,
           YValueHover: found.values,
+          stackCalloutProps: found!,
+          dataPointCalloutProps: found!,
         });
       }
     });
@@ -528,6 +544,8 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       refSelected: mouseEvent,
       hoverXValue: xAxisCalloutData ? xAxisCalloutData : '' + formattedData,
       YValueHover: found.values,
+      stackCalloutProps: found!,
+      dataPointCalloutProps: found!,
     });
   };
 

packages/react-charting/src/components/LineChart/LineChart.types.ts

@@ -1,5 +1,12 @@
-import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
-import { IChartProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData } from '../../types/index';
+import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import {
+  IChartProps,
+  ILineChartPoints,
+  IMargins,
+  IBasestate,
+  IRefArrayData,
+  ICustomizedCalloutData,
+} from '../../types/index';
 import { IEventAnnotation } from '../../types/IEventAnnotation';
 import {
   ICartesianChartProps,
@@ -25,6 +32,16 @@ export interface ILineChartProps extends ICartesianChartProps {
    */
   eventAnnotationProps?: IEventsAnnotationProps;
 
+  /**
+   * Define a custom callout renderer for a data point
+   */
+  onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;
+
+  /**
+   * Define a custom callout renderer for a stack; default is to render per data point
+   */
+  onRenderCalloutPerStack?: IRenderFunction<ICustomizedCalloutData>;
+
   /*
    * Color fill bars for the chart,
    */

packages/react-charting/src/types/IDataPoint.ts

@@ -372,3 +372,20 @@ export interface IHeatMapChartData {
    */
   value: number;
 }
+
+export interface ICustomizedCalloutDataPoint {
+  legend: string;
+  y: number;
+  color: string;
+  xAxisCalloutData?: string;
+  yAxisCalloutData?: string | { [id: string]: number };
+}
+
+/**
+ * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,
+ * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.
+ */
+export interface ICustomizedCalloutData {
+  x: number | string | Date;
+  values: ICustomizedCalloutDataPoint[];
+}