Add basic documentation

Author: greghub

README.md

@@ -1,29 +1,85 @@
-# funnel-vue
+# VueFunnelGraph.js
 
-## Project setup
-```
-npm install
-```
+Funnel graph drawing library for Vue.js.
 
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
+* SVG charts
+* Values, Labels, Percentages display
+* Two-dimensional graph support
+ * Legend display
+ * Detailed percentage breakdown on hover
+* Animated
+* Solid color and gradient fill
+* Horizontal and vertical charts
 
-### Compiles and minifies for production
-```
-npm run build
-```
+<img src="https://i.imgur.com/BEkq4DE.gif">
+
+This is the Vue.js version of FunnelGraph.js, learn more about the library and see documentation [here.](https://github.com/greghub/funnel-graph-js)
 
-### Run your tests
+## Installation
+
+#### NPM
+```js
+npm i vue-funnel-graph-js
 ```
-npm run test
+
+## Usage
+
+After installing, import the `VueFunnelGraph` component:
+
+```js
+import { VueFunnelGraph } from 'vue-funnel-graph-js';
 ```
 
-### Lints and fixes files
+You can now use the custom element:
+```vue
+<vue-funnel-graph :width="width" :height="height" :labels="labels"
+ :values="values" :colors="colors" :subLabels="subLabels" :direction="direction"
+ :gradient-direction="gradientDirection"
+ :animated="true" :display-percentage="true"
+></vue-funnel-graph>
 ```
-npm run lint
+
+The values are passed to props:
+```vuejs
+export default {
+ name: 'app',
+ components: {
+ VueFunnelGraph
+ },
+ data() {
+ return {
+ labels: ['Impressions', 'Add To Cart', 'Buy'],
+ subLabels: ['Direct', 'Social Media', 'Ads'],
+ values: [
+ [3000, 2500, 6500],
+ [3000, 1700, 1000],
+ [600, 200, 130]
+ ],
+ colors: [
+ ['#FFB178', '#FF78B1', '#FF3C8E'],
+ ['#A0BBFF', '#EC77FF'],
+ ['#A0F9FF', '#7795FF']
+ ],
+ direction: 'horizontal',
+ gradientDirection: 'horizontal',
+ height: 300,
+ width: 800
+ };
+ }
+}
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+## Options
+
+| Option | Description | Type | Required | Options | Default | Example |
+|--------|-------------|------|----------|---------|---------|---------|
+| `width` | Width of the funnel graph | `number` | Yes | | 0 | 800 |
+| `height` | Height of the funnel graph | `number` | Yes | | 0 | 300 |
+| `labels` | Title of each data part | `array` | Yes | | | ['Impressions', 'Add To Cart', 'Buy'] |
+| `values` | Numbers that the funnel chart visualizes | `array` | Yes | | | [12000, 4700, 930] |
+| `colors` | Colors of the graph. If a string or array with one element passed it fills the graph with a solid color, if the array contains more than one element it fill the graph with a gradient. For two-dimensional charts and array of arrays shall be passed to fill each segment with a separate gradient. The array can contain arrays and strings mixed. If a there are more segments than colors provided, up to 10 extra segments will be filled with pre-defined solid colors | `array⎮string` | Yes | | | [12000, 4700, 930] |
+| `subLabels (:subLabels)` | Title of each data segment | `array` | Yes for two-dimensional graphs | | | ['Direct', 'Social Media', 'Ads'] |
+| `direction` | Whether the chart visualization is displayed vertically or horizontally | `string` | No | 'vertical', 'horizontal' | 'horizontal' | |
+| `gradientDirection (:gradient-direction)` | Whether the gradient applied to the segments of the graph is displayed from top to bottom or from left to right | `string` | No | 'vertical', 'horizontal' | 'horizontal' |
+| `animated` | Whether any change in graph shape will be displayed with a smooth transition | `boolean` | No | `true`, `false` | `true` | `false` |
+| `displayPercentage (:display-percentage)` | Whether to display the automatically calculated percentage values below the labels | `boolean` | No | `true`, `false` | `true` | |