Fixed Overlay Button placement issue.

Author: rohanoid5

example/DrillDown.js

@@ -13,6 +13,8 @@ class DrillDown extends React.Component {
     super(props);
 
     this.state = {
+      showOverlaybtn: true,
+      overlayZindex: 1,
       // Absolute position of Overlay Button
       positionH: (this.props.overlayBtn && this.props.overlayBtn.placement && this.props.overlayBtn.placement.includes('-')) ? this.props.overlayBtn.placement.split('-')[1] : 'right',
       positionV: (this.props.overlayBtn && this.props.overlayBtn.placement && this.props.overlayBtn.placement.includes('-')) ? this.props.overlayBtn.placement.split('-')[0] : 'top',
@@ -46,7 +48,7 @@ class DrillDown extends React.Component {
     if(typeof this.state.mappedIds[0] == 'number') {
       for (let i = 0; i < this.state.mappedIds.length; i++) {
         let plotPosition = this.state.mappedIds[i];
-        if(!this.state.showDrillDown && index == i && plotPosition && plotPosition < idArrLength) {
+        if(!this.state.showDrillDown && index == i && plotPosition != null && plotPosition < idArrLength) {
           this.setState({
             showDrillDown: true,
             selectedChild: plotPosition
@@ -68,6 +70,23 @@ class DrillDown extends React.Component {
     }
   }
 
+  renderComplete() {
+    if(this.props && this.props.toggleParentOverlayBtnVisibility) {
+      this.props.toggleParentOverlayBtnVisibility(false);
+    }
+  }
+
+  toggleParentOverlayBtnVisibility(visibility) {
+    this.setState({showOverlaybtn: visibility});
+  }
+
+  onClickOverlayBtn() {
+    this.setState({ showDrillDown: false });
+    if(this.props && this.props.toggleParentOverlayBtnVisibility && this.state.showDrillDown) {
+      this.props.toggleParentOverlayBtnVisibility(true);
+    }
+  }
+
   render() {
     // In-line style for overlay button
     const btnStyle = {
@@ -80,13 +99,11 @@ class DrillDown extends React.Component {
       fontWeight: `${this.state.fontWeight}`,
       position: 'absolute',
       [this.state.positionH]: `${this.state.margin}`,
-      // left: `${this.props.width - 50}px`,
       [this.state.positionV]: `${this.state.margin}`,
       cursor: 'pointer',
+      // zIndex: this.state.overlayZindex
     };
 
-    console.log(btnStyle);
-
     // In-line style for root element of DrillDown component
     const rootStyle = {
       position: 'relative',
@@ -101,15 +118,23 @@ class DrillDown extends React.Component {
           {/* Displaying Correct Drilled Down Chart. */}
           { React.cloneElement(
             this.props.children[this.state.selectedChild], 
-            { width: this.props.width, height: this.props.height }
+            { 
+              width: this.props.width, 
+              height: this.props.height, 
+              onRender: this.renderComplete.bind(this),
+              // overlayBtn: this.props.overlayBtn,
+              toggleParentOverlayBtnVisibility: this.toggleParentOverlayBtnVisibility.bind(this)
+            }
           )}
-          <span style={ btnStyle }
-            onClick={() => this.setState({ showDrillDown: false })}>
-              { 
-                this.props.overlayBtn && this.props.overlayBtn.message ? 
-                this.props.overlayBtn.message : 'Back'
-              }
-          </span>
+          { this.state.showOverlaybtn ?
+            <span style={ btnStyle }
+              onClick={this.onClickOverlayBtn.bind(this)}>
+                { 
+                  this.props.overlayBtn && this.props.overlayBtn.message ? 
+                  this.props.overlayBtn.message : 'Back'
+                }
+            </span> : null
+          }
         </div>
       );
     } else {

example/Example.js

@@ -118,7 +118,7 @@ const thirdDataSource = {
   }]
 };
 
-const mappedIdsIntegers = [1, null, 2, null, 0];
+const mappedIdsIntegers = [0, 1, 2, 3, null];
 
 const mappedIdsObjects = [
   {
@@ -140,7 +140,7 @@ class Example extends React.Component {
     super(props);
 
     this.state = {
-      mappedIds: mappedIdsObjects,
+      mappedIds: mappedIdsIntegers,
       dataSource: {
         chart: {
           caption: 'PARENT',
@@ -174,7 +174,7 @@ class Example extends React.Component {
 
   render() {
     return (
-      <div style={{display: 'flex', flexDirection: 'row'}}>
+      <div style={{ display: 'flex', flexDirection: 'row' }}>
         <DrillDown
           type="column2d"
           width='600'
@@ -193,13 +193,27 @@ class Example extends React.Component {
           dataSource={this.state.dataSource}
           mappedIds={this.state.mappedIds}>
           {/* Further Drilled Down */}
-          <DrillDown 
+          <DrillDown
             type="column2d"
             width='600'
             height='400'
             dataFormat="JSON"
+            overlayBtn={{ //This object holds the style of the overlay back button.
+              message: 'REVERT',
+              fontSize: '14px',
+              placement: 'top-right',
+              margin: '10px'
+              // position
+            }}
             dataSource={zerothDataScource}
-            mappedIds={[0, 2, 1]}> 
+            mappedIds={[0, 1, 2]}>
+            <DrillDown
+              type="column2d"
+              width='600'
+              height='400'
+              dataFormat="JSON"
+              dataSource={zerothDataScource}
+              mappedIds={[0, 1, 2]}>
               <ReactFC
                 type="bar2d"
                 width='800'
@@ -218,6 +232,25 @@ class Example extends React.Component {
                 height='100'
                 dataFormat="JSON"
                 dataSource={thirdDataSource} />
+            </DrillDown>
+            <ReactFC
+              type="bar2d"
+              width='800'
+              height='300'
+              dataFormat="JSON"
+              dataSource={firstDataSource} />
+            <ReactFC
+              type="pie2d"
+              width='200'
+              height='400'
+              dataFormat="JSON"
+              dataSource={secondDataSource} />
+            <ReactFC
+              type="column2d"
+              width='100'
+              height='100'
+              dataFormat="JSON"
+              dataSource={thirdDataSource} />
           </DrillDown>
           <ReactFC
             type="pie2d"
@@ -238,7 +271,7 @@ class Example extends React.Component {
             dataFormat="JSON"
             dataSource={thirdDataSource} />
         </DrillDown>
-        <div style={{height: 300, backgroundColor:'red', width: 400}}></div>
+        <div style={{ height: 300, backgroundColor: 'red', width: 400 }}></div>
       </div>
     )
   }