set peerDependencies, documentation

Author: davidctj

.npmignore

@@ -1,4 +1,3 @@
 npm-debug.log
-tsconfig.json
 node_modules
 .idea

README.md

@@ -1,53 +1,78 @@
 # React-PlotlyJS-Typescript [![npm version](https://badge.fury.io/js/react-plotlyjs-ts.svg)](https://badge.fury.io/js/react-plotlyjs-ts)
 
-Inspired by [React-PlotlyJS](https://github.com/benjeffery/react-plotlyjs), many thanks!
-
 A react-typescript component for Plotly.JS graphs.
 
 Self-redraw when props changed. 
 
 ## Usage
 
+```bash
+$ npm install react react-dom typescript plotly.js
+$ npm install react-plotlyjs-ts
+```
+
 ```typescript
 import PlotlyChart from 'react-plotlyjs-ts';
 
 ...
 render(){    
      const data = [
           {
-            type: 'scatter',  // all "scatter" attributes: https://plot.ly/javascript/reference/#scatter
-            x: [1, 2, 3],     // more about "x": #scatter-x
-            y: [6, 2, 3],     // #scatter-y
-            marker: {         // marker is an object, valid marker keys: #scatter-marker
-              color: 'rgb(16, 32, 77)' // more about "marker.color": #scatter-marker-color
+            type: 'scatter',  
+            x: [1, 2, 3],     
+            y: [6, 2, 3],     
+            marker: {       
+              color: 'rgb(16, 32, 77)'
             }
           },
           {
-            type: 'bar',      // all "bar" chart attributes: #bar
-            x: [1, 2, 3],     // more about "x": #bar-x
-            y: [6, 2, 3],     // #bar-y
-            name: 'bar chart example' // #bar-name
+            type: 'bar',   
+            x: [1, 2, 3],  
+            y: [6, 2, 3],  
+            name: 'bar chart example' 
           }
         ];
-        const layout = {                     // all "layout" attributes: #layout
-          title: 'simple example',  // more about "layout.title": #layout-title
-          xaxis: {                  // all "layout.xaxis" attributes: #layout-xaxis
-            title: 'time'         // more about "layout.xaxis.title": #layout-xaxis-title
+        const layout = {           
+          title: 'simple example', 
+          xaxis: {                 
+            title: 'time'         
           },
-          annotations: [            // all "annotation" attributes: #layout-annotations
+          annotations: [           
             {
-              text: 'simple annotation',    // #layout-annotations-text
-              x: 0,                         // #layout-annotations-x
-              xref: 'paper',                // #layout-annotations-xref
-              y: 0,                         // #layout-annotations-y
-              yref: 'paper'                 // #layout-annotations-yref
+              text: 'simple annotation',    
+              x: 0,                         
+              xref: 'paper',                
+              y: 0,                         
+              yref: 'paper'                 
             }
           ]
         };        
     return (
-        <PlotlyChart data={data} layout={layout} />
-    )
+        <PlotlyChart data={toJS(this.model_data)}
+                     layout={layout}
+                     onClick={({points, event}) => console.log(points, event)}>    )
 }
+```
+
+## Documentation
+Define PlotlyChart props below:
+```typescript
+   data: any[];
+   layout?: any;
+   config?: any;
+   onClick?: (data: { points: any, event: any }) => any;
+   onBeforeHover?: (data: { points: any, event: any }) => any;
+   onHover?: (data: { points: any, event: any }) => any;
+   onUnHover?: (data: { points: any, event: any }) => any;
+   onSelected?: (data: { points: any, event: any }) => any;
+```
+* data, layout, config are the same as in the [plotly.js](https://www.npmjs.com/package/plotly.js).
+* <b>onClick, onBeforeHover, onHover, onUnHover, onSelected</b> are on event functions. 
+Use ES6 destructuring to get the points and event.
+
 
+## Todo
+Add testing
 
-```
+## Thanks
+Inspired by [React-PlotlyJS](https://github.com/benjeffery/react-plotlyjs), many thanks!

package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-plotlyjs-ts",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Typescript-React component for Plotly.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-      "build": "tsc"
+    "build": "tsc"
   },
   "repository": {
     "type": "git",
@@ -19,7 +19,9 @@
   "author": "caitengjiao1987@gmail.com",
   "license": "MIT",
   "dependencies": {
-    "lodash": "^4.17.4",
+    "lodash": "^4.17.4"
+  },
+  "peerDependencies": {
     "plotly.js": "^1.30.0",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",

src/index.tsx

@@ -6,11 +6,11 @@ export interface IPlotlyChartProps {
     data: any[];
     layout?: any;
     config?: any;
-    onClick?: (data: any) => any;
-    onBeforeHover?: (data: any) => any;
-    onHover?: (data: any) => any;
-    onUnHover?: (data: any) => any;
-    onSelected?: (data: any) => any;
+    onClick?: (data: { points: any, event: any }) => any;
+    onBeforeHover?: (data: { points: any, event: any }) => any;
+    onHover?: (data: { points: any, event: any }) => any;
+    onUnHover?: (data: { points: any, event: any }) => any;
+    onSelected?: (data: { points: any, event: any }) => any;
 }
 
 /***