feat(events): Add events to reactiveMixins (apertureless#389)

* feat(events): Add events to reactiveMixins

This will resolve apertureless#382

* docs(reactive): Add events section to docs

docs/README.md

@@ -190,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**

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')
   }
 }