feat(chart): add chart implementation

src/components/Account.vue

@@ -2,7 +2,14 @@
   <div class="account-tab">
     <b-card no-body>
       <b-tabs card>
-        <b-tab :title=account.name >
+        <b-tab title="Vue Global">
+          <scatter-chart
+              v-if="loaded"
+              :chartdata="chartData"
+              />
+        </b-tab>
+
+        <b-tab title="Vue detaillé" >
           <div>
           <div class="expense-button-div float-left">
             <b-button variant="success">Ajouter une dépense</b-button>
@@ -22,7 +29,7 @@
         <!-- Styled -->
         <b-form-file
             v-model="file"
-            :state="Boolean(file1)"
+            :state="Boolean(file)"
             placeholder="Choose a file or drop it here..."
             drop-placeholder="Drop file here..."
         ></b-form-file>
@@ -42,8 +49,10 @@
 </template>
 
 <script>
-import {BCard, BTabs , BTab, BTable, BFormFile} from "bootstrap-vue";
-import {getAnAccount, getExpenses, sendCSVImportExpenses} from "@/config/noscomptes";
+import {BCard, BTabs , BTab, BTable, BFormFile, BModal, BButton} from "bootstrap-vue";
+import {getAnAccount, getExpenses, sendCSVImportExpenses} from "@/service/noscomptes";
+import {formatExpenses} from "@/service/expenses";
+import ScatterChart from './charts/BarChart.vue';
 export default {
   name: 'account',
   data: function () {
@@ -72,7 +81,9 @@ export default {
         expenseDate: "Today",
         libelle:"Test",
         value: 10
-      }]
+      }],
+      chartData:{} ,
+      loaded: false,
     }
   },
   beforeCreate() {
@@ -82,7 +93,10 @@ export default {
     })
     getExpenses(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
         this.expenses = data
+      this.chartData = formatExpenses(data)
+      this.loaded= true
     })
+
   },
   mounted () {
   },
@@ -99,16 +113,30 @@ export default {
     validateFormImportExpenses() {
       let loggedUser = this.$store.state.loggedUser
       sendCSVImportExpenses(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId, this.file)
+          .then(()=>{
+            this.loaded = false
+            getExpenses(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
+              this.expenses = data
+              this.chartData = formatExpenses(data)
+              this.loaded = true
+            })
+
+            this.$refs['import-expense'].hide()
+          })
+
     }
 
 
   },
   components: {
+    ScatterChart,
     BCard,
     BTabs,
     BTab,
     BTable,
-    BFormFile
+    BFormFile,
+    BModal,
+    BButton
   }
 }
 </script>

src/components/MesComptes.vue

@@ -86,7 +86,7 @@
 
 <script>
 import {BCard, BTabs, BButton, BTab, BCardText, BCardTitle, BIconPlusCircleFill, BModal, BFormGroup, BFormSelect, BFormInput} from "bootstrap-vue";
-import {createAccount, getAccounts, deleteAnAccount} from "@/config/noscomptes";
+import {createAccount, getAccounts, deleteAnAccount} from "@/service/noscomptes";
 export default {
   name: 'mes_comptes',
   data: function () {

src/components/SocialLogin.vue

@@ -9,7 +9,7 @@
 
 <script>
 import router from '@/router/router'
-import {logWithGoogle, getAccounts, getSharedAccounts} from '@/config/noscomptes'
+import {logWithGoogle, getAccounts, getSharedAccounts} from '@/service/noscomptes'
 export default {
   name: 'login_signup_social',
   mounted () {

src/components/charts/BarChart.vue

@@ -0,0 +1,39 @@
+<script>
+import {Bar} from 'vue-chartjs'
+
+export default {
+  name: 'ScatterChart',
+  extends: Bar,
+  props: {
+    chartdata: {
+      type: Object,
+      default: null
+    },
+    options: {
+      type: Object,
+      default: () =>{return {
+        scales: {
+          xAxes: [{
+            type: "time",
+            time: {
+              unit: 'day',
+              round: 'day',
+              displayFormats: {
+                day: 'MMM D'
+              }
+            }
+          }],
+          yAxes: [{
+            ticks: {
+              beginAtZero: true
+            }
+          }]
+        }
+      }}
+    }
+  },
+  mounted() {
+    this.renderChart(this.chartdata, this.options)
+  }
+}
+</script>

src/components/charts/LineChart.vue

@@ -0,0 +1,21 @@
+<script>
+import {Line} from 'vue-chartjs'
+
+export default {
+  name: 'LineChart',
+  extends: Line,
+  props: {
+    chartdata: {
+      type: Object,
+      default: null
+    },
+    options: {
+      type: Object,
+      default: () =>{return {responsive: true}}
+    }
+  },
+  mounted() {
+    this.renderChart(this.chartdata, this.options)
+  }
+}
+</script>

src/main.js

@@ -7,7 +7,7 @@ import VueAxios from 'vue-axios'
 
 import '@/assets/css/style.css'
 
-import GoogleAuth from '@/config/google_oAuth.js'
+import GoogleAuth from '@/service/google_oAuth.js'
 import { BootstrapVue, IconsPlugin , BootstrapVueIcons, ModalPlugin, FormPlugin, FormFilePlugin} from 'bootstrap-vue'
 
 // Import Bootstrap an BootstrapVue CSS files (order is important)
@@ -38,3 +38,8 @@ Vue.use(BootstrapVueIcons)
 Vue.use(ModalPlugin)
 Vue.use(FormPlugin)
 Vue.use(FormFilePlugin)
+Vue.use(require('vue-moment'));
+
+import VueMoment from 'vue-moment'
+
+Vue.use(VueMoment)

src/service/expenses.js

@@ -0,0 +1,26 @@
+
+export const formatExpenses = (expenses) => {
+    const formattedExpenses = []
+    const reduceExpenses = []
+    for (const expense of expenses) {
+        if (reduceExpenses[expense.expenseDate] === undefined) {
+            reduceExpenses[expense.expenseDate] = expense.value
+        } else {
+            reduceExpenses[expense.expenseDate] += expense.value
+        }
+    }
+    for (const date in reduceExpenses) {
+        formattedExpenses[formattedExpenses.length] = { x: date, y: reduceExpenses[date] }
+    }
+    console.log(reduceExpenses)
+    console.log(formattedExpenses)
+    return {
+        datasets: [{
+            label: 'My First Dataset',
+            data: formattedExpenses,
+            fill: false,
+            borderColor: 'rgb(75, 192, 192)',
+            tension: 0.1
+        }]
+    }
+}

src/store/store.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import { setStore, getStore } from '@/config/utils'
-import {removeItem} from "../config/utils";
+import { setStore, getStore } from '@/service/utils'
+import {removeItem} from "../service/utils";
 
 Vue.use(Vuex)