initial code

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

README.md

@@ -4,27 +4,85 @@
 
 [![NPM](https://img.shields.io/npm/v/react-funnel-pipeline.svg)](https://www.npmjs.com/package/react-funnel-pipeline) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
+
+<img lt="react-funnel-pipeline" src="https://user-images.githubusercontent.com/15156674/91746751-faa55000-ebb4-11ea-9f12-a52bb62234d6.png">
+
+## Contents
+
+* [Install](#install)
+* [Usage](#usage)
+* [Props](#props)
+* [License](#license)
+
+<br/>
+
+
 ## Install
 
 ```bash
 npm install --save react-funnel-pipeline
 ```
 
+Peer Dependencies;
+* React v16 +
+
 ## Usage
 
 ```tsx
 import React, { Component } from 'react'
 
-import MyComponent from 'react-funnel-pipeline'
+import { FunnelChart } from 'react-funnel-pipeline'
 import 'react-funnel-pipeline/dist/index.css'
 
 class Example extends Component {
   render() {
-    return <MyComponent />
+    return (
+      <FunnelChart 
+        data={[
+          { name: 'Awareness', value: 252 },
+          { name: 'Interest', value: 105 },
+          { name: 'Consideration', value: 84 },
+          { name: 'Evaluation', value: 72 },
+          { name: 'Commitment', value: 19 },
+          { name: 'Sale', value: 10 }
+        ]}
+      />
+    )
   }
 }
 ```
 
+See the [Examples](./example) for more info and advanced usage.
+
+Build the Examples with `npm install` and then `npm start` to start the development server at [http://localhost:3000](http://localhost:3000).
+
+Or view the online examples at [https://darylbuckle.github.io/react-funnel-pipeline](https://darylbuckle.github.io/react-funnel-pipeline).
+
+
+## Props
+
+| Property | Type | Default | Mandatory | Description |
+| -------- |------| --------| ----------| ------------|
+|    data | object[]  |  | true | The data to display in the Funnel Chart. Must be an array of objects that contain a minimum of 'name' (string) and 'value' (number). |
+|    title | string  |  | false | Displays a title above the funnel chart. |
+|    showValues | boolean  | true | false | Whether to show the value within the chart segment. |
+|    showNames | boolean  | true | false | Whether to show the name of the segment within the chart segment. |
+|    showRunningTotal | boolean  | false | false | When this is true instead of showing the value in the segment it will show the running total of all values underneath it. |
+|    pallette | string[]  | ['#f14c14', '#f39c35', '#68BC00', '#1d7b63', '#4e97a8', '#4466a3'] | false | A list of hexadecimal colours as strings to use for the background colour of chart segments. |
+|    chartWidth | number  |  | false | The maximum width of the chart. |
+|    chartHeight | number  | 500 | false | This is only used when 'heightRelativeToValue' is true. The height of the chart. |
+|    heightRelativeToValue | boolean  | false | false | When true each segment will have it's height relative to the value. IE segments with higher values will appear larger than those with smaller values. |
+|    style | style object  | | false | A JSX style object to override styles for the chart. |
+|    getRowStyle | func(row)  |  | false | A function which parses row data. Return a JSX style object to override styles for that row. |
+|    getRowNameStyle | func(row)  |  | false | A function which parses row data. Return a JSX style object to override styles for that rows name. |
+|    getRowValueStyle | func(row)  |  | false | A function which parses row data. Return a JSX style object to override styles for that rows value. |
+|    getToolTip | func(row)  |  | false | A function which parses row data. Return a string to override the tooltip for that row. |
+|    onRowClick | func(row)  |  | false | Called when a row/segment is clicked. Parses the data of the row which was clicked on. |
+
+
+<br/>
+
+
 ## License
 
-MIT © [DarylBuckle](https://github.com/DarylBuckle)
+MIT © [DarylBuckle](https://github.com/DarylBuckle) 2020