💎 Release new version 3.2.0

Closes #306

.babelrc

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

.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
   }
 }

CHANGELOG.md

@@ -1,11 +1,111 @@
 # 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:**
 
-- TypeError: Cannot convert undefined or null to object [\#193](https://github.com/apertureless/vue-chartjs/issues/193)
 - 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)

README.md

@@ -33,32 +33,20 @@ 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/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-chartjs.full.js | Bundled |
-| vue-chartjs.full.min.js |  Bundled |
-| vue-chartjs.js | peerDependency |
-| vue-chartjs.min.js | peerDependency  |
-| es/index* |  peerDependency |
 
 ### Browser
-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.full.min.js` which is the minified version. It has 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:
 
@@ -85,11 +73,11 @@ Vue.component('line-chart', {
 
 If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
 
-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.
+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, `Chart.js` is a `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
@@ -135,7 +123,7 @@ 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.vue
@@ -170,7 +158,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`
@@ -178,7 +166,11 @@ 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
@@ -196,7 +188,7 @@ export default {
 ```
 
 ### 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
@@ -242,6 +234,10 @@ export default {
 }
 ```
 
+## 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
@@ -298,7 +294,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
 

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,32 +27,40 @@ module.exports = {
     umdNamedDefine: true
   },
   externals: {
-    '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$/,
@@ -56,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"'

docs/README.md

@@ -77,7 +77,7 @@ 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
 

docs/fr-fr/README.md

@@ -147,7 +147,7 @@ export default {
 
 ### Composants réutilisables
 
-Si vous souhaitez faire en sorte que vos composants restent réutilisables, le mieux est de leur appliquer 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.
+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
 
@@ -264,7 +264,7 @@ Il peut arriver d'avoir besoin de plus de contrôle sur l'objet chart.js. Vous p
 
 ## 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) described.
+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()`.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "Vue.js wrapper for chart.js for creating beautiful charts.",
   "author": "Jakub Juszczak <jakub@posteo.de>",
   "homepage": "http://vue-chartjs.org",
@@ -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,30 +53,24 @@
     "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"
-  },
-  "dependencies": {
-    "lodash.merge": "^4.6.0"
+    "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.7.0",
-    "vue": "2.5.2"
+    "chart.js": "2.7.x"
   },
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.25.0",
-    "babel-loader": "6.4.1",
-    "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.31",
+    "@babel/core": "^7.0.0-beta.31",
+    "@babel/preset-env": "^7.0.0-beta.31",
+    "@babel/preset-stage-2": "^7.0.0-beta.31",
+    "babel-loader": "8.0.0-beta.0",
     "chai": "^3.5.0",
     "chart.js": "2.7.0",
     "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",
@@ -90,13 +84,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",
@@ -104,15 +99,17 @@
     "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",
@@ -121,21 +118,17 @@
     "vue": "2.5.2",
     "vue-hot-reload-api": "2.1.0",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "12.2.2",
+    "vue-loader": "^13.3.0",
     "vue-style-loader": "3.0.1",
     "vue-template-compiler": "2.5.2",
-    "webpack": "^1.13.2",
+    "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 Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  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 {
-      _chart: null,
-      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.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'bar',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}

src/BaseCharts/Bubble.js

@@ -1,96 +0,0 @@
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  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 {
-      _chart: null,
-      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.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'bubble',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}

src/BaseCharts/Doughnut.js

