feat: reactive doughnut chart

lbwa · Sep 29, 2018 · 55eaa82 · 55eaa82
1 parent 1ed9a52
commit 55eaa82
Showing 1 changed file with 34 additions and 19 deletions.
diff --git a/src/components/ChartDoughnut.js b/src/components/ChartDoughnut.js
@@ -46,24 +46,39 @@ export default {
   },
 
   mounted () {
-    this.renderChart({
-      labels: this.labels,
-      datasets: [
-        {
-          backgroundColor: this.colorSets,
-          data: this.datasets
-        }
-      ]
-    }, {
-      legend: {
-        display: false,
-        position: 'right',
-        labels: {
-          usePointStyle: true
-        }
-      },
-      cutoutPercentage: 80, // inner round radius
-      ...this.options
-    })
+    this.renderer()
+  },
+
+  methods: {
+    handleUpdate (newValue, oldValue) {
+      this.$data._chart.destroy()
+      this.renderer()
+    },
+
+    renderer () {
+      this.renderChart({
+        labels: this.labels,
+        datasets: [
+          {
+            backgroundColor: this.colorSets,
+            data: this.datasets
+          }
+        ]
+      }, {
+        legend: {
+          display: false,
+          position: 'right',
+          labels: {
+            usePointStyle: true
+          }
+        },
+        cutoutPercentage: 80, // inner round radius
+        ...this.options
+      })
+    }
+  },
+
+  watch: {
+    datasets: 'handleUpdate'
   }
 }