Charting: Refactoring Vertical Bar Chart via implementation of Cartes…

…ian chart (#15639) * Charting: Refactoring Vertical Bar Chart via implementation of Cartesian chart. * Change files
microsoft · Oct 23, 2020 · 562ce21 · 562ce21
1 parent bed7f0a
commit 562ce21
Show file tree

Hide file tree

Showing 11 changed files with 385 additions and 584 deletions.
diff --git a/change/@fluentui-react-charting-2020-10-21-19-09-10-verticalBarChart.json b/change/@fluentui-react-charting-2020-10-21-19-09-10-verticalBarChart.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Charting: Refactoring Vertical Bar Chart via implementation of Cartesian chart.",
+  "packageName": "@fluentui/react-charting",
+  "email": "humbertomakotomorimoto@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-22T02:09:10.335Z"
+}
diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
@@ -203,9 +203,11 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
             {children}
           </svg>
         </FocusZone>
-        <div ref={(e: HTMLDivElement) => (this.legendContainer = e)} className={this._classNames.legendContainer}>
-          {this.props.legendBars}
-        </div>
+        {!this.props.hideLegend && (
+          <div ref={(e: HTMLDivElement) => (this.legendContainer = e)} className={this._classNames.legendContainer}>
+            {this.props.legendBars}
+          </div>
+        )}
         {!this.props.hideTooltip && calloutProps!.isCalloutVisible && (
           <Callout {...calloutProps}>
             {/** Given custom callout, then it will render */}
@@ -336,14 +338,17 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
 
   private _fitParentContainer(): void {
     const { containerWidth, containerHeight } = this.state;
-
     this._reqID = requestAnimationFrame(() => {
-      const legendContainerComputedStyles = getComputedStyle(this.legendContainer);
-      const legendContainerHeight =
-        (this.legendContainer.getBoundingClientRect().height || this.minLegendContainerHeight) +
-        parseFloat(legendContainerComputedStyles.marginTop || '0') +
-        parseFloat(legendContainerComputedStyles.marginBottom || '0');
-
+      let legendContainerHeight;
+      if (this.props.hideLegend) {
+        legendContainerHeight = 32;
+      } else {
+        const legendContainerComputedStyles = getComputedStyle(this.legendContainer);
+        legendContainerHeight =
+          (this.legendContainer.getBoundingClientRect().height || this.minLegendContainerHeight) +
+          parseFloat(legendContainerComputedStyles.marginTop || '0') +
+          parseFloat(legendContainerComputedStyles.marginBottom || '0');
+      }
       const container = this.props.parentRef ? this.props.parentRef : this.chartContainer;
       const currentContainerWidth = container.getBoundingClientRect().width;
       const currentContainerHeight =