Merge pull request #330 from apertureless/fix/dependencies

Chore: Update dependencies

.babelrc

@@ -1,5 +1,14 @@
 {
-  "presets": ["es2015", "stage-2"],
-  "plugins": ["transform-runtime", "transform-object-assign"],
+  "presets": [
+    ["@babel/preset-env", {
+      "modules": false,
+      "targets": {
+        "browsers": [
+          "last 2 versions"
+        ]
+      }
+    }],
+    "@babel/stage-2"
+  ],
   "comments": false
 }

.codeclimate.yml

@@ -0,0 +1,18 @@
+engines:
+  eslint:
+    enabled: true
+  duplication:
+    enabled: true
+    config:
+      languages:
+      - javascript:
+ratings:
+  paths:
+  - "**.js"
+exclude_paths:
+- "dist/"
+- "test/**/*"
+- "es/"
+- "build/"
+- "config/"
+- "src/examples/**"

.eslintrc.js

@@ -15,5 +15,8 @@ module.exports = {
     'arrow-parens': 0,
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  },
+  "globals": {
+    "LIB_VERSION": true
   }
 }

.gitignore

@@ -4,5 +4,4 @@ npm-debug.log
 selenium-debug.log
 test/unit/coverage
 test/e2e/reports
-dist/
 es/

CHANGELOG.md