@@ -1,79 +0,0 @@
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  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 {
-      _chart: null,
-      defaultOptions: {
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'doughnut',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}

src/BaseCharts/HorizontalBar.js

@@ -1,95 +0,0 @@
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  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 {
-      _chart: null,
-      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.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'horizontalBar',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}

src/BaseCharts/Line.js

@@ -1,94 +0,0 @@
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  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 {
-      _chart: null,
-      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.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'line',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}

src/BaseCharts/Pie.js

@@ -1,79 +0,0 @@
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  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 {
-      _chart: null,
-      defaultOptions: {
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'pie',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}

src/BaseCharts/PolarArea.js

@@ -1,79 +0,0 @@
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  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 {
-      _chart: null,
-      defaultOptions: {
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'polarArea',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}

src/BaseCharts/Radar.js

@@ -1,79 +0,0 @@
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  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 {
-      _chart: null,
-      defaultOptions: {
-      },
-      plugins: []
-    }
-  },
-
-  methods: {
-    addPlugin (plugin) {
-      this.plugins.push(plugin)
-    },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
-      this.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'radar',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-  }
-}

src/BaseCharts/Scatter.js

@@ -1,85 +0,0 @@
-import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
-
-export default {
-  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 {
-      _chart: null,
-      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.$data._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: 'scatter',
-          data: data,
-          options: chartOptions,
-          plugins: this.plugins
-        }
-      )
-    }
-  },
-  beforeDestroy () {
-    if (this.$data._chart) {
-      this.$data._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,4 +1,4 @@
-import Bar from '../BaseCharts/Bar'
+import { Bar } from '../BaseCharts'
 
 export default {
   extends: Bar,

src/examples/BubbleExample.js

@@ -1,4 +1,4 @@
-import Bubble from '../BaseCharts/Bubble'
+import { Bubble } from '../BaseCharts'
 
 export default {
   extends: Bubble,

src/examples/DoughnutExample.js

@@ -1,4 +1,4 @@
-import Doughnut from '../BaseCharts/Doughnut'
+import { Doughnut } from '../BaseCharts'
 
 export default {
   extends: Doughnut,

src/examples/HorizontalBarExample.js

@@ -1,4 +1,4 @@
-import HorizontalBar from '../BaseCharts/HorizontalBar'
+import { HorizontalBar } from '../BaseCharts'
 
 export default {
   extends: HorizontalBar,

src/examples/LineExample.js

@@ -1,4 +1,4 @@
-import Line from '../BaseCharts/Line'
+import { Line } from '../BaseCharts'
 
 export default {
   extends: Line,

src/examples/PieExample.js

@@ -1,4 +1,4 @@
-import Pie from '../BaseCharts/Pie'
+import { Pie } from '../BaseCharts'
 
 export default {
   extends: Pie,

src/examples/PolarAreaExample.js

@@ -1,4 +1,4 @@
-import PolarArea from '../BaseCharts/PolarArea'
+import { PolarArea } from '../BaseCharts'
 
 export default {
   extends: PolarArea,

src/examples/RadarExample.js

@@ -1,4 +1,4 @@
-import Radar from '../BaseCharts/Radar'
+import { Radar } from '../BaseCharts'
 
 export default {
   extends: Radar,

src/examples/ReactiveExample.js

@@ -1,20 +1,22 @@
-import Bar from '../BaseCharts/Bar'
-import reactiveData from '../mixins/reactiveData'
+import { Bar } from '../BaseCharts'
+import { reactiveData } from '../mixins'
 
 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()

src/examples/ReactivePropExample.js

@@ -1,11 +1,17 @@
-import Bar from '../BaseCharts/Bar'
-import reactiveProp from '../mixins/reactiveProp'
+import { Bar } from '../BaseCharts'
+import { reactiveProp } from '../mixins'
 
 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,4 +1,4 @@
-import Scatter from '../BaseCharts/Scatter'
+import { Scatter } from '../BaseCharts'
 
 export default {
   extends: Scatter,

src/helpers/options.js

@@ -1,5 +0,0 @@
-import merge from 'lodash.merge'
-
-export function mergeOptions (obj, src) {
-  return merge(obj, src)
-}

src/index.js

@@ -1,17 +1,19 @@
-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,
+  version: LIB_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.$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 {
-          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.$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 {
-          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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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('b')
-    expect(ac).to.have.property('b').and.to.equal('b')
-    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')
-  })
-})