Merge pull request #57 from fusioncharts/feature/events-fix-for-rn-webview-bridge

Core change in React Native - Webview bridge

Author: rohanoid5

.DS_Store

@@ -7,41 +7,175 @@
  */
 
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Button } from 'react-native';
 
 import FusionCharts from 'react-native-fusioncharts';
 
+const dataSource = {
+  chart: {
+    caption: 'Business Results 2005 v 2006',
+    xaxisname: 'Month',
+    yaxisname: 'Revenue',
+    showvalues: '1',
+    numberprefix: '$',
+    useroundedges: '1',
+    animation: '1'
+  },
+  categories: [
+    {
+      category: [
+        {
+          label: 'Jan'
+        },
+        {
+          label: 'Feb'
+        },
+        {
+          label: 'Mar'
+        },
+        {
+          label: 'Apr'
+        },
+        {
+          label: 'May'
+        },
+        {
+          label: 'Jun'
+        },
+        {
+          label: 'Jul'
+        },
+        {
+          label: 'Aug'
+        },
+        {
+          label: 'Sep'
+        },
+        {
+          label: 'Oct'
+        },
+        {
+          label: 'Nov'
+        },
+        {
+          label: 'Dec'
+        }
+      ]
+    }
+  ],
+  dataset: [
+    {
+      seriesname: '2006',
+      data: [
+        {
+          value: '21000'
+        },
+        {
+          value: '29800'
+        },
+        {
+          value: '25800'
+        },
+        {
+          value: '26800'
+        },
+        {
+          value: '29600'
+        },
+        {
+          value: '32600'
+        },
+        {
+          value: '31800'
+        },
+        {
+          value: '36700'
+        },
+        {
+          value: '29700'
+        },
+        {
+          value: '31900'
+        },
+        {
+          value: '34800'
+        },
+        {
+          value: '24800'
+        }
+      ]
+    },
+    {
+      seriesname: '2005',
+      data: [
+        {
+          value: '10000'
+        },
+        {
+          value: '6000'
+        },
+        {
+          value: '12500'
+        },
+        {
+          value: '15000'
+        },
+        {
+          value: '11000'
+        },
+        {
+          value: '9800'
+        },
+        {
+          value: '11800'
+        },
+        {
+          value: '19700'
+        },
+        {
+          value: '21700'
+        },
+        {
+          value: '21900'
+        },
+        {
+          value: '22900'
+        },
+        {
+          value: '20800'
+        }
+      ]
+    }
+  ],
+  events: {
+    drawComplete: function() {
+      console.log('drawn');
+    }
+  }
+};
+
 class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      type: 'timeseries',
+      type: 'msbar2d',
       width: '100%',
       height: '100%',
       dataFormat: 'json',
-      dataSource: {
-        data: null,
-        caption: {
-          text: 'Sales Analysis'
-        },
-        subcaption: {
-          text: 'Grocery'
-        },
-        yAxis: [
-          {
-            plot: {
-              value: 'Grocery Sales Value',
-              type: 'line'
-            },
-            format: {
-              prefix: '$'
-            },
-            title: 'Sale Value'
-          }
-        ]
-      },
+      dataSource: dataSource,
       schemaJson: null,
-      dataJson: null
+      dataJson: null,
+      events: {
+        beforeRender: function(e, o) {
+          console.log('before render', e, o);
+        },
+        drawComplete: function(e, o) {
+          console.log('drawn', e, o);
+        },
+        dataPlotClick: function(e, o) {
+          console.log('First type of Click', e, o);
+        }
+      }
     };
 
     this.libraryPath = Platform.select({
@@ -52,7 +186,7 @@ class App extends React.Component {
   }
 
   componentDidMount() {
-    this.fetchDataAndSchema();
+    // this.fetchDataAndSchema();
   }
 
   fetchDataAndSchema() {
@@ -75,15 +209,24 @@ class App extends React.Component {
     return (
       <View style={styles.body}>
         <FusionCharts
-          dataJson={this.state.dataJson}
-          schemaJson={this.state.schemaJson}
           type={this.state.type}
           width={this.state.width}
           height={this.state.height}
           dataFormat={this.state.dataFormat}
           dataSource={this.state.dataSource}
+          events={this.state.events}
           libraryPath={this.libraryPath} // set the libraryPath property
         />
+        <Button
+          title="Press me"
+          onPress={() => {
+            this.setState({events: {
+              dataPlotClick: function(e, o) {
+                console.log('Clicked', e, o);
+              }
+            }})
+          }}
+        />
       </View>
     );
   }