Make StatisticsOverview and WeekSummary async

frontend/src/views/statistics/StatisticOverview.vue

@@ -2,7 +2,7 @@
   <div>
     <v-row class="ma-5">
       <v-col cols="4">
-        <WorkPausePie/>
+        <work-pause-pie/>
       </v-col>
       <v-col cols="4">
         <account-pie/>
@@ -13,12 +13,12 @@
     </v-row>
     <v-row class="ma-5">
       <v-col cols="12">
-        <MonthSummary/>
+        <month-summary/>
       </v-col>
     </v-row>
     <v-row class="ma-5">
       <v-col cols="12">
-        <WeekSummary/>
+        <week-summary :records="records"/>
       </v-col>
     </v-row>
   </div>
@@ -30,6 +30,8 @@
   import MonthSummary from "./charts/MonthSummary.vue";
   import WorkPausePie from "./charts/WorkPausePie.vue";
   import AccountPie from "./charts/AccountPie.vue";
+  import axios from "axios"
+  import {BASE_URI} from "../../globals"
 
   export default {
     name: "StatisticOverview",
@@ -39,8 +41,34 @@
       MonthSummary,
       WorkPausePie,
       AccountPie
+    },
+    data() {
+      return {
+        accounts: [],
+        records: []
+      }
+    },
+    async mounted() {
+      let recordsResponse
+      let link = BASE_URI + "/records/search/allForUser?"
+        + "username=" + sessionStorage.getItem("username") + "&"
+        + "projection=overview"
+      do {
+        recordsResponse = await axios.get(link)
+        link = recordsResponse.data._links?.next?.href
+        this.records.push(...recordsResponse.data._embedded.records)
+      } while (link)
+
+      let accountsResponse
+      link = BASE_URI + "/accounts/search/findByUsername?"
+        + "username=" + sessionStorage.getItem("username")
+      do {
+        accountsResponse = await axios.get(link)
+        link = accountsResponse.data._links?.next?.href
+        this.accounts.push(...accountsResponse.data._embedded.accounts)
+      } while(link)
+    }
   }
-  };
 </script>
 
 <style scoped>

frontend/src/views/statistics/charts/WeekSummary.vue

@@ -3,8 +3,8 @@
     <div>
       <p></p>
       <h3 align="center">My last 7 Days</h3>
-      <div id="chart">
-        <apexchart :options="chartOptions" :series="series" class="ma-5" height="350" type="bar"></apexchart>
+      <div>
+        <apexchart ref="chart" :options="chartOptions" :series="series" class="ma-5" height="350" type="bar"></apexchart>
       </div>
     </div>
   </v-card>
@@ -18,6 +18,9 @@
 
   export default {
     name: "WeekSummary",
+    props: [
+      "records"
+    ],
     components: {
       apexchart: VueApexCharts
     },
@@ -100,7 +103,21 @@
         }
       };
     },
-    created() {
+    async created() {
+      let firstDate = new Date()
+      firstDate.setDate(firstDate.getDate() - 7)
+
+      let interestingData = this.records.filter(record => new Date(record.startdate) > firstDate)
+      if (interestingData.length === 0) return
+      let test = new Date(interestingData[0].startdate)
+      let dateFormat = new Intl.DateTimeFormat("de-DE", {day: "2-digit", month: "short"})
+      console.log(dateFormat.format(test))
+
+      setTimeout(() => {
+        this.series[1].data[4] = 6000
+        this.$refs.chart.refresh()
+      }, 2000)
+
       var daysToDisplay = 8;
       var xhttp = new XMLHttpRequest();
       var records = new Array(0);