💎 Release new version 2.7.1

Fix links to images in translated documents

CHANGELOG.md

@@ -1,5 +1,37 @@
 # Change Log
 
+## [v2.7.0](https://github.com/apertureless/vue-chartjs/tree/v2.7.0) (2017-07-04)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.5...v2.7.0)
+
+**Closed issues:**
+
+- Reactive Data Tutorial [\#132](https://github.com/apertureless/vue-chartjs/issues/132)
+- Using inline plugins [\#130](https://github.com/apertureless/vue-chartjs/issues/130)
+- Scatter Chart [\#129](https://github.com/apertureless/vue-chartjs/issues/129)
+- Generating Chart after clicking submit button [\#128](https://github.com/apertureless/vue-chartjs/issues/128)
+- Ticks not working with reactive props [\#127](https://github.com/apertureless/vue-chartjs/issues/127)
+- Error in callback for watcher "chartData": "TypeError: Cannot read property 'data' of undefined" [\#126](https://github.com/apertureless/vue-chartjs/issues/126)
+- Passing the data from vue to chartjs [\#125](https://github.com/apertureless/vue-chartjs/issues/125)
+- Combination of Bar and Line Chart  [\#123](https://github.com/apertureless/vue-chartjs/issues/123)
+- Reactive data example not working [\#122](https://github.com/apertureless/vue-chartjs/issues/122)
+- vue-chartjs height was 0 when i set v-show [\#120](https://github.com/apertureless/vue-chartjs/issues/120)
+- Bar chart, barPercentage in X axis [\#119](https://github.com/apertureless/vue-chartjs/issues/119)
+- update event not firing on data change [\#118](https://github.com/apertureless/vue-chartjs/issues/118)
+
+**Merged pull requests:**
+
+- ✅ Update tests for addPlugin method [\#140](https://github.com/apertureless/vue-chartjs/pull/140) ([apertureless](https://github.com/apertureless))
+- Fix beforeDestory when renderChart was not called [\#139](https://github.com/apertureless/vue-chartjs/pull/139) ([ZhangYiJiang](https://github.com/ZhangYiJiang))
+- Add support for inline plugins [\#137](https://github.com/apertureless/vue-chartjs/pull/137) ([kurbar](https://github.com/kurbar))
+- Feature/scatter chart [\#136](https://github.com/apertureless/vue-chartjs/pull/136) ([apertureless](https://github.com/apertureless))
+- 🐛 Fix \#122 reactive mixin [\#135](https://github.com/apertureless/vue-chartjs/pull/135) ([apertureless](https://github.com/apertureless))
+- 📝 Add resources & tutorials to docs [\#133](https://github.com/apertureless/vue-chartjs/pull/133) ([apertureless](https://github.com/apertureless))
+- fix a typo in an example [\#131](https://github.com/apertureless/vue-chartjs/pull/131) ([JobV](https://github.com/JobV))
+- Update README [\#121](https://github.com/apertureless/vue-chartjs/pull/121) ([stoykostanchev](https://github.com/stoykostanchev))
+
+## [v2.6.5](https://github.com/apertureless/vue-chartjs/tree/v2.6.5) (2017-06-10)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.4...v2.6.5)
+
 ## [v2.6.4](https://github.com/apertureless/vue-chartjs/tree/v2.6.4) (2017-06-04)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.3...v2.6.4)
 
@@ -30,7 +62,6 @@
 - Is it possible to use with axios? [\#103](https://github.com/apertureless/vue-chartjs/issues/103)
 - How to change momentjs locale for time scale? [\#101](https://github.com/apertureless/vue-chartjs/issues/101)
 - It seems that the reactiveProp couldn't let the chart update itself [\#99](https://github.com/apertureless/vue-chartjs/issues/99)
-- Why do I need both vue-chartjs chart.js? [\#98](https://github.com/apertureless/vue-chartjs/issues/98)
 - vue-chartjs not working with lodash-webpack-plugin installed [\#97](https://github.com/apertureless/vue-chartjs/issues/97)
 - multi lines with same options [\#95](https://github.com/apertureless/vue-chartjs/issues/95)
 - Zoom And Pan Options in Vue Charts [\#94](https://github.com/apertureless/vue-chartjs/issues/94)

README.md

@@ -27,7 +27,7 @@
 - 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.
+After the final release of vue.js 2, you also get the v2 by 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 or use the legacy tag.
 If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
 
@@ -149,7 +149,7 @@ export default {
 ## Reactivity
 
 Chart.js does not update or re-render the chart if new data is passed.
-However you can simply implement this by your own or use one of the two mixins which are included.
+However you can simply implement this on your own or use one of the two mixins which are included.
 
 - `reactiveProp`
 - `reactiveData`
@@ -247,6 +247,10 @@ export default Line.extend({
 
 ![Bubble](assets/bubble.png)
 
+### Scatter
+
+![Scatter](assets/scatter.png)
+
 ## Build Setup
 
 ``` bash
@@ -269,7 +273,7 @@ npm run e2e
 npm test
 ```
 
-For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
 
 ## Contributing
 

docs/README.md

@@ -134,7 +134,7 @@ export default Bar.extend({
         ]
       }
     }
-  }
+  },
   mounted () {
     this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
   }
@@ -255,6 +255,26 @@ export default Line.extend({
 
 Sometimes you need more control over chart.js. Thats why you can access the chart.js instance over `this._chart`
 
+## Inline plugins
+
+In Chart.js you can define global and inline plugins. Global plugins are working without problems with `vue-chartjs` like in the [chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html) described.
+
+If you want to add inline plugins, `vue-chartjs` exposes a helper method called `addPlugin()`
+You should call `addPlugin()` before the `renderChart()` method.
+
+### Example
+
+```javascript
+mounted () {
+  this.addPlugin({
+    id: 'my-plugin',
+    beforeInit: function (chart) {
+      ....
+    }
+  })
+}
+```
+
 ## Available Charts
 
 ### Bar Chart
@@ -287,6 +307,12 @@ Sometimes you need more control over chart.js. Thats why you can access the char
 
 ![Bubble](assets/bubble.png)
 
+### Scatter
+
+This chart has a different data structure then the others. Right now the reactive Mixins are not working for this chart type.
+
+![Scatter](assets/scatter.png)
+
 
 ## Explanation of Different Builds
 There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a peerDependency.
@@ -317,3 +343,13 @@ However Vue.js and Chart.js are `peerDependencies` so you have to install them s
 ### Webpack 2
 If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
 It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way your tree shaking will work.  Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.
+
+## Resources
+
+You can find here some Resources like tutorials on how to use `vue-chartjs`
+
+- [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f)
+- [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a)
+- [Let’s Build a Web App with Vue, Chart.js and an API Part I](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44)
+- [Let’s Build a Web App with Vue, Chart.js and an API Part II](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf)
+- [Build a realtime chart with VueJS and Pusher](https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/)

docs/de/README.md

@@ -262,30 +262,30 @@ Sometimes you need more control over chart.js. Thats why you can access the char
   There are two versions of the Bar chart. `{Bar}` and `{HorizontalBar}`
 </p>
 
-![Bar](assets/bar.png)
+![Bar](../assets/bar.png)
 ### Line Chart
 
-![Line](assets/line.png)
+![Line](../assets/line.png)
 
 ### Doughnut
 
-![Doughnut](assets/doughnut.png)
+![Doughnut](../assets/doughnut.png)
 
 ### Pie
 
-![Pie](assets/pie.png)
+![Pie](../assets/pie.png)
 
 ### Radar
 
-![Pie](assets/radar.png)
+![Pie](../assets/radar.png)
 
 ### Polar Area
 
-![Pie](assets/polar.png)
+![Pie](../assets/polar.png)
 
 ### Bubble
 
-![Bubble](assets/bubble.png)
+![Bubble](../assets/bubble.png)
 
 ## Webpack, Browserify and dist files.
 

docs/ja/README.md

@@ -264,30 +264,30 @@ export default Line.extend({
   棒グラフには `{Bar}` と `{HorizontalBar}` の2つのバージョンがあります。
 </p>
 
-![Bar](assets/bar.png)
+![Bar](../assets/bar.png)
 ### 折れ線グラフ
 
-![Line](assets/line.png)
+![Line](../assets/line.png)
 
 ### ドーナツチャート
 
-![Doughnut](assets/doughnut.png)
+![Doughnut](../assets/doughnut.png)
 
 ### パイチャート
 
-![Pie](assets/pie.png)
+![Pie](../assets/pie.png)
 
 ### レーダーチャート
 
-![Pie](assets/radar.png)
+![Pie](../assets/radar.png)
 
 ### 鶏頭図
 
-![Pie](assets/polar.png)
+![Pie](../assets/polar.png)
 
 ### バブルチャート
 
-![Bubble](assets/bubble.png)
+![Bubble](../assets/bubble.png)
 
 
 ## ビルド方法の違い

docs/pt-br/README.md

@@ -221,31 +221,31 @@ export default Line.extend({
 
 ### Gráfico de Barra
 
-![Barra](assets/bar.png)
+![Barra](../assets/bar.png)
 
 ### Gráfico de Linha
 
-![Linha](assets/line.png)
+![Linha](../assets/line.png)
 
 ### Donut
 
-![Donut](assets/doughnut.png)
+![Donut](../assets/doughnut.png)
 
 ### Pizza
 
-![Pizza](assets/pie.png)
+![Pizza](../assets/pie.png)
 
 ### Radar
 
-![Radar](assets/radar.png)
+![Radar](../assets/radar.png)
 
 ### Área Polar
 
-![Área Polar](assets/polar.png)
+![Área Polar](../assets/polar.png)
 
 ### Bolha
 
-![Bolha](assets/bubble.png)
+![Bolha](../assets/bubble.png)
 
 ## Configurações de Build
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "2.6.5",
+  "version": "2.7.1",
   "description": "vue.js wrapper for chart.js",
   "author": "Jakub Juszczak <jakub@posteo.de>",
   "homepage": "http://vue-chartjs.org",

src/BaseCharts/Bar.js

@@ -56,24 +56,31 @@ export default Vue.extend({
             barPercentage: 0.2
           }]
         }
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
       this._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'bar',
           data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
         }
       )
       this._chart.generateLegend()
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Bubble.js

@@ -56,11 +56,15 @@ export default Vue.extend({
             barPercentage: 0.2
           }]
         }
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
@@ -68,13 +72,16 @@ export default Vue.extend({
         this.$refs.canvas.getContext('2d'), {
           type: 'bubble',
           data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
         }
       )
       this._chart.generateLegend()
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Doughnut.js

@@ -39,11 +39,15 @@ export default Vue.extend({
   data () {
     return {
       defaultOptions: {
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
@@ -51,13 +55,16 @@ export default Vue.extend({
         this.$refs.canvas.getContext('2d'), {
           type: 'doughnut',
           data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
         }
       )
       this._chart.generateLegend()
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/HorizontalBar.js

@@ -56,24 +56,31 @@ export default Vue.extend({
             barPercentage: 0.2
           }]
         }
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options, type) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
       this._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'horizontalBar',
           data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
         }
       )
       this._chart.generateLegend()
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Line.js

@@ -54,11 +54,15 @@ export default Vue.extend({
             }
           }]
         }
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
@@ -66,13 +70,16 @@ export default Vue.extend({
         this.$refs.canvas.getContext('2d'), {
           type: 'line',
           data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
         }
       )
       this._chart.generateLegend()
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Pie.js

@@ -39,11 +39,15 @@ export default Vue.extend({
   data () {
     return {
       defaultOptions: {
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
@@ -51,13 +55,16 @@ export default Vue.extend({
         this.$refs.canvas.getContext('2d'), {
           type: 'pie',
           data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
         }
       )
       this._chart.generateLegend()
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/PolarArea.js

@@ -39,11 +39,15 @@ export default Vue.extend({
   data () {
     return {
       defaultOptions: {
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
@@ -51,13 +55,16 @@ export default Vue.extend({
         this.$refs.canvas.getContext('2d'), {
           type: 'polarArea',
           data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
         }
       )
       this._chart.generateLegend()
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Radar.js

@@ -39,11 +39,15 @@ export default Vue.extend({
   data () {
     return {
       defaultOptions: {
-      }
+      },
+      plugins: []
     }
   },
 
   methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
@@ -51,13 +55,16 @@ export default Vue.extend({
         this.$refs.canvas.getContext('2d'), {
           type: 'radar',
           data: data,
-          options: chartOptions
+          options: chartOptions,
+          plugins: this.plugins
         }
       )
       this._chart.generateLegend()
     }
   },
   beforeDestroy () {
-    this._chart.destroy()
+    if (this._chart) {
+      this._chart.destroy()
+    }
   }
 })

src/BaseCharts/Scatter.js

@@ -0,0 +1,76 @@
+import Vue from 'vue'
+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'
+          }
+        )
+      ]
+    )
+  },
+
+  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'
+          }]
+        }
+      },
+      plugins: []
+    }
+  },
+
+  methods: {
+    addPlugin (plugin) {
+      this.plugins.push(plugin)
+    },
+    renderChart (data, options) {
+      let chartOptions = mergeOptions(this.defaultOptions, options)
+
+      this._chart = new Chart(
+        this.$refs.canvas.getContext('2d'), {
+          type: 'scatter',
+          data: data,
+          options: chartOptions,
+          plugins: this.plugins
+        }
+      )
+      this._chart.generateLegend()
+    }
+  },
+  beforeDestroy () {
+    if (this._chart) {
+      this._chart.destroy()
+    }
+  }
+})

src/examples/App.vue

@@ -1,21 +1,54 @@
 <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 class="Chart">
+      <h1 style="text-align:center;">Barchart</h1>
+      <bar-example></bar-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Barchart with reactive mixing for live data</h1>
+      <reactive-example></reactive-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Barchart with reactive mixing for live data as props</h1>
+      <reactive-prop-example :chart-data="dataPoints"></reactive-prop-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Linechart</h1>
+      <line-example></line-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Doughnutchart</h1>
+      <doughnut-example></doughnut-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Piechart</h1>
+      <pie-example></pie-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Radarchart</h1>
+      <radar-example></radar-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Polararea</h1>
+      <polar-area-example></polar-area-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Bubblechart</h1>
+      <bubble-example></bubble-example>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Scatter Chart</h1>
+      <scatter-example></scatter-example>
+    </div>
   </div>
 </template>
 
@@ -29,6 +62,7 @@
   import BubbleExample from './BubbleExample'
   import ReactiveExample from './ReactiveExample'
   import ReactivePropExample from './ReactivePropExample'
+  import ScatterExample from './ScatterExample'
 
   export default {
     components: {
@@ -40,7 +74,35 @@
       PolarAreaExample,
       BubbleExample,
       ReactiveExample,
-      ReactivePropExample
+      ReactivePropExample,
+      ScatterExample
+    },
+    data () {
+      return {
+        dataPoints: null
+      }
+    },
+    mounted () {
+      setInterval(() => {
+        this.fillData()
+      }, 2000)
+    },
+    methods: {
+      getRandomInt () {
+        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+      },
+      fillData () {
+        this.dataPoints = {
+          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()]
+            }
+          ]
+        }
+      }
     }
   }
 </script>
@@ -50,4 +112,21 @@
     max-width: 800px;
     margin: 0 auto;
   }
+
+  h1 {
+    font-family: 'Helvetica', Arial;
+    color: #464646;
+    text-transform: uppercase;
+    border-bottom: 1px solid #f1f1f1;
+    padding-bottom: 15px;
+    font-size: 28px;
+    margin-top: 0;
+  }
+
+  .Chart {
+    padding: 20px;
+    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, .4);
+    border-radius: 20px;
+    margin: 50px 0;
+  }
 </style>

src/examples/ReactivePropExample.js

@@ -5,6 +5,6 @@ export default BarChart.extend({
   mixins: [reactiveProp],
 
   mounted () {
-    this.renderChart(this.chartData)
+    this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
   }
 })

src/examples/ScatterExample.js

@@ -0,0 +1,53 @@
+import Scatter from '../BaseCharts/Scatter'
+
+export default Scatter.extend({
+  mounted () {
+    this.renderChart({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+      datasets: [{
+        label: 'Scatter Dataset 1',
+        fill: false,
+        borderColor: '#f87979',
+        backgroundColor: '#f87979',
+        data: [{
+          x: -2,
+          y: 4
+        }, {
+          x: -1,
+          y: 1
+        }, {
+          x: 0,
+          y: 0
+        }, {
+          x: 1,
+          y: 1
+        }, {
+          x: 2,
+          y: 4
+        }]
+      },
+      {
+        label: 'Scatter Dataset 2',
+        fill: false,
+        borderColor: '#7acbf9',
+        backgroundColor: '#7acbf9',
+        data: [{
+          x: -2,
+          y: -4
+        }, {
+          x: -1,
+          y: -1
+        }, {
+          x: 0,
+          y: 1
+        }, {
+          x: 1,
+          y: -1
+        }, {
+          x: 2,
+          y: -4
+        }]
+      }]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+})

src/index.js

@@ -6,6 +6,7 @@ import Pie from './BaseCharts/Pie'
 import PolarArea from './BaseCharts/PolarArea'
 import Radar from './BaseCharts/Radar'
 import Bubble from './BaseCharts/Bubble'
+import Scatter from './BaseCharts/Scatter'
 import mixins from './mixins/index.js'
 import npmCfg from '../package.json'
 
@@ -19,6 +20,7 @@ const VueCharts = {
   PolarArea,
   Radar,
   Bubble,
+  Scatter,
   mixins
 }
 
@@ -34,5 +36,6 @@ export {
   PolarArea,
   Radar,
   Bubble,
+  Scatter,
   mixins
 }

src/mixins/reactiveData.js

@@ -54,6 +54,8 @@ module.exports = {
             chart.destroy()
             this.renderChart(this.chartData, this.options)
           }
+        } else {
+          this.renderChart(this.chartData, this.options)
         }
       }
     }

src/mixins/reactiveProp.js

@@ -54,6 +54,8 @@ module.exports = {
             chart.destroy()
             this.renderChart(this.chartData, this.options)
           }
+        } else {
+          this.renderChart(this.chartData, this.options)
         }
       }
     }

test/unit/specs/Bar.spec.js

@@ -57,8 +57,28 @@ describe('BarChart', () => {
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      expect(vm.$children[0]._chart.chart.ctx).to.equal
       done()
     })
   })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          BarChart
+        )
+      },
+      components: { BarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })

test/unit/specs/Bubble.spec.js

@@ -61,4 +61,24 @@ describe('BubbleChart', () => {
       done()
     })
   })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          BubbleChart
+        )
+      },
+      components: { BubbleChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })

test/unit/specs/Doughnut.spec.js

@@ -61,4 +61,24 @@ describe('DoughnutChart', () => {
       done()
     })
   })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          DoughnutChart
+        )
+      },
+      components: { DoughnutChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })

test/unit/specs/HorizontalBar.spec.js

@@ -61,4 +61,24 @@ describe('HorizontalBarChart', () => {
       done()
     })
   })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          HorizontalBarChart
+        )
+      },
+      components: { HorizontalBarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })

