Charting: Vertical stacked bar chart refactoring and added minor features.

change/@uifabric-charting-2020-09-09-13-45-41-user-v-jasha-reDesignOfVSBC.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Vertical stacked bar chart code refactoring",
+  "packageName": "@uifabric/charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-09-09T08:15:41.172Z"
+}

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

@@ -14,7 +14,7 @@ import {
 } from '../AreaChart/index';
 import { ILegend, Legends } from '../Legends/index';
 import { DirectionalHint } from 'office-ui-fabric-react/lib/Callout';
-import { calloutData, getXAxisType, ChartTypes } from '../../utilities/index';
+import { calloutData, getXAxisType, ChartTypes, XAxisTypes } from '../../utilities/index';
 import { CartesianChart } from '../CommonComponents/CartesianChart';
 
 export interface IAreaChartAreaPoint {
@@ -134,10 +134,10 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
         calloutProps={calloutProps}
         legendBars={legends}
         isMultiStackCallout
-        isXAxisDateType={isXAxisDateType}
         tickParams={tickParams}
         maxOfYVal={stackedInfo.maxOfYVal}
         getGraphData={this._getGraphData}
+        xAxisType={isXAxisDateType ? XAxisTypes.DateAxis : XAxisTypes.NumericAxis}
         /* eslint-disable react/jsx-no-bind */
         // eslint-disable-next-line react/no-children-prop
         children={(props: IChildProps) => {

packages/charting/src/components/CommonComponents/CartesianChart.base.tsx

@@ -10,12 +10,14 @@ import {
 } from './CartesianChart.types';
 import {
   createNumericXAxis,
+  createStringXAxis,
   getDomainNRangeValues,
   createDateXAxis,
   createYAxis,
   additionalMarginRight,
   IMargins,
   getMinMaxOfYAxis,
+  XAxisTypes,
 } from '../../utilities/index';
 import { ChartHoverCard } from '../../utilities/ChartHoverCard/index';
 import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
@@ -73,21 +75,23 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
   }
 
   public render(): JSX.Element {
-    const { calloutProps, isXAxisDateType, points, chartType } = this.props;
+    const { calloutProps, points, chartType } = this.props;
     if (this.props.parentRef) {
       this._fitParentContainer();
     }
     // Callback for margins to the chart
     this.props.getmargins && this.props.getmargins(this.margins);
 
+    // TO DO: need to send xAxis types based on condition
     const XAxisParams = {
       domainNRangeValues: getDomainNRangeValues(
         points,
         this.margins,
         this.state.containerWidth,
         chartType,
-        isXAxisDateType,
         this._isRtl,
+        this.props.xAxisType,
+        this.props.barwidth!,
       ),
       xAxisElement: this.xAxisElement!,
       showRoundOffXTickValues: true,
@@ -107,9 +111,22 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
       yMinMaxValues: getMinMaxOfYAxis(points, chartType),
     };
 
-    const xScale = this.props.isXAxisDateType
-      ? createDateXAxis(XAxisParams, this.props.tickParams!, this._isRtl)
-      : createNumericXAxis(XAxisParams, this._isRtl);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let xScale: any;
+    switch (this.props.xAxisType!) {
+      case XAxisTypes.NumericAxis:
+        xScale = createNumericXAxis(XAxisParams, this._isRtl);
+        break;
+      case XAxisTypes.DateAxis:
+        xScale = createDateXAxis(XAxisParams, this.props.tickParams!, this._isRtl);
+        break;
+      case XAxisTypes.StringAxis:
+        xScale = createStringXAxis(XAxisParams, this.props.tickParams!, this._isRtl, points);
+        break;
+      default:
+        xScale = createNumericXAxis(XAxisParams, this._isRtl);
+    }
+
     const yScale = createYAxis(YAxisParams, this._isRtl);
 
     // Callback function for chart, returns axis
@@ -166,7 +183,6 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
           {this.props.legendBars}
         </div>
         {!this.props.hideTooltip && calloutProps!.isCalloutVisible && (
-          // need to handle for single callout (Future purpose)
           <Callout {...calloutProps}>
             {this.props.isMultiStackCallout ? (
               <div className={this._classNames.calloutContentRoot}>
@@ -228,6 +244,7 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
       y?: number;
       color?: string;
       yAxisCalloutData?: string | { [id: string]: number };
+      data?: string | number;
     },
     index: number,
     yValueHoverSubCountsExists: boolean,
@@ -251,7 +268,7 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
           >
             <div className={this._classNames.calloutlegendText}> {xValue.legend}</div>
             <div className={this._classNames.calloutContentY}>
-              {xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y}
+              {xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y || xValue.data}
             </div>
           </div>
         </div>

packages/charting/src/components/CommonComponents/CartesianChart.types.ts

@@ -5,8 +5,8 @@ import { IOverflowSetProps } from 'office-ui-fabric-react/lib/OverflowSet';
 import { IFocusZoneProps } from '@fluentui/react-focus';
 import { ICalloutProps } from 'office-ui-fabric-react/lib/Callout';
 import { ILegendsProps } from '../Legends/index';
-import { IMargins, ILineChartPoints } from '../../types/index';
-import { ChartTypes } from '../../utilities/index';
+import { IMargins, IDataPoint } from '../../types/index';
+import { ChartTypes, XAxisTypes } from '../../utilities/index';
 
 export interface ICartesianChartStyleProps {
   /**
@@ -277,6 +277,7 @@ export interface IYValueHover {
   legend?: string;
   y?: number;
   color?: string;
+  data?: string | number;
 }
 
 export interface IChildProps {
@@ -295,55 +296,73 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
    * Value used to draw y axis of that chart.
    */
   maxOfYVal?: number;
-  points: ILineChartPoints[];
+
   /**
-   * Type of chart
+   * Data of the chart
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  points: any;
+
+  /**
+   * Define type of the chart
    */
   chartType: ChartTypes;
+
+  /** X axis type */
+  xAxisType: XAxisTypes;
+
+  /**
+   * Legeds of the chart.
+   */
+  legendBars: JSX.Element;
+
+  /**
+   * Callout props
+   */
+  calloutProps: Partial<ICalloutProps> & {
+    isCalloutVisible: boolean;
+    id: string;
+    YValueHover?: IYValueHover[];
+    hoverXValue?: string | number | null;
+    legend?: string;
+    color?: string;
+    YValue?: string | number;
+    XValue?: string;
+  };
+
   /**
    * Callback method used for to get margins to the chart.
    */
   getmargins?: (margins: IMargins) => void;
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getGraphData?: any;
-  /**
-   * Legeds of the chart.
-   */
-  legendBars: JSX.Element;
+
   /**
    * Used for bar chart graphs.
    * To define width of the bar
    */
   barwidth?: number;
+
   /**
-   * Define is given X axis is date or numeric
-   */
-  isXAxisDateType: boolean;
-  /**
-   * Tick styles of the chart
+   * Used for tick styles of the x axis of the chart
    */
   tickParams?: {
     tickValues?: number[] | Date[];
     tickFormat?: string;
   };
+
   children(props: IChildProps): React.ReactNode;
+
   /**
    * To enable multi callout or single callout
-   *
+   * @default false
    * @type {boolean}
    */
-  isMultiStackCallout: boolean;
-  /**
-   * Callout props
+  isMultiStackCallout?: boolean;
+
+  /** dataset values to find out domain of the String axis
+   * Present using for only vertical stacked bar chart
    */
-  calloutProps: Partial<ICalloutProps> & {
-    isCalloutVisible: boolean;
-    id: string;
-    YValueHover?: IYValueHover[];
-    hoverXValue?: string | number | null;
-    legend?: string;
-    color?: string;
-    YValue?: string | number;
-    XValue?: string;
-  };
+  datasetForXAxisDomain?: IDataPoint[];
 }

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

@@ -6,7 +6,7 @@ import { getId, find } from 'office-ui-fabric-react/lib/Utilities';
 import { ILineChartProps, IChildProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData } from './LineChart.types';
 import { DirectionalHint } from 'office-ui-fabric-react/lib/Callout';
 import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
-import { calloutData, ChartTypes, getXAxisType } from '../../utilities/index';
+import { calloutData, ChartTypes, getXAxisType, XAxisTypes } from '../../utilities/index';
 import { CartesianChart } from '../CommonComponents/CartesianChart';
 
 type NumericAxis = D3Axis<number | { valueOf(): number }>;
@@ -111,13 +111,13 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
         {...this.props}
         points={this._points}
         chartType={ChartTypes.LineChart}
-        isXAxisDateType={isXAxisDateType}
         isMultiStackCallout
         calloutProps={calloutProps}
         tickParams={tickParams}
         legendBars={legendBars}
         getmargins={this._getMargins}
         getGraphData={this._getLinesData}
+        xAxisType={isXAxisDateType ? XAxisTypes.DateAxis : XAxisTypes.NumericAxis}
         /* eslint-disable react/jsx-no-bind */
         // eslint-disable-next-line react/no-children-prop
         children={(props: IChildProps) => {