✨ Add Doughnut Chart component

README.md

@@ -76,7 +76,11 @@ export default {
 
 ### Line Chart
 
-![Bar](src/assets/line.png)
+![Line](src/assets/line.png)
+
+### Doughnut
+
+![Doughnut](src/assets/doughnut.png)
 
 ## Todo
 
@@ -85,7 +89,7 @@ export default {
 - [ ] Implement Radar Chart
 - [ ] Implement Polar Area Chart
 - [ ] Implement Pie Chart
-- [ ] Implement Doughnut Chart
+- [x] Implement Doughnut Chart
 - [ ] Make npm module
 - [ ] Add tests
 

src/App.vue

@@ -1,16 +1,18 @@
 <template>
   <div class="container">
-    <bar-example :width="100" :height="200" :player={wins:'12'} :opponent={wins:'23'}></bar-example>
+    <bar-example></bar-example>
     <line-example></line-example>
+    <doughnut-example></doughnut-example>
   </div>
 </template>
 
 <script>
   import BarExample from './examples/BarExample'
   import LineExample from './examples/LineExample'
+  import DoughnutExample from './examples/DoughnutExample'
 
   export default {
-    components: { BarExample, LineExample }
+    components: { BarExample, LineExample, DoughnutExample }
   }
 </script>
 

src/BaseCharts/Doughnut.js

@@ -0,0 +1,41 @@
+import Vue from 'vue'
+import Chart from 'chart.js'
+
+export default Vue.extend({
+  template: `
+    <div>
+      <canvas id="doughnut-chart" width=width height=height v-el:canvas></canvas>
+    </div>
+  `,
+
+  props: {
+    width: {
+      default: 400,
+      type: Number
+    },
+    height: {
+      default: 400,
+      type: Number
+    }
+  },
+
+  data () {
+    return {
+      options: {
+      }
+    }
+  },
+
+  methods: {
+    render (data, options = this.options) {
+      const chart = new Chart(
+        this.$els.canvas.getContext('2d'), {
+          type: 'doughnut',
+          data: data,
+          options: options
+        }
+      )
+      chart.generateLegend()
+    }
+  }
+})

src/examples/DoughnutExample.js

@@ -0,0 +1,20 @@
+import DoughnutChart from '../BaseCharts/Doughnut'
+
+export default DoughnutChart.extend({
+  ready () {
+    this.render({
+      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
+      datasets: [
+        {
+          backgroundColor: [
+            '#41B883',
+            '#E46651',
+            '#00D8FF',
+            '#DD1B16'
+          ],
+          data: [40, 20, 80, 10]
+        }
+      ]
+    })
+  }
+})