Code cleanup and minor bug fix.

Author: rohanoid5

example/ChartViewer.js

@@ -4,7 +4,7 @@ import Charts from 'fusioncharts/fusioncharts.charts';
 import OceanTheme from 'fusioncharts/themes/fusioncharts.theme.ocean';
 import ReactFC from '../lib/ReactFC';
 
-Charts(FusionCharts);
+// Charts(FusionCharts);
 OceanTheme(FusionCharts);
 
 const myDataSource = {

example/DrillDown.js

@@ -14,16 +14,11 @@ class DrillDown extends React.Component {
     this.state = {
       selectedChild: 0,
       showDrillDown: false,
-      dataSource: this.props.dataSource, // Parent Chat's Data Source
-      mappedIds: this.props.mappedIds, // An array of indices which maps each 
-      // data plot of parent with its nested Chart Component.
-      chartConfig: { // Parent Chart Config.
-        type: 'column2d',
-        width: 600,
-        height: 400,
-        dataFormat: 'json',
-        dataSource: this.props.dataSource,
-      },
+      // Parent Chat's Data Source
+      dataSource: this.props.dataSource,
+      // An array of indices which maps each 
+      // data plot of parent with its nested Chart Component. 
+      mappedIds: this.props.mappedIds, 
       borderColor: (this.props.overlayBtn && this.props.overlayBtn.borderColor) ? this.props.overlayBtn.borderColor : '#000',
       backgroundColor: (this.props.overlayBtn && this.props.overlayBtn.backgroundColor) ? this.props.overlayBtn.backgroundColor : '#F6F6F6',
       color: (this.props.overlayBtn && this.props.overlayBtn.color) ? this.props.overlayBtn.color : '#000',
@@ -37,14 +32,18 @@ class DrillDown extends React.Component {
   plotClicked(e) {
     //Index of the data plot that is clicked.
     let index = e.data.index;
+    if(index <= this.state.mappedIds.length) {
+      console.log('OUT OF BOUND');
+      return;
+    }
     //Index of Drilled Down Chart.
     let plotPosition = this.state.mappedIds[index];
 
     if (!this.state.showDrillDown && plotPosition >= 0) {
       this.setState({
         showDrillDown: true,
         selectedChild: plotPosition
-      })
+      });
     }
   }
 
@@ -64,17 +63,23 @@ class DrillDown extends React.Component {
       cursor: 'pointer',
     };
 
+    console.log(btnStyle);
+
     return (
       <div style={{
         position: 'relative',
       }}>
-        {this.state.showDrillDown ?
-          <div style={{position: 'relative'}}>
-            <span style={btnStyle}
+        { this.state.showDrillDown ?
+          <div style={{ position: 'relative' }}>
+            <span style={ btnStyle }
               onClick={() => this.setState({ showDrillDown: false })}>
-                {this.props.overlayBtn && this.props.overlayBtn.message ? this.props.overlayBtn.message : 'Revert'}
+              { 
+                this.props.overlayBtn && this.props.overlayBtn.message ? 
+                this.props.overlayBtn.message : 'Revert'
+              }
             </span>
-            {this.props.children[this.state.selectedChild]} {/* Displaying Correct Drilled Down Chart. */}
+            {/* Displaying Correct Drilled Down Chart. */}
+            { this.props.children[this.state.selectedChild] } 
           </div> :
           <ReactFC
             type={this.props.type}

example/Example.js

@@ -123,7 +123,7 @@ class Example extends React.Component {
     super(props)
 
     this.state = {
-      mappedIds: [0, 1, 2],
+      mappedIds: [1],
       dataSource: {
         chart: {
           caption: 'PARENT',
@@ -164,10 +164,11 @@ class Example extends React.Component {
           height='400'
           dataFormat="JSON"
           overlayBtn={{ //This object holds the style of the overlay back button.
-            message: 'Back',
+            message: 'BACK',
             fontColor: '#880000',
             bgColor: '#FFEEEE',
             borderColor: '#660000',
+            fontSize: '12px'
           }}
           dataSource={this.state.dataSource}
           mappedIds={this.state.mappedIds}>
@@ -216,6 +217,7 @@ class Example extends React.Component {
             height='400'
             dataFormat="JSON"
             dataSource={thirdDataSource} />
+            <a href="https://www.google.com">Google</a>
         </DrillDown>
       </div>
     )

example/index.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ChartViewer from './ChartViewer';
-import DrillDown from './DrillDown';
 import Example from './Example';
 
 ReactDOM.render(<Example />, document.getElementById('root'));