margins default description added and minor changes to cartesian margins

microsoft · Oct 12, 2020 · b67c02f · b67c02f
1 parent 77abee4
commit b67c02f
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 22 deletions.
diff --git a/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx
@@ -59,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,
     };
   }
 
@@ -207,8 +213,9 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
                 this.yAxisElement = e;
               }}
               id={`yAxisGElement${this.idForGraph}`}
-              // Removing margins.right 2 times from width for RTL.
-              transform={`translate(${this._isRtl ? svgDimensions.width - 2 * this.margins.right! : 40}, 0)`}
+              transform={`translate(${
+                this._isRtl ? svgDimensions.width - this.margins.right! : this.margins.left!
+              }, 0)`}
               className={this._classNames.yAxis}
             />
             {children}

diff --git a/packages/charting/src/components/CommonComponents/CartesianChart.types.ts b/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;
 

diff --git a/packages/charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
@@ -374,9 +374,9 @@ export class VerticalStackedBarChartBase extends React.Component<
     });
   };
 
-  private _redirectToUrl(href: string): void {
-    href ? (window.location.href = href) : '';
-  }
+  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);
@@ -420,7 +420,7 @@ export class VerticalStackedBarChartBase extends React.Component<
           onMouseLeave: this._handleMouseOut,
           onFocus: this._onRectFocus.bind(this, point, singleChartData.xAxisPoint, color, refArrayIndexNumber),
           onBlur: this._handleMouseOut,
-          onClick: this._redirectToUrl.bind(this, this.props.href!),
+          onClick: this._redirectToUrl,
         };
         return (
           <rect
@@ -445,7 +445,7 @@ export class VerticalStackedBarChartBase extends React.Component<
         onMouseLeave: this._handleMouseOut,
         onFocus: this._onStackFocus.bind(this, singleChartData.xAxisPoint),
         onBlur: this._handleMouseOut,
-        onClick: this._redirectToUrl.bind(this, this.props.href!),
+        onClick: this._redirectToUrl,
       };
       return (
         <g
@@ -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 ? this.margins.right! : 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 ? this.margins.right! : 0),
+        containerWidth - this.margins.right! - endpointDistance - 0.5 * this._barWidth,
       ]);
     const yBarScale = d3ScaleLinear()
       .domain([0, yMax])

diff --git a/packages/charting/src/utilities/utilities.ts b/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;
 }
@@ -529,7 +533,7 @@ export function domainRangeOfDateForAreaChart(
   });
 
   const rStartValue = margins.left!;
-  const rEndValue = width - margins.right! - (isRTL ? margins.right! : 0);
+  const rEndValue = width - margins.right!;
 
   return isRTL
     ? { dStartValue: lDate, dEndValue: sDate, rStartValue, rEndValue }
@@ -563,7 +567,7 @@ export function domainRangeOfNumericForAreaChart(
   })!;
 
   const rStartValue = margins.left!;
-  const rEndValue = width - margins.right! - (isRTL ? margins.right! : 0);
+  const rEndValue = width - margins.right!;
 
   return isRTL
     ? { dStartValue: xMax, dEndValue: xMin, rStartValue, rEndValue }
@@ -583,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 ? margins.right! : 0);
+  const rMax = width - margins.right!;
 
   return isRTL
     ? { dStartValue: 0, dEndValue: 0, rStartValue: rMax, rEndValue: rMin }
@@ -627,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 ? margins.right! : 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 };