Feature/v3 (#225)

* Remove Vue dependency and change extends

Signed-off-by: Jakub Juszczak <netghost03@gmail.com>

* 💎 Release new version 3.0.0-rc0

* ⬆️ Update examples

* 📝 Update README.md

* ⬆️ Update examples

* ⬆️ Update englishd docs

* ⬆️ Update transalted docs with current code examples

* 🔥 Remove dist files from gitignore

* ⬆️ Update dependencies vue and chartjs

* Change private data

Implements #182. The private chart instance is now in the vue.js data model. And can be accessed over `this.$data._chart`
Updated unit tests

* 📝 Update docs with private data

* ✨ Add codeclimate ignore

* ⬆️ Update codeclimate

* ⬆️ Update codeclimate

* ⬆️ Update codeclimate

Add build and config folders to ignore

.codeclimate.yml

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

README.md

@@ -40,7 +40,7 @@ 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>
 ```
-to your scripts. See [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
+to your scripts. See [Codepen](https://codepen.io/apertureless/pen/zEvvWM)
 
 ## Explanation of Different Builds
 There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a peerDependency.
@@ -49,33 +49,52 @@ There are three different entry points. It depends on which build setup do you h
 - Browserify / Webpack 1
 - Webpack 2
 
-
-| Build | Chart.js | Vue.js |
+| Build | Chart.js |
 |---|---|---|
-| vue-chartjs.full.js | Bundled | Bundled |
-| vue-chartjs.full.min.js |  Bundled | Bundled  |
-| vue-chartjs.js | peerDependency | peerDependency  |
-| vue-chartjs.min.js | peerDependency  | peerDependency  |
-| es/index* |  peerDependency | peerDependency  |
+| 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/vxWbqB?editors=1010). For this case, please use the `vue-chartjs.full.min.js` which is the minified version. It has Vue.js and Chart.js bundled into it. And bundled to a UMD Module. So you only need that one file.
+You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/zEvvWM). For this case, please use the `vue-chartjs.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 then simply register your component:
+
+```js
+Vue.component('line-chart', {
+  extends: VueChartJs.Line,
+  mounted () {
+    this.renderChart({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+      datasets: [
+        {
+          label: 'Data One',
+          backgroundColor: '#f87979',
+          data: [40, 39, 10, 40, 39, 80, 40]
+        }
+      ]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+})
+```
 
 
 ### Browserify / Webpack 1
 
 If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
 
-However Vue.js and Chart.js are `peerDependencies` so you have to install them separately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
+However Chart.js is a `peerDependencies` so you have to install it separately. In most projects This way, you can have different versions of Chart.js then in this package.
 
 ### Webpack 2
 If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
-It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way you three shaking will work.  Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.
+It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way you three shaking will work.  Like in the bundled version, `Chart.js` is a `peerDependencies` and need to be installed.
 
 
 ## How to use
 
-You need to import the base chart class and extend it. This gives much more flexibility when working with different data. You can pass the data over props or vue-resource.
+You need to import the component and then either use `extends` or `mixins` and add it.
 
 You can import the whole package or each module individual.
 
@@ -90,7 +109,8 @@ Just create your own component.
 // CommitChart.js
 import { Bar } from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   mounted () {
     // Overwriting base render method with actual data.
     this.renderChart({
@@ -104,7 +124,7 @@ export default Bar.extend({
       ]
     })
   }
-})
+}
 ```
 
 Then simply import and use your own extended component and use it like a normal vue component
@@ -118,15 +138,16 @@ import CommitChart from 'path/to/component/CommitChart'
 You can overwrite the default chart options. Just pass the options object as a second paramenter to the render method
 
 ```javascript
-// MonthlyIncome.js
+// MonthlyIncome.vue
 import { Line } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   props: ['data', 'options'],
   mounted () {
     this.renderChart(this.data, this.options)
   }
