Charting: Vertical stacked bar chart minor changes including uncaught type error issue fix.

change/@fluentui-react-examples-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Vertical stacked bar chart styled examples code updated.",
+  "packageName": "@fluentui/react-examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-09T15:29:43.827Z"
+}

change/@uifabric-charting-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Vertical stacked bar chart uncaught type error fixed. Minor edits to margins",
+  "packageName": "@uifabric/charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-09T15:29:42.466Z"
+}

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

@@ -15,7 +15,6 @@ import {
   createDateXAxis,
   createYAxis,
   createStringYAxis,
-  additionalMarginRight,
   IMargins,
   getMinMaxOfYAxis,
   XAxisTypes,
@@ -60,11 +59,17 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
       _height: this.props.height || 350,
     };
     this.idForGraph = getId('chart_');
+    /**
+     * In RTL mode, Only graph will be rendered left/right. We need to provide left and right margins manually.
+     * So that, in RTL, left margins becomes right margins and viceversa.
+     * As graph needs to be drawn perfecty, these values consider as default values.
+     * Same margins using for all other cartesian charts. Can be accessible through 'getMargins' call back method.
+     */
     this.margins = {
       top: this.props.margins?.top || 20,
-      right: this.props.margins?.right || 20,
       bottom: this.props.margins?.bottom || 35,
-      left: this.props.margins?.left || 40,
+      right: this._isRtl ? this.props.margins?.left || 40 : this.props.margins?.right || 20,
+      left: this._isRtl ? this.props.margins?.right || 20 : this.props.margins?.left || 40,
     };
   }
 
@@ -200,7 +205,7 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
                 this.xAxisElement = e;
               }}
               id={`xAxisGElement${this.idForGraph}`}
-              transform={`translate(0, ${svgDimensions.height - 35})`}
+              transform={`translate(0, ${svgDimensions.height - this.margins.bottom!})`}
               className={this._classNames.xAxis}
             />
             <g
@@ -209,7 +214,7 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
               }}
               id={`yAxisGElement${this.idForGraph}`}
               transform={`translate(${
-                this._isRtl ? svgDimensions.width - this.margins.right! - additionalMarginRight : 40
+                this._isRtl ? svgDimensions.width - this.margins.right! : this.margins.left!
               }, 0)`}
               className={this._classNames.yAxis}
             />

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

