VueFusionCharts plugin basic structure ready

Author: rohitkr

.babelrc

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    "add-module-exports",
+  ],
+  "presets": ["es2015"]
+}

.eslintrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "sourceType": "module"
+    },
+    "rules": {
+        "indent": [
+            "error",
+            4
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+};

.gitignore

@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Coverage tools
+lib-cov
+coverage
+coverage.html
+.cover*
+
+# Dependency directory
+node_modules
+bower_components
+
+# Example build directory
+# example/dist
+.publish
+
+# Editor and other tmp files
+*.swp
+*.un~
+*.iml
+*.ipr
+*.iws
+*.sublime-*
+.idea/
+*.DS_Store

.npmignore

@@ -0,0 +1,14 @@
+# Node
+node_modules/*
+npm-debug.log
+
+# Windows
+Thumbs.db
+Desktop.ini
+
+# Mac
+.DS_Store
+**/.DS_Store
+
+# Example files
+example/

README.md

@@ -12,73 +12,77 @@ npm install vue-fusioncharts --save
 ```
 #### cdn
 ```html
-<div id="chart">
-  <fusioncharts
-  	:type="type"
-  	:data-source="dataSource"
-  	:width="width"
-  	:height="height"
-   >
-  </fusioncharts>
-</div>
-
-<script type="text/javascript" src="https://unpkg.com/vue@2.3.3"></script>
-<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.js"></script>
-<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.charts.js"></script>
-<script src="https://unpkg.com/vue-fusioncharts@1.0.4/dist/vue-fusioncharts.min.js"></script>
-
-<script type="text/javascript">
-// Pass the VueFusionCharts to `Vue.use` global function
-Vue.use(VueFusionCharts.default);
-
-var chart = new Vue({
-    el: '#chart',
-    data: {
-    	type: 'Pie2D',
-	    dataSource: {data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]},
-	    width: '600',
-	    height: '300'
-    }
-});
-</script>
+<!-- Minified -->
+<script src="https://unpkg.com/vue-fusioncharts/dist/vue-fusioncharts.min.js"></script>
+<!-- Source -->
+<script src="https://unpkg.com/vue-fusioncharts/dist/vue-fusioncharts.js"></script>
 
 ```
 
 ## Usage
-In order to use this plugin, you need to import `vue`, `vue-fusioncharts` and `fusioncharts` in your application and pass the `VueFusionCharts` component to `Vue.use` global method
+#### Method 1
+In order to use this plugin, you need to call `Vue.use` global method and pass `VueFusionCharts` component followed by `FusionCharts` and package-specific dependencies for `FusionCharts`
+
 ```js
-// Import the required modules
 import Vue from 'vue';
 import VueFusionCharts from 'vue-fusioncharts';
-// import FusionCharts modules
+// import FusionCharts library
 import FusionCharts from 'fusioncharts';
+// Import `Charts` module to render a chart belonging to `FusionCharts` package 
 import Charts from 'fusioncharts/fusioncharts.charts';
+// Import `Widgets` module to render a chart belonging to `FusionWidgets` package 
 import Widgets from 'fusioncharts/fusioncharts.widgets';
 
 // Register `vue-fusioncharts` component by calling the Vue.use() global method
-// Also pass the FusionCharts object
-Vue.use(VueFusionCharts, {
-    core: FusionCharts,
-    modules: [Charts, Widgets]
-});
+// And pass `VueFusionCharts` as a 1st argument and `FusionCharts` as a 2nd argument
+// and then comma separated package-specific dependencies eg Chart and Widgets.
+// To render a chart belonging to the Charts package and widgets belong to FusionWidgets package, pass the Charts module
+Vue.use(VueFusionCharts, FusionCharts, Charts, Widgets);
 ```
+#### Method 2
+Instead of passing `FusionCharts` specific dependency to `Vue.use` global method you can directly pass `FusionCharts` to the specific dependencies
 
-#### Options
-`vue-fusioncharts` allows a few custom options:
 ```js
-Vue.use(VueFusionCharts, FusionCharts, Charts, Widgets)
+import Vue from 'vue';
+import VueFusionCharts from 'vue-fusioncharts';
+// import FusionCharts library
+import FusionCharts from 'fusioncharts';
+// Import `Charts` module to render a chart belonging to `FusionCharts` package 
+import Charts from 'fusioncharts/fusioncharts.charts';
+// Import `Widgets` module to render a chart belonging to `FusionWidgets` package 
+import Widgets from 'fusioncharts/fusioncharts.widgets';
+
+Charts(FusionCharts);
+Widgets(FusionCharts)
+
+Vue.use(VueFusionCharts, FusionCharts);
+```
+ To know which chart belongs to which package, refer the [list of charts](http://www.fusioncharts.com/dev/getting-started/list-of-charts.html).
+
+Define the component in your HTML template where you wish to render the chart
+
+```html
+<div id="chart1">
+  <fusioncharts
+    :type="type"
+    :data-source="dataSource"
+    :width="width"
+    :height="height"
+   >
+  </fusioncharts>
+</div>
 ```
 
-#### Render
-Create the `Vue` instance and define all configuration required to render FusionCharts.
+Create the `Vue` instance and define all configuration required to render the chart
+
 ```js
 let chart = new Vue({
     el: '#pie-chart',
     data: {
-    	type: 'Pie2D',
-	    dataSource: {data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]},
-	    width: '600',
-	    height: '300'
+      type: 'Pie2D',
+      dataSource: {data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]},
+      width: '600',
+      height: '300'
     }
 });
 ```