test/unit/specs/Line.spec.js

@@ -61,4 +61,24 @@ describe('LineChart', () => {
       done()
     })
   })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          LineChart
+        )
+      },
+      components: { LineChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })

test/unit/specs/Pie.spec.js

@@ -60,4 +60,24 @@ describe('PieChart', () => {
       done()
     })
   })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          PieChart
+        )
+      },
+      components: { PieChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })

test/unit/specs/PolarArea.spec.js

@@ -61,4 +61,24 @@ describe('PolarChart', () => {
       done()
     })
   })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          PolarChart
+        )
+      },
+      components: { PolarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })

test/unit/specs/Radar.spec.js

@@ -60,4 +60,24 @@ describe('RadarChart', () => {
       done()
     })
   })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          RadarChart
+        )
+      },
+      components: { RadarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
 })

test/unit/specs/Scatter.spec.js

@@ -0,0 +1,84 @@
+import Vue from 'vue'
+import ScatterChart from 'src/examples/ScatterExample'
+
+describe('ScatterChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
+  it('should render a canvas', () => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          ScatterChart
+        )
+      },
+      components: { ScatterChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#scatter-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(
+          ScatterChart, {
+            props: {
+              chartId: 'linechartprop'
+            }
+          }
+        )
+      },
+      components: { ScatterChart }
+    }).$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(
+          ScatterChart
+        )
+      },
+      components: { ScatterChart }
+    }).$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()
+    })
+  })
+
+  it('should add an inline plugin to the array', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          ScatterChart
+        )
+      },
+      components: { ScatterChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].plugins).to.exist
+    vm.$children[0].addPlugin(testPlugin)
+
+    expect(vm.$children[0].plugins.length).to.equal(1)
+  })
+})