@@ -157,6 +157,12 @@ export interface ICartesianChartProps {
 
   /**
    * Margins for the chart
+   * @default top: 20
+   * @default bottom: 35
+   * @default left: 40
+   * @default right: 20
+   *
+   * To avoid edge cuttings to the chart, we recommend you use default values or greater then default values
    */
   margins?: IMargins;
 

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

@@ -298,7 +298,6 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
       >
         <div
           className={classNames.overflowIndicationTextStyle}
-          // eslint-disable-next-line react/jsx-no-bind
           ref={(rootElem: HTMLDivElement) => (this._hoverCardRef = rootElem)}
           {...(allowFocusOnLegends && {
             'aria-expanded': this.state.isHoverCardVisible,
@@ -378,7 +377,6 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
         {...(data.nativeButtonProps && { ...data.nativeButtonProps })}
         key={index}
         className={classNames.legend}
-        /* eslint-disable react/jsx-no-bind */
         onClick={onClickHandler}
         onMouseOver={onHoverHandler}
         onMouseOut={onMouseOut}

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

@@ -21,7 +21,7 @@ import {
   IVSChartDataPoint,
 } from '../../index';
 import { FocusZoneDirection } from '@fluentui/react-focus';
-import { ChartTypes, XAxisTypes, additionalMarginRight } from '../../utilities/index';
+import { ChartTypes, XAxisTypes } from '../../utilities/index';
 
 const getClassNames = classNamesFunction<IVerticalStackedBarChartStyleProps, IVerticalStackedBarChartStyles>();
 type NumericAxis = D3Axis<number | { valueOf(): number }>;
@@ -374,9 +374,9 @@ export class VerticalStackedBarChartBase extends React.Component<
     });
   };
 
-  private _redirectToUrl(): void {
+  private _redirectToUrl = (): void => {
     this.props.href ? (window.location.href = this.props.href) : '';
-  }
+  };
 
   private _getYMax(dataset: IDataPoint[]) {
     return Math.max(d3Max(dataset, (point: IDataPoint) => point.y)!, this.props.yMaxValue || 0);
@@ -471,10 +471,7 @@ export class VerticalStackedBarChartBase extends React.Component<
     const xBarScale = d3ScaleLinear()
       .domain(this._isRtl ? [xMax, 0] : [0, xMax])
       .nice()
-      .range([
-        this.margins.left!,
-        containerWidth - this.margins.right! - this._barWidth - (this._isRtl ? additionalMarginRight : 0),
-      ]);
+      .range([this.margins.left!, containerWidth - this.margins.right! - this._barWidth]);
     const yBarScale = d3ScaleLinear()
       .domain([0, yMax])
       .range([0, containerHeight - this.margins.bottom! - this.margins.top!]);
@@ -490,11 +487,7 @@ export class VerticalStackedBarChartBase extends React.Component<
       .domain(this._isRtl ? [this._dataset.length - 1, 0] : [0, this._dataset.length - 1])
       .range([
         this.margins.left! + endpointDistance - 0.5 * this._barWidth,
-        containerWidth -
-          this.margins.right! -
-          endpointDistance -
-          0.5 * this._barWidth -
-          (this._isRtl ? additionalMarginRight : 0),
+        containerWidth - this.margins.right! - endpointDistance - 0.5 * this._barWidth,
       ]);
     const yBarScale = d3ScaleLinear()
       .domain([0, yMax])

packages/charting/src/utilities/utilities.ts

@@ -46,18 +46,22 @@ export interface IWrapLabelProps {
 export interface IMargins {
   /**
    * left margin for the chart.
+   * @default 40
    */
   left?: number;
   /**
    * Right margin for the chart.
+   * @default 20
    */
   right?: number;
   /**
    * Top margin for the chart.
+   * @default 20
    */
   top?: number;
   /**
    * Bottom margin for the chart.
+   * @default 35
    */
   bottom?: number;
 }
@@ -118,7 +122,6 @@ export interface IFitContainerParams {
   legendContainer: HTMLDivElement;
   container: HTMLDivElement | null | HTMLElement;
 }
-export const additionalMarginRight: number = 20;
 
 /**
  * Create Numeric X axis
@@ -530,7 +533,7 @@ export function domainRangeOfDateForAreaChart(
   });
 
   const rStartValue = margins.left!;
-  const rEndValue = width - margins.right! - (isRTL ? additionalMarginRight : 0);
+  const rEndValue = width - margins.right!;
 
   return isRTL
     ? { dStartValue: lDate, dEndValue: sDate, rStartValue, rEndValue }
@@ -564,7 +567,7 @@ export function domainRangeOfNumericForAreaChart(
   })!;
 
   const rStartValue = margins.left!;
-  const rEndValue = width - margins.right! - (isRTL ? additionalMarginRight : 0);
+  const rEndValue = width - margins.right!;
 
   return isRTL
     ? { dStartValue: xMax, dEndValue: xMin, rStartValue, rEndValue }
@@ -584,7 +587,7 @@ export function domainRangeOfNumericForAreaChart(
  */
 export function domainRangeOfStrForVSBC(margins: IMargins, width: number, isRTL: boolean): IDomainNRange {
   const rMin = margins.left!;
-  const rMax = width - margins.right! - (isRTL ? additionalMarginRight : 0);
+  const rMax = width - margins.right!;
 
   return isRTL
     ? { dStartValue: 0, dEndValue: 0, rStartValue: rMax, rEndValue: rMin }
@@ -628,7 +631,7 @@ export function domainRangeOfVSBCNumeric(
   const xMax = d3Max(points, (point: IDataPoint) => point.x as number)!;
   // barWidth / 2 - for to get tick middle of the bar
   const rMax = margins.left! + barWidth / 2;
-  const rMin = width - margins.right! - barWidth / 2 - (isRTL ? additionalMarginRight : 0);
+  const rMin = width - margins.right! - barWidth / 2;
   return isRTL
     ? { dStartValue: xMax, dEndValue: xMin, rStartValue: rMax, rEndValue: rMin }
     : { dStartValue: xMin, dEndValue: xMax, rStartValue: rMax, rEndValue: rMin };

packages/react-examples/src/charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx

@@ -74,6 +74,11 @@ export class VerticalStackedBarChartStyledExample extends React.Component<{}, IV
 
     const customStyles: IVerticalStackedBarChartProps['styles'] = () => {
       return {
+        xAxis: {
+          selectors: {
+            text: { fill: 'black', fontSize: '8px' },
+          },
+        },
         chart: {
           paddingBottom: '45px',
         },
@@ -99,6 +104,7 @@ export class VerticalStackedBarChartStyledExample extends React.Component<{}, IV
             height={this.state.height}
             width={this.state.width}
             yAxisTickCount={10}
+            // Just test link
             href={'www.google.com'}
             // eslint-disable-next-line react/jsx-no-bind
             styles={customStyles}
@@ -109,7 +115,11 @@ export class VerticalStackedBarChartStyledExample extends React.Component<{}, IV
             }}
             // eslint-disable-next-line react/jsx-no-bind
             yAxisTickFormat={(x: number | string) => `${x} h`}
-            margins={{ left: 50 }}
+            margins={{
+              bottom: 40,
+              left: 45,
+              right: 30,
+            }}
             legendProps={{
               allowFocusOnLegends: true,
               styles: {
@@ -118,8 +128,8 @@ export class VerticalStackedBarChartStyledExample extends React.Component<{}, IV
                 },
               },
             }}
-            // eslint-disable-next-line react/jsx-no-bind
-            onRenderCalloutPerDataPoint={props =>
+            // eslint-disable-next-line react/jsx-no-bind @typescript-eslint/no-explicit-any
+            onRenderCalloutPerDataPoint={(props: any) =>
               props ? (
                 <ChartHoverCard
                   XValue={props.xAxisCalloutData}