💎 Release new version 2.1.0

Signed-off-by: Jakub Juszczak <netghost03@gmail.com>
✨ Add travis config
2025-10-29 18:00:20 +00:00 · 2016-09-23 15:03:59 +02:00 · 2016-09-23 14:55:16 +02:00 · 2016-09-23 14:52:37 +02:00 · 2016-09-23 13:29:03 +02:00 · 2016-09-23 13:28:38 +02:00
34 changed files with 234 additions and 5961 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -4,5 +4,3 @@ npm-debug.log
 selenium-debug.log
 test/unit/coverage
 test/e2e/reports
 dist/
 es/
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,30 +1,5 @@
 # Change Log
 ## [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)
 **Implemented enhancements:**
 - Add test [\#1](https://github.com/apertureless/vue-chartjs/issues/1)
 **Fixed bugs:**
 - Passing chart size \(width / height\) as prop doesnt resize the chart [\#8](https://github.com/apertureless/vue-chartjs/issues/8)
 **Merged pull requests:**
 - Added bubble chart type [\#9](https://github.com/apertureless/vue-chartjs/pull/9) ([jcalonso](https://github.com/jcalonso))
 ## [1.1.2](https://github.com/apertureless/vue-chartjs/tree/1.1.2) (2016-09-07)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.1...1.1.2)
 **Implemented enhancements:**
 - Change name of the render method to ensure compatiblity with Vue 2.0 [\#4](https://github.com/apertureless/vue-chartjs/issues/4)
 ## [1.1.1](https://github.com/apertureless/vue-chartjs/tree/1.1.1) (2016-08-23)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.0...1.1.1)
 ## [1.1.0](https://github.com/apertureless/vue-chartjs/tree/1.1.0) (2016-08-21)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.0.3...1.1.0)
--- a/README.md
+++ b/README.md
@@ -4,9 +4,11 @@
 > VueJS wrapper for ChartJs
 # 🚧 VUE 2.0 WIP ⚠
 ## Install
-Simply run `npm install vue-chartjs@1.1.3`
+Simply run `npm install vue-chartjs@next`
 ## How to use
@@ -26,9 +28,9 @@ Just create your own component.
 import { Bar } from 'vue-chartjs'
 export default BarChart.extend({
-  ready () {
+  mounted () {
    // Overwriting base render method with actual data.
-    this.render({
+    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
@@ -58,8 +60,8 @@ import { Line } from 'vue-chartjs'
 export default LineChart.extend({
  props: [data, options],
-  ready () {
+  mounted () {
-    this.render(this.data, this.options)
+    this.renderChart(this.data, this.options)
  }
 })
 ```
@@ -107,9 +109,17 @@ export default {
 ![Pie](assets/polar.png)
-### Bubble
+## Todo
 - [x] ~~Implement Bar Chart~~
 - [x] ~~Implement Line Chart~~
 - [x] ~~Implement Radar Chart~~
 - [x] ~~Implement Polar Area Chart~~
 - [x] ~~Implement Pie Chart~~
 - [x] ~~Implement Doughnut Chart~~
 - [x] ~~Make npm module~~
 - [ ] Add tests
 ![Bubble](assets/bubble.png)
 ## Build Setup
--- a/assets/bubble.png
+++ b/assets/bubble.png
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -16,6 +16,7 @@ module.exports = {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'vue': 'vue/dist/vue.js',
      'src': path.resolve(__dirname, '../src'),
      'BaseCharts': path.resolve(__dirname, '../src/BaseCharts')
    }
--- a/dist/vue-chartjs.js
+++ b/dist/vue-chartjs.js
--- a/dist/vue-chartjs.js.map
+++ b/dist/vue-chartjs.js.map
--- a/index.html
+++ b/index.html
@@ -5,7 +5,9 @@
    <title>Vue-ChartJs</title>
  </head>
  <body>
  <div id="app">
    <app></app>
  </div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-chartjs",
-  "version": "1.2.0",
+  "version": "2.1.0",
  "description": "Vue wrapper for chart.js",
  "author": "Jakub Juszczak <jakub@nextindex.de>",
  "repository": {
@@ -15,27 +15,24 @@
    "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",
+    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
    "prepublish": "node build/build.js"
  },
  "dependencies": {
-    "babel-runtime": "^6.0.0",
+    "babel-runtime": "^6.11.6",
-    "chart.js": "^2.6.0",
+    "chart.js": "^2.2.1",
-    "vue": "^1.0.21"
+    "vue": "^2.0.0-rc.1"
  },
  "devDependencies": {
-    "babel-core": "^6.0.0",
+    "babel-core": "^6.10.4",
    "babel-loader": "^6.0.0",
-    "babel-plugin-transform-runtime": "^6.0.0",
+    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "chai": "^3.5.0",
@@ -79,11 +76,11 @@
    "sinon": "^1.17.3",
    "sinon-chai": "^2.8.0",
    "url-loader": "^0.5.7",
-    "vue-hot-reload-api": "^1.2.0",
+    "vue-hot-reload-api": "^2.0.6",
-    "vue-html-loader": "^1.0.0",
+    "vue-html-loader": "^1.2.3",
-    "vue-loader": "^8.3.0",
+    "vue-loader": "^9.3.0",
    "vue-style-loader": "^1.0.0",
-    "webpack": "^1.12.2",
+    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0",
    "webpack-merge": "^0.8.3"
--- a/src/BaseCharts/Bar.js
+++ b/src/BaseCharts/Bar.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width="{{width}}" height="{{height}}" v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,
@@ -49,11 +49,11 @@ export default Vue.extend({
  },
  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)
      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'bar',
          data: data,
          options: chartOptions
@@ -63,8 +63,6 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    if (this._chart) {
+    this._chart.destroy()
      this._chart.destroy()
    }
  }
 })
--- a/src/BaseCharts/Bubble.js
+++ b/src/BaseCharts/Bubble.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,
@@ -27,16 +27,33 @@ 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: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)
      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'bubble',
          data: data,
          options: chartOptions
@@ -46,8 +63,6 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    if (this._chart) {
+    this._chart.destroy()
      this._chart.destroy()
    }
  }
 })
--- a/src/BaseCharts/Doughnut.js
+++ b/src/BaseCharts/Doughnut.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,
@@ -32,11 +32,11 @@ export default Vue.extend({
  },
  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)
      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'doughnut',
          data: data,
          options: chartOptions
@@ -46,8 +46,6 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    if (this._chart) {
+    this._chart.destroy()
      this._chart.destroy()
    }
  }
 })
--- a/src/BaseCharts/Line.js
+++ b/src/BaseCharts/Line.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,
@@ -47,11 +47,11 @@ export default Vue.extend({
  },
  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)
      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'line',
          data: data,
          options: chartOptions
@@ -61,8 +61,6 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    if (this._chart) {
+    this._chart.destroy()
      this._chart.destroy()
    }
  }
 })
--- a/src/BaseCharts/Pie.js
+++ b/src/BaseCharts/Pie.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,
@@ -32,11 +32,11 @@ export default Vue.extend({
  },
  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)
      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'pie',
          data: data,
          options: chartOptions
@@ -46,8 +46,6 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    if (this._chart) {
+    this._chart.destroy()
      this._chart.destroy()
    }
  }
 })
--- a/src/BaseCharts/PolarArea.js
+++ b/src/BaseCharts/PolarArea.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,
@@ -32,11 +32,11 @@ export default Vue.extend({
  },
  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)
      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'polarArea',
          data: data,
          options: chartOptions
@@ -46,8 +46,6 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    if (this._chart) {
+    this._chart.destroy()
      this._chart.destroy()
    }
  }
 })
--- a/src/BaseCharts/Radar.js
+++ b/src/BaseCharts/Radar.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,
@@ -32,11 +32,11 @@ export default Vue.extend({
  },
  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)
      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'radar',
          data: data,
          options: chartOptions
@@ -46,8 +46,6 @@ export default Vue.extend({
    }
  },
  beforeDestroy () {
-    if (this._chart) {
+    this._chart.destroy()
      this._chart.destroy()
    }
  }
 })
--- a/src/BaseCharts/Scatter.js
+++ b/src/BaseCharts/Scatter.js
@@ -1,59 +0,0 @@
 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()
    }
  }
 })
--- a/src/examples/App.vue
+++ b/src/examples/App.vue
@@ -20,15 +20,7 @@
  import BubbleExample from './BubbleExample'
  export default {
-    components: {
+    components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample, BubbleExample }
      BarExample,
      LineExample,
      DoughnutExample,
      PieExample,
      RadarExample,
      PolarAreaExample,
      BubbleExample
    }
  }
 </script>
--- a/src/examples/BarExample.js
+++ b/src/examples/BarExample.js
@@ -1,8 +1,8 @@
 import BarChart from '../BaseCharts/Bar'
 export default BarChart.extend({
-  ready () {
+  mounted () {
-    this.render({
+    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
@@ -11,6 +11,6 @@ export default BarChart.extend({
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
-    }, {responsive: true, maintainAspectRatio: false})
+    })
  }
 })
--- a/src/examples/BubbleExample.js
+++ b/src/examples/BubbleExample.js
@@ -1,8 +1,8 @@
 import BubbleChart from '../BaseCharts/Bubble'
 export default BubbleChart.extend({
-  ready () {
+  mounted () {
-    this.render({
+    this.renderChart({
      datasets: [
        {
          label: 'Data One',
--- a/src/examples/DoughnutExample.js
+++ b/src/examples/DoughnutExample.js
@@ -1,8 +1,8 @@
 import DoughnutChart from '../BaseCharts/Doughnut'
 export default DoughnutChart.extend({
-  ready () {
+  mounted () {
-    this.render({
+    this.renderChart({
      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
      datasets: [
        {
--- a/src/examples/LineExample.js
+++ b/src/examples/LineExample.js
@@ -1,8 +1,8 @@
 import LineChart from '../BaseCharts/Line'
 export default LineChart.extend({
-  ready () {
+  mounted () {
-    this.render({
+    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
--- a/src/examples/PieExample.js
+++ b/src/examples/PieExample.js
@@ -1,8 +1,8 @@
 import PieChart from '../BaseCharts/Pie'
 export default PieChart.extend({
-  ready () {
+  mounted () {
-    this.render({
+    this.renderChart({
      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
      datasets: [
        {
--- a/src/examples/PolarAreaExample.js
+++ b/src/examples/PolarAreaExample.js
@@ -1,8 +1,8 @@
 import PolarAreaChart from '../BaseCharts/PolarArea'
 export default PolarAreaChart.extend({
-  ready () {
+  mounted () {
-    this.render({
+    this.renderChart({
      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
      datasets: [
        {
--- a/src/examples/RadarExample.js
+++ b/src/examples/RadarExample.js
@@ -1,8 +1,8 @@
 import RadarChart from '../BaseCharts/Radar'
 export default RadarChart.extend({
-  ready () {
+  mounted () {
-    this.render({
+    this.renderChart({
      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
      datasets: [
        {
--- a/src/index.js
+++ b/src/index.js
@@ -5,7 +5,6 @@ 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'
 const VueCharts = {
  Bar,
@@ -14,8 +13,7 @@ const VueCharts = {
  Pie,
  PolarArea,
  Radar,
-  Bubble,
+  Bubble
  Scatter
 }
 module.exports = VueCharts
--- a/test/unit/specs/Bar.spec.js
+++ b/test/unit/specs/Bar.spec.js
@@ -2,16 +2,30 @@ 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({
      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({
      template: '<bar-chart chartId="barchartprop"></bar-chart>',
      components: { BarChart }
    }).$mount(el)
    expect(vm.$el.querySelector('#barchartprop')).not.to.be.an('undefined')
  })
 })
--- a/test/unit/specs/Bubble.spec.js
+++ b/test/unit/specs/Bubble.spec.js
@@ -2,16 +2,30 @@ 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({
      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({
      template: '<bubble-chart chartId="bubblechartprop"></bubble-chart>',
      components: { BubbleChart }
    }).$mount(el)
    expect(vm.$el.querySelector('#bubblechartprop')).not.to.be.an('undefined')
  })
 })
--- a/test/unit/specs/Doughnut.spec.js
+++ b/test/unit/specs/Doughnut.spec.js
@@ -2,16 +2,30 @@ 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({
      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({
      template: '<doughnut-chart chartId="doughnutchartprop"></doughnut-chart>',
      components: { DoughnutChart }
    }).$mount(el)
    expect(vm.$el.querySelector('#doughnutchartprop')).not.to.be.an('undefined')
  })
 })
--- a/test/unit/specs/Line.spec.js
+++ b/test/unit/specs/Line.spec.js
@@ -2,16 +2,30 @@ 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({
      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({
      template: '<line-chart chartId="linechartprop"></line-chart>',
      components: { LineChart }
    }).$mount(el)
    expect(vm.$el.querySelector('#linechartprop')).not.to.be.an('undefined')
  })
 })
--- a/test/unit/specs/Pie.spec.js
+++ b/test/unit/specs/Pie.spec.js
@@ -2,16 +2,30 @@ 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({
      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({
      template: '<pie-chart chartId="piechartprop"></pie-chart>',
      components: { PieChart }
    }).$mount(el)
    expect(vm.$el.querySelector('#piechartprop')).not.to.be.an('undefined')
  })
 })
--- a/test/unit/specs/PolarArea.spec.js
+++ b/test/unit/specs/PolarArea.spec.js
@@ -2,16 +2,30 @@ 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({
      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({
      template: '<polar-chart chartId="polarchartprop"></polar-chart>',
      components: { PolarChart }
    }).$mount(el)
    expect(vm.$el.querySelector('#polarchartprop')).not.to.be.an('undefined')
  })
 })
--- a/test/unit/specs/Radar.spec.js
+++ b/test/unit/specs/Radar.spec.js
@@ -2,16 +2,30 @@ 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({
      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({
      template: '<radar-chart chartId="rodarchartprop"></radar-chart>',
      components: { RadarChart }
    }).$mount(el)
    expect(vm.$el.querySelector('#rodarchartprop')).not.to.be.an('undefined')
  })
 })
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Jakub Juszczak	0a04114eb0	💎 Release new version 2.1.0 Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-09-23 15:03:59 +02:00
Jakub Juszczak	b14b107890	✨ Add travis config Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-09-23 14:55:16 +02:00
Jakub Juszczak	13ff782ec8	🐛 Fix tests Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-09-23 14:52:37 +02:00
Jakub Juszczak	975a804570	✨ Add chartId as prop and fix width and height props Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-09-23 13:29:03 +02:00
Jakub Juszczak	3c252ce904	✨ Add bubble-chart example Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-09-23 13:28:38 +02:00
Jakub Juszczak	74cedd4ec4	✅ Add tests	2016-09-23 12:59:17 +02:00
Jakub Juszczak	d6c3f50ba8	✨ Add chart type Bubble	2016-09-23 12:59:00 +02:00
Jakub Juszczak	d7003306d1	Move examples into src for better testing	2016-09-23 12:49:09 +02:00
Jakub Juszczak	c0e93cd824	📝 Update README	2016-08-23 21:11:24 +02:00
Jakub Juszczak	5d34181e8e	💎 Release new version 2.0.0-alpha	2016-08-23 20:43:36 +02:00
Jakub Juszczak	1323791c52	Add vue 2.0 build files	2016-08-23 20:34:41 +02:00
Jakub Juszczak	5248534991	📝 Update README Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-08-23 20:32:47 +02:00
Jakub Juszczak	d3cb01b76c	⬆️ Update dependency chartjs to 2.2.1 Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-08-23 20:31:19 +02:00
Jakub Juszczak	b374370706	Update examples Change deprecated ready() method to mounted() Change render() method to renderChart() method Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-08-23 20:28:24 +02:00
Jakub Juszczak	60627650a3	⬆️ Update dependency vue 2.0 Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-08-23 20:26:32 +02:00
Jakub Juszczak	92982ef2ac	Change deprecated v-el to ref Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-08-23 20:06:50 +02:00
Jakub Juszczak	012b9a82bf	Change render() method name to renderChart This way it does not conflict with the vue 2.0 render function. Signed-off-by: Jakub Juszczak <netghost03@gmail.com>	2016-08-23 20:01:38 +02:00