Merge branch 'develop'

* develop:
  chore(release): Add dist files
  chore(release): 3.4.0
  feat(events): Add events to reactiveMixins (apertureless#389)
  feat(ux): Add a wrapper around generateLegend (apertureless#390)
  feat(ux): Add fake render method with error message
  chore(docs): Update README
  feat(typescript): Add basic typescript definitions

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+<a name="3.4.0"></a>
+# [3.4.0](https://github.com/apertureless/vue-chartjs/compare/v3.3.2...v3.4.0) (2018-08-04)
+
+
+### Features
+
+* **events:** Add events to reactiveMixins ([#389](https://github.com/apertureless/vue-chartjs/issues/389)) ([67e8e4d](https://github.com/apertureless/vue-chartjs/commit/67e8e4d)), closes [#382](https://github.com/apertureless/vue-chartjs/issues/382)
+* **typescript:** Add basic typescript definitions ([184be5c](https://github.com/apertureless/vue-chartjs/commit/184be5c)), closes [#376](https://github.com/apertureless/vue-chartjs/issues/376)
+* **ux:** Add a wrapper around generateLegend ([#390](https://github.com/apertureless/vue-chartjs/issues/390)) ([fc646d8](https://github.com/apertureless/vue-chartjs/commit/fc646d8))
+* **ux:** Add fake render method with error message ([23ff90d](https://github.com/apertureless/vue-chartjs/commit/23ff90d)), closes [#380](https://github.com/apertureless/vue-chartjs/issues/380)
+
+
+
 <a name="3.3.2"></a>
 ## [3.3.2](https://github.com/apertureless/vue-chartjs/compare/v3.3.1...v3.3.2) (2018-06-18)
 

README.md

@@ -299,3 +299,4 @@ For a detailed explanation of how things work, check out the [guide](http://vuej
 
 This software is distributed under [MIT license](LICENSE.txt).
 
+<a href="https://www.buymeacoffee.com/xcqjaytbl" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>

docs/README.md

@@ -75,6 +75,27 @@ There are some basic props defined in the BaseCharts. Because you `extend()` the
 | chart-id | id of the canvas |
 | css-classes | String with css classes for the surrounding div |
 | styles | Object with css styles for the surrounding div container |
+| plugins | Array with chartjs plugins |
+
+## Legend Generation
+
+`vue-chartjs` provides a small helper to generate a HTML legend.
+
+```js
+import { Line } from 'vue-chartjs'
+
+export default {
+  extends: Line,
+  props: ['datasets', 'options']
+  data: () => ({
+    htmlLegend: null
+  })
+  mounted () {
+    this.renderChart(this.datasets, this.options)
+    this.htmlLegend = this.generateLegend()
+  }
+}
+```
 
 ## Examples
 
@@ -169,6 +190,18 @@ data () {
 }
 ```
 
+### Events
+
+The reactive mixins will emit events if the data changes. You can listen to them with `v:on` on the chart component. Following events are available:
+
+- `chart:render` - if the mixin performs a complete rerender
+- `chart:destroy` - if the mixin deletes the chart object instance
+- `chart:update` - if the mixin performs an update instead of a re-render
+- `labels:update` - if new labels were set
+- `xlabels:update` if new xLabels were set
+- `ylabels:update` - if new yLabels were set
+
+
 ### Example
 
 **LineChart.js**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "3.3.2",
+  "version": "3.4.0",
   "description": "Vue.js wrapper for chart.js for creating beautiful charts.",
   "author": "Jakub Juszczak <[email protected]>",
   "homepage": "http://vue-chartjs.org",
@@ -40,10 +40,12 @@
   "unpkg": "dist/vue-chartjs.min.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
+  "typings": "types/index.d.ts",
   "files": [
     "src",
     "dist",
-    "es"
+    "es",
+    "types/*.d.ts"
   ],
   "scripts": {
     "dev": "node build/dev-server.js",

src/BaseCharts.js

@@ -62,6 +62,11 @@ export function generateChart (chartId, chartType) {
       addPlugin (plugin) {
         this.$data._plugins.push(plugin)
       },
+      generateLegend () {
+        if (this.$data._chart) {
+          return this.$data._chart.generateLegend()
+        }
+      },
       renderChart (data, options) {
         if (this.$data._chart) this.$data._chart.destroy()
         this.$data._chart = new Chart(

src/index.js

@@ -24,7 +24,8 @@ const VueCharts = {
   Bubble,
   Scatter,
   mixins,
-  generateChart
+  generateChart,
+  render: () => console.error('[vue-chartjs]: This is not a vue component. It is the whole object containing all vue components. Please import the named export or access the components over the dot notation. For more info visit https://vue-chartjs.org/#/home?id=quick-start')
 }
 
 export default VueCharts

src/mixins/index.js

@@ -42,25 +42,33 @@ function dataHandler (newData, oldData) {
 
       if (newData.hasOwnProperty('labels')) {
         chart.data.labels = newData.labels
+        this.$emit('labels:update')
       }
       if (newData.hasOwnProperty('xLabels')) {
         chart.data.xLabels = newData.xLabels
+        this.$emit('xlabels:update')
       }
       if (newData.hasOwnProperty('yLabels')) {
         chart.data.yLabels = newData.yLabels
+        this.$emit('ylabels:update')
       }
       chart.update()
+      this.$emit('chart:update')
     } else {
       if (chart) {
         chart.destroy()
+        this.$emit('chart:destroy')
       }
       this.renderChart(this.chartData, this.options)
+      this.$emit('chart:render')
     }
   } else {
     if (this.$data._chart) {
       this.$data._chart.destroy()
+      this.$emit('chart:destroy')
     }
     this.renderChart(this.chartData, this.options)
+    this.$emit('chart:render')
   }
 }
 

types/components.d.ts

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+
+/** vue-chartjs component common definition */
+export declare class BaseChart extends Vue {
+  addPlugin (plugin?: string[]): void
+  renderChart (chartData: any, options?: any): void
+}

types/index.d.ts

@@ -0,0 +1,19 @@
+import { BaseChart } from './components'
+
+declare module 'vue-chartjs' {
+  export function generateChart(chartId: string, chartType: string): any;
+  export class Bar extends BaseChart {}
+  export class HorizontalBar extends BaseChart {}
+  export class Doughnut extends BaseChart {}
+  export class Line extends BaseChart {}
+  export class Pie extends BaseChart {}
+  export class PolarArea extends BaseChart {}
+  export class Radar extends BaseChart {}
+  export class Bubble extends BaseChart {}
+  export class Scatter extends BaseChart {}
+  export const mixins: {
+    reactiveData: any
+    reactiveProp: any
+  }
+}
+