-})
+}
 ```
 
 Use it in your vue app
@@ -163,13 +184,14 @@ However keep in mind the limitations of vue and javascript for mutations on arra
 // MonthlyIncome.js
 import { Line, mixins } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [mixins.reactiveProp],
   props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 
 ```
 
@@ -181,26 +203,28 @@ Some ways to import them:
 // Load complete module with all charts
 import VueCharts from 'vue-chartjs'
 
-export default VueCharts.Line.extend({
+export default {
+  extends: VueCharts.Line,
   mixins: [VueCharts.mixins.reactiveProp],
   props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 ```javascript
 // Load speperate modules
 import { Line, mixins } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [mixins.reactiveProp],
   props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 ```javascript
@@ -208,13 +232,14 @@ export default Line.extend({
 import { Line, mixins } from 'vue-chartjs'
 const { reactiveProp } = mixins
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [reactiveProp],
   props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 ## Available Charts

build/webpack.release.js

@@ -23,7 +23,6 @@ module.exports = {
     umdNamedDefine: true
   },
   externals: {
-    'vue': 'vue',
     'chart.js': 'chart.js'
   },
   module: {

docs/README.md

@@ -30,12 +30,13 @@ You can import the whole package or each module individual.
 // CommitChart.js
 import { Bar } from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   mounted () {
     // Overwriting base render method with actual data.
     this.renderChart(data, options)
   }
-})
+}
 ```
 
 You can pass two arguments to the `renderChart()` method:
@@ -86,12 +87,13 @@ You can create data and options props to pass data to the chart.
 // LineChart.js
 import { Line } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   props: ['data', 'options'],
   mounted () {
     this.renderChart(this.data, this.options)
   }
-})
+}
 ```
 
 After you add your component you can use it:
@@ -121,7 +123,8 @@ If you want to overwrite width and height:
 ```javascript
 import {Bar} from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   data () {
     return {
       datacollection: {
@@ -139,7 +142,7 @@ export default Bar.extend({
   mounted () {
     this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
   }
-})
+}
 ```
 
 ### Reusable Components
@@ -172,7 +175,8 @@ data () {
 import { Line, mixins } from 'vue-chartjs'
 const { reactiveProp } = mixins
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [reactiveProp],
   props: ['options'],
   mounted () {
@@ -180,7 +184,7 @@ export default Line.extend({
     // If you want to pass options please create a local options object
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 **RandomChart.vue**
@@ -254,7 +258,7 @@ export default Line.extend({
 
 ## Chart.js object
 
-Sometimes you need more control over Chart.js. That's why you can access the Chart.js instance over `this._chart`.
+Sometimes you need more control over Chart.js. That's why you can access the Chart.js instance over `this.$data._chart`.
 
 ## Inline plugins
 

docs/config.js

@@ -41,7 +41,7 @@ docute.init({
       apiKey: 'b3544f7387612693644777553675d56a',
       indexName: 'vue-chartjs',
       // algolia docsearch allows you to search with tag filter
-      tags: ['en', 'de', 'fr', 'ja', 'pt-br', 'ru'],
+      tags: ['en', 'fr', 'ja', 'pt-br', 'ru'],
       // this plugin does require a url too
       // where docsearch fetches contents
       url: 'https://vue-chartjs.org'

docs/de/README.md

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

docs/fr-fr/README.md

@@ -30,12 +30,13 @@ Vous pouvez choisir d'importer le package dans son intégralité, ou chaque comp
 // CommitChart.js
 import { Bar } from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   mounted () {
     // Surcharge de la méthode render avec les données.
     this.renderChart(data, options)
   }
-})
+}
 ```
 
 La méthode `renderChart()` prend deux paramètres :
@@ -86,12 +87,13 @@ Vous pouvez créer les props data et options à transmetttre au graphe.
 // LineChart.js
 import { Line } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   props: ['data', 'options'],
   mounted () {
     this.renderChart(this.data, this.options)
   }
-})
+}
 ```
 
 Vous pourrez les utiliser après avoir ajouté votre composant :
@@ -121,7 +123,8 @@ Vous devrez préciser `responsive: false` si vous souhaitez appliquer une taille
 ```javascript
 import {Bar} from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   data () {
     return {
       datacollection: {
@@ -139,7 +142,7 @@ export default Bar.extend({
   mounted () {
     this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
   }
-})
+}
 ```
 
 ### Composants réutilisables
@@ -174,7 +177,8 @@ data () {
 import { Line, mixins } from 'vue-chartjs'
 const { reactiveProp } = mixins
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [reactiveProp],
   props: ['options'],
   mounted () {
@@ -182,7 +186,7 @@ export default Line.extend({
     // si vous voulez transmettre des options, il faudra créer une variable locale
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 **RandomChart.vue**
@@ -256,7 +260,7 @@ export default Line.extend({
 
 ## Objet Chart.js
 
-Il peut arriver d'avoir besoin de plus de contrôle sur l'objet chart.js. Vous pouvez, à cet effet, accéder à cet objet via `this._chart`.
+Il peut arriver d'avoir besoin de plus de contrôle sur l'objet chart.js. Vous pouvez, à cet effet, accéder à cet objet via `this.$data._chart`.
 
 ## Plugins inline
 

docs/id/README.md

@@ -31,12 +31,13 @@ Kamu bisa meng-import seluruh package atau modul-modul terpisah.
 // CommitChart.js
 import { Bar } from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   mounted () {
     // Overwriting base render method with actual data.
     this.renderChart(data, options)
   }
-})
+}
 ```
 
 Kamu dapat melewatkan dua argumen pada `renderChart()`:
@@ -87,12 +88,13 @@ Kamu dapat membuat props data dan opsi untuk melewatkan data pada chart.
 // LineChart.js
 import { Line } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   props: ['data', 'options'],
   mounted () {
     this.renderChart(this.data, this.options)
   }
-})
+}
 ```
 
 Setelah kamu menambahkannya kamu dapat menggunakannya seperti biasa:
@@ -122,7 +124,8 @@ Jika kamu ingin mengatur tinggi dan lebar:
 ```javascript
 import {Bar} from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   data () {
     return {
       datacollection: {
@@ -140,7 +143,7 @@ export default Bar.extend({
   mounted () {
     this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
   }
-})
+}
 ```
 
 ### Reusable Komponen
@@ -173,7 +176,8 @@ data () {
 import { Line, mixins } from 'vue-chartjs'
 const { reactiveProp } = mixins
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [reactiveProp],
   props: ['options'],
   mounted () {
@@ -181,7 +185,7 @@ export default Line.extend({
     // If you want to pass options please create a local options object
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 **RandomChart.vue**
@@ -255,7 +259,7 @@ export default Line.extend({
 
 ## Objek Chart.js
 
-Suatu ketika kamu membutuhkan kontrol chart.js. Kamu dapat mengaksesnya dengan `this._chart`
+Suatu ketika kamu membutuhkan kontrol chart.js. Kamu dapat mengaksesnya dengan `this.$data._chart`
 
 ## Inline plugins
 

docs/ja/README.md

@@ -32,12 +32,13 @@ BaseChartをインポートしてextendします。
 // CommitChart.js
 import { Bar } from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   mounted () {
     // Overwriting base render method with actual data.
     this.renderChart(data, options)
   }
-})
+}
 ```
 
 renderChart()メソッドに2つの引数を渡すことができます:
@@ -86,12 +87,13 @@ dataとoptionsプロパティを作成して、チャートにデータを渡す
 // LineChart.js
 import { Line } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   props: ['data', 'options'],
   mounted () {
     this.renderChart(this.data, this.options)
   }
-})
+}
 ```
 
 コンポーネントに追加して、使用することができます。
@@ -121,7 +123,8 @@ export default Line.extend({
 ```javascript
 import {Bar} from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   data () {
     return {
       datacollection: {
@@ -139,7 +142,7 @@ export default Bar.extend({
   mounted () {
     this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
   }
-})
+}
 ```
 
 ### コンポーネントの再利用
@@ -174,14 +177,15 @@ data () {
 import { Line, mixins } from 'vue-chartjs'
 const { reactiveProp } = mixins
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [reactiveProp],
   props: ['options'],
   mounted () {
     // this.chartData is created in the mixin
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 **RandomChart.vue**
@@ -255,7 +259,7 @@ export default Line.extend({
 
 ## Chart.js オブジェクト
 
-場合によっては、chart.jsをより詳細に制御する必要があります。Chart.jsインスタンスには `this._chart` を使ってアクセスします。
+場合によっては、chart.jsをより詳細に制御する必要があります。Chart.jsインスタンスには `this.$data._chart` を使ってアクセスします。
 
 ## 利用可能なグラフ
 

docs/pt-br/README.md

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

docs/ru/README.md

@@ -81,7 +81,7 @@ search: ru
 
 ## Как использовать
 
-Вам необходимо импортировать базовый класс диаграммы и унаследовать его. Это даст гораздо большую гибкость при работе с различными данными. Вы можете передать данные через props или vue-resource. 
+Вам необходимо импортировать базовый класс диаграммы и унаследовать его. Это даст гораздо большую гибкость при работе с различными данными. Вы можете передать данные через props или vue-resource.
 
 Вы можете импортировать весь проект или каждый модуль по отдельности.
 
@@ -96,7 +96,8 @@ import { Bar, Line } from 'vue-chartjs'
 // CommitChart.js
 import { Bar } from 'vue-chartjs'
 
-export default Bar.extend({
+export default {
+  extends: Bar,
   mounted () {
     // Переопределение базового рендер метода с реальными данными.
     this.renderChart({
@@ -110,7 +111,7 @@ export default Bar.extend({
       ]
     })
   }
-})
+}
 ```
 
 Затем просто импортируйте и используйте ваши собственные расширенные компоненты как обычные vue компоненты.
@@ -127,12 +128,13 @@ import CommitChart from 'path/to/component/CommitChart'
 // MonthlyIncome.js
 import { Line } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   props: ['data', 'options'],
   mounted () {
     this.renderChart(this.data, this.options)
   }
-})
+}
 ```
 
 Используйте это в вашем vue приложении
@@ -169,13 +171,14 @@ Chart.js не обновляет и не перерисовывает диагр
 // MonthlyIncome.js
 import { Line, mixins } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [mixins.reactiveProp],
   props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 
 ```
 
@@ -187,26 +190,28 @@ export default Line.extend({
 // Load complete module with all charts
 import VueCharts from 'vue-chartjs'
 
-export default VueCharts.Line.extend({
+export default {
+  extends: VueCharts.Line,
   mixins: [VueCharts.mixins.reactiveProp],
   props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 ```javascript
 // Load speperate modules
 import { Line, mixins } from 'vue-chartjs'
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [mixins.reactiveProp],
   props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 ```javascript
@@ -214,13 +219,14 @@ export default Line.extend({
 import { Line, mixins } from 'vue-chartjs'
 const { reactiveProp } = mixins
 
-export default Line.extend({
+export default {
+  extends: Line,
   mixins: [reactiveProp],
   props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
-})
+}
 ```
 
 ## Доступные диаграммы

docs/zh-cn/README.md

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "2.8.7",
+  "version": "3.0.0-rc0",
   "description": "Vue.js wrapper for chart.js for creating beautiful charts.",
   "author": "Jakub Juszczak <jakub@posteo.de>",
   "homepage": "http://vue-chartjs.org",
@@ -60,20 +60,20 @@
     "lodash.merge": "^4.6.0"
   },
   "peerDependencies": {
-    "chart.js": "^2.7.0",
-    "vue": "^2.4.4"
+    "chart.js": "2.7.0",
+    "vue": "2.5.2"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-core": "^6.25.0",
-    "babel-loader": "^7.0.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",
     "chai": "^3.5.0",
-    "chart.js": "^2.7.0",
+    "chart.js": "2.7.0",
     "chromedriver": "^2.28.0",
     "connect-history-api-fallback": "^1.1.0",
     "cross-env": "^3.2.4",
@@ -118,12 +118,12 @@
     "sinon": "^2.1.0",
     "sinon-chai": "^2.9.0",
     "url-loader": "^0.5.8",
-    "vue": "^2.4.4",
-    "vue-hot-reload-api": "^2.1.0",
+    "vue": "2.5.2",
+    "vue-hot-reload-api": "2.1.0",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^12.2.2",
-    "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.4.2",
+    "vue-loader": "12.2.2",
+    "vue-style-loader": "3.0.1",
+    "vue-template-compiler": "2.5.2",
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.10.1",
     "webpack-hot-middleware": "^2.17.1",

src/BaseCharts/Bar.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -46,6 +45,7 @@ export default Vue.extend({
   },
   data () {
     return {
+      _chart: null,
       defaultOptions: {
         scales: {
           yAxes: [{
@@ -75,7 +75,7 @@ export default Vue.extend({
     },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'bar',
           data: data,
@@ -86,8 +86,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/BaseCharts/Bubble.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -48,6 +47,7 @@ export default Vue.extend({
 
   data () {
     return {
+      _chart: null,
       defaultOptions: {
         scales: {
           yAxes: [{
@@ -78,7 +78,7 @@ export default Vue.extend({
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'bubble',
           data: data,
@@ -89,8 +89,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/BaseCharts/Doughnut.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -48,6 +47,7 @@ export default Vue.extend({
 
   data () {
     return {
+      _chart: null,
       defaultOptions: {
       },
       plugins: []
@@ -61,7 +61,7 @@ export default Vue.extend({
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'doughnut',
           data: data,
@@ -72,8 +72,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/BaseCharts/HorizontalBar.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -48,6 +47,7 @@ export default Vue.extend({
 
   data () {
     return {
+      _chart: null,
       defaultOptions: {
         scales: {
           yAxes: [{
@@ -77,7 +77,7 @@ export default Vue.extend({
     },
     renderChart (data, options, type) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'horizontalBar',
           data: data,
@@ -88,8 +88,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/BaseCharts/Line.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -48,6 +47,7 @@ export default Vue.extend({
 
   data () {
     return {
+      _chart: null,
       defaultOptions: {
         scales: {
           yAxes: [{
@@ -76,7 +76,7 @@ export default Vue.extend({
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'line',
           data: data,
@@ -87,8 +87,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/BaseCharts/Pie.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -48,6 +47,7 @@ export default Vue.extend({
 
   data () {
     return {
+      _chart: null,
       defaultOptions: {
       },
       plugins: []
@@ -61,7 +61,7 @@ export default Vue.extend({
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'pie',
           data: data,
@@ -72,8 +72,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/BaseCharts/PolarArea.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -48,6 +47,7 @@ export default Vue.extend({
 
   data () {
     return {
+      _chart: null,
       defaultOptions: {
       },
       plugins: []
@@ -61,7 +61,7 @@ export default Vue.extend({
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'polarArea',
           data: data,
@@ -72,8 +72,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/BaseCharts/Radar.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -48,6 +47,7 @@ export default Vue.extend({
 
   data () {
     return {
+      _chart: null,
       defaultOptions: {
       },
       plugins: []
@@ -61,7 +61,7 @@ export default Vue.extend({
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'radar',
           data: data,
@@ -72,8 +72,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/BaseCharts/Scatter.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -48,6 +47,7 @@ export default Vue.extend({
 
   data () {
     return {
+      _chart: null,
       defaultOptions: {
         scales: {
           xAxes: [{
@@ -67,7 +67,7 @@ export default Vue.extend({
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'scatter',
           data: data,
@@ -78,8 +78,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/examples/BarExample.js

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

src/examples/BubbleExample.js

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

src/examples/DoughnutExample.js

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

src/examples/HorizontalBarExample.js

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

src/examples/LineExample.js

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

src/examples/PieExample.js

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

src/examples/PolarAreaExample.js

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

src/examples/RadarExample.js

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

src/examples/ReactiveExample.js

@@ -1,7 +1,8 @@
-import BarChart from '../BaseCharts/Bar'
+import Bar from '../BaseCharts/Bar'
 import reactiveData from '../mixins/reactiveData'
 
-export default BarChart.extend({
+export default {
+  extends: Bar,
   mixins: [reactiveData],
   data () {
     return {
@@ -38,4 +39,4 @@ export default BarChart.extend({
       return Math.floor(Math.random() * (50 - 5 + 1)) + 5
     }
   }
-})
+}

src/examples/ReactivePropExample.js

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

src/examples/ScatterExample.js

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

src/mixins/reactiveData.js

@@ -8,7 +8,7 @@ module.exports = {
     'chartData': {
       handler (newData, oldData) {
         if (oldData) {
-          let chart = this._chart
+          let chart = this.$data._chart
 
           // Get new and old DataSet Labels
           let newDatasetLabels = newData.datasets.map((dataset) => {

src/mixins/reactiveProp.js

@@ -8,7 +8,7 @@ module.exports = {
     'chartData': {
       handler (newData, oldData) {
         if (oldData) {
-          let chart = this._chart
+          let chart = this.$data._chart
 
           // Get new and old DataSet Labels
           let newDatasetLabels = newData.datasets.map((dataset) => {

test/unit/specs/Bar.spec.js

@@ -51,13 +51,13 @@ describe('BarChart', () => {
       components: { BarChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.equal
+      expect(vm.$children[0].$data._chart.chart.ctx).to.equal
       done()
     })
   })

test/unit/specs/Bubble.spec.js

@@ -51,13 +51,13 @@ describe('BubbleChart', () => {
       components: { BubbleChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0].$data._chart.chart.ctx).to.be.null
       done()
     })
   })

test/unit/specs/Doughnut.spec.js

@@ -51,13 +51,13 @@ describe('DoughnutChart', () => {
       components: { DoughnutChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0].$data._chart.chart.ctx).to.be.null
       done()
     })
   })

test/unit/specs/HorizontalBar.spec.js

@@ -51,13 +51,13 @@ describe('HorizontalBarChart', () => {
       components: { HorizontalBarChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0].$data._chart.chart.ctx).to.be.null
       done()
     })
   })

test/unit/specs/Line.spec.js

@@ -51,13 +51,13 @@ describe('LineChart', () => {
       components: { LineChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0].$data._chart.chart.ctx).to.be.null
       done()
     })
   })

test/unit/specs/Pie.spec.js

@@ -50,13 +50,13 @@ describe('PieChart', () => {
       components: { PieChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0].$data._chart.chart.ctx).to.be.null
       done()
     })
   })

test/unit/specs/PolarArea.spec.js

@@ -51,13 +51,13 @@ describe('PolarChart', () => {
       components: { PolarChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0].$data._chart.chart.ctx).to.be.null
       done()
     })
   })

test/unit/specs/Radar.spec.js

@@ -50,13 +50,13 @@ describe('RadarChart', () => {
       components: { RadarChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0].$data._chart.chart.ctx).to.be.null
       done()
     })
   })

test/unit/specs/Scatter.spec.js

@@ -51,13 +51,13 @@ describe('ScatterChart', () => {
       components: { ScatterChart }
     }).$mount(el)
 
-    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+    expect(vm.$children[0].$data._chart.chart.ctx).not.to.be.null
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0].$data._chart.chart.ctx).to.be.null
       done()
     })
   })