💎 Release new version 1.2.0

* release/1.x:
  ⬆️ Update dependency chart.js to 2.6.0
  🐛 Fix dependency
  💎 Release new version 1.1.4

# Conflicts:
#	dist/vue-chartjs.js
#	dist/vue-chartjs.js.map

.gitignore

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

CHANGELOG.md

@@ -1,91 +1,5 @@
 # Change Log
 
-## [Unreleased](https://github.com/apertureless/vue-chartjs/tree/HEAD)
-
-[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.3...HEAD)
-
-**Fixed bugs:**
-
-- Compatibility with Vue 2.1.10 [\#30](https://github.com/apertureless/vue-chartjs/issues/30)
-
-## [v2.3.3](https://github.com/apertureless/vue-chartjs/tree/v2.3.3) (2017-01-19)
-[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.2...v2.3.3)
-
-**Closed issues:**
-
-- How to create mixed chart types [\#29](https://github.com/apertureless/vue-chartjs/issues/29)
-- hello a q about reactivity [\#28](https://github.com/apertureless/vue-chartjs/issues/28)
-- chart do not render after build  [\#26](https://github.com/apertureless/vue-chartjs/issues/26)
-
-**Merged pull requests:**
-
-- 🐛 Fix \#30 type error [\#31](https://github.com/apertureless/vue-chartjs/pull/31) ([apertureless](https://github.com/apertureless))
-
-## [v2.3.2](https://github.com/apertureless/vue-chartjs/tree/v2.3.2) (2016-12-23)
-[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.1...v2.3.2)
-
-**Implemented enhancements:**
-
-- Content Security Policy [\#22](https://github.com/apertureless/vue-chartjs/issues/22)
-
-**Merged pull requests:**
-
-- ✨ Add minimal release webpack config [\#27](https://github.com/apertureless/vue-chartjs/pull/27) ([apertureless](https://github.com/apertureless))
-- 📝 Update README [\#25](https://github.com/apertureless/vue-chartjs/pull/25) ([apertureless](https://github.com/apertureless))
-
-## [v2.3.1](https://github.com/apertureless/vue-chartjs/tree/v2.3.1) (2016-12-20)
-[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.0...v2.3.1)
-
-**Fixed bugs:**
-
-- Issues after using gulp-- production [\#19](https://github.com/apertureless/vue-chartjs/issues/19)
-
-**Closed issues:**
-
-- Error in rendering [\#21](https://github.com/apertureless/vue-chartjs/issues/21)
-
-**Merged pull requests:**
-
-- ✅ Add tests for chart instance destroying [\#24](https://github.com/apertureless/vue-chartjs/pull/24) ([apertureless](https://github.com/apertureless))
-- Feature/runtimebuild \#22 [\#23](https://github.com/apertureless/vue-chartjs/pull/23) ([apertureless](https://github.com/apertureless))
-
-## [v2.3.0](https://github.com/apertureless/vue-chartjs/tree/v2.3.0) (2016-12-17)
-[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.2.1...v2.3.0)
-
-**Closed issues:**
-
-- Uncaught TypeError: \_c is not a function  [\#20](https://github.com/apertureless/vue-chartjs/issues/20)
-
-## [v2.2.1](https://github.com/apertureless/vue-chartjs/tree/v2.2.1) (2016-12-07)
-[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.2.0...v2.2.1)
-
-**Fixed bugs:**
-
-- Uncaught TypeError: Cannot read property 'draw' of null [\#15](https://github.com/apertureless/vue-chartjs/issues/15)
-
-**Merged pull requests:**
-
-- Update README.md [\#16](https://github.com/apertureless/vue-chartjs/pull/16) ([Ag47](https://github.com/Ag47))
-
-## [v2.2.0](https://github.com/apertureless/vue-chartjs/tree/v2.2.0) (2016-10-24)
-[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.1.1...v2.2.0)
-
-**Closed issues:**
-
-- question:syntax with vue-loader [\#12](https://github.com/apertureless/vue-chartjs/issues/12)
-- Rerender when data has changed [\#10](https://github.com/apertureless/vue-chartjs/issues/10)
-
-**Merged pull requests:**
-
-- add horizontal bar parameter [\#14](https://github.com/apertureless/vue-chartjs/pull/14) ([wahaha2012](https://github.com/wahaha2012))
-- WIP Feature/reactive chart data \#11 [\#11](https://github.com/apertureless/vue-chartjs/pull/11) ([apertureless](https://github.com/apertureless))
-
-## [v2.1.1](https://github.com/apertureless/vue-chartjs/tree/v2.1.1) (2016-10-02)
-[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v.2.1.0...v2.1.1)
-
-## [v.2.1.0](https://github.com/apertureless/vue-chartjs/tree/v.2.1.0) (2016-09-23)
-[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v1.1.3...v.2.1.0)
-
 ## [v1.1.3](https://github.com/apertureless/vue-chartjs/tree/v1.1.3) (2016-09-08)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.2...v1.1.3)
 

README.md

@@ -1,36 +1,12 @@
-<div align="center">
-  <img width="256" heigth="256" src="/assets/vue-chartjs.png" alt="vue-chartjs logo">
-</div>
+# Vue-ChartJs
 
-[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs)
-[![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs)
-[![Build Status](https://travis-ci.org/apertureless/vue-chartjs.svg?branch=master)](https://travis-ci.org/apertureless/vue-chartjs)
-[![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs)
-[![npm](https://img.shields.io/npm/dm/localeval.svg)](https://www.npmjs.com/package/vue-chartjs)
-[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
+[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs) ![npm dependencies](https://david-dm.org/apertureless/vue-chartjs.svg) [![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs) [![Build Status](https://travis-ci.org/apertureless/vue-chartjs.svg?branch=master)](https://travis-ci.org/apertureless/vue-chartjs)
 
-# vue-chartjs
-
-**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.
-
-## Demo
-
-[Demo](https://apertureless.github.io/vue-chartjs/)
-
-### Compatibility
-
-- v1 later
-  - Vue.js 1.x
-- v2 later
-  - Vue.js 2.x
-
-After the final release of vue.js 2, you also get the v2 per default if you install vue-chartjs over npm.
-No need for the @next tag anymore. If you want the v1 you need to define the version.
-If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
+> VueJS wrapper for ChartJs
 
 ## Install
 
-Simply run `npm install vue-chartjs`
+Simply run `npm install vue-chartjs@1.1.3`
 
 ## How to use
 
@@ -49,10 +25,10 @@ Just create your own component.
 // CommitChart.js
 import { Bar } from 'vue-chartjs'
 
-export default Bar.extend({
-  mounted () {
+export default BarChart.extend({
+  ready () {
     // Overwriting base render method with actual data.
-    this.renderChart({
+    this.render({
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
       datasets: [
         {
@@ -80,10 +56,10 @@ You can overwrite the default chart options. Just pass the options object as a s
 // MonthlyIncome.js
 import { Line } from 'vue-chartjs'
 
-export default Line.extend({
-  props: ["data", "options"],
-  mounted () {
-    this.renderChart(this.data, this.options)
+export default LineChart.extend({
+  props: [data, options],
+  ready () {
+    this.render(this.data, this.options)
   }
 })
 ```
@@ -105,76 +81,6 @@ export default {
 </script>
 ```
 
-## Reactivity
-
-Chart.js does not update or re-render the chart if new data is passed.
-However you can simply implement this by your own or use one of the two mixins which are included.
-
-- `reactiveProp`
-- `reactiveData`
-
-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.
-
-```javascript
-// MonthlyIncome.js
-import { Line, mixins } from 'vue-chartjs'
-
-export default Line.extend({
-  mixins: [mixins.reactiveProp],
-  props: ["chartData", "options"],
-  mounted () {
-    this.renderChart(this.chartData, this.options)
-  }
-})
-
-```
-
-### Mixins module
-The `mixins` module is included in the `VueCharts` module and as a seperate module.
-Some ways to import them:
-
-```javascript
-// Load complete module with all charts
-import VueCharts from 'vue-chartjs'
-
-export default VueCharts.Line.extend({
-  mixins: [VueCharts.mixins.reactiveProp],
-  props: ["chartData", "options"],
-  mounted () {
-    this.renderChart(this.chartData, this.options)
-  }
-})
-```
-
-```javascript
-// Load speperate modules
-import { Line, mixins } from 'vue-chartjs'
-
-export default Line.extend({
-  mixins: [mixins.reactiveProp],
-  props: ["chartData", "options"],
-  mounted () {
-    this.renderChart(this.chartData, this.options)
-  }
-})
-```
-
-```javascript
-// Load speperate modules with destructure assign
-import { Line, mixins } from 'vue-chartjs'
-const { reactiveProp } = mixins
-
-export default Line.extend({
-  mixins: [reactiveProp],
-  props: ["chartData", "options"],
-  mounted () {
-    this.renderChart(this.chartData, this.options)
-  }
-})
-```
-
 ## Available Charts
 
 ### Bar Chart

assets/vue-chartjs.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><defs><linearGradient id="a" x1="100%" x2="0%" y1="4.18%" y2="65.116%"><stop stop-color="#FAFAFA" offset="0%"/><stop stop-color="#D9D9D9" offset="100%"/></linearGradient><linearGradient id="b" x1="108.208%" x2="5.433%" y1="12.265%" y2="86.92%"><stop stop-color="#FAFAFA" offset="0%"/><stop stop-color="#D9D9D9" offset="100%"/></linearGradient></defs><g fill="none"><path fill="#fff" stroke="#EBEBEB" stroke-width="8.456" d="M128.744 13l99.745 57.46v114.921l-99.745 57.46-99.744-57.46v-114.921z"/><path fill="url(#a)" d="M129 17.941l90.395 51.432-4.057 117.675-86.903 4.653z"/><path fill="url(#b)" d="M129 17.814l-90.961 51.559-3.191 113.538 93.587 8.79z"/><path fill="#41B883" d="M32.955 72.755l95.789 54.681v110.49l-95.789-54.681z"/><path fill="#35495E" d="M224.48 71.627l-95.789 55.809v110.49l95.789-54.681z"/><path fill="#596F85" d="M224.48 71.627l-95.789 55.809v-7.892l88.445-51.299z"/><path fill="#61D09F" d="M32.955 72.755l95.789 54.681v-7.892l-89.575-50.171z"/></g></svg>

build/webpack.base.conf.js

@@ -17,7 +17,6 @@ module.exports = {
     fallback: [path.join(__dirname, '../node_modules')],
     alias: {
       'src': path.resolve(__dirname, '../src'),
-      'mixins': path.resolve(__dirname, '../src/mixins'),
       'BaseCharts': path.resolve(__dirname, '../src/BaseCharts')
     }
   },

build/webpack.prod.conf.js

@@ -1,9 +1,6 @@
 const webpack = require('webpack')
 const base = require('./webpack.base.conf')
 const config = require('../config')
-var env = process.env.NODE_ENV === 'testing'
-  ? require('../config/test.env')
-  : config.build.env
 
 base.entry = {
   lib: './src/index.js'
@@ -22,7 +19,9 @@ var webpackConfig = Object.assign({}, base)
 webpackConfig.devtool = '#source-map'
 webpackConfig.plugins = (webpackConfig.plugins || []).concat([
   new webpack.DefinePlugin({
-    'process.env.NODE_ENV': env
+    'process.env': {
+      NODE_ENV: '"production"'
+    }
   }),
   new webpack.optimize.UglifyJsPlugin({
     compress: { warnings: false }

build/webpack.release.js

@@ -1,78 +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')
-
-module.exports = {
-  entry: {
-    'vue-chartjs': './src/index.js'
-  },
-  output: {
-    filename: './dist/[name].js',
-    library: 'VueChartJs',
-    libraryTarget: 'umd'
-  },
-  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')
-      }
-    ]
-  },
-  eslint: {
-    formatter: require('eslint-friendly-formatter')
-  },
-  babel: {
-    presets: ['es2015'],
-    plugins: ['transform-runtime']
-  }
-}
-
-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')
-  ]
-}

codecov.yml

@@ -1,34 +0,0 @@
-codecov:
-  branch: master
-
-coverage:
-  precision: 2
-  round: down
-  range: "70...100"
-
-  status:
-    project:
-      default:
-        target: auto
-        threshold: null
-        branches: null
-
-    patch:
-      default:
-        target: auto
-        branches: null
-
-    changes:
-      default:
-        branches: null
-
-  ignore:
-    - "tests/*"
-    - "src/examples/*"
-    - "src/mixins/*"
-
-
-comment:
-  layout: "header, diff, changes, sunburst, uncovered, tree"
-  branches: null
-  behavior: default

docs/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>📊 Vue-ChartJs</title>
-  </head>
-  <body>
-    <div id="app">
-      <app></app>
-    </div>
-    <script src="dist/vue-chartjs.js"></script>
-  </body>
-</html>

index.html

@@ -5,9 +5,7 @@
     <title>Vue-ChartJs</title>
   </head>
   <body>
-  <div id="app">
     <app></app>
-  </div>
     <!-- built files will be auto injected -->
   </body>
 </html>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-chartjs",
-  "version": "2.3.5",
-  "description": "vue.js wrapper for chart.js",
+  "version": "1.2.0",
+  "description": "Vue wrapper for chart.js",
   "author": "Jakub Juszczak <jakub@nextindex.de>",
   "repository": {
     "type": "git",
@@ -15,77 +15,77 @@
     "Charts"
   ],
   "main": "dist/vue-chartjs.js",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "dev": "node build/dev-server.js",
     "build": "node build/build.js",
     "unit": "karma start test/unit/karma.conf.js --single-run",
     "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"
+    "lint": "eslint --ext .js,.vue src test/unit/specs",
+    "prepublish": "node build/build.js"
   },
   "dependencies": {
-    "babel-runtime": "^6.11.6",
-    "chart.js": "^2.5.0",
-    "vue": "^2.1.10"
+    "babel-runtime": "^6.0.0",
+    "chart.js": "^2.6.0",
+    "vue": "^1.0.21"
   },
   "devDependencies": {
-    "babel-core": "^6.10.4",
+    "babel-core": "^6.0.0",
     "babel-loader": "^6.0.0",
-    "babel-plugin-transform-runtime": "^6.12.0",
+    "babel-plugin-transform-runtime": "^6.0.0",
     "babel-preset-es2015": "^6.0.0",
     "babel-preset-stage-2": "^6.0.0",
     "chai": "^3.5.0",
     "chromedriver": "^2.21.2",
     "connect-history-api-fallback": "^1.1.0",
-    "cross-spawn": "^5.0.1",
-    "css-loader": "^0.26.1",
-    "eslint": "^3.7.1",
-    "eslint-config-standard": "^6.2.0",
+    "cross-spawn": "^2.1.5",
+    "css-loader": "^0.23.0",
+    "eslint": "^2.10.2",
+    "eslint-config-standard": "^5.1.0",
     "eslint-friendly-formatter": "^2.0.5",
     "eslint-loader": "^1.3.0",
     "eslint-plugin-html": "^1.3.0",
-    "eslint-plugin-promise": "^3.4.0",
-    "eslint-plugin-standard": "^2.0.1",
+    "eslint-plugin-promise": "^1.0.8",
+    "eslint-plugin-standard": "^1.3.2",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.9.0",
+    "file-loader": "^0.8.4",
     "function-bind": "^1.0.2",
     "html-webpack-plugin": "^2.8.1",
-    "http-proxy-middleware": "^0.17.2",
-    "inject-loader": "^3.0.0-beta2",
+    "http-proxy-middleware": "^0.12.0",
+    "inject-loader": "^2.0.1",
     "isparta-loader": "^2.0.0",
-    "jasmine-core": "^2.5.2",
     "json-loader": "^0.5.4",
-    "karma": "^1.3.0",
-    "karma-coverage": "^1.1.1",
-    "karma-jasmine": "^1.0.2",
-    "karma-mocha": "^1.2.0",
+    "karma": "^0.13.15",
+    "karma-coverage": "^0.5.5",
+    "karma-mocha": "^0.2.2",
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-sinon-chai": "^1.2.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.26",
+    "karma-spec-reporter": "0.0.24",
     "karma-webpack": "^1.7.0",
-    "lodash": "^4.17.4",
+    "lodash": "^4.15.0",
     "lolex": "^1.4.0",
-    "mocha": "^3.1.0",
-    "nightwatch": "^0.9.8",
-    "ora": "^0.3.0",
-    "phantomjs-prebuilt": "^2.1.13",
-    "selenium-server": "^3.0.1",
-    "shelljs": "^0.7.4",
+    "mocha": "^2.4.5",
+    "nightwatch": "^0.8.18",
+    "ora": "^0.2.0",
+    "phantomjs-prebuilt": "^2.1.3",
+    "selenium-server": "2.53.0",
+    "shelljs": "^0.6.0",
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.7",
-    "vue-hot-reload-api": "^2.0.6",
-    "vue-html-loader": "^1.2.3",
-    "vue-loader": "^10.0.2",
+    "vue-hot-reload-api": "^1.2.0",
+    "vue-html-loader": "^1.0.0",
+    "vue-loader": "^8.3.0",
     "vue-style-loader": "^1.0.0",
-    "vue-template-compiler": "^2.1.10",
-    "webpack": "^1.13.2",
+    "webpack": "^1.12.2",
     "webpack-dev-middleware": "^1.4.0",
     "webpack-hot-middleware": "^2.6.0",
-    "webpack-merge": "^1.1.1"
+    "webpack-merge": "^0.8.3"
   }
 }

src/BaseCharts/Bar.js

@@ -3,23 +3,11 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  render: function (createElement) {
-    return createElement(
-      'div',
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
+  template: `
+    <div>
+      <canvas id="{{chartId}}" width="{{width}}" height="{{height}}" v-el:canvas></canvas>
+    </div>
+  `,
 
   props: {
     chartId: {
@@ -61,11 +49,12 @@ export default Vue.extend({
   },
 
   methods: {
-    renderChart (data, options, type) {
+    render (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
+
       this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
-          type: type || 'bar',
+        this.$els.canvas.getContext('2d'), {
+          type: 'bar',
           data: data,
           options: chartOptions
         }
@@ -74,6 +63,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Bubble.js

@@ -3,23 +3,11 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  render: function (createElement) {
-    return createElement(
-      'div',
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
+  template: `
+    <div>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+    </div>
+  `,
 
   props: {
     chartId: {
@@ -39,33 +27,16 @@ export default Vue.extend({
   data () {
     return {
       defaultOptions: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: true
-            },
-            gridLines: {
-              display: false
-            }
-          }],
-          xAxes: [ {
-            gridLines: {
-              display: false
-            },
-            categoryPercentage: 0.5,
-            barPercentage: 0.2
-          }]
-        }
       }
     }
   },
 
   methods: {
-    renderChart (data, options) {
+    render (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
+        this.$els.canvas.getContext('2d'), {
           type: 'bubble',
           data: data,
           options: chartOptions
@@ -75,6 +46,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Doughnut.js

@@ -3,23 +3,11 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  render: function (createElement) {
-    return createElement(
-      'div',
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
+  template: `
+    <div>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+    </div>
+  `,
 
   props: {
     chartId: {
@@ -44,11 +32,11 @@ export default Vue.extend({
   },
 
   methods: {
-    renderChart (data, options) {
+    render (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
+        this.$els.canvas.getContext('2d'), {
           type: 'doughnut',
           data: data,
           options: chartOptions
@@ -58,6 +46,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Line.js

@@ -3,23 +3,11 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  render: function (createElement) {
-    return createElement(
-      'div',
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
+  template: `
+    <div>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+    </div>
+  `,
 
   props: {
     chartId: {
@@ -59,11 +47,11 @@ export default Vue.extend({
   },
 
   methods: {
-    renderChart (data, options) {
+    render (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
+        this.$els.canvas.getContext('2d'), {
           type: 'line',
           data: data,
           options: chartOptions
@@ -73,6 +61,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Pie.js

@@ -3,23 +3,11 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  render: function (createElement) {
-    return createElement(
-      'div',
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
+  template: `
+    <div>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+    </div>
+  `,
 
   props: {
     chartId: {
@@ -44,11 +32,11 @@ export default Vue.extend({
   },
 
   methods: {
-    renderChart (data, options) {
+    render (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
+        this.$els.canvas.getContext('2d'), {
           type: 'pie',
           data: data,
           options: chartOptions
@@ -58,6 +46,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/PolarArea.js

@@ -3,23 +3,11 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  render: function (createElement) {
-    return createElement(
-      'div',
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
+  template: `
+    <div>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+    </div>
+  `,
 
   props: {
     chartId: {
@@ -44,11 +32,11 @@ export default Vue.extend({
   },
 
   methods: {
-    renderChart (data, options) {
+    render (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
+        this.$els.canvas.getContext('2d'), {
           type: 'polarArea',
           data: data,
           options: chartOptions
@@ -58,6 +46,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Radar.js

@@ -3,23 +3,11 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  render: function (createElement) {
-    return createElement(
-      'div',
-      [
-        createElement(
-          'canvas', {
-            attrs: {
-              id: this.chartId,
-              width: this.width,
-              height: this.height
-            },
-            ref: 'canvas'
-          }
-        )
-      ]
-    )
-  },
+  template: `
+    <div>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+    </div>
+  `,
 
   props: {
     chartId: {
@@ -44,11 +32,11 @@ export default Vue.extend({
   },
 
   methods: {
-    renderChart (data, options) {
+    render (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$refs.canvas.getContext('2d'), {
+        this.$els.canvas.getContext('2d'), {
           type: 'radar',
           data: data,
           options: chartOptions
@@ -58,6 +46,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Scatter.js

@@ -0,0 +1,59 @@
+import Vue from 'vue'
+import Chart from 'chart.js'
+import { mergeOptions } from '../helpers/options'
+
+export default Vue.extend({
+  template: `
+    <div>
+      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+    </div>
+  `,
+
+  props: {
+    chartId: {
+      default: 'scatter-chart',
+      type: String
+    },
+    width: {
+      default: 400,
+      type: Number
+    },
+    height: {
+      default: 400,
+      type: Number
+    }
+  },
+
+  data () {
+    return {
+      defaultOptions: {
+        scales: {
+          xAxes: [{
+            type: 'linear',
+            position: 'bottom'
+          }]
+        }
+      }
+    }
+  },
+
+  methods: {
+    render (data, options) {
+      let chartOptions = mergeOptions(this.defaultOptions, options)
+
+      this._chart = new Chart(
+        this.$els.canvas.getContext('2d'), {
+          type: 'scatter',
+          data: data,
+          options: chartOptions
+        }
+      )
+      this._chart.generateLegend()
+    }
+  },
+  beforeDestroy () {
+    if (this._chart) {
+      this._chart.destroy()
+    }
+  }
+})

src/examples/App.vue

@@ -1,20 +1,11 @@
 <template>
   <div class="container">
-    <h1 style="text-align:center;margin:40px 0;">Barchart</h1>
     <bar-example></bar-example>
-    <h1 style="text-align:center;margin:40px 0;">Barchart with reactive mixing for live data</h1>
-    <reactive-example></reactive-example>
-    <h1 style="text-align:center;margin:40px 0;">Linechart</h1>
     <line-example></line-example>
-    <h1 style="text-align:center;margin:40px 0;">Doughnutchart</h1>
     <doughnut-example></doughnut-example>
-    <h1 style="text-align:center;margin:40px 0;">Piechart</h1>
     <pie-example></pie-example>
-    <h1 style="text-align:center;margin:40px 0;">Radarchart</h1>
     <radar-example></radar-example>
-    <h1 style="text-align:center;margin:40px 0;">Polararea</h1>
     <polar-area-example></polar-area-example>
-    <h1 style="text-align:center;margin:40px 0;">Bubblechart</h1>
     <bubble-example></bubble-example>
   </div>
 </template>
@@ -27,8 +18,6 @@
   import RadarExample from './RadarExample'
   import PolarAreaExample from './PolarAreaExample'
   import BubbleExample from './BubbleExample'
-  import ReactiveExample from './ReactiveExample'
-  import ReactivePropExample from './ReactivePropExample'
 
   export default {
     components: {
@@ -38,9 +27,7 @@
       PieExample,
       RadarExample,
       PolarAreaExample,
-      BubbleExample,
-      ReactiveExample,
-      ReactivePropExample
+      BubbleExample
     }
   }
 </script>

src/examples/BarExample.js

@@ -1,8 +1,8 @@
 import BarChart from '../BaseCharts/Bar'
 
 export default BarChart.extend({
-  mounted () {
-    this.renderChart({
+  ready () {
+    this.render({
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
       datasets: [
         {

src/examples/BubbleExample.js

@@ -1,8 +1,8 @@
 import BubbleChart from '../BaseCharts/Bubble'
 
 export default BubbleChart.extend({
-  mounted () {
-    this.renderChart({
+  ready () {
+    this.render({
       datasets: [
         {
           label: 'Data One',
@@ -47,6 +47,6 @@ export default BubbleChart.extend({
           ]
         }
       ]
-    }, {responsive: true, maintainAspectRatio: false})
+    })
   }
 })

src/examples/DoughnutExample.js

@@ -1,8 +1,8 @@
 import DoughnutChart from '../BaseCharts/Doughnut'
 
 export default DoughnutChart.extend({
-  mounted () {
-    this.renderChart({
+  ready () {
+    this.render({
       labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
       datasets: [
         {
@@ -15,6 +15,6 @@ export default DoughnutChart.extend({
           data: [40, 20, 80, 10]
         }
       ]
-    }, {responsive: true, maintainAspectRatio: false})
+    })
   }
 })

src/examples/LineExample.js

@@ -1,8 +1,8 @@
 import LineChart from '../BaseCharts/Line'
 
 export default LineChart.extend({
-  mounted () {
-    this.renderChart({
+  ready () {
+    this.render({
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
       datasets: [
         {
@@ -11,6 +11,6 @@ export default LineChart.extend({
           data: [40, 39, 10, 40, 39, 80, 40]
         }
       ]
-    }, {responsive: true, maintainAspectRatio: false})
+    })
   }
 })

src/examples/PieExample.js

@@ -1,8 +1,8 @@
 import PieChart from '../BaseCharts/Pie'
 
 export default PieChart.extend({
-  mounted () {
-    this.renderChart({
+  ready () {
+    this.render({
       labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
       datasets: [
         {
@@ -15,6 +15,6 @@ export default PieChart.extend({
           data: [40, 20, 80, 10]
         }
       ]
-    }, {responsive: true, maintainAspectRatio: false})
+    })
   }
 })

src/examples/PolarAreaExample.js

@@ -1,8 +1,8 @@
 import PolarAreaChart from '../BaseCharts/PolarArea'
 
 export default PolarAreaChart.extend({
-  mounted () {
-    this.renderChart({
+  ready () {
+    this.render({
       labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
       datasets: [
         {
@@ -24,6 +24,6 @@ export default PolarAreaChart.extend({
           data: [28, 48, 40, 19, 96, 27, 100]
         }
       ]
-    }, {responsive: true, maintainAspectRatio: false})
+    })
   }
 })

src/examples/RadarExample.js

@@ -1,8 +1,8 @@
 import RadarChart from '../BaseCharts/Radar'
 
 export default RadarChart.extend({
-  mounted () {
-    this.renderChart({
+  ready () {
+    this.render({
       labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
       datasets: [
         {
@@ -26,6 +26,6 @@ export default RadarChart.extend({
           data: [28, 48, 40, 19, 96, 27, 100]
         }
       ]
-    }, {responsive: true, maintainAspectRatio: false})
+    })
   }
 })

src/examples/ReactiveExample.js

@@ -1,41 +0,0 @@
-import BarChart from '../BaseCharts/Bar'
-import reactiveData from '../mixins/reactiveData'
-
-export default BarChart.extend({
-  mixins: [reactiveData],
-  data () {
-    return {
-      chartData: ''
-    }
-  },
-  created () {
-    this.fillData()
-  },
-
-  mounted () {
-    this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
-
-    setInterval(() => {
-      this.fillData()
-    }, 5000)
-  },
-
-  methods: {
-    fillData () {
-      this.chartData = {
-        labels: ['January' + this.getRandomInt(), 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-        datasets: [
-          {
-            label: 'Data One',
-            backgroundColor: '#f87979',
-            data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
-          }
-        ]
-      }
-    },
-
-    getRandomInt () {
-      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
-    }
-  }
-})

src/examples/ReactivePropExample.js

@@ -1,10 +0,0 @@
-import BarChart from '../BaseCharts/Bar'
-import reactiveData from '../mixins/reactiveProp'
-
-export default BarChart.extend({
-  mixins: [reactiveData],
-
-  mounted () {
-    this.renderChart(this.chartData)
-  }
-})

src/index.js

@@ -5,7 +5,7 @@ import Pie from './BaseCharts/Pie'
 import PolarArea from './BaseCharts/PolarArea'
 import Radar from './BaseCharts/Radar'
 import Bubble from './BaseCharts/Bubble'
-import mixins from './mixins/index.js'
+import Scatter from './BaseCharts/Scatter'
 
 const VueCharts = {
   Bar,
@@ -15,19 +15,7 @@ const VueCharts = {
   PolarArea,
   Radar,
   Bubble,
-  mixins
+  Scatter
 }
 
-export default VueCharts
-
-export {
-  VueCharts,
-  Bar,
-  Doughnut,
-  Line,
-  Pie,
-  PolarArea,
-  Radar,
-  Bubble,
-  mixins
-}
+module.exports = VueCharts

src/mixins/index.js

@@ -1,7 +0,0 @@
-import reactiveData from './reactiveData.js'
-import reactiveProp from './reactiveProp.js'
-
-export default {
-  reactiveData,
-  reactiveProp
-}

src/mixins/reactiveData.js

@@ -1,42 +0,0 @@
-module.exports = {
-  data () {
-    return {
-      chartData: null
-    }
-  },
-  watch: {
-    'chartData': {
-      handler (newData, oldData) {
-        if (oldData) {
-          let chart = this._chart
-
-          // Get new and old DataSet Labels
-          let newDatasetLabels = newData.datasets.map((dataset) => {
-            return dataset.label
-          })
-
-          let oldDatasetLabels = oldData.datasets.map((dataset) => {
-            return dataset.label
-          })
-
-          // Stringify 'em for easier compare
-          const oldLabels = JSON.stringify(oldDatasetLabels)
-          const newLabels = JSON.stringify(newDatasetLabels)
-
-          // Check if Labels are equal and if dataset length is equal
-          if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
-            newData.datasets.forEach((dataset, i) => {
-              chart.data.datasets[i].data = dataset.data
-            })
-
-            chart.data.labels = newData.labels
-            chart.update()
-          } else {
-            chart.destroy()
-            this.renderChart(this.chartData, this.options)
-          }
-        }
-      }
-    }
-  }
-}

src/mixins/reactiveProp.js

@@ -1,43 +0,0 @@
-module.exports = {
-  props: {
-    chartData: {
-      required: true
-    }
-  },
-
-  watch: {
-    'chartData': {
-      handler (newData, oldData) {
-        if (oldData) {
-          let chart = this._chart
-
-          // Get new and old DataSet Labels
-          let newDatasetLabels = newData.datasets.map((dataset) => {
-            return dataset.label
-          })
-
-          let oldDatasetLabels = oldData.datasets.map((dataset) => {
-            return dataset.label
-          })
-
-          // Stringify 'em for easier compare
-          const oldLabels = JSON.stringify(oldDatasetLabels)
-          const newLabels = JSON.stringify(newDatasetLabels)
-
-          // Check if Labels are equal and if dataset length is equal
-          if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
-            newData.datasets.forEach((dataset, i) => {
-              chart.data.datasets[i].data = dataset.data
-            })
-
-            chart.data.labels = newData.labels
-            chart.update()
-          } else {
-            chart.destroy()
-            this.renderChart(this.chartData, this.options)
-          }
-        }
-      }
-    }
-  }
-}

test/unit/.eslintrc

@@ -4,7 +4,6 @@
   },
   "globals": {
     "expect": true,
-    "jasmine": true,
     "sinon": true
   }
 }

test/unit/karma.conf.js

@@ -54,7 +54,7 @@ module.exports = function (config) {
     //    http://karma-runner.github.io/0.13/config/browsers.html
     // 2. add it to the `browsers` array below.
     browsers: ['PhantomJS'],
-    frameworks: ['mocha', 'sinon-chai', 'jasmine'],
+    frameworks: ['mocha', 'sinon-chai'],
     reporters: ['spec', 'coverage'],
     files: ['./index.js'],
     preprocessors: {

test/unit/specs/Bar.spec.js

@@ -2,63 +2,16 @@ import Vue from 'vue'
 import BarChart from 'src/examples/BarExample'
 
 describe('BarChart', () => {
-  let el
-
-  beforeEach(() => {
-    el = document.createElement('div')
-  })
-
   it('should render a canvas', () => {
     const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          BarChart
-        )
-      },
+      el: 'body',
+      replace: false,
+      template: '<bar-chart></bar-chart>',
       components: { BarChart }
-    }).$mount(el)
-
+    })
     expect(vm.$el.querySelector('#bar-chart')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
     expect(vm.$el.querySelector('canvas')).to.exist
   })
-
-  it('should change id based on prop', () => {
-    const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          BarChart, {
-            props: {
-              chartId: 'barchartprop'
-            }
-          }
-        )
-      },
-      components: { BarChart }
-    }).$mount(el)
-
-    expect(vm.$el.querySelector('#barchartprop')).not.to.be.an('undefined')
-  })
-
-  it('should destroy chart instance', (done) => {
-    const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          BarChart
-        )
-      },
-      components: { BarChart }
-    }).$mount(el)
-
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
-
-    vm.$destroy()
-
-    vm.$nextTick(() => {
-      vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
-      done()
-    })
-  })
 })

test/unit/specs/Bubble.spec.js

@@ -2,63 +2,16 @@ import Vue from 'vue'
 import BubbleChart from 'src/examples/BubbleExample'
 
 describe('BubbleChart', () => {
-  let el
-
-  beforeEach(() => {
-    el = document.createElement('div')
-  })
-
   it('should render a canvas', () => {
     const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          BubbleChart
-        )
-      },
+      el: 'body',
+      replace: false,
+      template: '<bubble-chart></bubble-chart>',
       components: { BubbleChart }
-    }).$mount(el)
-
+    })
     expect(vm.$el.querySelector('#bubble-chart')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
     expect(vm.$el.querySelector('canvas')).to.exist
   })
-
-  it('should change id based on prop', () => {
-    const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          BubbleChart, {
-            props: {
-              chartId: 'bubblechartprop'
-            }
-          }
-        )
-      },
-      components: { BubbleChart }
-    }).$mount(el)
-
-    expect(vm.$el.querySelector('#bubblechartprop')).not.to.be.an('undefined')
-  })
-
-  it('should destroy chart instance', (done) => {
-    const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          BubbleChart
-        )
-      },
-      components: { BubbleChart }
-    }).$mount(el)
-
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
-
-    vm.$destroy()
-
-    vm.$nextTick(() => {
-      vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
-      done()
-    })
-  })
 })

test/unit/specs/Doughnut.spec.js

@@ -2,63 +2,16 @@ import Vue from 'vue'
 import DoughnutChart from 'src/examples/DoughnutExample'
 
 describe('DoughnutChart', () => {
-  let el
-
-  beforeEach(() => {
-    el = document.createElement('div')
-  })
-
   it('should render a canvas', () => {
     const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          DoughnutChart
-        )
-      },
+      el: 'body',
+      replace: false,
+      template: '<doughnut-chart></doughnut-chart>',
       components: { DoughnutChart }
-    }).$mount(el)
-
+    })
     expect(vm.$el.querySelector('#doughnut-chart')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
     expect(vm.$el.querySelector('canvas')).to.exist
   })
-
-  it('should change id based on prop', () => {
-    const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          DoughnutChart, {
-            props: {
-              chartId: 'doughnutchartprop'
-            }
-          }
-        )
-      },
-      components: { DoughnutChart }
-    }).$mount(el)
-
-    expect(vm.$el.querySelector('#doughnutchartprop')).not.to.be.an('undefined')
-  })
-
-  it('should destroy chart instance', (done) => {
-    const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          DoughnutChart
-        )
-      },
-      components: { DoughnutChart }
-    }).$mount(el)
-
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
-
-    vm.$destroy()
-
-    vm.$nextTick(() => {
-      vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
-      done()
-    })
-  })
 })

test/unit/specs/Line.spec.js

@@ -2,63 +2,16 @@ import Vue from 'vue'
 import LineChart from 'src/examples/LineExample'
 
 describe('LineChart', () => {
-  let el
-
-  beforeEach(() => {
-    el = document.createElement('div')
-  })
-
   it('should render a canvas', () => {
     const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          LineChart
-        )
-      },
+      el: 'body',
+      replace: false,
+      template: '<line-chart></line-chart>',
       components: { LineChart }
-    }).$mount(el)
-
+    })
     expect(vm.$el.querySelector('#line-chart')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
     expect(vm.$el.querySelector('canvas')).to.exist
   })
-
-  it('should change id based on prop', () => {
-    const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          LineChart, {
-            props: {
-              chartId: 'linechartprop'
-            }
-          }
-        )
-      },
-      components: { LineChart }
-    }).$mount(el)
-
-    expect(vm.$el.querySelector('#linechartprop')).not.to.be.an('undefined')
-  })
-
-  it('should destroy chart instance', (done) => {
-    const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          LineChart
-        )
-      },
-      components: { LineChart }
-    }).$mount(el)
-
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
-
-    vm.$destroy()
-
-    vm.$nextTick(() => {
-      vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
-      done()
-    })
-  })
 })

test/unit/specs/Pie.spec.js

@@ -2,62 +2,16 @@ import Vue from 'vue'
 import PieChart from 'src/examples/PieExample'
 
 describe('PieChart', () => {
-  let el
-
-  beforeEach(() => {
-    el = document.createElement('div')
-  })
-
   it('should render a canvas', () => {
     const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          PieChart
-        )
-      },
+      el: 'body',
+      replace: false,
+      template: '<pie-chart></pie-chart>',
       components: { PieChart }
-    }).$mount(el)
-
+    })
     expect(vm.$el.querySelector('#pie-chart')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
     expect(vm.$el.querySelector('canvas')).to.exist
   })
-
-  it('should change id based on prop', () => {
-    const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          PieChart, {
-            props: {
-              chartId: 'piechartprop'
-            }
-          }
-        )
-      },
-      components: { PieChart }
-    }).$mount(el)
-
-    expect(vm.$el.querySelector('#piechartprop')).not.to.be.an('undefined')
-  })
-  it('should destroy chart instance', (done) => {
-    const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          PieChart
-        )
-      },
-      components: { PieChart }
-    }).$mount(el)
-
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
-
-    vm.$destroy()
-
-    vm.$nextTick(() => {
-      vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
-      done()
-    })
-  })
 })

test/unit/specs/PolarArea.spec.js

@@ -2,63 +2,16 @@ import Vue from 'vue'
 import PolarChart from 'src/examples/PolarAreaExample'
 
 describe('PolarChart', () => {
-  let el
-
-  beforeEach(() => {
-    el = document.createElement('div')
-  })
-
   it('should render a canvas', () => {
     const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          PolarChart
-        )
-      },
+      el: 'body',
+      replace: false,
+      template: '<polar-chart></polar-chart>',
       components: { PolarChart }
-    }).$mount(el)
-
+    })
     expect(vm.$el.querySelector('#polar-chart')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
     expect(vm.$el.querySelector('canvas')).to.exist
   })
-
-  it('should change id based on prop', () => {
-    const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          PolarChart, {
-            props: {
-              chartId: 'polarchartprop'
-            }
-          }
-        )
-      },
-      components: { PolarChart }
-    }).$mount(el)
-
-    expect(vm.$el.querySelector('#polarchartprop')).not.to.be.an('undefined')
-  })
-
-  it('should destroy chart instance', (done) => {
-    const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          PolarChart
-        )
-      },
-      components: { PolarChart }
-    }).$mount(el)
-
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
-
-    vm.$destroy()
-
-    vm.$nextTick(() => {
-      vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
-      done()
-    })
-  })
 })

test/unit/specs/Radar.spec.js

@@ -2,62 +2,16 @@ import Vue from 'vue'
 import RadarChart from 'src/examples/RadarExample'
 
 describe('RadarChart', () => {
-  let el
-
-  beforeEach(() => {
-    el = document.createElement('div')
-  })
-
   it('should render a canvas', () => {
     const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          RadarChart
-        )
-      },
+      el: 'body',
+      replace: false,
+      template: '<radar-chart></radar-chart>',
       components: { RadarChart }
-    }).$mount(el)
-
+    })
     expect(vm.$el.querySelector('#radar-chart')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
     expect(vm.$el.querySelector('canvas')).to.exist
   })
-
-  it('should change id based on prop', () => {
-    const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          RadarChart, {
-            props: {
-              chartId: 'rodarchartprop'
-            }
-          }
-        )
-      },
-      components: { RadarChart }
-    }).$mount(el)
-
-    expect(vm.$el.querySelector('#rodarchartprop')).not.to.be.an('undefined')
-  })
-  it('should destroy chart instance', (done) => {
-    const vm = new Vue({
-      render: function (createElement) {
-        return createElement(
-          RadarChart
-        )
-      },
-      components: { RadarChart }
-    }).$mount(el)
-
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
-
-    vm.$destroy()
-
-    vm.$nextTick(() => {
-      vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
-      done()
-    })
-  })
 })