Redesign of ChartHelper and updating associate files.

change/@uifabric-charting-2020-08-27-18-32-04-user-v-jasha-reDesignOfChartHelper.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Redesign of Chart helper and updated associate files",
+  "packageName": "@uifabric/charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-08-27T13:02:04.203Z"
+}

packages/charting/src/AreaChart.ts

@@ -0,0 +1 @@
+export * from './components/AreaChart/index';

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

@@ -5,17 +5,20 @@ import { select as d3Select, event as d3Event } from 'd3-selection';
 import { area as d3Area, stack as d3Stack, curveMonotoneX as d3CurveBasis } from 'd3-shape';
 import { getId, find } from 'office-ui-fabric-react/lib/Utilities';
 import { IPalette } from 'office-ui-fabric-react/lib/Styling';
-import { ILineChartProps, IBasestate, IChildProps } from '../LineChart/index';
+import {
+  IAreaChartProps,
+  IChildProps,
+  IRefArrayData,
+  IBasestate,
+  ILineChartDataPoint,
+  ILineChartPoints,
+  IMargins,
+} from '../AreaChart/index';
 import { ILegend, Legends } from '../Legends/index';
 import { DirectionalHint } from 'office-ui-fabric-react/lib/Callout';
-import { ILineChartDataPoint, ILineChartPoints } from '../../types/index';
-import { calloutData } from '../../utilities/index';
-import { ChartHelper } from '../CommonComponents/ChartHelper';
+import { calloutData, getXAxisType, ChartTypes } from '../../utilities/index';
+import { CartesianChart } from '../CommonComponents/CartesianChart';
 
-export interface IRefArrayData {
-  legendText?: string;
-  refElement?: SVGGElement;
-}
 export interface IAreaChartAreaPoint {
   xVal: string | number;
   values: IAreaChartDataSetPoint;
@@ -38,9 +41,10 @@ export interface IContainerValues {
 }
 export interface IAreaChartState extends IBasestate {
   _maxOfYVal: number;
+  isGraphDraw: boolean;
 }
 
-export class AreaChartBase extends React.Component<ILineChartProps, IAreaChartState> {
+export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartState> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private _calloutPoints: any;
   private _points: ILineChartPoints[];
@@ -49,17 +53,16 @@ export class AreaChartBase extends React.Component<ILineChartProps, IAreaChartSt
   private _colors: string[];
   private _keys: string[];
   private _refArray: IRefArrayData[];
-  private _isGraphDraw: boolean = true;
   private _uniqueIdForGraph: string;
   private _verticalLineId: string;
   private _circleId: string;
   private _uniqueCallOutID: string;
   private containerHeight: number;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private _xAxisScale: any;
-  private margins = { top: 20, right: 20, bottom: 35, left: 40 };
+  private margins: IMargins;
 
-  public constructor(props: ILineChartProps) {
+  public constructor(props: IAreaChartProps) {
     super(props);
     this.state = {
       activeLegend: '',
@@ -70,6 +73,7 @@ export class AreaChartBase extends React.Component<ILineChartProps, IAreaChartSt
       refSelected: null,
       YValueHover: [],
       _maxOfYVal: 0,
+      isGraphDraw: true,
     };
     this._refArray = [];
     this._points = this.props.data.lineChartData ? this.props.data.lineChartData : [];
@@ -80,18 +84,17 @@ export class AreaChartBase extends React.Component<ILineChartProps, IAreaChartSt
     this.dataSet = this._createDataSet();
   }
 
-  public componentDidUpdate(prevProps: ILineChartProps): void {
+  public componentDidUpdate(prevProps: IAreaChartProps): void {
     if (
       prevProps.data !== this.props.data ||
       prevProps.height !== this.props.height ||
       prevProps.width !== this.props.width ||
-      this._isGraphDraw
+      this.state.isGraphDraw
     ) {
       this._points = this.props.data.lineChartData ? this.props.data.lineChartData : [];
       this.dataSet = this._createDataSet();
       this._calloutPoints = this.props.data.lineChartData ? calloutData(this.props.data.lineChartData!) : [];
       this._drawGraph(this.containerHeight);
-      this._isGraphDraw = false;
     }
   }
 
@@ -100,22 +103,14 @@ export class AreaChartBase extends React.Component<ILineChartProps, IAreaChartSt
   }
 
   public render(): JSX.Element {
-    let isDateType = false;
-    if (this._points && this._points.length > 0) {
-      this._points.forEach((chartData: ILineChartPoints) => {
-        if (chartData.data.length > 0) {
-          isDateType = chartData.data[0].x instanceof Date;
-          return;
-        }
-      });
-    }
-
+    const isXAxisDateType = getXAxisType(this._points);
     this._keys = this._createKeys();
     const legends: JSX.Element = this._getLegendData(this.props.theme!.palette);
     const tickParams = {
       tickValues: this.props.tickValues,
       tickFormat: this.props.tickFormat,
     };
+
     const calloutProps = {
       target: this.state.refSelected,
       isCalloutVisible: this.state.isCalloutVisible,
@@ -128,15 +123,18 @@ export class AreaChartBase extends React.Component<ILineChartProps, IAreaChartSt
       setInitialFocus: true,
     };
     return (
-      <ChartHelper
+      <CartesianChart
         {...this.props}
         points={this._points}
-        tickParams={tickParams}
-        getGraphData={this._isGraphDraw && this._getGraphData}
+        getmargins={this._getMargins}
+        chartType={ChartTypes.AreaChart}
         calloutProps={calloutProps}
         legendBars={legends}
-        isXAxisDateType={isDateType}
+        isMultiStackCallout
+        isXAxisDateType={isXAxisDateType}
+        tickParams={tickParams}
         maxOfYVal={this.state._maxOfYVal}
+        getGraphData={this.state.isGraphDraw && this._getGraphData}
         /* eslint-disable react/jsx-no-bind */
         // eslint-disable-next-line react/no-children-prop
         children={(props: IChildProps) => {
@@ -192,10 +190,14 @@ export class AreaChartBase extends React.Component<ILineChartProps, IAreaChartSt
     return keys;
   };
 
+  private _getMargins = (margins: IMargins) => {
+    this.margins = margins;
+  };
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private _getGraphData = (xAxis: any, yAxis: any, containerHeight: number, containerWidth: number) => {
     this._xAxisScale = xAxis;
-    this._drawGraph(containerHeight);
+    containerHeight && this._drawGraph(containerHeight);
   };
 
   private _onLegendClick(customMessage: string): void {
@@ -204,27 +206,29 @@ export class AreaChartBase extends React.Component<ILineChartProps, IAreaChartSt
         this.setState({
           isLegendSelected: false,
           activeLegend: '',
+          isGraphDraw: true,
         });
       } else {
         this.setState({
           activeLegend: customMessage,
+          isGraphDraw: true,
         });
       }
     } else {
       this.setState({
         activeLegend: customMessage,
+        isGraphDraw: true,
       });
     }
-    this._isGraphDraw = true;
   }
 
   private _onLegendHover(customMessage: string): void {
     if (this.state.isLegendSelected === false) {
       this.setState({
         activeLegend: customMessage,
         isLegendHovered: true,
+        isGraphDraw: true,
       });
-      this._isGraphDraw = true;
     }
   }
 
@@ -234,8 +238,8 @@ export class AreaChartBase extends React.Component<ILineChartProps, IAreaChartSt
         activeLegend: '',
         isLegendHovered: false,
         isLegendSelected: isLegendFocused ? false : this.state.isLegendSelected,
+        isGraphDraw: true,
       });
-      this._isGraphDraw = true;
     }
   }
 
