From 0c2b8159d1b32921033559536d4ab63981cacf45 Mon Sep 17 00:00:00 2001
From: Bertrand Benjamin <benjamin.bertrand@opytex.org>
Date: Sun, 2 Dec 2018 16:43:23 +0100
Subject: [PATCH] Feat: first doughnut chart with chartjs

---
 src/components/charjs_donut.vue      | 19 +++++++++++
 src/components/postes_comparison.vue | 51 ++++++++++++++++++++++++++++
 src/views/home.vue                   |  6 +++-
 3 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 src/components/charjs_donut.vue
 create mode 100644 src/components/postes_comparison.vue

diff --git a/src/components/charjs_donut.vue b/src/components/charjs_donut.vue
new file mode 100644
index 0000000..45cebef
--- /dev/null
+++ b/src/components/charjs_donut.vue
@@ -0,0 +1,19 @@
+<script>
+import { Doughnut } from 'vue-chartjs'
+
+export default {
+  name: 'pie',
+  extends: Doughnut,
+  props: ['chartdata', 'options'],
+  mounted () {
+    this.renderChart(this.chartdata, this.options)
+  }
+}
+</script>
+
+<style scope>
+#doughnut-chart {
+  width: 100px;
+  height: 100px;
+}
+</style>
diff --git a/src/components/postes_comparison.vue b/src/components/postes_comparison.vue
new file mode 100644
index 0000000..ce80634
--- /dev/null
+++ b/src/components/postes_comparison.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="container">
+    <pie :chartdata="data" :options="options"></pie>
+  </div>
+</template>
+
+<script>
+import pie from './charjs_donut'
+
+export default {
+  name: 'postesComparison',
+  components: {
+    'pie': pie
+  },
+  data () {
+    return {
+      data: {
+        labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
+        datasets: [
+          {
+            label: "Population (millions)",
+            backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
+            data: [2478,5267,734,784,433]
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        title: {
+          display: true,
+          text: 'Predicted world population (millions) in 2050'
+        }
+      }
+    }
+  },
+  computed: {
+  },
+  methods: {
+  }
+}
+
+</script>
+
+<style scope>
+.container {
+  position: relative;
+  height: 40vh;
+  width: 80vw;
+}
+</style>
diff --git a/src/views/home.vue b/src/views/home.vue
index bedbec0..96842cf 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -21,6 +21,8 @@
        <box @click.native="set_poste('other')" postename="other"></box>
      </b-card-group>
 
+     <postes-comparison></postes-comparison>
+
     <b-table striped hover :items="filtered_rows(poste.words, poste.invert)" :fields='fields'></b-table>
   </div>
 </template>
@@ -28,11 +30,13 @@
 <script>
 import { mapGetters, mapActions } from 'vuex'
 import box from '../components/box'
+import postesComparison from '../components/postes_comparison'
 
 export default {
   name: 'home',
   components: {
-    box: box
+    box: box,
+    postesComparison: postesComparison
   },
   data () {
     return {