@@ -1,5 +1,151 @@
 # Change Log
 
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+<a name="3.1.0"></a>
+# [3.1.0](https://github.com/apertureless/vue-chartjs/compare/v3.0.2...v3.1.0) (2018-01-12)
+
+
+### Bug Fixes
+
+* **mixins:** Check for chartjs instance before rendering chart ([39ff839](https://github.com/apertureless/vue-chartjs/commit/39ff839)), closes [#288](https://github.com/apertureless/vue-chartjs/issues/288)
+
+
+### Features
+
+* **charts:** Remove default styling ([ac5d4d8](https://github.com/apertureless/vue-chartjs/commit/ac5d4d8))
+
+
+
+# Change Log
+
+## [v3.0.1](https://github.com/apertureless/vue-chartjs/tree/v3.0.1) (2017-11-06)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v3.0.0...v3.0.1)
+
+**Closed issues:**
+
+- \[Suggestion\]Loose package dependencies [\#245](https://github.com/apertureless/vue-chartjs/issues/245)
+- reactiveData mixin [\#244](https://github.com/apertureless/vue-chartjs/issues/244)
+- Customise individual Axis Labels [\#243](https://github.com/apertureless/vue-chartjs/issues/243)
+- presets es2015  [\#242](https://github.com/apertureless/vue-chartjs/issues/242)
+- Uncaught TypeError: Cannot read property 'transition' of null [\#241](https://github.com/apertureless/vue-chartjs/issues/241)
+- Is it possible to create an callback on the onAnimationComplete option [\#240](https://github.com/apertureless/vue-chartjs/issues/240)
+- When resizing window, chart returns to first loaded state [\#239](https://github.com/apertureless/vue-chartjs/issues/239)
+- Reactively change chart properties [\#237](https://github.com/apertureless/vue-chartjs/issues/237)
+- how to enforce the max value on y axis [\#236](https://github.com/apertureless/vue-chartjs/issues/236)
+- Chart is not rendered when maintainAspectRatio is set to false and chart container is hidden [\#235](https://github.com/apertureless/vue-chartjs/issues/235)
+- How to access Chart.defaults.global [\#234](https://github.com/apertureless/vue-chartjs/issues/234)
+- Blank Chart - no data [\#233](https://github.com/apertureless/vue-chartjs/issues/233)
+- Maxin with multiple chartData [\#231](https://github.com/apertureless/vue-chartjs/issues/231)
+- How to destroy chart before re-rendering? [\#230](https://github.com/apertureless/vue-chartjs/issues/230)
+- chnage gridlines color [\#228](https://github.com/apertureless/vue-chartjs/issues/228)
+- Stacked bar chart? [\#226](https://github.com/apertureless/vue-chartjs/issues/226)
+- Chart crashes when reentering page [\#223](https://github.com/apertureless/vue-chartjs/issues/223)
+- 在图表上左右滑动会出现数据错乱的问题 [\#222](https://github.com/apertureless/vue-chartjs/issues/222)
+- How do I set the scale of the Y axis? [\#220](https://github.com/apertureless/vue-chartjs/issues/220)
+- Upgrading from 2.8.2 to 2.8.3 breaks charts [\#209](https://github.com/apertureless/vue-chartjs/issues/209)
+- How to scale the radius property of each bubble in a vue-chartjs bubble chart [\#205](https://github.com/apertureless/vue-chartjs/issues/205)
+- Last release is causing problems with Firefox [\#203](https://github.com/apertureless/vue-chartjs/issues/203)
+- 🔥 Remove Vue.extend\(\) [\#201](https://github.com/apertureless/vue-chartjs/issues/201)
+- Update to webpack@3 [\#134](https://github.com/apertureless/vue-chartjs/issues/134)
+
+**Merged pull requests:**
+
+- Feature/dependency and build fix [\#246](https://github.com/apertureless/vue-chartjs/pull/246) ([apertureless](https://github.com/apertureless))
+- Typo fix in EN docs [\#238](https://github.com/apertureless/vue-chartjs/pull/238) ([chakan](https://github.com/chakan))
+- Made some small edits to French README.MD [\#232](https://github.com/apertureless/vue-chartjs/pull/232) ([music-mind](https://github.com/music-mind))
+- update webpack to version 3 [\#227](https://github.com/apertureless/vue-chartjs/pull/227) ([kingkong64](https://github.com/kingkong64))
+
+## [v3.0.0](https://github.com/apertureless/vue-chartjs/tree/v3.0.0) (2017-10-14)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.7...v3.0.0)
+
+**Closed issues:**
+
+- Create an image of the chart to download [\#219](https://github.com/apertureless/vue-chartjs/issues/219)
+- How to achieve this effect? [\#218](https://github.com/apertureless/vue-chartjs/issues/218)
+- Some Error [\#217](https://github.com/apertureless/vue-chartjs/issues/217)
+- Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "chartData" [\#216](https://github.com/apertureless/vue-chartjs/issues/216)
+- can't get legendCallback to fire at all [\#212](https://github.com/apertureless/vue-chartjs/issues/212)
+- this demo is not support, is it because version older? [\#210](https://github.com/apertureless/vue-chartjs/issues/210)
+- how to change value without reload?? [\#208](https://github.com/apertureless/vue-chartjs/issues/208)
+- typescript definition? [\#207](https://github.com/apertureless/vue-chartjs/issues/207)
+- 使用动态数据时报错 [\#204](https://github.com/apertureless/vue-chartjs/issues/204)
+- Commit the final dist js files to github [\#202](https://github.com/apertureless/vue-chartjs/issues/202)
+- \[Best Practices❓\] Usage of Private Data [\#182](https://github.com/apertureless/vue-chartjs/issues/182)
+- 📝 Update docs & examples - SSR with nuxt [\#172](https://github.com/apertureless/vue-chartjs/issues/172)
+- 📝 Update Docs - Section about extending [\#171](https://github.com/apertureless/vue-chartjs/issues/171)
+- Register vue-chartjs as vue-plugin? [\#168](https://github.com/apertureless/vue-chartjs/issues/168)
+- Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders [\#151](https://github.com/apertureless/vue-chartjs/issues/151)
+
+**Merged pull requests:**
+
+- Feature/v3 [\#225](https://github.com/apertureless/vue-chartjs/pull/225) ([apertureless](https://github.com/apertureless))
+- ✏️ Spelling in docs [\#215](https://github.com/apertureless/vue-chartjs/pull/215) ([cugu](https://github.com/cugu))
+- Fix inaccuracies in Russian translation [\#214](https://github.com/apertureless/vue-chartjs/pull/214) ([pushkyn](https://github.com/pushkyn))
+- Add id docs readme support [\#213](https://github.com/apertureless/vue-chartjs/pull/213) ([tesarwijaya](https://github.com/tesarwijaya))
+- French translation for README.md [\#211](https://github.com/apertureless/vue-chartjs/pull/211) ([julienc91](https://github.com/julienc91))
+
+## [v2.8.7](https://github.com/apertureless/vue-chartjs/tree/v2.8.7) (2017-09-16)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.6...v2.8.7)
+
+**Closed issues:**
+
+- 真机和浏览器呈现的效果不一样的问题 [\#199](https://github.com/apertureless/vue-chartjs/issues/199)
+- can not use npm install? [\#198](https://github.com/apertureless/vue-chartjs/issues/198)
+- Reactive Props - Max Call Stack Exceeded Error [\#197](https://github.com/apertureless/vue-chartjs/issues/197)
+- Unmet Peer Dependency [\#196](https://github.com/apertureless/vue-chartjs/issues/196)
+- Is there a way to update options? [\#195](https://github.com/apertureless/vue-chartjs/issues/195)
+- deepmerge [\#194](https://github.com/apertureless/vue-chartjs/issues/194)
+- TypeError: Cannot convert undefined or null to object [\#193](https://github.com/apertureless/vue-chartjs/issues/193)
+
+## [v2.8.6](https://github.com/apertureless/vue-chartjs/tree/v2.8.6) (2017-09-12)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.5...v2.8.6)
+
+## [v2.8.5](https://github.com/apertureless/vue-chartjs/tree/v2.8.5) (2017-09-12)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.4...v2.8.5)
+
+**Closed issues:**
+
+- Chart error since the addition of deepmerge in build 2.8.4 [\#192](https://github.com/apertureless/vue-chartjs/issues/192)
+
+## [v2.8.4](https://github.com/apertureless/vue-chartjs/tree/v2.8.4) (2017-09-08)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.3...v2.8.4)
+
+**Closed issues:**
+
+- Regression in 2.8.3 [\#190](https://github.com/apertureless/vue-chartjs/issues/190)
+- Why default Chart.js styles are overridden? [\#189](https://github.com/apertureless/vue-chartjs/issues/189)
+- Legend or other options not working in reactiveProps [\#188](https://github.com/apertureless/vue-chartjs/issues/188)
+- Changes to yAxisID property does not re-render chart [\#177](https://github.com/apertureless/vue-chartjs/issues/177)
+
+**Merged pull requests:**
+
+- Replace Object.assign with deepmerge [\#191](https://github.com/apertureless/vue-chartjs/pull/191) ([apertureless](https://github.com/apertureless))
+
+## [v2.8.3](https://github.com/apertureless/vue-chartjs/tree/v2.8.3) (2017-09-06)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.2...v2.8.3)
+
+**Closed issues:**
+
+- Rounded corner for Bar chart [\#185](https://github.com/apertureless/vue-chartjs/issues/185)
+- Access canvas object from parents [\#184](https://github.com/apertureless/vue-chartjs/issues/184)
+- Issue with DonutChart in Safari [\#183](https://github.com/apertureless/vue-chartjs/issues/183)
+- Responsive Width, Fixed Height [\#180](https://github.com/apertureless/vue-chartjs/issues/180)
+- Entire Lodash Library Is Loaded!! 200kb chunk!  [\#179](https://github.com/apertureless/vue-chartjs/issues/179)
+- height changed unexpectedly after re-rendering [\#178](https://github.com/apertureless/vue-chartjs/issues/178)
+- Default height no longer working in 2.8 [\#176](https://github.com/apertureless/vue-chartjs/issues/176)
+- how to get click on point in bar chart? [\#175](https://github.com/apertureless/vue-chartjs/issues/175)
+- clean install of from npm cannot be used in gulp / browserify [\#174](https://github.com/apertureless/vue-chartjs/issues/174)
+- tooltip callbacks possible? [\#173](https://github.com/apertureless/vue-chartjs/issues/173)
+- Computed object won't populate chart [\#170](https://github.com/apertureless/vue-chartjs/issues/170)
+- Error in nextTick: "RangeError: Maximum call stack size exceeded" [\#169](https://github.com/apertureless/vue-chartjs/issues/169)
+- Standalone chartjs build \(don't include moment.js\) [\#124](https://github.com/apertureless/vue-chartjs/issues/124)
+
+**Merged pull requests:**
+
+- 🔥 Remove default styles object as it causes problems [\#187](https://github.com/apertureless/vue-chartjs/pull/187) ([apertureless](https://github.com/apertureless))
+- remvove lodash merge [\#186](https://github.com/apertureless/vue-chartjs/pull/186) ([apertureless](https://github.com/apertureless))
+
 ## [v2.8.2](https://github.com/apertureless/vue-chartjs/tree/v2.8.2) (2017-08-12)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.1...v2.8.2)
 

README.md

@@ -10,6 +10,9 @@
 [![Gitter chat](https://img.shields.io/gitter/room/TechnologyAdvice/Stardust.svg)](https://gitter.im/vue-chartjs/Lobby)
 [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
 [![CDNJS version](https://img.shields.io/cdnjs/v/vue-chartjs.svg)](https://cdnjs.com/libraries/vue-chartjs)
+[![Known Vulnerabilities](https://snyk.io/test/github/apertureless/vue-chartjs/badge.svg)](https://snyk.io/test/github/apertureless/vue-chartjs)
+[![Maintainability](https://api.codeclimate.com/v1/badges/8c0256b16ba7a50a9f93/maintainability)](https://codeclimate.com/github/apertureless/vue-chartjs/maintainability)
+[![Donate](assets/donate.svg)](paypal)
 
 # vue-chartjs
 
@@ -33,49 +36,56 @@ If you're looking for v1 check this [branch](https://github.com/apertureless/vue
 
 ## Install
 
-Simply run `yarn add vue-chartjs chart.js`
+- **yarn** install: `yarn add vue-chartjs chart.js`
+- **npm** install: `npm install vue-chartjs chart.js --save`
 
 Or if you want to use it directly in the browser add
 
 ```html
-<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.full.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
+<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
 ```
-to your scripts. See [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
+to your scripts. See [Codepen](https://codepen.io/apertureless/pen/zEvvWM)
 
-## Explanation of Different Builds
-There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a peerDependency.
-
-- Browser
-- Browserify / Webpack 1
-- Webpack 2
-
-
-| Build | Chart.js | Vue.js |
-|---|---|---|
-| vue-chartjs.full.js | Bundled | Bundled |
-| vue-chartjs.full.min.js |  Bundled | Bundled  |
-| vue-chartjs.js | peerDependency | peerDependency  |
-| vue-chartjs.min.js | peerDependency  | peerDependency  |
-| es/index* |  peerDependency | peerDependency  |
 
 ### Browser
-You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). For this case, please use the `vue-chartjs.full.min.js` which is the minified version. It has Vue.js and Chart.js bundled into it. And bundled to a UMD Module. So you only need that one file.
+You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/zEvvWM). For this case, please use the `vue-chartjs.min.js` which is the minified version. You also need to add the Chart.js CDN script.
+
+You can then simply register your component:
+
+```js
+Vue.component('line-chart', {
+  extends: VueChartJs.Line,
+  mounted () {
+    this.renderChart({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+      datasets: [
+        {
+          label: 'Data One',
+          backgroundColor: '#f87979',
+          data: [40, 39, 10, 40, 39, 80, 40]
+        }
+      ]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+})
+```
 
 
 ### Browserify / Webpack 1
 
 If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
 
-However Vue.js and Chart.js are `peerDependencies` so you have to install them separately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
+However, Chart.js is a `peerDependencies` so you have to install it separately. In most projects This way, you can have different versions of Chart.js then in this package.
 
 ### Webpack 2
 If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
-It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way you three shaking will work.  Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.
+It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way your tree shaking will work.  Like in the bundled version, `Chart.js` is a `peerDependencies` and need to be installed.
 
 
 ## How to use
 
-You need to import the base chart class and extend it. This gives much more flexibility when working with different data. You can pass the data over props or vue-resource.
+You need to import the component and then either use `extends` or `mixins` and add it.
 
 You can import the whole package or each module individual.
 
@@ -90,7 +100,8 @@ Just create your own component.
 // CommitChart.js
 import { Bar } from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   mounted () {
     // Overwriting base render method with actual data.
     this.renderChart({
@@ -104,7 +115,7 @@ export default Bar.extend({
       ]
     })
   }
-})
+}
 ```
 
 Then simply import and use your own extended component and use it like a normal vue component
@@ -115,18 +126,19 @@ import CommitChart from 'path/to/component/CommitChart'
 
 ## Another Example with options
 
-You can overwrite the default chart options. Just pass the options object as a second paramenter to the render method
+You can overwrite the default chart options. Just pass the options object as a second parameter to the render method
 
 ```javascript
-// MonthlyIncome.js
+// MonthlyIncome.vue
 import { Line } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   props: ['data', 'options'],
   mounted () {
     this.renderChart(this.data, this.options)
   }
-})
+}
 ```
 
 Use it in your vue app
@@ -149,7 +161,7 @@ export default {
 ## Reactivity
 
 Chart.js does not update or re-render the chart if new data is passed.
-However you can simply implement this on your own or use one of the two mixins which are included.
+However, you can simply implement this on your own or use one of the two mixins which are included.
 
 - `reactiveProp`
 - `reactiveData`
@@ -157,50 +169,57 @@ However you can simply implement this on your own or use one of the two mixins w
 Both are included in the `mixins` module.
 
 The mixins automatically create `chartData` as a prop or data. And add a watcher. If data has changed, the chart will update.
-However keep in mind the limitations of vue and javascript for mutations on arrays and objects. More info [here](http://vue-chartjs.org/#/home?id=reactive-data)
+However, keep in mind the limitations of vue and javascript for mutations on arrays and objects.
+**It is important that you pass your options in a local variable named `options`!**
+The reason is that if the mixin re-renders the chart it calls `this.renderChart(this.chartData, this.options`)` so don't pass in the options object directly or it will be ignored.
+
+More info [here](http://vue-chartjs.org/#/home?id=reactive-data)
 
 ```javascript
 // MonthlyIncome.js
 import { Line, mixins } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [mixins.reactiveProp],
   props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 
 ```
 
 ### Mixins module
-The `mixins` module is included in the `VueCharts` module and as a seperate module.
+The `mixins` module is included in the `VueCharts` module and as a separate module.
 Some ways to import them:
 
 ```javascript
 // Load complete module with all charts
 import VueCharts from 'vue-chartjs'
 
-export default VueCharts.Line.extend({
+export default {
+  extends: VueCharts.Line,
   mixins: [VueCharts.mixins.reactiveProp],
   props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 ```javascript
 // Load speperate modules
 import { Line, mixins } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [mixins.reactiveProp],
   props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 ```javascript
@@ -208,15 +227,20 @@ export default Line.extend({
 import { Line, mixins } from 'vue-chartjs'
 const { reactiveProp } = mixins
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [reactiveProp],
   props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
+## Single File Components
+
+You can create your components in Vues single file components. However it is important that you **do not** have the `<template></template>` included. Because Vue can't merge templates. And the template is included in the mixin. If you leave the template tag in your component, it will overwrite the one which comes from the base chart and you will have a blank screen.
+
 ## Available Charts
 
 ### Bar Chart
@@ -273,7 +297,7 @@ npm run e2e
 npm test
 ```
 
-For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+For a detailed explanation of how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
 
 ## Contributing
 
@@ -286,3 +310,5 @@ For a detailed explanation on how things work, check out the [guide](http://vuej
 ## License
 
 This software is distributed under [MIT license](LICENSE.txt).
+
+[paypal]: https://www.paypal.me/apertureless/50eur

assets/donate.svg

@@ -0,0 +1,2 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="74" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="74" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h25v20H0z"/><path fill="#179BD7" d="M25 0h49v20H25z"/><path fill="url(#b)" d="M0 0h74v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"><image x="5" y="3" width="14" height="14" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB2aWV3Qm94PSIwIDAgNTAwIDUwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAwIDUwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBmaWxsPSIjMTc5QkQ3IiBkPSJNNDExLjg5OSwxMzQuMzI4TDQxMS44OTksMTM0LjMyOEw0MTEuODk5LDEzNC4zMjhjLTAuNDM1LDIuNzgyLTAuOTMzLDUuNjI2LTEuNDkyLDguNTQ4DQoJCWMtMTkuMjI2LDk4LjcwOS04NS4wMDEsMTMyLjgwOS0xNjkuMDA3LDEzMi44MDloLTQyLjc3MmMtMTAuMjczLDAtMTguOTMxLDcuNDYtMjAuNTMxLDE3LjU5NGwwLDBsMCwwbC0yMS44OTksMTM4Ljg4Ng0KCQlsLTYuMjAxLDM5LjM2OWMtMS4wNDEsNi42NTIsNC4wODgsMTIuNjUxLDEwLjgwMiwxMi42NTFoNzUuODYyYzguOTgzLDAsMTYuNjE1LTYuNTI4LDE4LjAyOS0xNS4zODdsMC43NDYtMy44NTRsMTQuMjgzLTkwLjY0Mw0KCQlsMC45MTctNC45NzRjMS4zOTktOC44OSw5LjA0Ni0xNS40MTgsMTguMDI5LTE1LjQxOGgxMS4zNDZjNzMuNSwwLDEzMS4wMzctMjkuODQxLDE0Ny44NTQtMTE2LjE5NA0KCQljNy4wMjUtMzYuMDc0LDMuMzg4LTY2LjE5NS0xNS4yLTg3LjM3OUM0MjcuMDM3LDE0My45NDksNDIwLjA1OSwxMzguNjQ5LDQxMS44OTksMTM0LjMyOHoiLz4NCgk8cGF0aCBmaWxsPSIjMjIyRDY1IiBkPSJNMzkxLjc4NywxMjYuMzA4Yy0yLjkzOC0wLjg1NS01Ljk2OC0xLjYzMi05LjA3Ny0yLjMzMWMtMy4xMjQtMC42ODQtNi4zMjYtMS4yOS05LjYyMS0xLjgxOA0KCQljLTExLjUzMi0xLjg2NS0yNC4xNjgtMi43NTEtMzcuNzA2LTIuNzUxSDIyMS4xMTdjLTIuODEzLDAtNS40ODYsMC42MzctNy44OCwxLjc4N2MtNS4yNjksMi41MzMtOS4xODUsNy41MjItMTAuMTM0LDEzLjYzMQ0KCQlsLTI0LjMwOCwxNTMuOTYybC0wLjY5OSw0LjQ5MmMxLjYwMS0xMC4xMzQsMTAuMjU4LTE3LjU5NCwyMC41MzEtMTcuNTk0SDI0MS40Yzg0LjAwNiwwLDE0OS43ODEtMzQuMTE1LDE2OS4wMDctMTMyLjgwOQ0KCQljMC41NzUtMi45MjIsMS4wNTctNS43NjYsMS40OTItOC41NDhjLTQuODY1LTIuNTgtMTAuMTM0LTQuNzg3LTE1LjgwNy02LjY2OEMzOTQuNjk0LDEyNy4xOTQsMzkzLjI0OCwxMjYuNzQzLDM5MS43ODcsMTI2LjMwOHoiLz4NCgk8cGF0aCBmaWxsPSIjMjUzQjgwIiBkPSJNMjAzLjEwNCwxMzQuODI1YzAuOTQ4LTYuMTA4LDQuODY1LTExLjA5NywxMC4xMzQtMTMuNjE1YzIuNDA5LTEuMTUsNS4wNjctMS43ODcsNy44OC0xLjc4N2gxMTQuMjY3DQoJCWMxMy41MzcsMCwyNi4xNzMsMC44ODYsMzcuNzA2LDIuNzUxYzMuMjk1LDAuNTI4LDYuNDk3LDEuMTM1LDkuNjIxLDEuODE4YzMuMTA4LDAuNjk5LDYuMTM5LDEuNDc3LDkuMDc3LDIuMzMxDQoJCWMxLjQ2MSwwLjQzNSwyLjkwNiwwLjg4Niw0LjMyMSwxLjMzN2M1LjY3MywxLjg4MSwxMC45NDIsNC4xMDMsMTUuODA3LDYuNjY4YzUuNzItMzYuNDc4LTAuMDQ3LTYxLjMxNC0xOS43Ny04My44MDQNCgkJYy0yMS43NDQtMjQuNzU5LTYwLjk4OC0zNS4zNTktMTExLjIwNS0zNS4zNTlIMTM1LjE1M2MtMTAuMjU4LDAtMTkuMDA4LDcuNDYtMjAuNTk0LDE3LjYwOUw1My44MzYsNDE3LjY4DQoJCWMtMS4xOTcsNy42MTYsNC42NzgsMTQuNDg1LDEyLjM1NiwxNC40ODVoOTAuMDA1bDIyLjU5OC0xNDMuMzc4TDIwMy4xMDQsMTM0LjgyNXoiLz4NCjwvZz4NCjwvc3ZnPg0K"/><text x="19.5" y="15" fill="#010101" fill-opacity=".3"></text><text x="19.5" y="14"></text><text x="48.5" y="15" fill="#010101" fill-opacity=".3">Donate</text><text x="48.5" y="14">Donate</text></g></svg>

build/build.js

@@ -1,35 +1,41 @@
-// https://github.com/shelljs/shelljs
-require('shelljs/global')
-env.NODE_ENV = 'production'
+'use strict'
+require('./check-versions')()
 
-var path = require('path')
-var config = require('../config')
-var ora = require('ora')
-var webpack = require('webpack')
-var webpackConfig = require('./webpack.prod.conf')
+process.env.NODE_ENV = 'production'
 
-console.log(
-  '  Tip:\n' +
-  '  Built files are meant to be served over an HTTP server.\n' +
-  '  Opening index.html over file:// won\'t work.\n'
-)
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
 
-var spinner = ora('building UMD module...')
+const spinner = ora('building for production...')
 spinner.start()
 
-var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
-rm('-rf', assetsPath)
-mkdir('-p', assetsPath)
-
-
-webpack(webpackConfig, function (err, stats) {
-  spinner.stop()
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
   if (err) throw err
-  process.stdout.write(stats.toString({
-    colors: true,
-    modules: false,
-    children: false,
-    chunks: false,
-    chunkModules: false
-  }) + '\n')
+  webpack(webpackConfig, function (err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
 })

build/check-versions.js

@@ -0,0 +1,49 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+    console.log()
+    process.exit(1)
+  }
+}

build/dev-client.js

@@ -1,4 +1,5 @@
 /* eslint-disable */
+'use strict'
 require('eventsource-polyfill')
 var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
 

build/dev-server.js

@@ -1,45 +1,61 @@
-var path = require('path')
-var express = require('express')
-var webpack = require('webpack')
-var config = require('../config')
-var proxyMiddleware = require('http-proxy-middleware')
-var webpackConfig = process.env.NODE_ENV === 'testing'
+'use strict'
+require('./check-versions')()
+
+const config = require('../config')
+if (!process.env.NODE_ENV) {
+  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
+}
+
+const opn = require('opn')
+const path = require('path')
+const express = require('express')
+const webpack = require('webpack')
+const proxyMiddleware = require('http-proxy-middleware')
+const webpackConfig = (process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'production')
   ? require('./webpack.prod.conf')
   : require('./webpack.dev.conf')
 
 // default port where dev server listens for incoming traffic
-var port = process.env.PORT || config.dev.port
+const port = process.env.PORT || config.dev.port
+// automatically open browser, if not set will be false
+const autoOpenBrowser = !!config.dev.autoOpenBrowser
 // Define HTTP proxies to your custom API backend
 // https://github.com/chimurai/http-proxy-middleware
-var proxyTable = config.dev.proxyTable
+const proxyTable = config.dev.proxyTable
 
-var app = express()
-var compiler = webpack(webpackConfig)
+const app = express()
+const compiler = webpack(webpackConfig)
 
-var devMiddleware = require('webpack-dev-middleware')(compiler, {
+const devMiddleware = require('webpack-dev-middleware')(compiler, {
   publicPath: webpackConfig.output.publicPath,
-  stats: {
-    colors: true,
-    chunks: false
-  }
+  quiet: true
 })
 
-var hotMiddleware = require('webpack-hot-middleware')(compiler)
-// force page reload when html-webpack-plugin template changes
-compiler.plugin('compilation', function (compilation) {
-  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
-    hotMiddleware.publish({ action: 'reload' })
-    cb()
-  })
+const hotMiddleware = require('webpack-hot-middleware')(compiler, {
+  log: false,
+  heartbeat: 2000
 })
+// force page reload when html-webpack-plugin template changes
+// currently disabled until this is resolved:
+// https://github.com/jantimon/html-webpack-plugin/issues/680
+// compiler.plugin('compilation', function (compilation) {
+//   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+//     hotMiddleware.publish({ action: 'reload' })
+//     cb()
+//   })
+// })
+
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(hotMiddleware)
 
 // proxy api requests
 Object.keys(proxyTable).forEach(function (context) {
-  var options = proxyTable[context]
+  const options = proxyTable[context]
   if (typeof options === 'string') {
     options = { target: options }
   }
-  app.use(proxyMiddleware(context, options))
+  app.use(proxyMiddleware(options.filter || context, options))
 })
 
 // handle fallback for HTML5 history API
@@ -48,18 +64,44 @@ app.use(require('connect-history-api-fallback')())
 // serve webpack bundle output
 app.use(devMiddleware)
 
-// enable hot-reload and state-preserving
-// compilation error display
-app.use(hotMiddleware)
-
 // serve pure static assets
-var staticPath = path.posix.join(config.build.assetsPublicPath, config.build.assetsSubDirectory)
+const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
 app.use(staticPath, express.static('./static'))
 
-module.exports = app.listen(port, function (err) {
-  if (err) {
-    console.log(err)
-    return
-  }
-  console.log('Listening at http://localhost:' + port + '\n')
+const uri = 'http://localhost:' + port
+
+var _resolve
+var _reject
+var readyPromise = new Promise((resolve, reject) => {
+  _resolve = resolve
+  _reject = reject
 })
+
+var server
+var portfinder = require('portfinder')
+portfinder.basePort = port
+
+console.log('> Starting dev server...')
+devMiddleware.waitUntilValid(() => {
+  portfinder.getPort((err, port) => {
+    if (err) {
+      _reject(err)
+    }
+    process.env.PORT = port
+    var uri = 'http://localhost:' + port
+    console.log('> Listening at ' + uri + '\n')
+    // when env is testing, don't need open it
+    if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+      opn(uri)
+    }
+    server = app.listen(port)
+    _resolve()
+  })
+})
+
+module.exports = {
+  ready: readyPromise,
+  close: () => {
+    server.close()
+  }
+}

build/utils.js

@@ -1,55 +1,71 @@
-var path = require('path')
-var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 exports.assetsPath = function (_path) {
-  return path.posix.join(config.build.assetsSubDirectory, _path)
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+  return path.posix.join(assetsSubDirectory, _path)
 }
 
 exports.cssLoaders = function (options) {
   options = options || {}
-  // generate loader string to be used with extract text plugin
-  function generateLoaders (loaders) {
-    var sourceLoader = loaders.map(function (loader) {
-      var extraParamChar
-      if (/\?/.test(loader)) {
-        loader = loader.replace(/\?/, '-loader?')
-        extraParamChar = '&'
-      } else {
-        loader = loader + '-loader'
-        extraParamChar = '?'
-      }
-      return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
-    }).join('!')
 
-    if (options.extract) {
-      return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
-    } else {
-      return ['vue-style-loader', sourceLoader].join('!')
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      minimize: process.env.NODE_ENV === 'production',
+      sourceMap: options.sourceMap
     }
   }
 
-  // http://vuejs.github.io/vue-loader/configurations/extract-css.html
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = [cssLoader]
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
   return {
-    css: generateLoaders(['css']),
-    postcss: generateLoaders(['css']),
-    less: generateLoaders(['css', 'less']),
-    sass: generateLoaders(['css', 'sass?indentedSyntax']),
-    scss: generateLoaders(['css', 'sass']),
-    stylus: generateLoaders(['css', 'stylus']),
-    styl: generateLoaders(['css', 'stylus'])
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
   }
 }
 
 // Generate loaders for standalone style files (outside of .vue)
 exports.styleLoaders = function (options) {
-  var output = []
-  var loaders = exports.cssLoaders(options)
-  for (var extension in loaders) {
-    var loader = loaders[extension]
+  const output = []
+  const loaders = exports.cssLoaders(options)
+  for (const extension in loaders) {
+    const loader = loaders[extension]
     output.push({
       test: new RegExp('\\.' + extension + '$'),
-      loader: loader
+      use: loader
     })
   }
   return output

build/vue-loader.conf.js

@@ -0,0 +1,19 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: isProduction
+      ? config.build.productionSourceMap
+      : config.dev.cssSourceMap,
+    extract: isProduction
+  }),
+  transformToRequire: {
+    video: 'src',
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

build/webpack.base.conf.js

@@ -1,7 +1,14 @@
-var path = require('path')
-var config = require('../config')
-var utils = require('./utils')
-var projectRoot = path.resolve(__dirname, '../')
+'use strict'
+const webpack = require('webpack')
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+const npmCfg = require('../package.json')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
 
 module.exports = {
   entry: {
@@ -9,77 +16,68 @@ module.exports = {
   },
   output: {
     path: config.build.assetsRoot,
-    publicPath: config.build.assetsPublicPath,
-    filename: '[name].js'
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
   },
   resolve: {
-    extensions: ['', '.js', '.vue'],
-    fallback: [path.join(__dirname, '../node_modules')],
+    extensions: ['.js', '.vue', '.json'],
     alias: {
-      'src': path.resolve(__dirname, '../src'),
-      'mixins': path.resolve(__dirname, '../src/mixins'),
-      'BaseCharts': path.resolve(__dirname, '../src/BaseCharts')
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src')
     }
   },
-  resolveLoader: {
-    fallback: [path.join(__dirname, '../node_modules')]
-  },
   module: {
-    preLoaders: [
+    rules: [
+      {
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [resolve('src'), resolve('test')],
+        options: {
+          formatter: require('eslint-friendly-formatter')
+        }
+      },
       {
         test: /\.vue$/,
-        loader: 'eslint',
-        include: projectRoot,
-        exclude: /node_modules/
+        loader: 'vue-loader',
+        options: vueLoaderConfig
       },
       {
         test: /\.js$/,
-        loader: 'eslint',
-        include: projectRoot,
-        exclude: /node_modules/
-      }
-    ],
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue'
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel',
-        include: projectRoot,
-        exclude: /node_modules/
-      },
-      {
-        test: /\.json$/,
-        loader: 'json'
-      },
-      {
-        test: /\.html$/,
-        loader: 'vue-html'
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test')]
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url',
-        query: {
+        loader: 'url-loader',
+        options: {
           limit: 10000,
           name: utils.assetsPath('img/[name].[hash:7].[ext]')
         }
       },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url',
-        query: {
+        loader: 'url-loader',
+        options: {
           limit: 10000,
           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
         }
       }
     ]
   },
-  eslint: {
-    formatter: require('eslint-friendly-formatter')
-  },
-  vue: {
-    loaders: utils.cssLoaders()
-  }
+  plugins: [
+    new webpack.DefinePlugin({
+      LIB_VERSION: JSON.stringify(npmCfg.version)
+    })
+  ]
 }

build/webpack.dev.conf.js

@@ -1,9 +1,11 @@
-var config = require('../config')
-var webpack = require('webpack')
-var merge = require('webpack-merge')
-var utils = require('./utils')
-var baseWebpackConfig = require('./webpack.base.conf')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 
 // add hot-reload related code to entry chunks
 Object.keys(baseWebpackConfig.entry).forEach(function (name) {
@@ -12,23 +14,23 @@ Object.keys(baseWebpackConfig.entry).forEach(function (name) {
 
 module.exports = merge(baseWebpackConfig, {
   module: {
-    loaders: utils.styleLoaders()
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
   },
-  // eval-source-map is faster for development
-  devtool: '#eval-source-map',
+  // cheap-module-eval-source-map is faster for development
+  devtool: '#cheap-module-eval-source-map',
   plugins: [
     new webpack.DefinePlugin({
       'process.env': config.dev.env
     }),
     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
-    new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'index.html',
       inject: true
-    })
+    }),
+    new FriendlyErrorsPlugin()
   ]
 })

build/webpack.prod.conf.js

@@ -1,33 +1,128 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
 const webpack = require('webpack')
-const base = require('./webpack.base.conf')
 const config = require('../config')
-var env = process.env.NODE_ENV === 'testing'
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+
+const env = process.env.NODE_ENV === 'testing'
   ? require('../config/test.env')
   : config.build.env
 
-base.entry = {
-  lib: './src/index.js'
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      sourceMap: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css')
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: {
+        safe: true
+      }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: process.env.NODE_ENV === 'testing'
+        ? 'index.html'
+        : config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vender modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: function (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor']
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
 }
 
-base.output = {
-  path: config.build.assetsRoot,
-  publicPath: config.build.assetsPublicPath,
-  filename: 'vue-chartjs.js',
-  library: 'VueChartJs',
-  libraryTarget: 'umd'
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
 }
 
-var webpackConfig = Object.assign({}, base)
-
-webpackConfig.devtool = '#source-map'
-webpackConfig.plugins = (webpackConfig.plugins || []).concat([
-  new webpack.DefinePlugin({
-    'process.env.NODE_ENV': env
-  }),
-  new webpack.optimize.UglifyJsPlugin({
-    compress: { warnings: false }
-  }),
-  new webpack.optimize.OccurenceOrderPlugin(),
-])
-
 module.exports = webpackConfig

build/webpack.release.full.js

@@ -1,92 +0,0 @@
-var vue = require('vue-loader')
-var path = require('path')
-var webpack = require("webpack")
-var ExtractTextPlugin = require("extract-text-webpack-plugin")
-var projectRoot = path.resolve(__dirname, '../')
-var cssLoader = ExtractTextPlugin.extract('style-loader', 'css-loader')
-const npmCfg = require('../package.json');
-
-var banner = [
-    npmCfg.name + ' v' + npmCfg.version,
-    '(c) ' + (new Date().getFullYear()) + ' ' + npmCfg.author,
-    npmCfg.homepage
-].join('\n')
-
-module.exports = {
-  entry: {
-    'vue-chartjs': './src/index.js'
-  },
-  output: {
-    filename: './dist/[name].full.js',
-    library: 'VueChartJs',
-    libraryTarget: 'umd',
-    umdNamedDefine: true
-  },
-  module: {
-    preLoaders: [
-      {
-        test: /\.vue$/,
-        loader: 'eslint',
-        include: projectRoot,
-        exclude: /node_modules/
-      },
-      {
-        test: /\.js$/,
-        loader: 'eslint',
-        include: projectRoot,
-        exclude: /node_modules/
-      }
-    ],
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue'
-      },
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'babel'
-      },
-      {
-        test: /\.css$/,
-        loader: cssLoader
-      },
-      {
-        test: /\.s[a|c]ss$/,
-        loader: ExtractTextPlugin.extract('style-loader','css-loader!sass-loader')
-      },
-      {
-        test: /\.json$/, loader: 'json'
-      }
-    ]
-  },
-  eslint: {
-    formatter: require('eslint-friendly-formatter')
-  },
-  babel: {
-    presets: ['es2015'],
-    plugins: ['transform-runtime']
-  },
-  plugins: [
-    new webpack.BannerPlugin(banner)
-  ]
-}
-
-if (process.env.NODE_ENV === 'production') {
-
-  delete module.exports.devtool
-  module.exports.plugins = [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    }),
-    new webpack.optimize.OccurenceOrderPlugin()
-    // new ExtractTextPlugin('build.css')
-  ]
-}

build/webpack.release.full.min.js

@@ -1,18 +0,0 @@
-var config = require('./webpack.release.full.js')
-var webpack = require('webpack')
-
-config.output.filename = config.output.filename.replace(/\.js$/, '.min.js')
-
-delete config.devtool
-
-config.plugins = [
-  new webpack.optimize.UglifyJsPlugin({
-    sourceMap: false,
-    compress: {
-      warnings: false
-    }
-  }),
-  new webpack.optimize.OccurenceOrderPlugin()
-]
-
-module.exports = config

build/webpack.release.js

@@ -1,21 +1,25 @@
-var vue = require('vue-loader')
 var path = require('path')
-var webpack = require("webpack")
-var ExtractTextPlugin = require("extract-text-webpack-plugin")
-var projectRoot = path.resolve(__dirname, '../')
+var webpack = require('webpack')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var cssLoader = ExtractTextPlugin.extract('style-loader', 'css-loader')
-const npmCfg = require('../package.json');
+const npmCfg = require('../package.json')
+const vueLoaderConfig = require('./vue-loader.conf')
 
 var banner = [
-    npmCfg.name + ' v' + npmCfg.version,
-    '(c) ' + (new Date().getFullYear()) + ' ' + npmCfg.author,
-    npmCfg.homepage
+  npmCfg.name + ' v' + npmCfg.version,
+  '(c) ' + (new Date().getFullYear()) + ' ' + npmCfg.author,
+  npmCfg.homepage
 ].join('\n')
 
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
 module.exports = {
   entry: {
     'vue-chartjs': './src/index.js'
   },
+  devtool: 'source-map',
   output: {
     filename: './dist/[name].js',
     library: 'VueChartJs',
@@ -23,33 +27,40 @@ module.exports = {
     umdNamedDefine: true
   },
   externals: {
-    'vue': 'vue',
-    'chart.js': 'chart.js'
+    'chart.js': {
+      root: 'Chart',
+      commonjs: 'chart.js',
+      commonjs2: 'chart.js',
+      amd: 'chart.js'
+    }
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src')
+    }
   },
   module: {
-    preLoaders: [
+    rules: [
+      {
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [resolve('src'), resolve('test')],
+        options: {
+          formatter: require('eslint-friendly-formatter')
+        }
+      },
       {
         test: /\.vue$/,
-        loader: 'eslint',
-        include: projectRoot,
-        exclude: /node_modules/
+        loader: 'vue-loader',
+        options: vueLoaderConfig
       },
       {
         test: /\.js$/,
-        loader: 'eslint',
-        include: projectRoot,
-        exclude: /node_modules/
-      }
-    ],
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue'
-      },
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'babel'
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test')]
       },
       {
         test: /\.css$/,
@@ -57,40 +68,27 @@ module.exports = {
       },
       {
         test: /\.s[a|c]ss$/,
-        loader: ExtractTextPlugin.extract('style-loader','css-loader!sass-loader')
+        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')
       },
       {
-        test: /\.json$/, loader: 'json'
+        test: /\.json$/,
+        loader: 'json-loader'
       }
     ]
   },
-  eslint: {
-    formatter: require('eslint-friendly-formatter')
-  },
-  babel: {
-    presets: ['es2015'],
-    plugins: ['transform-runtime']
-  },
   plugins: [
-    new webpack.BannerPlugin(banner)
+    new webpack.BannerPlugin(banner),
+    new webpack.optimize.ModuleConcatenationPlugin()
   ]
 }
 
 if (process.env.NODE_ENV === 'production') {
-
-  delete module.exports.devtool
+  // delete module.exports.devtool
   module.exports.plugins = [
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: '"production"'
       }
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    }),
-    new webpack.optimize.OccurenceOrderPlugin()
-    // new ExtractTextPlugin('build.css')
+    })
   ]
 }

build/webpack.release.min.js

@@ -3,16 +3,14 @@ var webpack = require('webpack')
 
 config.output.filename = config.output.filename.replace(/\.js$/, '.min.js')
 
-delete config.devtool
-
 config.plugins = [
+  new webpack.optimize.ModuleConcatenationPlugin(),
   new webpack.optimize.UglifyJsPlugin({
-    sourceMap: false,
+    sourceMap: true,
     compress: {
       warnings: false
     }
-  }),
-  new webpack.optimize.OccurenceOrderPlugin()
+  })
 ]
 
 module.exports = config

build/webpack.test.conf.js

@@ -0,0 +1,32 @@
+'use strict'
+// This is the webpack config used for unit tests.
+
+const utils = require('./utils')
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  // use inline sourcemap for karma-sourcemap-loader
+  module: {
+    rules: utils.styleLoaders()
+  },
+  devtool: '#inline-source-map',
+  resolveLoader: {
+    alias: {
+      // necessary to to make lang="scss" work in test when using vue-loader's ?inject option
+      // see discussion at https://github.com/vuejs/vue-loader/issues/724
+      'scss-loader': 'sass-loader'
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/test.env')
+    })
+  ]
+})
+
+// no need for app entry during tests
+delete webpackConfig.entry
+
+module.exports = webpackConfig

config/dev.env.js

@@ -1,5 +1,6 @@
-var merge = require('webpack-merge')
-var prodEnv = require('./prod.env')
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"'

config/index.js

@@ -1,21 +1,42 @@
+
+'use strict'
+// Template version: 1.1.1
 // see http://vuejs-templates.github.io/webpack for documentation.
-var path = require('path')
+
+const path = require('path')
 
 module.exports = {
   build: {
     env: require('./prod.env'),
+    index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: '',
+    assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     productionSourceMap: true,
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
   },
   dev: {
     env: require('./dev.env'),
-    port: 8080,
-    proxyTable: {}
-  },
-  umd: {
-    assetsRoot: path.resolve(__dirname, '../umd'),
-    assetsPublicPath: '/'
+    port: process.env.PORT || 8080,
+    autoOpenBrowser: true,
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+    // CSS Sourcemaps off by default because relative paths are "buggy"
+    // with this option, according to the CSS-Loader README
+    // (https://github.com/webpack/css-loader#sourcemaps)
+    // In our experience, they generally work as expected,
+    // just be aware of this issue when enabling this option.
+    cssSourceMap: false
   }
 }

config/prod.env.js

@@ -1,3 +1,4 @@
+'use strict'
 module.exports = {
   NODE_ENV: '"production"'
 }

config/test.env.js

@@ -1,5 +1,6 @@
-var merge = require('webpack-merge')
-var devEnv = require('./dev.env')
+'use strict'
+const merge = require('webpack-merge')
+const devEnv = require('./dev.env')
 
 module.exports = merge(devEnv, {
   NODE_ENV: '"testing"'

dist/vue-chartjs.js

@@ -0,0 +1,317 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("chart.js"));
+	else if(typeof define === 'function' && define.amd)
+		define("VueChartJs", ["chart.js"], factory);
+	else if(typeof exports === 'object')
+		exports["VueChartJs"] = factory(require("chart.js"));
+	else
+		root["VueChartJs"] = factory(root["Chart"]);
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_3__) {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VueCharts", function() { return VueCharts; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__mixins_index_js__ = __webpack_require__(1);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__BaseCharts__ = __webpack_require__(2);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Bar", function() { return __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["a"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "HorizontalBar", function() { return __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["d"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Doughnut", function() { return __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["c"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Line", function() { return __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["e"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Pie", function() { return __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["f"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "PolarArea", function() { return __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["g"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Radar", function() { return __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["h"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Bubble", function() { return __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["b"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Scatter", function() { return __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["i"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "mixins", function() { return __WEBPACK_IMPORTED_MODULE_0__mixins_index_js__["a"]; });
+
+
+var VueCharts = {
+  Bar: __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["a" /* Bar */],
+  HorizontalBar: __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["d" /* HorizontalBar */],
+  Doughnut: __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["c" /* Doughnut */],
+  Line: __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["e" /* Line */],
+  Pie: __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["f" /* Pie */],
+  PolarArea: __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["g" /* PolarArea */],
+  Radar: __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["h" /* Radar */],
+  Bubble: __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["b" /* Bubble */],
+  Scatter: __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["i" /* Scatter */],
+  mixins: __WEBPACK_IMPORTED_MODULE_0__mixins_index_js__["a" /* default */]
+};
+/* harmony default export */ __webpack_exports__["default"] = (VueCharts);
+
+
+/***/ }),
+/* 1 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* unused harmony export reactiveData */
+/* unused harmony export reactiveProp */
+function dataHandler(newData, oldData) {
+  if (oldData) {
+    var chart = this.$data._chart;
+    var newDatasetLabels = newData.datasets.map(function (dataset) {
+      return dataset.label;
+    });
+    var oldDatasetLabels = oldData.datasets.map(function (dataset) {
+      return dataset.label;
+    });
+    var oldLabels = JSON.stringify(oldDatasetLabels);
+    var newLabels = JSON.stringify(newDatasetLabels);
+
+    if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
+      newData.datasets.forEach(function (dataset, i) {
+        var oldDatasetKeys = Object.keys(oldData.datasets[i]);
+        var newDatasetKeys = Object.keys(dataset);
+        var deletionKeys = oldDatasetKeys.filter(function (key) {
+          return key !== '_meta' && newDatasetKeys.indexOf(key) === -1;
+        });
+        deletionKeys.forEach(function (deletionKey) {
+          delete chart.data.datasets[i][deletionKey];
+        });
+
+        for (var attribute in dataset) {
+          if (dataset.hasOwnProperty(attribute)) {
+            chart.data.datasets[i][attribute] = dataset[attribute];
+          }
+        }
+      });
+
+      if (newData.hasOwnProperty('labels')) {
+        chart.data.labels = newData.labels;
+      }
+
+      if (newData.hasOwnProperty('xLabels')) {
+        chart.data.xLabels = newData.xLabels;
+      }
+
+      if (newData.hasOwnProperty('yLabels')) {
+        chart.data.yLabels = newData.yLabels;
+      }
+
+      chart.update();
+    } else {
+      chart.destroy();
+      this.renderChart(this.chartData, this.options);
+    }
+  } else {
+    if (this.$data._chart) {
+      this.$data._chart.destroy();
+    }
+
+    this.renderChart(this.chartData, this.options);
+  }
+}
+
+var reactiveData = {
+  data: function data() {
+    return {
+      chartData: null
+    };
+  },
+  watch: {
+    'chartData': dataHandler
+  }
+};
+var reactiveProp = {
+  props: {
+    chartData: {
+      required: true
+    }
+  },
+  watch: {
+    'chartData': dataHandler
+  }
+};
+/* harmony default export */ __webpack_exports__["a"] = ({
+  reactiveData: reactiveData,
+  reactiveProp: reactiveProp
+});
+
+/***/ }),
+/* 2 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Bar; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return HorizontalBar; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return Doughnut; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return Line; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return Pie; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return PolarArea; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return Radar; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return Bubble; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "i", function() { return Scatter; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_chart_js__ = __webpack_require__(3);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_chart_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_chart_js__);
+
+
+function generateChart(chartId, chartType) {
+  return {
+    render: function render(createElement) {
+      return createElement('div', {
+        style: this.styles,
+        class: this.cssClasses
+      }, [createElement('canvas', {
+        attrs: {
+          id: this.chartId,
+          width: this.width,
+          height: this.height
+        },
+        ref: 'canvas'
+      })]);
+    },
+    props: {
+      chartId: {
+        default: chartId,
+        type: String
+      },
+      width: {
+        default: 400,
+        type: Number
+      },
+      height: {
+        default: 400,
+        type: Number
+      },
+      cssClasses: {
+        type: String,
+        default: ''
+      },
+      styles: {
+        type: Object
+      },
+      plugins: {
+        type: Array,
+        default: function _default() {
+          return [];
+        }
+      }
+    },
+    data: function data() {
+      return {
+        _chart: null,
+        _plugins: this.plugins
+      };
+    },
+    methods: {
+      addPlugin: function addPlugin(plugin) {
+        this.$data._plugins.push(plugin);
+      },
+      renderChart: function renderChart(data, options) {
+        this.$data._chart = new __WEBPACK_IMPORTED_MODULE_0_chart_js___default.a(this.$refs.canvas.getContext('2d'), {
+          type: chartType,
+          data: data,
+          options: options,
+          plugins: this.$data._plugins
+        });
+      }
+    },
+    beforeDestroy: function beforeDestroy() {
+      if (this.$data._chart) {
+        this.$data._chart.destroy();
+      }
+    }
+  };
+}
+
+var Bar = generateChart('bar-chart', 'bar');
+var HorizontalBar = generateChart('horizontalbar-chart', 'horizontalBar');
+var Doughnut = generateChart('doughnut-chart', 'doughnut');
+var Line = generateChart('line-chart', 'line');
+var Pie = generateChart('pie-chart', 'pie');
+var PolarArea = generateChart('polar-chart', 'polarArea');
+var Radar = generateChart('radar-chart', 'radar');
+var Bubble = generateChart('bubble-chart', 'bubble');
+var Scatter = generateChart('scatter-chart', 'scatter');
+/* unused harmony default export */ var _unused_webpack_default_export = ({
+  Bar: Bar,
+  HorizontalBar: HorizontalBar,
+  Doughnut: Doughnut,
+  Line: Line,
+  Pie: Pie,
+  PolarArea: PolarArea,
+  Radar: Radar,
+  Bubble: Bubble,
+  Scatter: Scatter
+});
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
+
+/***/ })
+/******/ ]);
+});
+//# sourceMappingURL=vue-chartjs.js.map

dist/vue-chartjs.min.js

@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("chart.js")):"function"==typeof define&&define.amd?define("VueChartJs",["chart.js"],e):"object"==typeof exports?exports.VueChartJs=e(require("chart.js")):t.VueChartJs=e(t.Chart)}("undefined"!=typeof self?self:this,function(t){return function(t){function e(a){if(r[a])return r[a].exports;var n=r[a]={i:a,l:!1,exports:{}};return t[a].call(n.exports,n,n.exports,e),n.l=!0,n.exports}var r={};return e.m=t,e.c=r,e.d=function(t,r,a){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:a})},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,r){"use strict";function a(t,e){if(e){var r=this.$data._chart,a=t.datasets.map(function(t){return t.label}),n=e.datasets.map(function(t){return t.label}),s=JSON.stringify(n);JSON.stringify(a)===s&&e.datasets.length===t.datasets.length?(t.datasets.forEach(function(t,a){var n=Object.keys(e.datasets[a]),s=Object.keys(t);n.filter(function(t){return"_meta"!==t&&-1===s.indexOf(t)}).forEach(function(t){delete r.data.datasets[a][t]});for(var i in t)t.hasOwnProperty(i)&&(r.data.datasets[a][i]=t[i])}),t.hasOwnProperty("labels")&&(r.data.labels=t.labels),t.hasOwnProperty("xLabels")&&(r.data.xLabels=t.xLabels),t.hasOwnProperty("yLabels")&&(r.data.yLabels=t.yLabels),r.update()):(r.destroy(),this.renderChart(this.chartData,this.options))}else this.$data._chart&&this.$data._chart.destroy(),this.renderChart(this.chartData,this.options)}function n(t,e){return{render:function(t){return t("div",{style:this.styles,class:this.cssClasses},[t("canvas",{attrs:{id:this.chartId,width:this.width,height:this.height},ref:"canvas"})])},props:{chartId:{default:t,type:String},width:{default:400,type:Number},height:{default:400,type:Number},cssClasses:{type:String,default:""},styles:{type:Object},plugins:{type:Array,default:function(){return[]}}},data:function(){return{_chart:null,_plugins:this.plugins}},methods:{addPlugin:function(t){this.$data._plugins.push(t)},renderChart:function(t,r){this.$data._chart=new c.a(this.$refs.canvas.getContext("2d"),{type:e,data:t,options:r,plugins:this.$data._plugins})}},beforeDestroy:function(){this.$data._chart&&this.$data._chart.destroy()}}}Object.defineProperty(e,"__esModule",{value:!0});var s={data:function(){return{chartData:null}},watch:{chartData:a}},i={props:{chartData:{required:!0}},watch:{chartData:a}},u={reactiveData:s,reactiveProp:i},o=r(1),c=r.n(o),h=n("bar-chart","bar"),d=n("horizontalbar-chart","horizontalBar"),l=n("doughnut-chart","doughnut"),f=n("line-chart","line"),p=n("pie-chart","pie"),b=n("polar-chart","polarArea"),y=n("radar-chart","radar"),g=n("bubble-chart","bubble"),x=n("scatter-chart","scatter");r.d(e,"VueCharts",function(){return v}),r.d(e,"Bar",function(){return h}),r.d(e,"HorizontalBar",function(){return d}),r.d(e,"Doughnut",function(){return l}),r.d(e,"Line",function(){return f}),r.d(e,"Pie",function(){return p}),r.d(e,"PolarArea",function(){return b}),r.d(e,"Radar",function(){return y}),r.d(e,"Bubble",function(){return g}),r.d(e,"Scatter",function(){return x}),r.d(e,"mixins",function(){return u});var v={Bar:h,HorizontalBar:d,Doughnut:l,Line:f,Pie:p,PolarArea:b,Radar:y,Bubble:g,Scatter:x,mixins:u};e.default=v},function(e,r){e.exports=t}])});
+//# sourceMappingURL=vue-chartjs.min.js.map

docs/README.md

@@ -3,26 +3,26 @@ search: en
 ---
 
 # vue-chartjs
-**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.
+**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in Vue. You can easily create reusable chart components.
 
 ## Introduction
-`vue-chartjs` let you use chart.js without much hassle inside vue. It's perfect for people who need simple charts up and running as fast as possible.
+`vue-chartjs` lets you use Chart.js without much hassle inside Vue. It's perfect for people who need simple charts up and running as fast as possible.
 
-It abstracts the basic logic but exposes the chart.js object to give you the most possible flexibility.
+It abstracts the basic logic but exposes the Chart.js object to give you maximal flexibility.
 
 ## Installation
 If you are working with Vue.js 2+ simple run:
 
 `yarn add vue-chartjs chart.js`
 
-If you are using vue 1.x please use the `legacy` tag. However the vue 1 version is not maintained anymore.
+If you are using vue 1.x please use the `legacy` tag. However the Vue 1 version is not maintained anymore.
 
 `yarn add vue-chartjs@legacy`
 
 ## Quick Start
 
-You need to import the base chart and extend it. This gives much more flexibility when working with different data.
-You can encapsulate your components and use props to pass data or you can directly imput them inside the component. However this way, your component is not reuseable.
+You need to import the base chart and extend it. This gives more flexibility when working with different data.
+You can encapsulate your components and use props to pass data or you can input them directly inside the component. However your component is not reusable this way.
 
 You can import the whole package or each module individual.
 
@@ -30,15 +30,16 @@ You can import the whole package or each module individual.
 // CommitChart.js
 import { Bar } from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   mounted () {
     // Overwriting base render method with actual data.
     this.renderChart(data, options)
   }
-})
+}
 ```
 
-You can pass the `renderChart()` method, two arguments:
+You can pass two arguments to the `renderChart()` method:
 
 - Data object
 - Options object
@@ -76,22 +77,23 @@ There are some basic props defined in the BaseCharts. Because you `extend()` the
 
 ## Examples
 
-Here are some exmaples
+Here are some examples
 
 ### Chart with props
 
-You can create the data and options props to pass data to the chart.
+You can create data and options props to pass data to the chart.
 
 ```javascript
 // LineChart.js
 import { Line } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   props: ['data', 'options'],
   mounted () {
     this.renderChart(this.data, this.options)
   }
-})
+}
 ```
 
 After you add your component you can use it:
@@ -100,7 +102,7 @@ After you add your component you can use it:
  <line-chart :data="{your data object}" :options="{your options}"></line-chart>
 ```
 
-If you want to overwrite the width and height:
+If you want to overwrite width and height:
 
 ```html
  <line-chart
@@ -113,7 +115,7 @@ If you want to overwrite the width and height:
 ```
 
 <p class="warning">
-  Please keep in mind, that you have to set `responsive: false` to be able to set a fix `width` and `height`.
+  Please keep in mind, that you have to set `responsive: false` to be able to set a fixed `width` and `height`.
 </p>
 
 ### Chart with local data
@@ -121,7 +123,8 @@ If you want to overwrite the width and height:
 ```javascript
 import {Bar} from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   data () {
     return {
       datacollection: {
@@ -139,24 +142,23 @@ export default Bar.extend({
   mounted () {
     this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
   }
-})
+}
 ```
 
-### Reusebale Components
+### Reusable Components
 
-If you want to keep your chart components reuseable, it's the best to add a wrapper to them. This way the chart component is only responsable for the pure data representation and the wrapper component for the logic behind it. There are many different usecases and it is different if you're running a Single Page Application or integrate it in for example laravel.
+If you want to keep your chart components reusable, it's the best to add a wrapper to them. This way the chart component is only responsible for the pure data representation and the wrapper component for the logic behind it. There are many different use cases and it is different if you're running a single page application or integrate it in for example laravel.
 
 ## Reactive Data
 
-Chart.js does not provide a live update if you change the datasets. However `vue-chartjs` provides two mixins to achive this.
+Chart.js does not provide a live update if you change the datasets. However `vue-chartjs` provides two mixins to achieve this.
 
 - `reactiveProp`
 - `reactiveData`
 
-Both mixins to actually the same. Most of the time you will use `reactiveProp`. It extends the logic of your chart component and automatically creates a prop names `chartData` and add a `vue watch` on this prop. On data change, it will either call `update()` if only the data inside the datasets has changed or `renderChart()` if new datasets were added.
+Both mixins do actually achieve the same. Most of the time you will use `reactiveProp`. It extends the logic of your chart component and automatically creates a prop named `chartData` and adds a `vue watch` on this prop. On data change, it will either call `update()` if only the data inside the datasets has changed or `renderChart()` if new datasets were added.
 
-`reactiveData` simply creates a local chartData variable which is not a prop! And add a watcher.
-This is only usefull, if you need single purpose charts and make an API call inside your chart component.
+`reactiveData` simply creates a local chartData variable which is not a prop! and adds a watcher. This is only useful, if you need single purpose charts and make an API call inside your chart component.
 
 ```javascript
 data () {
@@ -173,7 +175,8 @@ data () {
 import { Line, mixins } from 'vue-chartjs'
 const { reactiveProp } = mixins
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [reactiveProp],
   props: ['options'],
   mounted () {
@@ -181,7 +184,7 @@ export default Line.extend({
     // If you want to pass options please create a local options object
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 **RandomChart.vue**
@@ -242,7 +245,7 @@ export default Line.extend({
 ```
 
 <p class="warning">
-  ⚠ Attention: If you mutate your data in a parent component and pass it to your child chart component keep in mind the javascript limitiations.
+  ⚠ Attention: If you mutate your data in a parent component and pass it to your child chart component keep the javascript limitations in mind.
   More info in this [issue#44](https://github.com/apertureless/vue-chartjs/issues/44)
 </p>
 
@@ -255,11 +258,11 @@ export default Line.extend({
 
 ## Chart.js object
 
-Sometimes you need more control over chart.js. Thats why you can access the chart.js instance over `this._chart`
+Sometimes you need more control over Chart.js. That's why you can access the Chart.js instance over `this.$data._chart`.
 
 ## Inline plugins
 
-In Chart.js you can define global and inline plugins. Global plugins are working without problems with `vue-chartjs` like in the [chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html) described.
+In Chart.js you can define global and inline plugins. Global plugins are working without problems with `vue-chartjs` like in the [Chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html) described.
 
 If you want to add inline plugins, `vue-chartjs` exposes a helper method called `addPlugin()`
 You should call `addPlugin()` before the `renderChart()` method.
@@ -281,7 +284,7 @@ mounted () {
 
 ### Bar Chart
 <p class="tip">
-  There are two versions of the Bar chart. `{Bar}` and `{HorizontalBar}`
+  There are two versions of the Bar chart: `{Bar}` and `{HorizontalBar}`
 </p>
 
 ![Bar](assets/bar.png)
@@ -311,13 +314,13 @@ mounted () {
 
 ### Scatter
 
-This chart has a different data structure then the others. Right now the reactive Mixins are not working for this chart type.
+This chart has a different data structure then the others. Right now the reactive mixins are not working for this chart type.
 
 ![Scatter](assets/scatter.png)
 
 
 ## Explanation of Different Builds
-There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a peerDependency.
+There are three different entry points. It depends on your build setup. The dependencies are bundled or required as a peerDependency.
 
 - Browser
 - Browserify / Webpack 1
@@ -333,22 +336,21 @@ There are three different entry points. It depends on which build setup do you h
 | es/index* |  peerDependency | peerDependency  |
 
 ### Browser
-You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). For this case, please use the `vue-chartjs.full.min.js` which is the minified version. It has Vue.js and Chart.js bundled into it. And bundled to a UMD Module. So you only need that one file.
+You can use `vue-chartjs` directly in the browser without any build setup, like in this [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). In this case, please use the `vue-chartjs.full.min.js` which is the minified version. It has Vue.js and Chart.js bundled into it and is bundled to a UMD module, so you only need that one file.
 
 
 ### Browserify / Webpack 1
 
 If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
 
-However Vue.js and Chart.js are `peerDependencies` so you have to install them seperately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
+However Vue.js and Chart.js are `peerDependencies` so you have to install them separately. In most projects you will have Vue.js already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
 
 ### Webpack 2
-If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
-It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way your tree shaking will work.  Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.
+If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point, which is `es/index.js`. It is a __transpiled__ es version of the source and is not __bundled__ to a module. This way your tree shaking will work.  Like in the bundled version, Vue.js and Chart.js are `peerDependencies` and need to be installed.
 
 ## Resources
 
-You can find here some Resources like tutorials on how to use `vue-chartjs`
+You can find here some resources like tutorials on how to use `vue-chartjs`
 
 - [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f)
 - [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a)

docs/config.js

@@ -1,14 +1,21 @@
 const langs = [
   {title: 'English', path: '/home', matchPath: /^\/(home|changelog)/},
   {title: 'Deutsch', path: '/de/', matchPath: /^\/de/},
+  {title: 'Français', path: '/fr-fr/', matchPath: /^\/fr-fr/},
   {title: '日本語', path: '/ja/', matchPath: /^\/ja/},
   {title: 'Português do Brasil', path: '/pt-br/', matchPath: /^\/pt-br/},
   {title: '中文(简体)', path: '/zh-cn/', matchPath: /^\/zh-cn/},
-  {title: 'Русский', path: '/ru/', matchPath: /^\/ru/}
+  {title: 'Русский', path: '/ru/', matchPath: /^\/ru/},
+  {title: 'Bahasa Indonesia', path: '/id/', matchPath: /^\/ru/}
 ]
 
 docute.init({
   title: 'vue-chartjs docs',
+  announcement(route) {
+    const info = { type: 'success' }
+    info.html = '<a style="margin-right:10px;" class="docute-button docute-button-mini docute-button-success" href="https://www.paypal.me/apertureless/50eur" target="_blank">Donate!</a> Support vue-chartjs development by a one-time donation.'
+    return info
+  },
   landing: true,
   landing: '_landing.html',
   repo: 'apertureless/vue-chartjs',
@@ -39,7 +46,7 @@ docute.init({
       apiKey: 'b3544f7387612693644777553675d56a',
       indexName: 'vue-chartjs',
       // algolia docsearch allows you to search with tag filter
-      tags: ['en', 'de', 'ja', 'pt-br', 'ru'],
+      tags: ['en', 'fr', 'ja', 'pt-br', 'ru'],
       // this plugin does require a url too
       // where docsearch fetches contents
       url: 'https://vue-chartjs.org'

docs/de/README.md

@@ -1,311 +0,0 @@
----
-search: de
----
-
-# vue-chartjs
-**vue-chartjs** ist ein Wrapper für [Chart.js](https://github.com/chartjs/Chart.js) in vue. Man kann einfach wiederverwendbare Chart Components erstellen.
-
-## Einleitung
-`vue-chartjs` let you use chart.js without much hassle inside vue. It's perfect for people who need simple charts up and running as fast as possible.
-
-It abstracts the basic logic but exposes the chart.js object to give you the most possible flexibility.
-
-## Installation
-If you are working with Vue.js 2+ simple run:
-
-`yarn add vue-chartjs chart.js`
-
-If you are using vue 1.x please use the `legacy` tag. However the vue 1 version is not maintained anymore.
-
-`yarn add vue-chartjs@legacy`
-
-## Schnellstart
-
-You need to import the base chart and extend it. This gives much more flexibility when working with different data.
-You can encapsulate your components and use props to pass data or you can directly imput them inside the component. However this way, your component is not reuseable.
-
-You can import the whole package or each module individual.
-
-```javascript
-// CommitChart.js
-import { Bar } from 'vue-chartjs'
-
-export default Bar.extend({
-  mounted () {
-    // Overwriting base render method with actual data.
-    this.renderChart(data, options)
-  }
-})
-```
-
-You can pass the `renderChart()` method, two arguments:
-
-- Data object
-- Options object
-
-### Data object
-
-The data object looks like this:
-
-```javascript
-{
-  labels: ['January', 'February'],
-  datasets: [
-    {
-      label: 'GitHub Commits',
-      backgroundColor: '#f87979',
-      data: [40, 20]
-    }
-  ]
-}
-```
-
-For more information take a look at the [Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data) docs.
-
-## Props
-
-There are some basic props defined in the BaseCharts. Because you `extend()` them, they are *invisible*, but you can overwrite them:
-
-| Prop | Description |
-|---|---|
-| width | chart width |
-| height | chart height |
-| chart-id | id of the canvas |
-
-
-## Examples
-
-Here are some exmaples
-
-### Chart with props
-
-You can create the data and options props to pass data to the chart.
-
-```javascript
-// LineChart.js
-import { Line } from 'vue-chartjs'
-
-export default Line.extend({
-  props: ['data', 'options'],
-  mounted () {
-    this.renderChart(this.data, this.options)
-  }
-})
-```
-
-After you add your component you can use it:
-
-```html
- <line-chart :data="{your data object}" :options="{your options}"></line-chart>
-```
-
-If you want to overwrite the width and height:
-
-```html
- <line-chart
-  :data="{your data object}"
-  :options="{responsive: false, maintainAspectRatio: false}"
-  :width="400"
-  :height="200"
-  >
- </line-chart>
-```
-
-<p class="warning">
-  Please keep in mind, that you have to set `responsive: false` to be able to set a fix `width` and `height.
-</p>
-
-### Chart with local data
-
-```javascript
-import {Bar} from 'vue-chartjs'
-
-export default Bar.extend({
-  data () {
-    return {
-      datacollection: {
-        labels: ['January', 'February'],
-        datasets: [
-          {
-            label: 'Data One',
-            backgroundColor: '#f87979',
-            data: [40, 20]
-          }
-        ]
-      }
-    }
-  },
-  mounted () {
-    this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
-  }
-})
-```
-
-### Reusebale Components
-
-If you want to keep your chart components reuseable, it's the best to add a wrapper to them. This way the chart component is only responsable for the pure data representation and the wrapper component for the logic behind it. There are many different usecases and it is different if you're running a Single Page Application or integrate it in for example laravel.
-
-## Reactive Data
-
-Chart.js does not provide a live update if you change the datasets. However `vue-chartjs` provides two mixins to achive this.
-
-- `reactiveProp`
-- `reactiveData`
-
-Both mixins to actually the same. Most of the time you will use `reactiveProp`. It extends the logic of your chart component and automatically creates a prop names `chartData` and add a `vue watch` on this prop. On data change, it will either call `update()` if only the data inside the datasets has changed or `renderChart()` if new datasets were added.
-
-`reactiveData` simply creates a local chartData variable which is not a prop! And add a watcher.
-This is only usefull, if you need single purpose charts and make an API call inside your chart component.
-
-```javascript
-data () {
-  return {
-    chartData: null
-  }
-}
-```
-
-### Example
-
-**LineChart.js**
-```javascript
-import { Line, mixins } from 'vue-chartjs'
-const { reactiveProp } = mixins
-
-export default Line.extend({
-  mixins: [reactiveProp],
-  props: ['options'],
-  mounted () {
-    // this.chartData is created in the mixin
-    this.renderChart(this.chartData, this.options)
-  }
-})
-```
-
-**RandomChart.vue**
-
-```javascript
-<template>
-  <div class="small">
-    <line-chart :chart-data="datacollection"></line-chart>
-    <button @click="fillData()">Randomize</button>
-  </div>
-</template>
-
-<script>
-  import LineChart from './LineChart.js'
-
-  export default {
-    components: {
-      LineChart
-    },
-    data () {
-      return {
-        datacollection: null
-      }
-    },
-    mounted () {
-      this.fillData()
-    },
-    methods: {
-      fillData () {
-        this.datacollection = {
-          labels: [this.getRandomInt(), this.getRandomInt()],
-          datasets: [
-            {
-              label: 'Data One',
-              backgroundColor: '#f87979',
-              data: [this.getRandomInt(), this.getRandomInt()]
-            }, {
-              label: 'Data One',
-              backgroundColor: '#f87979',
-              data: [this.getRandomInt(), this.getRandomInt()]
-            }
-          ]
-        }
-      },
-      getRandomInt () {
-        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
-      }
-    }
-  }
-</script>
-
-<style>
-  .small {
-    max-width: 600px;
-    margin:  150px auto;
-  }
-</style>
-```
-
-<p class="warning">
-  ⚠ Attention: If you mutate your data in a parent component and pass it to your child chart component keep in mind the javascript limitiations.
-  More info in this [issue#44](https://github.com/apertureless/vue-chartjs/issues/44)
-</p>
-
-### Limitations
-  <ul>
-    <li>[Caveats](https://vuejs.org/v2/guide/list.html#Caveats)</li>
-    <li>[Change-Detection-Caveats](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)</li>
-    <li>[vm.$watch](https://vuejs.org/v2/api/#vm-watch)</li>
-  </ul>
-
-## Chart.js object
-
-Sometimes you need more control over chart.js. Thats why you can access the chart.js instance over `this._chart`
-
-## Available Charts
-
-### Bar Chart
-<p class="tip">
-  There are two versions of the Bar chart. `{Bar}` and `{HorizontalBar}`
-</p>
-
-![Bar](../assets/bar.png)
-### Line Chart
-
-![Line](../assets/line.png)
-
-### Doughnut
-
-![Doughnut](../assets/doughnut.png)
-
-### Pie
-
-![Pie](../assets/pie.png)
-
-### Radar
-
-![Pie](../assets/radar.png)
-
-### Polar Area
-
-![Pie](../assets/polar.png)
-
-### Bubble
-
-![Bubble](../assets/bubble.png)
-
-## Webpack, Browserify and dist files.
-
-If you use `import VueCharts from 'vue-chartjs'` you will mostly import the UMD build of vue-chart.js
-This is because of compatibility reasons. This approach however has a downside: vue.js and chart.js are bundled into the file.
-And you end up with two vue instances.
-
-If you're using webpack 2 or rollup however, it will automatically import the transpiled ES sources.
-If you know what you're doing you can import directly from the transpiled es sources:
-
-```
-import { Line } from 'vue-chartjs/es'
-```
-
-### Browserify
-
-In order for a browserify user to transpile the code, they would need to install `babelify` and `babel-preset-es2015` and add a .babelrc file in the root of their project with the following code:
-
-```
-{
-"presets": ["es2015"]
-}
-```

docs/fr-fr/README.md

@@ -0,0 +1,366 @@
+---
+search: fr-fr
+---
+
+# vue-chartjs
+**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.
+
+## Introduction
+`vue-chartjs` vous permet d'utiliser chart.js avec vue sans prise de tête. C'est la solution idéale pour ceux qui souhaitent créer des graphes simplement et rapidement.
+
+La logique interne de chart.js est abstraite, mais l'objet sous-jacent est exposé, de sorte que vous puissiez bénéficier de la plus grande flexibilité possible.
+
+## Installation
+Si vous travaillez avec Vue.js 2+, exécutez simplement :
+
+`yarn add vue-chartjs chart.js`
+
+Avec vue 1.x, il vous faudra utiliser le marqueur `legacy`. Notez toutefois que la version 1 de vue n'est plus maintenue à l'heure actuelle.
+
+`yarn add vue-chartjs@legacy`
+
+## Démarrage rapide
+
+Importez l'objet graphe de base afin de l'étendre. Cette façon de faire offre beaucoup plus de flexibilité lorsque plusieurs sources de données sont utilisées.
+Il est possible d'encapsuler vos composants et d'utiliser les props pour transmettre les données, ou vous pouvez également les indiquer directement à l'intérieur du composant. Cependant, cette seconde méthode ne créera pas des composants réutilisables.
+
+Vous pouvez choisir d'importer le package dans son intégralité, ou chaque composant individuellement.
+
+```javascript
+// CommitChart.js
+import { Bar } from 'vue-chartjs'
+
+export default {
+  extends: Bar,
+  mounted () {
+    // Surcharge de la méthode render avec les données.
+    this.renderChart(data, options)
+  }
+}
+```
+
+La méthode `renderChart()` prend deux paramètres :
+
+- un objet de données
+- un objet d'options
+
+### Objet de données
+
+L'objet de données prend la structure suivante :
+
+```javascript
+{
+  labels: ['Janvier', 'Février'],
+  datasets: [
+    {
+      label: 'Commits sur GitHub',
+      backgroundColor: '#f87979',
+      data: [40, 20]
+    }
+  ]
+}
+```
+
+Pour plus d'informations, vous pouvez lire la documentation [Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data).
+
+## Props
+
+Certains props de base sont définis dans BaseCharts. Grâce à l'héritage de l'opération `extend()`, ceux-ci peuvent être surchargés, bien qu'ils soient *invisibles*.
+
+| Prop | Description |
+|---|---|
+| width | largeur du graphe |
+| height | hauteur du graphe |
+| chart-id | id du canvas |
+| css-classes | Chaîne de caractères avec les classes CSS à appliquer à l'élément div parent |
+| styles | Object avec les styles CSS à appliquer à l'élément div parent |
+
+## Exemples
+
+Voici quelques exemples.
+
+### Graphe avec props
+
+Vous pouvez créer les props data et options à transmetttre au graphe.
+
+```javascript
+// LineChart.js
+import { Line } from 'vue-chartjs'
+
+export default {
+  extends: Line,
+  props: ['data', 'options'],
+  mounted () {
+    this.renderChart(this.data, this.options)
+  }
+}
+```
+
+Vous pourrez les utiliser après avoir ajouté votre composant :
+
+```html
+ <line-chart :data="{votre objet de données}" :options="{vos options}"></line-chart>
+```
+
+Si vous souhaitez modifier la hauteur ou la largeur :
+
+```html
+ <line-chart
+  :data="{votre objet de données}"
+  :options="{responsive: false, maintainAspectRatio: false}"
+  :width="400"
+  :height="200"
+  >
+ </line-chart>
+```
+
+<p class="warning">
+Vous devrez préciser `responsive: false` si vous souhaitez appliquer une taille fixe avec `width` et `height`.
+</p>
+
+### Graphe avec données locales
+
+```javascript
+import {Bar} from 'vue-chartjs'
+
+export default {
+  extends: Bar,
+  data () {
+    return {
+      datacollection: {
+        labels: ['Janvier', 'Février'],
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: '#f87979',
+            data: [40, 20]
+          }
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
+  }
+}
+```
+
+### Composants réutilisables
+
+Si vous souhaitez faire en sorte que vos composants restent réutilisables, appliquez un wrapper. De cette manière, le composant graphique est seulement responsable de la représentation de la donnée, alors que le wrapper se charge de la logique derrière elle. Il y a de nombreux cas d'utilisations, et la manière de faire sera différente si vous êtes sur une Application Monopage (SPA) ou si vous intégrez sur du Laravel par exemple.
+
+## Données en direct
+
+Chart.js ne fournit pas de mécanisme de mise à jour automatique si jamais vous deviez modifier vos jeux de données. Cependant, `vue-chartjs` met à disposition deux mixins pour cela :
+
+- `reactiveProp`
+- `reactiveData`
+
+Tous deux réalisent le même travail. La plupart du temps, c'est `reactiveProp` que vous utiliserez. Il reprend la logique de votre composant graphique, et crée automatiquement une prop `chartData` et ajoute une `vue watch` sur celle-ci. Lorsque la donnée change, `update()` sera appelée si c'est seulement le coeur de la donnée qui est modifié, et `renderChart()` si de nouveaux jeux de données ont été ajoutés.
+
+`reactiveData` crée une variable locale chartData (pas une prop !), et lui ajoute un watcher.
+Le seul cas d'utilisation est celui où vous souhaitez un graphe à usage unique, et que vous effectuez des appels API à l'intérieur même du composant.
+
+```javascript
+data () {
+  return {
+    chartData: null
+  }
+}
+```
+
+### Exemple
+
+**LineChart.js**
+
+```javascript
+import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default {
+  extends: Line,
+  mixins: [reactiveProp],
+  props: ['options'],
+  mounted () {
+    // this.chartData est créé par le mixin.
+    // si vous voulez transmettre des options, il faudra créer une variable locale
+    this.renderChart(this.chartData, this.options)
+  }
+}
+```
+
+**RandomChart.vue**
+
+```javascript
+<template>
+  <div class="small">
+    <line-chart :chart-data="datacollection"></line-chart>
+    <button @click="fillData()">Aléatoire</button>
+  </div>
+</template>
+
+<script>
+  import LineChart from './LineChart.js'
+
+  export default {
+    components: {
+      LineChart
+    },
+    data () {
+      return {
+        datacollection: null
+      }
+    },
+    mounted () {
+      this.fillData()
+    },
+    methods: {
+      fillData () {
+        this.datacollection = {
+          labels: [this.getRandomInt(), this.getRandomInt()],
+          datasets: [
+            {
+              label: 'Data One',
+              backgroundColor: '#f87979',
+              data: [this.getRandomInt(), this.getRandomInt()]
+            }, {
+              label: 'Data One',
+              backgroundColor: '#f87979',
+              data: [this.getRandomInt(), this.getRandomInt()]
+            }
+          ]
+        }
+      },
+      getRandomInt () {
+        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+      }
+    }
+  }
+</script>
+
+<style>
+  .small {
+    max-width: 600px;
+    margin:  150px auto;
+  }
+</style>
+```
+
+<p class="warning">
+  ⚠ Attention : si vous permutez vos données dans un composant parent puis les transmettez à un composant enfant, gardez à l'esprit les limitations de javascript.
+  Plus d'infos sur [issue#44](https://github.com/apertureless/vue-chartjs/issues/44).
+</p>
+
+### Limitations
+  <ul>
+    <li>[Mises en garde](https://vuejs.org/v2/guide/list.html#Caveats)</li>
+    <li>[Mise en garde sur la détection des modifications](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)</li>
+    <li>[vm.$watch](https://vuejs.org/v2/api/#vm-watch)</li>
+  </ul>
+
+## Objet Chart.js
+
+Il peut arriver d'avoir besoin de plus de contrôle sur l'objet chart.js. Vous pouvez, à cet effet, accéder à cet objet via `this.$data._chart`.
+
+## Plugins inline
+
+Avec Chart.js, vous pouvez définir des pugins globaux ou inline. Les plugins globaux fonctionnent sans souci avec `vue-chartjs`, comme décrit dans la [documentation chart.js](http://www.chartjs.org/docs/latest/developers/plugins.html).
+
+Si vous désirez ajouter des plugins inline, `vue-chartjs` expose une méthode `addPlugin()`. L'appel à cette méthode doit se faire avant celui de `renderChart()`.
+
+### Exemple
+
+```javascript
+mounted () {
+  this.addPlugin({
+    id: 'mon-plugin',
+    beforeInit: function (chart) {
+      ....
+    }
+  })
+}
+```
+
+## Diagrammes disponibles
+
+### Colonnes
+
+<p class="tip">
+  Il y a deux versions du diagramme colonnes : `{Bar}` et `{HorizontalBar}`
+</p>
+
+![Colonnes](../assets/bar.png)
+
+### Ligne
+
+![Ligne](../assets/line.png)
+
+### Beignet
+
+![Beignet](../assets/doughnut.png)
+
+### Circulaire
+
+![Circulaire](../assets/pie.png)
+
+### Radar
+
+![Radar](../assets/radar.png)
+
+### Polaire
+
+![Plaire](../assets/polar.png)
+
+### Bulles
+
+![Bulles](../assets/bubble.png)
+
+
+### Nuages de points
+
+Ce diagramme utilise une structure de données différente des autres. Pour le moment, les mixis de mise à jour de données ne fonctionnent pas avec ce type de graphique.
+
+![Nuage de points](../assets/scatter.png)
+
+
+## Explications sur les différents builds
+
+Il y a trois builds différents. Le choix dépend de votre projet. Les dépendances sont soient intégrées, soit marquées comme peerDependency.
+
+- Browser
+- Browserify / Webpack 1
+- Webpack 2
+
+
+| Build | Chart.js | Vue.js |
+|---|---|---|
+| vue-chartjs.full.js | Intégré | Intégré |
+| vue-chartjs.full.min.js |  Intégré | Intégré  |
+| vue-chartjs.js | peerDependency | peerDependency  |
+| vue-chartjs.min.js | peerDependency  | peerDependency  |
+| es/index* |  peerDependency | peerDependency  |
+
+### Browser
+
+Vous pouvez utiliser `vue-chartjs` directement depuis votre navigateur sans aucun pré-requis. Comme par exemple sur ce [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). Dans une telle situation, veuillez utiliser `vue-chartjs.full.min.js`, qui est la version compressée. Elle intègre Vue.js et Chart.js, et est bundlée à un module UMD. Donc ce fichier se suffit à lui-même.
+
+
+### Browserify / Webpack 1
+
+Si vous utilisez Gulp, Browserify ou Webpack 1, vous devrez prendre `vue-chartjs.js`, qui est __transpilé__ et __bundlé__ comme module UMD.
+
+Toutefois, Vue.js et Chart.js sont des `peerDependencies`, vous devrez donc les installer séparemment. Dans la plupart des projets, `Vue.js` sera de toute façon déjà installé. De cette manière, vous pouvez utiliser des versions différentes de Vue.js et Chart.js dans un même package.
+
+### Webpack 2
+
+Si vous utilisez Webpack 2, `jsnext:main` / `module` sera automatiquement sélectionné. `es/index.js`est une version es __transpilée__ des sources, et n'est pas __bundlée__ à un module. Ainsi, rien ne devrait bloquer l'élimination de code mort.  Comme dans la version bundlée précédente, `Vue.js` et `Chart.js` sont des `peerDependencies` et doivent être installés.
+
+## Ressources
+
+Voici une liste de ressources et tutoriels sur comment utiliser `vue-chartjs` :
+
+- [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f)
+- [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a)
+- [Let’s Build a Web App with Vue, Chart.js and an API Part I](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44)
+- [Let’s Build a Web App with Vue, Chart.js and an API Part II](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf)
+- [Build a realtime chart with VueJS and Pusher](https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/)

docs/id/README.md

@@ -0,0 +1,363 @@
+---
+search: id
+---
+
+# vue-chartjs
+**vue-chartjs** adalah  wrapper [Chart.js](https://github.com/chartjs/Chart.js) dalam vue. Kamu dapat dengan mudah membuat komponen chart reusable.
+
+## Pengenalan
+`vue-chartjs` memungkinkan kamu untuk menggunakan chart.js tanpa usaha lebih didalam vue. Sempurna untuk orang-orang yang membutuhkan bagan/chart simpel dengan cepat.
+
+Flexibel karena langsung menampilkan objek chart.js.
+
+
+## Instalasi
+Jika kamu menggunakan Vue.js 2+:
+
+`yarn add vue-chartjs chart.js`
+
+Jika menggunakan vue 1.x gunakan tag `legacy`. versi vue 1 sudah tidak diurus lagi.
+
+`yarn add vue-chartjs@legacy`
+
+## Mulai Cepat
+
+Kamu perlu untuk meng-import base chart dan meng-extend-nya. Dengan cara ini akan lebih fleksibel ketika bekerja dengan data yang berbeda.
+Kamu dapat melakukan enkapsulasi komponen-komponen dan menggunakan props untuk menyampaikan data atau bisa juga dengan menginputkan langsung didalam komponen. Namun komponenmu tidak reuseable.
+
+Kamu bisa meng-import seluruh package atau modul-modul terpisah.
+
+```javascript
+// CommitChart.js
+import { Bar } from 'vue-chartjs'
+
+export default {
+  extends: Bar,
+  mounted () {
+    // Overwriting base render method with actual data.
+    this.renderChart(data, options)
+  }
+}
+```
+
+Kamu dapat melewatkan dua argumen pada `renderChart()`:
+
+- Objek Data
+- Objek Opsi
+
+### Data object
+
+Objek data:
+
+```javascript
+{
+  labels: ['January', 'February'],
+  datasets: [
+    {
+      label: 'GitHub Commits',
+      backgroundColor: '#f87979',
+      data: [40, 20]
+    }
+  ]
+}
+```
+
+Untuk keterangan lebih lanjut dapat dilihat di dokumentasi [Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data).
+
+## Props
+
+Terdapat beberapa props standar yang didefinisikan didalam BaseChart. Karena menggunakan `extend()`, props-props tersebut *tidak terlihat*, Namun kamu tetap bisa menulis ulang:
+
+| Prop | Description |
+|---|---|
+| width | lebar chart |
+| height | tinggi chart |
+| chart-id | id canvas |
+| css-classes | String dengan kelas css mengelilingi div |
+| styles | Objek dengan style css mengelilingi div |
+
+## Contoh
+
+Berikut adalah beberapa contoh penggunaan
+
+### Chart dengan props
+
+Kamu dapat membuat props data dan opsi untuk melewatkan data pada chart.
+
+```javascript
+// LineChart.js
+import { Line } from 'vue-chartjs'
+
+export default {
+  extends: Line,
+  props: ['data', 'options'],
+  mounted () {
+    this.renderChart(this.data, this.options)
+  }
+}
+```
+
+Setelah kamu menambahkannya kamu dapat menggunakannya seperti biasa:
+
+```html
+ <line-chart :data="{your data object}" :options="{your options}"></line-chart>
+```
+
+Jika kamu ingin mengatur tinggi dan lebar:
+
+```html
+ <line-chart
+  :data="{your data object}"
+  :options="{responsive: false, maintainAspectRatio: false}"
+  :width="400"
+  :height="200"
+  >
+ </line-chart>
+```
+
+<p class="warning">
+  Perlu diingat, kamu perlu untuk mengatur `responsive: false` agaar dapat mengatur `width` dan `height`.
+</p>
+
+### Chart dengan data lokal
+
+```javascript
+import {Bar} from 'vue-chartjs'
+
+export default {
+  extends: Bar,
+  data () {
+    return {
+      datacollection: {
+        labels: ['January', 'February'],
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: '#f87979',
+            data: [40, 20]
+          }
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
+  }
+}
+```
+
+### Reusable Komponen
+
+Jika kamu ingin agar komponen chart reusable, cara paling baik adalah dengan menambahkan sebuah wrapper. Dengan cara ini komponen chart hanya bertanggung jawab dalam representasi data dan wrapper komponen bertanggung jawab dengan logika didalamnya. Banyak kasus-kasus yang berbeda dan juga berbeda jika kamu menjalankan Single Page Application atau mengintegrasikannya pada contoh laravel.
+
+## Reactive Data
+
+Chart.js tidak menyediakan live update jika kamu mengubah datasets. Akan tetapi `vue-chartjs` menyediakan 2 mixins untuk melakukannya.
+
+- `reactiveProp`
+- `reactiveData`
+
+Kedua mixins tersebut sebenarnya sama. `reactiveProp` akan sering digunakan. `reactiveProp` meng-extend logika dari komponen chart dan secara otomatis membuat props `chartData` dan menambahkan `vue watch` dalam props ini. Pada saat data berubah, itu akan memanggil `update()` jika data memiliki datasets atau `renderChart()` jika datasets telah ada sebelumnya.
+
+`reactiveData` secara sederhana membuat variabel lokal chartData dimana itu bukan sebuah props! dan watcher. Hal ini bisa berguna, jika kamu membutuhkan chart tertentu dan melakukan akses API didalam komponen chart.
+
+```javascript
+data () {
+  return {
+    chartData: null
+  }
+}
+```
+
+### Contoh
+
+**LineChart.js**
+```javascript
+import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default {
+  extends: Line,
+  mixins: [reactiveProp],
+  props: ['options'],
+  mounted () {
+    // this.chartData is created in the mixin.
+    // If you want to pass options please create a local options object
+    this.renderChart(this.chartData, this.options)
+  }
+}
+```
+
+**RandomChart.vue**
+
+```javascript
+<template>
+  <div class="small">
+    <line-chart :chart-data="datacollection"></line-chart>
+    <button @click="fillData()">Randomize</button>
+  </div>
+</template>
+
+<script>
+  import LineChart from './LineChart.js'
+
+  export default {
+    components: {
+      LineChart
+    },
+    data () {
+      return {
+        datacollection: null
+      }
+    },
+    mounted () {
+      this.fillData()
+    },
+    methods: {
+      fillData () {
+        this.datacollection = {
+          labels: [this.getRandomInt(), this.getRandomInt()],
+          datasets: [
+            {
+              label: 'Data One',
+              backgroundColor: '#f87979',
+              data: [this.getRandomInt(), this.getRandomInt()]
+            }, {
+              label: 'Data One',
+              backgroundColor: '#f87979',
+              data: [this.getRandomInt(), this.getRandomInt()]
+            }
+          ]
+        }
+      },
+      getRandomInt () {
+        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+      }
+    }
+  }
+</script>
+
+<style>
+  .small {
+    max-width: 600px;
+    margin:  150px auto;
+  }
+</style>
+```
+
+<p class="warning">
+  ⚠ Perhatian: jika kamu memutasi data didalam komponen parent dan melewatkannya pada child komponen chart perlu diingat batasan javascript.
+  Info lebih lanjut [issue#44](https://github.com/apertureless/vue-chartjs/issues/44)
+</p>
+
+### Batasan
+  <ul>
+    <li>[Caveats](https://vuejs.org/v2/guide/list.html#Caveats)</li>
+    <li>[Change-Detection-Caveats](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)</li>
+    <li>[vm.$watch](https://vuejs.org/v2/api/#vm-watch)</li>
+  </ul>
+
+## Objek Chart.js
+
+Suatu ketika kamu membutuhkan kontrol chart.js. Kamu dapat mengaksesnya dengan `this.$data._chart`
+
+## Inline plugins
+
+Di Chart.js kamu dapat mendefinisikan plugin global dan inline. Plugin global bekerja tanpa masalah dengan `vue-chartjs` seperti yang dijelaskan pada [chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html)
+
+If you want to add inline plugins, `vue-chartjs` exposes a helper method called `addPlugin()`
+You should call `addPlugin()` before the `renderChart()` method.
+Jika kamu ingin menambahkan plugin inline, `vue-chartjs` menyediakan method helper `addPlugin()` kamu harus memanggil `addPlugin()` sebelum method `renderChart()`.
+
+### Contoh
+
+```javascript
+mounted () {
+  this.addPlugin({
+    id: 'my-plugin',
+    beforeInit: function (chart) {
+      ....
+    }
+  })
+}
+```
+
+## Charts yang Tersedia
+
+### Bar Chart
+<p class="tip">
+  Terdapat dua versi bar chart. `{Bar}` dan `{HorizontalBar}`
+</p>
+
+![Bar](assets/bar.png)
+### Line Chart
+
+![Line](assets/line.png)
+
+### Doughnut
+
+![Doughnut](assets/doughnut.png)
+
+### Pie
+
+![Pie](assets/pie.png)
+
+### Radar
+
+![Pie](assets/radar.png)
+
+### Polar Area
+
+![Pie](assets/polar.png)
+
+### Bubble
+
+![Bubble](assets/bubble.png)
+
+### Scatter
+
+This chart has a different data structure then the others. Right now the reactive Mixins are not working for this chart type.
+Chart ini memiliki struktur data yang berbeda dengan yang lainnya. Untuk sekarang reactive mixins tidak dapat bekerja pada tipe chart ini.
+
+![Scatter](assets/scatter.png)
+
+
+## Penjelasan Build
+Terdapat tiga jenis titik entri. Tergantung setup mana yang kamu gunakan. Dependensi-dependensi telah di-bundle atau require sebagai peerDependency.
+
+- Browser
+- Browserify / Webpack 1
+- Webpack 2
+
+
+| Build | Chart.js | Vue.js |
+|---|---|---|
+| vue-chartjs.full.js | Bundled | Bundled |
+| vue-chartjs.full.min.js |  Bundled | Bundled  |
+| vue-chartjs.js | peerDependency | peerDependency  |
+| vue-chartjs.min.js | peerDependency  | peerDependency  |
+| es/index* |  peerDependency | peerDependency  |
+
+### Browser
+Kamu dapat menggunakan `vue-chartjs` secara langsung didalam browser tanpa setup build. Seperti berikut [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). Dalam kasus ini, mohon gunakan `vue-chartjs.full.min.js` yang telah di-minify. Didalamnya terdapat Vue.js dan Chart.js. Dan bundel modul UMD. Jadi kamu hanya membutuhkan satu file saja.
+
+
+### Browserify / Webpack 1
+
+Jika kamu menggunakan GUlp, Browserify atau Webpack 1 entri yang digunakan adalah `vue-chartjs.js` dimana telah di__transpile__ dan di__bundle__ UMD Module.
+
+Bagaimanapun juga Vue.js dan Chart.js adalah `peerDependencies` jadi kamu harus meng-instalnya secara terpisah. Jika kamu telah memiliki `Vue.js` kamu dapat menggunakan versi Vue.js dan Chart.js yang terdapat di-package ini.
+
+### Webpack 2
+Jika kamu menggunakan Webpack 2 secara otomatis akan menggunakan titik entri `jsnext:main` / `module`. Di `es/index.js`
+Di__transpile__ es sumber dari versi ini. Dan tidak di__bundle__ pada modul. Sehingga tree shaking akan bekerja. Sama seperti versi bundle, `Vue.js` dan `Chart.js` adalah `peerDependencies` dan butuh untuk diinstal.
+
+## Sumber-sumber
+
+Kamu dapat menemukan sumber-sumber seperti tutrial bagaimana cara untuk menggunakan `vue-chartjs`
+
+- [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f)
+- [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a)
+- [Let’s Build a Web App with Vue, Chart.js and an API Part I](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44)
+- [Let’s Build a Web App with Vue, Chart.js and an API Part II](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf)
+- [Build a realtime chart with VueJS and Pusher](https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/)

docs/index.html

@@ -5,7 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
   <title>vue-chartjs doc</title>
-  <link rel="stylesheet" href="https://unpkg.com/docute@2/dist/docute.css">
+  <link rel="stylesheet" href="https://unpkg.com/docute/dist/docute.css">
 </head>
 <body>
   <!-- don't remove this part start -->

docs/ja/README.md

@@ -6,7 +6,7 @@ search: ja
 **vue-chartjs** は [Chart.js](https://github.com/chartjs/Chart.js) をvueで使用するためのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。
 
 ## イントロ
-`vue-chartjs` vueの中であまり面倒なくchart.jsを使うことができます。 シンプルなチャートをできるだけ早く実行したいという人に最適です。
+`vue-chartjs` vueの中であまり面倒ことがなくchart.jsを使うことができます。 シンプルなチャートをできるだけ早く実行したいという人に最適です。
 
 chart.jsの基本ロジックを抽象化していますが、公開されたchart.jsのオブジェクト使用して柔軟にカスタマイズできます。
 
@@ -32,15 +32,16 @@ BaseChartをインポートしてextendします。
 // CommitChart.js
 import { Bar } from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   mounted () {
     // Overwriting base render method with actual data.
     this.renderChart(data, options)
   }
-})
+}
 ```
 
-renderChart()メソッドに2つの引数を渡すことができます:
+`renderChart()`メソッドに2つの引数を渡すことができます:
 
 - Data object
 - Options object
@@ -63,16 +64,18 @@ renderChart()メソッドに2つの引数を渡すことができます:
 ```
 
 詳細については、[Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data) のドキュメントをご覧ください。
+
 ## プロパティ
 
-BaseChartsには基本プロパティがいくつか定義されています。 extendされたときにそれらは明示的に表示されていませんが、使用するときに上書きして設定することができます。
+BaseChartsには基本プロパティがいくつか定義されています。 `extend()`したときにそれらは *表示されていません* が、使用するときに上書きして設定することができます。
 
 | プロパティ | 説明 |
 |---|---|
 | width | chartの表示幅 |
 | height | chartの表示高さ |
 | chart-id | canvas要素のid |
-
+| css-classes | 周囲のdivのCSSクラスの文字列 |
+| styles | 周囲のdivコンテナのCSSスタイルを持つオブジェクト |
 
 ## 実装例
 
@@ -86,12 +89,13 @@ dataとoptionsプロパティを作成して、チャートにデータを渡す
 // LineChart.js
 import { Line } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   props: ['data', 'options'],
   mounted () {
     this.renderChart(this.data, this.options)
   }
-})
+}
 ```
 
 コンポーネントに追加して、使用することができます。
@@ -113,7 +117,7 @@ export default Line.extend({
 ```
 
 <p class="warning">
-`width` と `height` を反映させるためには、 `responsive：false` を設定しなければならないことに注意してください。
+固定値の`width` と `height` を反映させるためには、 `responsive：false` を設定しなければならないことに注意してください。
 </p>
 
 ### コンポーネント内のローカルデータを使用する場合
@@ -121,7 +125,8 @@ export default Line.extend({
 ```javascript
 import {Bar} from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   data () {
     return {
       datacollection: {
@@ -139,13 +144,12 @@ export default Bar.extend({
   mounted () {
     this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
   }
-})
+}
 ```
 
 ### コンポーネントの再利用
 
-チャートコンポーネントを再利用可能にしたい場合は、ラッパーを使用することをお勧めします。このようにすると、チャートコンポーネントはデータ表示とロジックを含むラッパーコンポーネントに対してのみ応答可能です。単一ページアプリケーションを実行している場合や、laravelで統合されている場合は、異なった方法があります。
-
+チャートコンポーネントを再利用可能にしたい場合は、ラッパーを使用することがベストです。このようにしてチャートコンポーネントは純粋なデータ表示と、背後にあるロジックのラッパーとしてのみ責務を負います。単一ページアプリケーションを実行している場合や、たとえば laravel などで統合されている場合は、異なった方法があります。
 
 ## リアクティブデータ
 
@@ -174,14 +178,16 @@ data () {
 import { Line, mixins } from 'vue-chartjs'
 const { reactiveProp } = mixins
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [reactiveProp],
   props: ['options'],
   mounted () {
-    // this.chartData is created in the mixin
+    // this.chartData is created in the mixin.
+    // If you want to pass options please create a local options object
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 **RandomChart.vue**
@@ -255,7 +261,24 @@ export default Line.extend({
 
 ## Chart.js オブジェクト
 
-場合によっては、chart.jsをより詳細に制御する必要があります。Chart.jsインスタンスには `this._chart` を使ってアクセスします。
+時にはchart.jsをより詳細に制御する必要があります。そのためには `this.$data._chart` を使ってChart.jsインスタンスにアクセスすることができます。
+
+## インライン プラグイン
+
+Chart.jsでは、グローバルプラグインとインラインプラグインを定義できます。[Chart.js docs]（http://www.chartjs.org/docs/latest/developers/plugins.html）で記載されているのようなグローバルプラグインは、 `vue-chartjs ` で問題なく動作しています。
+
+### Example
+
+```javascript
+mounted () {
+  this.addPlugin({
+    id: 'my-plugin',
+    beforeInit: function (chart) {
+      ....
+    }
+  })
+}
+```
 
 ## 利用可能なグラフ
 
@@ -289,6 +312,11 @@ export default Line.extend({
 
 ![Bubble](../assets/bubble.png)
 
+### 散布図
+
+このチャートは、他のものとは異なるデータ構造を持っています。現在のところ、reactive mixins はこのチャートタイプでは機能していません。
+
+![Scatter](../assets/scatter.png)
 
 ## ビルド方法の違い
 あなたが使用するビルドツールに依存した３つの異なるエントリーポイントがあります。 依存するライブラリは一緒にバンドルされているか、または peerDependency として指定します。
@@ -316,3 +344,13 @@ Vue.jsとChart.jsは `peerDependencies` なので別にインストールする
 
 ### Webpack 2
 Webpack 2を使用している場合、 `jsnext:main` または `module` に`es/index.js` を指定します。 ソースファイルは __トランスパイル__ されます。またmoduleには __バンドル__ されません。このようにすると `tree shaking` が動作します。バンドル版のように、`peerDependencies` で指定された `Vue.js` と `Chart.js` はインストールする必要があります。
+
+## Resources
+
+以下に `vue-chartjs` の使い方に関するチュートリアルのようなリソースがあります
+
+- [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f)
+- [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a)
+- [Let’s Build a Web App with Vue, Chart.js and an API Part I](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44)
+- [Let’s Build a Web App with Vue, Chart.js and an API Part II](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf)
+- [Build a realtime chart with VueJS and Pusher](https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/)

docs/pt-br/README.md

@@ -90,7 +90,8 @@ Apenas crie seu próprio componente.
 // CommitChart.js
 import { Bar } from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   mounted () {
     // Overwriting base render method with actual data.
     this.renderChart({
@@ -104,7 +105,7 @@ export default Bar.extend({
       ]
     })
   }
-})
+}
 ```
 
 Então, simplesmente importe e use seu próprio componente extendido como um componente vue.
@@ -121,12 +122,13 @@ Você pode sobreescrever as options (opções) padrão do gráfico. Basta passar
 // MonthlyIncome.js
 import { Line } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   props: ["data", "options"],
   mounted () {
     this.renderChart(this.data, this.options)
   }
-})
+}
 ```
 
 Use isso no seu componente vue
@@ -163,13 +165,14 @@ Os mixins criam automaticamente o `chartData` como um prop ou como um data. E ad
 // MonthlyIncome.js
 import { Line, mixins } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [mixins.reactiveProp],
   props: ["chartData", "options"],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 
 ```
 
@@ -181,26 +184,28 @@ Algumas maneiras de importá-los:
 // Load complete module with all charts
 import VueCharts from 'vue-chartjs'
 
-export default VueCharts.Line.extend({
+export default {
+  extends: VueCharts.Line,
   mixins: [VueCharts.mixins.reactiveProp],
   props: ["chartData", "options"],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 ```javascript
 // Load speperate modules
 import { Line, mixins } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [mixins.reactiveProp],
   props: ["chartData", "options"],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 ```javascript
@@ -208,13 +213,14 @@ export default Line.extend({
 import { Line, mixins } from 'vue-chartjs'
 const { reactiveProp } = mixins
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [reactiveProp],
   props: ["chartData", "options"],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 ## Gráficos disponíveis

docs/ru/README.md

@@ -17,7 +17,7 @@ search: ru
 
 # vue-chartjs
 
-**vue-chartjs** обертка для [Chart.js](https://github.com/chartjs/Chart.js) в vue. Вы можете с легкостью создавать многоразовые компоненты диаграмм.
+**vue-chartjs** это обертка для [Chart.js](https://github.com/chartjs/Chart.js) в vue. Вы можете с легкостью создавать многоразовые компоненты диаграмм.
 
 ## Демо & Документация
 
@@ -31,7 +31,7 @@ search: ru
 - v2 later
   - Vue.js 2.x
 
-После филнального выпуска vue.js 2, вы получите v2 по умолчанию, если установите vue-chartjs через npm.
+После финального выпуска vue.js 2, вы получите v2 по умолчанию, если установите vue-chartjs через npm.
 Больше нет необходимости в @next теге. Если вы нуждаетесь в v1, вам необходимо указать версию или использовать legacy тег.
 Если вы ищите v1, проверьте эту [ветку](https://github.com/apertureless/vue-chartjs/tree/release/1.x).
 
@@ -39,12 +39,12 @@ search: ru
 
 Просто выполните `yarn add vue-chartjs chart.js`
 
-В случаи если вы хотите использовать библиотеку прямо в браузере, добавьте
+В случае если вы хотите использовать библиотеку прямо в браузере, добавьте
 
 ```html
 <script src="https://unpkg.com/vue-chartjs@2.6.0/dist/vue-chartjs.full.min.js"></script>
 ```
-в ваши скрипты. Смотрите [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
+в ваши скрипты. Смотрите пример на [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
 
 ## Описание различий сборок
 
@@ -64,14 +64,14 @@ search: ru
 | es/index* |  peerDependency | peerDependency  |
 
 ### Браузер
-Вы можете использовать `vue-chartjs` прямо в браузере без установки каких-либо сборок. Пример на [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). В этом случаи, пожалуйста, используйте `vue-chartjs.full.min.js`. Это минифицированноая версиея библиотеки, содержащая Vue.js и Chart.js в себе, с возможностью подключения при помощи UMD Module. Таким образом, вам необходим лишь один файл.
+Вы можете использовать `vue-chartjs` прямо в браузере без установки каких-либо сборок. Пример на [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). В этом случае, пожалуйста, используйте `vue-chartjs.full.min.js`. Это минифицированная версия библиотеки, содержащая Vue.js и Chart.js в себе, с возможностью подключения при помощи UMD Module. Таким образом, вам необходим лишь один файл.
 
 
 ### Browserify / Webpack 1
 
 Если вы используете Gulp, Browserify или Webpack 1, входная точка находится в `vue-chartjs.js`. Она __транслируется__ и __собирается__ при помощи UMD Module.
 
-Однако Vue.js и Chart.js является `peerDependencies`, поэтому вы можете устанавливать их отдельно. В большинстве проектов вы в любом случаи будете иметь установленный `Vue.js`. В этом случаи, вы можете иметь различные версии Vue.js и Chart.js.
+Однако Vue.js и Chart.js являются `peerDependencies`, поэтому вы можете устанавливать их отдельно. В большинстве проектов вы в любом случае будете иметь установленный `Vue.js`. В этом случае, вы можете иметь различные версии Vue.js и Chart.js.
 
 ### Webpack 2
 Если вы используете Webpack 2, он будет автоматически использовать `jsnext:main` / `module` в качестве входной точки, которая расположена в `es/index.js`.
@@ -81,7 +81,7 @@ search: ru
 
 ## Как использовать
 
-Вам необходимо импортировать базовый класс диаграммы и унаследовать его. Это даст гораздо большую гибкость при работе с различными данными. Вы можете передать данные через props или vue-resource. 
+Вам необходимо импортировать базовый класс диаграммы и унаследовать его. Это даст гораздо большую гибкость при работе с различными данными. Вы можете передать данные через props или vue-resource.
 
 Вы можете импортировать весь проект или каждый модуль по отдельности.
 
@@ -96,7 +96,8 @@ import { Bar, Line } from 'vue-chartjs'
 // CommitChart.js
 import { Bar } from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   mounted () {
     // Переопределение базового рендер метода с реальными данными.
     this.renderChart({
@@ -110,7 +111,7 @@ export default Bar.extend({
       ]
     })
   }
-})
+}
 ```
 
 Затем просто импортируйте и используйте ваши собственные расширенные компоненты как обычные vue компоненты.
@@ -127,12 +128,13 @@ import CommitChart from 'path/to/component/CommitChart'
 // MonthlyIncome.js
 import { Line } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   props: ['data', 'options'],
   mounted () {
     this.renderChart(this.data, this.options)
   }
-})
+}
 ```
 
 Используйте это в вашем vue приложении
@@ -155,7 +157,7 @@ export default {
 ## Реактивность
 
 Chart.js не обновляет и не перерисовывает диаграмму при передаче новых данных.
-Впрочем, вы можете реализовать это самостоятельно или использовав один из двух подключенных миксинов:
+Впрочем, вы можете реализовать это самостоятельно или использовать один из двух подключенных миксинов:
 
 - `reactiveProp`
 - `reactiveData`
@@ -163,19 +165,20 @@ Chart.js не обновляет и не перерисовывает диагр
 Оба включены в `mixins` модуль.
 
 Миксины автоматически создают `chartData` в виде prop или data. И добавляют watcher. Если данные были измененны, график обновится.
-Но помните про ограничение vue и javascript на изменений массивов и объектов. Больше информации можно получить [здесь](http://vue-chartjs.org/#/home?id=reactive-data)
+Но помните про ограничения vue и javascript на изменение массивов и объектов. Больше информации можно получить [здесь](http://vue-chartjs.org/#/home?id=reactive-data)
 
 ```javascript
 // MonthlyIncome.js
 import { Line, mixins } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [mixins.reactiveProp],
   props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 
 ```
 
@@ -187,26 +190,28 @@ export default Line.extend({
 // Load complete module with all charts
 import VueCharts from 'vue-chartjs'
 
-export default VueCharts.Line.extend({
+export default {
+  extends: VueCharts.Line,
   mixins: [VueCharts.mixins.reactiveProp],
   props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 ```javascript
 // Load speperate modules
 import { Line, mixins } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [mixins.reactiveProp],
   props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 ```javascript
@@ -214,13 +219,14 @@ export default Line.extend({
 import { Line, mixins } from 'vue-chartjs'
 const { reactiveProp } = mixins
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [reactiveProp],
   props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 ## Доступные диаграммы
@@ -279,7 +285,7 @@ npm run e2e
 npm test
 ```
 
-Для детальных объяснений того, как это работает, перейдите в [руководство](http://vuejs-templates.github.io/webpack/) и [документацию для vue-loader](http://vuejs.github.io/vue-loader).
+Для получения детальных объяснений того, как это работает, перейдите в [руководство](http://vuejs-templates.github.io/webpack/) и [документацию для vue-loader](http://vuejs.github.io/vue-loader).
 
 ## Contributing
 

docs/zh-cn/README.md

@@ -31,12 +31,13 @@ search: zh-cn
 // CommitChart.js
 import { Bar } from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   mounted () {
     // Overwriting base render method with actual data.
     this.renderChart(data, options)
   }
-})
+}
 ```
 
 你可以给 `renderChart()` 方法传递两个参数：
@@ -86,12 +87,13 @@ export default Bar.extend({
 // LineChart.js
 import { Line } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   props: ['data', 'options'],
   mounted () {
     this.renderChart(this.data, this.options)
   }
-})
+}
 ```
 
 然后你可以把它作为组件使用。
@@ -121,7 +123,8 @@ export default Line.extend({
 ```javascript
 import {Bar} from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   data () {
     return {
       datacollection: {
@@ -139,7 +142,7 @@ export default Bar.extend({
   mounted () {
     this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
   }
-})
+}
 ```
 
 ### 可复用的组件
@@ -172,14 +175,15 @@ data () {
 import { Line, mixins } from 'vue-chartjs'
 const { reactiveProp } = mixins
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [reactiveProp],
   props: ['options'],
   mounted () {
     // this.chartData is created in the mixin
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 **RandomChart.vue**
@@ -253,7 +257,7 @@ export default Line.extend({
 
 ## Chart.js 对象
 
-有时你需要更多的调整 chart.js。你可以访问 `this._chart` 实例。
+有时你需要更多的调整 chart.js。你可以访问 `this.$data._chart` 实例。
 
 ## 内联插件
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-chartjs",
-  "version": "2.8.3",
-  "description": "vue.js wrapper for chart.js",
+  "version": "3.2.1",
+  "description": "Vue.js wrapper for chart.js for creating beautiful charts.",
   "author": "Jakub Juszczak <jakub@posteo.de>",
   "homepage": "http://vue-chartjs.org",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "Charts"
   ],
   "main": "dist/vue-chartjs.js",
-  "unpkg": "dist/vue-chartjs.full.min.js",
+  "unpkg": "dist/vue-chartjs.min.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
   "files": [
@@ -53,28 +53,23 @@
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
-    "release": "webpack --progress --hide-modules --config  ./build/webpack.release.js && NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.min.js && webpack --progress --hide-modules --config  ./build/webpack.release.full.js && NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.full.min.js",
-    "prepublish": "yarn run lint && yarn run test && yarn run build"
+    "release": "cross-env NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.min.js",
+    "prepublishOnly": "yarn run lint && yarn run test && yarn run build"
   },
-  "dependencies": {},
   "peerDependencies": {
-    "chart.js": "^2.6.0",
-    "vue": "^2.4.2"
+    "chart.js": "2.7.x"
   },
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.25.0",
-    "babel-loader": "^7.0.0",
-    "babel-plugin-transform-object-assign": "^6.22.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "babel-runtime": "^6.23.0",
+    "@babel/cli": "^7.0.0-beta.42",
+    "@babel/core": "^7.0.0-beta.42",
+    "@babel/preset-env": "^7.0.0-beta.42",
+    "@babel/preset-stage-2": "^7.0.0-beta.42",
+    "babel-loader": "8.0.0-beta.0",
     "chai": "^3.5.0",
-    "chart.js": "^2.6.0",
+    "chart.js": "2.7.2",
     "chromedriver": "^2.28.0",
     "connect-history-api-fallback": "^1.1.0",
-    "cross-env": "^3.2.4",
+    "cross-env": "^5.1.1",
     "cross-spawn": "^5.1.0",
     "css-loader": "^0.28.0",
     "eslint": "^3.19.0",
@@ -88,13 +83,14 @@
     "eslint-plugin-standard": "^3.0.1",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.15.2",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^3.0.1",
     "file-loader": "^0.10.1",
+    "friendly-errors-webpack-plugin": "^1.6.1",
     "function-bind": "^1.0.2",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.4",
     "inject-loader": "^3.0.0",
-    "isparta-loader": "^2.0.0",
+    "isparta": "^4.0.0",
     "jasmine-core": "^2.5.2",
     "json-loader": "^0.5.4",
     "karma": "^1.5.0",
@@ -102,38 +98,36 @@
     "karma-jasmine": "^1.0.2",
     "karma-mocha": "^1.2.0",
     "karma-phantomjs-launcher": "^1.0.4",
+    "karma-phantomjs-shim": "^1.4.0",
     "karma-sinon-chai": "^1.2.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.30",
-    "karma-webpack": "1.8.1",
+    "karma-webpack": "2",
     "lolex": "^1.6.0",
     "mocha": "^3.1.0",
-    "nightwatch": "^0.9.14",
+    "opn": "^5.1.0",
     "ora": "^1.2.0",
     "phantomjs-prebuilt": "^2.1.13",
+    "portfinder": "^1.0.13",
     "selenium-server": "^3.3.1",
     "shelljs": "^0.7.7",
     "sinon": "^2.1.0",
     "sinon-chai": "^2.9.0",
     "url-loader": "^0.5.8",
-    "vue": "^2.4.2",
-    "vue-hot-reload-api": "^2.1.0",
+    "vue": "2.5.16",
+    "vue-hot-reload-api": "2.3.0",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^12.2.2",
-    "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.4.2",
-    "webpack": "^1.13.2",
+    "vue-loader": "^14.2.1",
+    "vue-style-loader": "4.0.2",
+    "vue-template-compiler": "2.5.16",
+    "webpack": "^3.7.1",
     "webpack-dev-middleware": "^1.10.1",
     "webpack-hot-middleware": "^2.17.1",
-    "webpack-merge": "1.1.1"
+    "webpack-merge": "^4.1.0"
   },
   "engines": {
-    "node": ">=6.9.0"
-  },
-  "babel": {
-    "presets": [
-      "es2015"
-    ]
+    "node": ">=6.9.0",
+    "npm": ">= 3.0.0"
   },
   "browserify": {
     "transform": [

src/BaseCharts.js

@@ -0,0 +1,104 @@
+import Chart from 'chart.js'
+
+function generateChart (chartId, chartType) {
+  return {
+    render: function (createElement) {
+      return createElement(
+        'div', {
+          style: this.styles,
+          class: this.cssClasses
+        },
+        [
+          createElement(
+            'canvas', {
+              attrs: {
+                id: this.chartId,
+                width: this.width,
+                height: this.height
+              },
+              ref: 'canvas'
+            }
+          )
+        ]
+      )
+    },
+
+    props: {
+      chartId: {
+        default: chartId,
+        type: String
+      },
+      width: {
+        default: 400,
+        type: Number
+      },
+      height: {
+        default: 400,
+        type: Number
+      },
+      cssClasses: {
+        type: String,
+        default: ''
+      },
+      styles: {
+        type: Object
+      },
+      plugins: {
+        type: Array,
+        default () {
+          return []
+        }
+      }
+    },
+
+    data () {
+      return {
+        _chart: null,
+        _plugins: this.plugins
+      }
+    },
+
+    methods: {
+      addPlugin (plugin) {
+        this.$data._plugins.push(plugin)
+      },
+      renderChart (data, options) {
+        this.$data._chart = new Chart(
+          this.$refs.canvas.getContext('2d'), {
+            type: chartType,
+            data: data,
+            options: options,
+            plugins: this.$data._plugins
+          }
+        )
+      }
+    },
+    beforeDestroy () {
+      if (this.$data._chart) {
+        this.$data._chart.destroy()
+      }
+    }
+  }
+}
+
+export const Bar = generateChart('bar-chart', 'bar')
+export const HorizontalBar = generateChart('horizontalbar-chart', 'horizontalBar')
+export const Doughnut = generateChart('doughnut-chart', 'doughnut')
+export const Line = generateChart('line-chart', 'line')
+export const Pie = generateChart('pie-chart', 'pie')
+export const PolarArea = generateChart('polar-chart', 'polarArea')
+export const Radar = generateChart('radar-chart', 'radar')
+export const Bubble = generateChart('bubble-chart', 'bubble')
+export const Scatter = generateChart('scatter-chart', 'scatter')
+
+export default {
+  Bar,
+  HorizontalBar,
+  Doughnut,
+  Line,
+  Pie,
+  PolarArea,
+  Radar,
+  Bubble,
+  Scatter
+}

src/BaseCharts/Bar.js

@@ -1,93 +0,0 @@
-import Vue from 'vue'
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default Vue.extend({
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-  props: {
-    chartId: {
-      default: 'bar-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-  data () {
-    return {
-      defaultOptions: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: true
-            },
-            gridLines: {
-              display: false
-            }
-          }],
-          xAxes: [ {
-            gridLines: {
-              display: false
-            },
-            categoryPercentage: 0.5,
-            barPercentage: 0.2
-          }]
-        }
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-      this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'bar',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
-    }
-  }
-})

src/BaseCharts/Bubble.js

@@ -1,96 +0,0 @@
-import Vue from 'vue'
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default Vue.extend({
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'bubble-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-
-  data () {
-    return {
-      defaultOptions: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: true
-            },
-            gridLines: {
-              display: false
-            }
-          }],
-          xAxes: [ {
-            gridLines: {
-              display: false
-            },
-            categoryPercentage: 0.5,
-            barPercentage: 0.2
-          }]
-        }
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'bubble',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
-    }
-  }
-})

src/BaseCharts/Doughnut.js

@@ -1,79 +0,0 @@
-import Vue from 'vue'
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default Vue.extend({
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'doughnut-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-
-  data () {
-    return {
-      defaultOptions: {
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'doughnut',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
-    }
-  }
-})

src/BaseCharts/HorizontalBar.js

@@ -1,95 +0,0 @@
-import Vue from 'vue'
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default Vue.extend({
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'horizontalbar-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-
-  data () {
-    return {
-      defaultOptions: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: true
-            },
-            gridLines: {
-              display: false
-            }
-          }],
-          xAxes: [ {
-            gridLines: {
-              display: false
-            },
-            categoryPercentage: 0.5,
-            barPercentage: 0.2
-          }]
-        }
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options, type) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-      this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'horizontalBar',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
-    }
-  }
-})

src/BaseCharts/Line.js

@@ -1,94 +0,0 @@
-import Vue from 'vue'
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default Vue.extend({
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'line-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-
-  data () {
-    return {
-      defaultOptions: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: true
-            },
-            gridLines: {
-              display: false
-            }
-          }],
-          xAxes: [ {
-            gridLines: {
-              display: false
-            }
-          }]
-        }
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'line',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
-    }
-  }
-})

src/BaseCharts/Pie.js

@@ -1,79 +0,0 @@
-import Vue from 'vue'
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default Vue.extend({
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'pie-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-
-  data () {
-    return {
-      defaultOptions: {
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'pie',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
-    }
-  }
-})

src/BaseCharts/PolarArea.js

@@ -1,79 +0,0 @@
-import Vue from 'vue'
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default Vue.extend({
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'polar-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-
-  data () {
-    return {
-      defaultOptions: {
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'polarArea',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
-    }
-  }
-})

src/BaseCharts/Radar.js

@@ -1,79 +0,0 @@
-import Vue from 'vue'
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default Vue.extend({
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'radar-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-
-  data () {
-    return {
-      defaultOptions: {
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'radar',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
-    }
-  }
-})

src/BaseCharts/Scatter.js

@@ -1,85 +0,0 @@
-import Vue from 'vue'
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default Vue.extend({
-  render: function (createElement) {
-    return createElement(
-      'div', {
-        style: this.styles,
-        class: this.cssClasses
-      },
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
-
-  props: {
-    chartId: {
-      default: 'scatter-chart',
-      type: String
-    },
-    width: {
-      default: 400,
-      type: Number
-    },
-    height: {
-      default: 400,
-      type: Number
-    },
-    cssClasses: {
-      type: String,
-      default: ''
-    },
-    styles: {
-      type: Object
-    }
-  },
-
-  data () {
-    return {
-      defaultOptions: {
-        scales: {
-          xAxes: [{
-            type: 'linear',
-            position: 'bottom'
-          }]
-        }
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'scatter',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
-    }
-  }
-})

src/examples/App.vue

@@ -5,6 +5,11 @@
       <bar-example></bar-example>
     </div>
 
+    <div class="Chart">
+      <h1 style="text-align:center;">Horizontal Barchart</h1>
+      <horizontal-bar-example></horizontal-bar-example>
+    </div>
+
     <div class="Chart">
       <h1 style="text-align:center;">Barchart with reactive mixing for live data</h1>
       <reactive-example></reactive-example>
@@ -63,6 +68,7 @@
   import ReactiveExample from './ReactiveExample'
   import ReactivePropExample from './ReactivePropExample'
   import ScatterExample from './ScatterExample'
+  import HorizontalBarExample from './HorizontalBarExample'
 
   export default {
     components: {
@@ -75,7 +81,8 @@
       BubbleExample,
       ReactiveExample,
       ReactivePropExample,
-      ScatterExample
+      ScatterExample,
+      HorizontalBarExample
     },
     data () {
       return {

src/examples/BarExample.js

@@ -1,6 +1,7 @@
-import BarChart from '../BaseCharts/Bar'
+import { Bar } from '../BaseCharts'
 
-export default BarChart.extend({
+export default {
+  extends: Bar,
   mounted () {
     this.renderChart({
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
@@ -13,4 +14,4 @@ export default BarChart.extend({
       ]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/examples/BubbleExample.js

@@ -1,6 +1,7 @@
-import BubbleChart from '../BaseCharts/Bubble'
+import { Bubble } from '../BaseCharts'
 
-export default BubbleChart.extend({
+export default {
+  extends: Bubble,
   mounted () {
     this.renderChart({
       datasets: [
@@ -49,4 +50,4 @@ export default BubbleChart.extend({
       ]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/examples/DoughnutExample.js

@@ -1,6 +1,7 @@
-import DoughnutChart from '../BaseCharts/Doughnut'
+import { Doughnut } from '../BaseCharts'
 
-export default DoughnutChart.extend({
+export default {
+  extends: Doughnut,
   mounted () {
     this.renderChart({
       labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
@@ -17,4 +18,4 @@ export default DoughnutChart.extend({
       ]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/examples/HorizontalBarExample.js

@@ -1,6 +1,7 @@
-import HorizontalBarChart from '../BaseCharts/HorizontalBar'
+import { HorizontalBar } from '../BaseCharts'
 
-export default HorizontalBarChart.extend({
+export default {
+  extends: HorizontalBar,
   mounted () {
     this.renderChart({
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
@@ -13,4 +14,4 @@ export default HorizontalBarChart.extend({
       ]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/examples/LineExample.js

@@ -1,6 +1,7 @@
-import LineChart from '../BaseCharts/Line'
+import { Line } from '../BaseCharts'
 
-export default LineChart.extend({
+export default {
+  extends: Line,
   mounted () {
     this.renderChart({
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
@@ -13,4 +14,4 @@ export default LineChart.extend({
       ]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/examples/PieExample.js

@@ -1,6 +1,7 @@
-import PieChart from '../BaseCharts/Pie'
+import { Pie } from '../BaseCharts'
 
-export default PieChart.extend({
+export default {
+  extends: Pie,
   mounted () {
     this.renderChart({
       labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
@@ -17,4 +18,4 @@ export default PieChart.extend({
       ]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/examples/PolarAreaExample.js

@@ -1,6 +1,7 @@
-import PolarAreaChart from '../BaseCharts/PolarArea'
+import { PolarArea } from '../BaseCharts'
 
-export default PolarAreaChart.extend({
+export default {
+  extends: PolarArea,
   mounted () {
     this.renderChart({
       labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
@@ -26,4 +27,4 @@ export default PolarAreaChart.extend({
       ]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/examples/RadarExample.js

@@ -1,6 +1,7 @@
-import RadarChart from '../BaseCharts/Radar'
+import { Radar } from '../BaseCharts'
 
-export default RadarChart.extend({
+export default {
+  extends: Radar,
   mounted () {
     this.renderChart({
       labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
@@ -28,4 +29,4 @@ export default RadarChart.extend({
       ]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/examples/ReactiveExample.js

@@ -1,19 +1,22 @@
-import BarChart from '../BaseCharts/Bar'
-import reactiveData from '../mixins/reactiveData'
+import { Bar } from '../BaseCharts'
+import { reactiveData } from '../mixins'
 
-export default BarChart.extend({
+export default {
+  extends: Bar,
   mixins: [reactiveData],
-  data () {
-    return {
-      chartData: ''
+  data: () => ({
+    chartData: '',
+    options: {
+      responsive: true,
+      maintainAspectRatio: false
     }
-  },
+  }),
   created () {
     this.fillData()
   },
 
   mounted () {
-    this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
+    this.renderChart(this.chartData, this.options)
 
     setInterval(() => {
       this.fillData()
@@ -38,4 +41,4 @@ export default BarChart.extend({
       return Math.floor(Math.random() * (50 - 5 + 1)) + 5
     }
   }
-})
+}

src/examples/ReactivePropExample.js

@@ -1,10 +1,17 @@
-import BarChart from '../BaseCharts/Bar'
-import reactiveProp from '../mixins/reactiveProp'
+import { Bar } from '../BaseCharts'
+import { reactiveProp } from '../mixins'
 
-export default BarChart.extend({
+export default {
+  extends: Bar,
   mixins: [reactiveProp],
+  data: () => ({
+    options: {
+      responsive: true,
+      maintainAspectRatio: false
+    }
+  }),
 
   mounted () {
-    this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
+    this.renderChart(this.chartData, this.options)
   }
-})
+}

src/examples/ScatterExample.js

@@ -1,6 +1,7 @@
-import Scatter from '../BaseCharts/Scatter'
+import { Scatter } from '../BaseCharts'
 
-export default Scatter.extend({
+export default {
+  extends: Scatter,
   mounted () {
     this.renderChart({
       datasets: [{
@@ -49,4 +50,4 @@ export default Scatter.extend({
       }]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/helpers/options.js

@@ -1,4 +0,0 @@
-export function mergeOptions (obj, src) {
-  let mutableObj = Object.assign({}, obj)
-  return Object.assign(mutableObj, src)
-}

src/index.js

@@ -1,17 +1,18 @@
-import Bar from './BaseCharts/Bar'
-import HorizontalBar from './BaseCharts/HorizontalBar'
-import Doughnut from './BaseCharts/Doughnut'
-import Line from './BaseCharts/Line'
-import Pie from './BaseCharts/Pie'
-import PolarArea from './BaseCharts/PolarArea'
-import Radar from './BaseCharts/Radar'
-import Bubble from './BaseCharts/Bubble'
-import Scatter from './BaseCharts/Scatter'
 import mixins from './mixins/index.js'
-import npmCfg from '../package.json'
+
+import {
+  Bar,
+  HorizontalBar,
+  Doughnut,
+  Line,
+  Pie,
+  PolarArea,
+  Radar,
+  Bubble,
+  Scatter
+} from './BaseCharts'
 
 const VueCharts = {
-  version: npmCfg.version,
   Bar,
   HorizontalBar,
   Doughnut,

src/mixins/index.js

@@ -1,5 +1,89 @@
-import reactiveData from './reactiveData.js'
-import reactiveProp from './reactiveProp.js'
+function dataHandler (newData, oldData) {
+  if (oldData) {
+    let chart = this.$data._chart
+
+    // Get new and old DataSet Labels
+    let newDatasetLabels = newData.datasets.map((dataset) => {
+      return dataset.label
+    })
+
+    let oldDatasetLabels = oldData.datasets.map((dataset) => {
+      return dataset.label
+    })
+
+    // Stringify 'em for easier compare
+    const oldLabels = JSON.stringify(oldDatasetLabels)
+    const newLabels = JSON.stringify(newDatasetLabels)
+
+    // Check if Labels are equal and if dataset length is equal
+    if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
+      newData.datasets.forEach((dataset, i) => {
+        // Get new and old dataset keys
+        const oldDatasetKeys = Object.keys(oldData.datasets[i])
+        const newDatasetKeys = Object.keys(dataset)
+
+        // Get keys that aren't present in the new data
+        const deletionKeys = oldDatasetKeys.filter((key) => {
+          return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
+        })
+
+        // Remove outdated key-value pairs
+        deletionKeys.forEach((deletionKey) => {
+          delete chart.data.datasets[i][deletionKey]
+        })
+
+        // Update attributes individually to avoid re-rendering the entire chart
+        for (const attribute in dataset) {
+          if (dataset.hasOwnProperty(attribute)) {
+            chart.data.datasets[i][attribute] = dataset[attribute]
+          }
+        }
+      })
+
+      if (newData.hasOwnProperty('labels')) {
+        chart.data.labels = newData.labels
+      }
+      if (newData.hasOwnProperty('xLabels')) {
+        chart.data.xLabels = newData.xLabels
+      }
+      if (newData.hasOwnProperty('yLabels')) {
+        chart.data.yLabels = newData.yLabels
+      }
+      chart.update()
+    } else {
+      chart.destroy()
+      this.renderChart(this.chartData, this.options)
+    }
+  } else {
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
+    }
+    this.renderChart(this.chartData, this.options)
+  }
+}
+
+export const reactiveData = {
+  data () {
+    return {
+      chartData: null
+    }
+  },
+
+  watch: {
+    'chartData': dataHandler
+  }
+}
+
+export const reactiveProp = {
+  props: {
+    chartData: {
+      required: true
+    }
+  },
+  watch: {
+    'chartData': dataHandler
+  }
+}
 
 export default {
   reactiveData,

src/mixins/reactiveData.js

@@ -1,71 +0,0 @@
-module.exports = {
-  data () {
-    return {
-      chartData: null
-    }
-  },
-  watch: {
-    'chartData': {
-      handler (newData, oldData) {
-        if (oldData) {
-          let chart = this._chart
-
-          // Get new and old DataSet Labels
-          let newDatasetLabels = newData.datasets.map((dataset) => {
-            return dataset.label
-          })
-
-          let oldDatasetLabels = oldData.datasets.map((dataset) => {
-            return dataset.label
-          })
-
-          // Stringify 'em for easier compare
-          const oldLabels = JSON.stringify(oldDatasetLabels)
-          const newLabels = JSON.stringify(newDatasetLabels)
-
-          // Check if Labels are equal and if dataset length is equal
-          if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
-            newData.datasets.forEach((dataset, i) => {
-              // Get new and old dataset keys
-              const oldDatasetKeys = Object.keys(oldData.datasets[i])
-              const newDatasetKeys = Object.keys(dataset)
-
-              // Get keys that aren't present in the new data
-              const deletionKeys = oldDatasetKeys.filter((key) => {
-                return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
-              })
-
-              // Remove outdated key-value pairs
-              deletionKeys.forEach((deletionKey) => {
-                delete chart.data.datasets[i][deletionKey]
-              })
-
-              // Update attributes individually to avoid re-rendering the entire chart
-              for (const attribute in dataset) {
-                if (dataset.hasOwnProperty(attribute)) {
-                  chart.data.datasets[i][attribute] = dataset[attribute]
-                }
-              }
-            })
-
-            if (newData.hasOwnProperty('labels')) {
-              chart.data.labels = newData.labels
-            }
-            if (newData.hasOwnProperty('xLabels')) {
-              chart.data.xLabels = newData.xLabels
-            }
-            if (newData.hasOwnProperty('yLabels')) {
-              chart.data.yLabels = newData.yLabels
-            }
-            chart.update()
-          } else {
-            chart.destroy()
-            this.renderChart(this.chartData, this.options)
-          }
-        } else {
-          this.renderChart(this.chartData, this.options)
-        }
-      }
-    }
-  }
-}

src/mixins/reactiveProp.js

@@ -1,71 +0,0 @@
-module.exports = {
-  props: {
-    chartData: {
-      required: true
-    }
-  },
-  watch: {
-    'chartData': {
-      handler (newData, oldData) {
-        if (oldData) {
-          let chart = this._chart
-
-          // Get new and old DataSet Labels
-          let newDatasetLabels = newData.datasets.map((dataset) => {
-            return dataset.label
-          })
-
-          let oldDatasetLabels = oldData.datasets.map((dataset) => {
-            return dataset.label
-          })
-
-          // Stringify 'em for easier compare
-          const oldLabels = JSON.stringify(oldDatasetLabels)
-          const newLabels = JSON.stringify(newDatasetLabels)
-
-          // Check if Labels are equal and if dataset length is equal
-          if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
-            newData.datasets.forEach((dataset, i) => {
-              // Get new and old dataset keys
-              const oldDatasetKeys = Object.keys(oldData.datasets[i])
-              const newDatasetKeys = Object.keys(dataset)
-
-              // Get keys that aren't present in the new data
-              const deletionKeys = oldDatasetKeys.filter((key) => {
-                return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
-              })
-
-              // Remove outdated key-value pairs
-              deletionKeys.forEach((deletionKey) => {
-                delete chart.data.datasets[i][deletionKey]
-              })
-
-              // Update attributes individually to avoid re-rendering the entire chart
-              for (const attribute in dataset) {
-                if (dataset.hasOwnProperty(attribute)) {
-                  chart.data.datasets[i][attribute] = dataset[attribute]
-                }
-              }
-            })
-
-            if (newData.hasOwnProperty('labels')) {
-              chart.data.labels = newData.labels
-            }
-            if (newData.hasOwnProperty('xLabels')) {
-              chart.data.xLabels = newData.xLabels
-            }
-            if (newData.hasOwnProperty('yLabels')) {
-              chart.data.yLabels = newData.yLabels
-            }
-            chart.update()
-          } else {
-            chart.destroy()
-            this.renderChart(this.chartData, this.options)
-          }
-        } else {
-          this.renderChart(this.chartData, this.options)
-        }
-      }
-    }
-  }
-}

test/unit/karma.conf.js

@@ -16,11 +16,6 @@ var webpackConfig = merge(baseConfig, {
     loaders: utils.styleLoaders()
   },
   devtool: '#inline-source-map',
-  vue: {
-    loaders: {
-      js: 'isparta'
-    }
-  },
   plugins: [
     new webpack.DefinePlugin({
       'process.env': require('../../config/test.env')
@@ -31,15 +26,18 @@ var webpackConfig = merge(baseConfig, {
 // no need for app entry during tests
 delete webpackConfig.entry
 
+// function resolve (dir) {
+//   return path.join(__dirname, '..', dir)
+// }
 // make sure isparta loader is applied before eslint
-webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || []
-webpackConfig.module.preLoaders.unshift({
-  test: /\.js$/,
-  loader: 'isparta',
-  include: path.resolve(projectRoot, 'src')
-})
+// webpackConfig.module.rules = webpackConfig.module.rules || []
+// webpackConfig.module.rules.unshift({
+//   test: /\.js$/,
+//   loader: 'babel-loader',
+//   include: [resolve('src'), resolve('test')]
+// })
 
-// only apply babel for test files when using isparta
+// // only apply babel for test files when using isparta
 webpackConfig.module.loaders.some(function (loader, i) {
   if (loader.loader === 'babel') {
     loader.include = path.resolve(projectRoot, 'test/unit')

test/unit/specs/Bar.spec.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import BarChart from 'src/examples/BarExample'
+import BarChart from '@/examples/BarExample'
 
 describe('BarChart', () => {
   let el
@@ -51,13 +51,13 @@ describe('BarChart', () => {
       components: { BarChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.equal
+      expect(vm.$children[0].$data._chart.chart.ctx).to.equal
       done()
     })
   })
@@ -76,9 +76,31 @@ describe('BarChart', () => {
       components: { BarChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          BarChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { BarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Bubble.spec.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import BubbleChart from 'src/examples/BubbleExample'
+import BubbleChart from '@/examples/BubbleExample'
 
 describe('BubbleChart', () => {
   let el
@@ -51,13 +51,13 @@ describe('BubbleChart', () => {
       components: { BubbleChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0].$data._chart.chart.ctx).to.be.null
       done()
     })
   })
@@ -76,9 +76,31 @@ describe('BubbleChart', () => {
       components: { BubbleChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          BubbleChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { BubbleChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Doughnut.spec.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import DoughnutChart from 'src/examples/DoughnutExample'
+import DoughnutChart from '@/examples/DoughnutExample'
 
 describe('DoughnutChart', () => {
   let el
@@ -51,13 +51,13 @@ describe('DoughnutChart', () => {
       components: { DoughnutChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0].$data._chart.chart.ctx).to.be.null
       done()
     })
   })
@@ -76,9 +76,31 @@ describe('DoughnutChart', () => {
       components: { DoughnutChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          DoughnutChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { DoughnutChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/HorizontalBar.spec.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import HorizontalBarChart from 'src/examples/HorizontalBarExample'
+import HorizontalBarChart from '@/examples/HorizontalBarExample'
 
 describe('HorizontalBarChart', () => {
   let el
@@ -51,13 +51,13 @@ describe('HorizontalBarChart', () => {
       components: { HorizontalBarChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0].$data._chart.chart.ctx).to.be.null
       done()
     })
   })
@@ -76,9 +76,31 @@ describe('HorizontalBarChart', () => {
       components: { HorizontalBarChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          HorizontalBarChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { HorizontalBarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Line.spec.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import LineChart from 'src/examples/LineExample'
+import LineChart from '@/examples/LineExample'
 
 describe('LineChart', () => {
   let el
@@ -51,13 +51,13 @@ describe('LineChart', () => {
       components: { LineChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0].$data._chart.chart.ctx).to.be.null
       done()
     })
   })
@@ -76,9 +76,31 @@ describe('LineChart', () => {
       components: { LineChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          LineChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { LineChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Pie.spec.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import PieChart from 'src/examples/PieExample'
+import PieChart from '@/examples/PieExample'
 
 describe('PieChart', () => {
   let el
@@ -50,13 +50,13 @@ describe('PieChart', () => {
       components: { PieChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0].$data._chart.chart.ctx).to.be.null
       done()
     })
   })
@@ -75,9 +75,31 @@ describe('PieChart', () => {
       components: { PieChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          PieChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { PieChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/PolarArea.spec.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import PolarChart from 'src/examples/PolarAreaExample'
+import PolarChart from '@/examples/PolarAreaExample'
 
 describe('PolarChart', () => {
   let el
@@ -51,13 +51,13 @@ describe('PolarChart', () => {
       components: { PolarChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0].$data._chart.chart.ctx).to.be.null
       done()
     })
   })
@@ -76,9 +76,31 @@ describe('PolarChart', () => {
       components: { PolarChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          PolarChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { PolarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Radar.spec.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import RadarChart from 'src/examples/RadarExample'
+import RadarChart from '@/examples/RadarExample'
 
 describe('RadarChart', () => {
   let el
@@ -50,13 +50,13 @@ describe('RadarChart', () => {
       components: { RadarChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0].$data._chart.chart.ctx).to.be.null
       done()
     })
   })
@@ -75,9 +75,31 @@ describe('RadarChart', () => {
       components: { RadarChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          RadarChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { RadarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Scatter.spec.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import ScatterChart from 'src/examples/ScatterExample'
+import ScatterChart from '@/examples/ScatterExample'
 
 describe('ScatterChart', () => {
   let el
@@ -51,13 +51,13 @@ describe('ScatterChart', () => {
       components: { ScatterChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0].$data._chart.chart.ctx).to.be.null
       done()
     })
   })
@@ -76,9 +76,31 @@ describe('ScatterChart', () => {
       components: { ScatterChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          ScatterChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { ScatterChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/helpers/options.spec.js

@@ -1,54 +0,0 @@
-import { mergeOptions } from 'src/helpers/options'
-
-describe('mergeOptions.js', () => {
-  const a = {
-    a: 'a',
-    b: 'a'
-  }
-
-  const b = {
-    a: 'b',
-    b: 'b'
-  }
-
-  const c = {
-    c: 'c'
-  }
-
-  const an = {
-    a: {
-      a: 'a'
-    },
-    b: {
-      b: 'a'
-    }
-  }
-
-  const bn = {
-    a: {
-      a: 'a'
-    },
-    b: {
-      b: 'b'
-    }
-  }
-
-  it('should replace old a and b if a and b are new', () => {
-    const ab = mergeOptions(a, b)
-    expect(ab).to.have.property('a').and.to.equal('b')
-    expect(ab).to.have.property('b').and.to.equal('b')
-  })
-
-  it('should add c if c is new', () => {
-    const ac = mergeOptions(a, c)
-    expect(ac).to.have.property('a').and.to.equal('a')
-    expect(ac).to.have.property('b').and.to.equal('a')
-    expect(ac).to.have.property('c').and.to.equal('c')
-  })
-
-  it('should replace old a and b if a and b are new in nested objects', () => {
-    const ab = mergeOptions(an, bn)
-    expect(ab).to.have.deep.property('a.a').and.to.equal('a')
-    expect(ab).to.have.deep.property('b.b').and.to.equal('b')
-  })
-})