@@ -344,7 +348,7 @@ export class AreaChartBase extends React.Component<ILineChartProps, IAreaChartSt
       (this.state.isLegendSelected && this.state.activeLegend === presentData.legend)
     ) {
       this._refArray.forEach((obj: IRefArrayData) => {
-        if (obj.legendText === refArrayIndex) {
+        if (obj.index === refArrayIndex) {
           this.setState({
             refSelected: obj.refElement,
             isCalloutVisible: true,
@@ -365,7 +369,7 @@ export class AreaChartBase extends React.Component<ILineChartProps, IAreaChartSt
     xAxisCalloutData: string,
   ) => {
     this._uniqueCallOutID = circleId;
-    this._refArray.push({ legendText: circleId, refElement: d3Event.target });
+    this._refArray.push({ index: circleId, refElement: d3Event.target });
     d3Select('#' + circleId)
       .attr('fill', '#fff')
       .attr('r', 8)
@@ -396,13 +400,13 @@ export class AreaChartBase extends React.Component<ILineChartProps, IAreaChartSt
     if (this.state.isLegendHovered || this.state.isLegendSelected) {
       shouldHighlight = this.state.activeLegend === selectedArea;
     }
-    this._isGraphDraw = true;
     return shouldHighlight ? 'visibility' : 'hidden';
   };
 
   private _drawGraph = (containerHeight: number): void => {
     d3Select(`#firstGElementForChart123_${this._uniqueIdForGraph}`).remove();
     const that = this;
+    that.setState({ isGraphDraw: false });
     const xScale = this._xAxisScale;
     const chartContainer = d3Select(`#graphGElement_${this._uniqueIdForGraph}`)
       .append('g')
@@ -425,12 +429,12 @@ export class AreaChartBase extends React.Component<ILineChartProps, IAreaChartSt
       });
       stackedData.push(currentStack);
     });
-
+    // For stacked area chart, y max will be calculated as - max of addition of each chart value at x point
     const maxOfYVal = d3Max(stackedValues[stackedValues.length - 1], dp => dp[1])!;
     this.setState({ _maxOfYVal: maxOfYVal });
 
     const yScale = d3ScaleLinear()
-      .range([containerHeight - this.margins.bottom, this.margins.top])
+      .range([containerHeight - this.margins.bottom!, this.margins.top!])
       .domain([0, maxOfYVal]);
 
     const area = d3Area()

packages/charting/src/components/AreaChart/AreaChart.styles.ts

@@ -0,0 +1,5 @@
+import { IAreaChartStyleProps, IAreaChartStyles } from './AreaChart.types';
+
+export const getStyles = (props: IAreaChartStyleProps): IAreaChartStyles => {
+  return {};
+};

packages/charting/src/components/AreaChart/AreaChart.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { styled } from 'office-ui-fabric-react/lib/Utilities';
+import { IAreaChartProps, IAreaChartStyleProps, IAreaChartStyles } from './AreaChart.types';
+import { AreaChartBase } from '../AreaChart/AreaChart.base';
+import { getStyles } from './AreaChart.styles';
+
+// Create a AreaChart variant which uses these default styles and this styled subcomponent.
+export const AreaChart: React.FunctionComponent<IAreaChartProps> = styled<
+  IAreaChartProps,
+  IAreaChartStyleProps,
+  IAreaChartStyles
+>(AreaChartBase, getStyles);

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

@@ -0,0 +1,32 @@
+import { IStyleFunctionOrObject } from 'office-ui-fabric-react/lib/Utilities';
+import {
+  IChartProps,
+  IRefArrayData,
+  IBasestate,
+  ILineChartDataPoint,
+  ILineChartPoints,
+  IMargins,
+} from '../../types/index';
+import {
+  ICartesianChartStyles,
+  ICartesianChartStyleProps,
+  ICartesianChartProps,
+  IChildProps,
+} from '../CommonComponents/CartesianChart.types';
+
+export { IChildProps, IRefArrayData, IBasestate, ILineChartDataPoint, ILineChartPoints, IMargins };
+export interface IAreaChartProps extends ICartesianChartProps {
+  /**
+   * Data to render in the chart.
+   */
+  data: IChartProps;
+
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules.
+   */
+  styles?: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;
+}
+
+export interface IAreaChartStyles extends ICartesianChartStyles {}
+
+export interface IAreaChartStyleProps extends ICartesianChartStyleProps {}

packages/charting/src/components/AreaChart/AreaChartPage.tsx

@@ -31,7 +31,7 @@ export class AreaChart extends React.Component<IComponentDemoPageProps, {}> {
         }
         propertiesTables={
           <PropertiesTableSet
-            sources={[require<string>('!raw-loader!@uifabric/charting/src/components/LineChart/LineChart.types.ts')]}
+            sources={[require<string>('!raw-loader!@uifabric/charting/src/components/AreaChart/AreaChart.types.ts')]}
           />
         }
         overview={

packages/charting/src/components/AreaChart/examples/AreaChart.Basic.Example.tsx

@@ -115,7 +115,7 @@ export class AreaChartBasicExample extends React.Component<Readonly<{}>, {}> {
 
     return (
       <div className={rootStyle}>
-        <AreaChart height={400} width={650} showYAxisGridLines={true} data={chartData} />
+        <AreaChart height={400} width={650} data={chartData} />
       </div>
     );
   }

packages/charting/src/components/AreaChart/examples/AreaChart.Multiple.Example.tsx

@@ -163,7 +163,6 @@ export class AreaChartMultipleExample extends React.Component<Readonly<{}>, {}>
     return (
       <div className={rootStyle}>
         <AreaChart
-          showYAxisGridLines={true}
           height={400}
           width={650}
           data={chartData}

packages/charting/src/components/AreaChart/examples/AreaChart.Styled.Example.tsx

@@ -73,7 +73,7 @@ export class AreaChartStyledExample extends React.Component<Readonly<{}>, {}> {
 
     return (
       <div className={rootStyle}>
-        <AreaChart height={400} width={650} showYAxisGridLines={true} data={chartData} />
+        <AreaChart height={400} width={650} data={chartData} />
       </div>
     );
   }

packages/charting/src/components/AreaChart/index.ts

@@ -0,0 +1,2 @@
+export * from './AreaChart';
+export * from './AreaChart.types';