Implement diagrams with backend data

frontend/src/views/StatisticOverview.vue

@@ -1,18 +1,13 @@
 <template>
   <v-row class="ma-5">
-    <v-col cols="5"><WorkPausePie/></v-col>
+    <v-col cols="3">
-    <v-col cols="7">
+      <WorkPausePie />
-      <WeekSummary/>
     </v-col>
-    <v-col cols="4"><WeekSummary/></v-col>
+    <v-col cols="9">
-    <v-col cols="4"><WeekSummary/></v-col>
+      <WeekSummary />
-    <v-col cols="4"><WorkPausePie/></v-col>
-
-    <v-col cols="7">
-      <div><WeekSummary/></div>
     </v-col>
-    <v-col cols="5">
+    <v-col cols="12">
-      <div><WorkPausePie/></div>
+      <MonthSummary />
     </v-col>
   </v-row>
 </template>
@@ -20,11 +15,13 @@
 
 <script>
 import WeekSummary from "./charts/WeekSummary.vue";
+import MonthSummary from "./charts/MonthSummary.vue";
 import WorkPausePie from "./charts/WorkPausePie.vue";
 export default {
   name: "StatisticOverview",
   components: {
     WeekSummary,
+    MonthSummary,
     WorkPausePie
   }
 };

frontend/src/views/charts/MonthSummary.vue

@@ -0,0 +1,203 @@
+<template>
+  <v-card color="main_accent" outlined>
+    <div>
+      <p></p>
+      <h3 align="center">My last 30 Days</h3>
+      <div id="chart">
+        <apexchart class="ma-5" type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
+      </div>
+    </div>
+  </v-card>
+</template>
+
+
+<script>
+import VueApexCharts from "vue-apexcharts";
+import { baseUri } from "../../variables.js";
+
+export default {
+  name: "MonthSummary",
+  components: {
+    apexchart: VueApexCharts
+  },
+  data() {
+    return {
+      series: [
+        {
+          name: "Working Hours",
+          data: []
+        },
+        {
+          name: "Pause Hours",
+          data: []
+        }
+      ],
+      chartOptions: {
+        chart: {
+          type: "bar",
+          stacked: true,
+          background: "#202020",
+          toolbar: {
+            show: true,
+            offsetX: 0,
+            offsetY: 0,
+            tools: {
+              download: true,
+              selection: true,
+              zoom: false,
+              zoomin: false,
+              zoomout: false,
+              pan: false,
+              reset: false,
+              customIcons: []
+            },
+            autoSelected: "zoom"
+          }
+        },
+        colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
+        theme: {
+          mode: "dark"
+        },
+        dataLabels: {
+          enabled: false
+        },
+        tooltip: {
+          enabled: true,
+          followCursor: true,
+          x: {
+            show: true
+          },
+          y: {
+            formatter: function(value) {
+              var decimalTimeString = value;
+              var decimalTime = parseFloat(decimalTimeString);
+              decimalTime = decimalTime * 60;
+              var hours = Math.floor(decimalTime / (60 * 60));
+              decimalTime = decimalTime - hours * 60 * 60;
+              var minutes = Math.floor(decimalTime / 60);
+              decimalTime = decimalTime - minutes * 60;
+              var seconds = Math.round(decimalTime);
+              if (hours < 10) {
+                hours = "0" + hours;
+              }
+              if (minutes < 10) {
+                minutes = "0" + minutes;
+              }
+              if (seconds < 10) {
+                seconds = "0" + seconds;
+              }
+              return hours + ":" + minutes + ":" + seconds;
+            }
+          }
+        },
+        responsive: [
+          {
+            breakpoint: 480,
+            options: {
+              legend: {
+                position: "bottom",
+                offsetX: -10,
+                offsetY: 0
+              }
+            }
+          }
+        ],
+        plotOptions: {
+          bar: {
+            horizontal: false,
+            columnWidth: "50%"
+          }
+        },
+        xaxis: {
+          type: "datetime",
+          categories: []
+        },
+        legend: {
+          show: false,
+          position: "left",
+          offsetY: 40
+        },
+        fill: {
+          opacity: 1
+        }
+      }
+    };
+  },
+  created() {
+    var daysToDisplay = 31;
+    var xhttp = new XMLHttpRequest();
+    var records;
+    this.chartOptions.xaxis.categories = new Array(daysToDisplay);
+    this.series[0].data = new Array(daysToDisplay);
+    this.series[1].data = new Array(daysToDisplay);
+
+    for (let index = 0; index < daysToDisplay; index++) {
+      this.series[0].data[index] = 0;
+      this.series[1].data[index] = 0;
+    }
+    var today = new Date();
+    var dd = String(today.getDate()).padStart(2, "0");
+    var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
+    var yyyy = today.getFullYear();
+
+    for (let index = 0; index < daysToDisplay; index++) {
+      var lastSeven = new Date();
+      lastSeven.setDate(today.getDate() - index);
+      var ddS = String(lastSeven.getDate()).padStart(2, "0");
+      var mmS = String(lastSeven.getMonth() + 1).padStart(2, "0"); //January is 0!
+      var yyyyS = lastSeven.getFullYear();
+      this.chartOptions.xaxis.categories[index] = yyyyS + "-" + mmS + "-" + ddS;
+    }
+    today = yyyy + "-" + mm + "-" + dd;
+
+    xhttp.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+        var recordsDB = JSON.parse(xhttp.responseText);
+
+        records = recordsDB._embedded.records;
+      }
+    };
+    xhttp.open(
+      "GET",
+      baseUri +
+        "/records/search/allBetweenAndUser?start=" +
+        this.chartOptions.xaxis.categories[daysToDisplay - 1] +
+        "T00:00:01" +
+        "&end=" +
+        today +
+        "T00:00:01" +
+        "&username=" +
+        sessionStorage.getItem("username") +
+        "&size=50",
+      false
+    );
+
+    xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+
+    xhttp.send(null);
+
+    for (let index = 0; index < records.length; index++) {
+      var record = records[index];
+
+      for (let indexA = 0; indexA < daysToDisplay; indexA++) {
+        if (record.startdate.split("T")[0] == this.chartOptions.xaxis.categories[indexA]) {
+          if (record.type == "PAID") {
+            this.series[0].data[indexA] += record.duration;
+          } else {
+            this.series[1].data[indexA] += record.duration;
+          }
+        }
+      }
+    }
+    // Dirty fix for known bug from apexcharts
+    this.series[0].data[daysToDisplay - 1] = 0;
+    this.series[1].data[daysToDisplay - 1] = 0;
+  }
+};
+</script>
+
+<style scoped>
+.v-card {
+  border-radius: 20px !important;
+}
+</style>

frontend/src/views/charts/WeekSummary.vue

@@ -1,10 +1,10 @@
 <template>
-  <v-card color="main_accent" outlined shaped>
+  <v-card color="main_accent" outlined>
     <div>
       <p></p>
-      <h3 align="center">Week Summary</h3>
+      <h3 align="center">My last 7 Days</h3>
       <div id="chart">
-        <apexchart class="ma-5" type="bar" width="100%"  :options="chartOptions" :series="series"></apexchart>
+        <apexchart class="ma-5" type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
       </div>
     </div>
   </v-card>
@@ -13,6 +13,8 @@
 
 <script>
 import VueApexCharts from "vue-apexcharts";
+import { baseUri } from "../../variables.js";
+
 export default {
   name: "WeekSummary",
   components: {
@@ -23,11 +25,11 @@ export default {
       series: [
         {
           name: "Working Hours",
-          data: [6, 4, 8, 8, 9, 2]
+          data: []
         },
         {
           name: "Pause Hours",
-          data: [1, 0.5, 2, 1, 3, 0.2]
+          data: []
         }
       ],
       chartOptions: {
@@ -69,7 +71,7 @@ export default {
             formatter: function(value) {
               var decimalTimeString = value;
               var decimalTime = parseFloat(decimalTimeString);
-              decimalTime = decimalTime * 60 * 60;
+              decimalTime = decimalTime * 60;
               var hours = Math.floor(decimalTime / (60 * 60));
               decimalTime = decimalTime - hours * 60 * 60;
               var minutes = Math.floor(decimalTime / 60);
@@ -102,19 +104,13 @@ export default {
         ],
         plotOptions: {
           bar: {
-            horizontal: false
+            horizontal: false,
+            columnWidth: "30%"
           }
         },
         xaxis: {
           type: "datetime",
-          categories: [
+          categories: []
-            "01/01/2011 GMT",
-            "01/02/2011 GMT",
-            "01/03/2011 GMT",
-            "01/04/2011 GMT",
-            "01/05/2011 GMT",
-            "01/06/2011 GMT"
-          ]
         },
         legend: {
           show: false,
@@ -126,10 +122,85 @@ export default {
         }
       }
     };
+  },
+  created() {
+    var daysToDisplay = 8;
+    var xhttp = new XMLHttpRequest();
+    var records;
+    this.chartOptions.xaxis.categories = new Array(daysToDisplay);
+    this.series[0].data = new Array(daysToDisplay);
+    this.series[1].data = new Array(daysToDisplay);
+
+    for (let index = 0; index < daysToDisplay; index++) {
+      this.series[0].data[index] = 0;
+      this.series[1].data[index] = 0;
+    }
+    var today = new Date();
+    var dd = String(today.getDate()).padStart(2, "0");
+    var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
+    var yyyy = today.getFullYear();
+
+    for (let index = 0; index < daysToDisplay; index++) {
+      var lastSeven = new Date();
+      lastSeven.setDate(today.getDate() - index);
+      var ddS = String(lastSeven.getDate()).padStart(2, "0");
+      var mmS = String(lastSeven.getMonth() + 1).padStart(2, "0"); //January is 0!
+      var yyyyS = lastSeven.getFullYear();
+      this.chartOptions.xaxis.categories[index] = yyyyS + "-" + mmS + "-" + ddS;
+    }
+    today = yyyy + "-" + mm + "-" + dd;
+
+    xhttp.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+        var recordsDB = JSON.parse(xhttp.responseText);
+
+        records = recordsDB._embedded.records;
+      }
+    };
+    xhttp.open(
+      "GET",
+      baseUri +
+        "/records/search/allBetweenAndUser?start=" +
+        this.chartOptions.xaxis.categories[daysToDisplay - 1] +
+        "T00:00:01" +
+        "&end=" +
+        today +
+        "T00:00:01" +
+        "&username=" +
+        sessionStorage.getItem("username") +
+        "&size=50",
+      false
+    );
+
+    xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+
+    xhttp.send(null);
+
+    for (let index = 0; index < records.length; index++) {
+      var record = records[index];
+
+      for (let indexA = 0; indexA < daysToDisplay; indexA++) {
+        if (
+          record.startdate.split("T")[0] ==
+          this.chartOptions.xaxis.categories[indexA]
+        ) {
+          if (record.type == "PAID") {
+            this.series[0].data[indexA] += record.duration;
+          } else {
+            this.series[1].data[indexA] += record.duration;
+          }
+        }
+      }
+    }
+    // Dirty fix for known bug from apexcharts
+    this.series[0].data[daysToDisplay - 1] = 0;
+    this.series[1].data[daysToDisplay - 1] = 0;
   }
 };
 </script>
 
-
 <style scoped>
+.v-card {
+  border-radius: 20px !important;
+}
 </style>

frontend/src/views/charts/WorkPausePie.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card color="main_accent" outlined shaped>
+  <v-card color="main_accent" outlined>
     <div>
       <p></p>
       <h3 align="center">Working hours to pause hours</h3>
@@ -12,12 +12,14 @@
 
 <script>
 import VueApexCharts from "vue-apexcharts";
+import { baseUri } from "../../variables.js";
+
 export default {
   components: {
     apexchart: VueApexCharts
   },
   data: () => ({
-    series: [40, 5],
+    series: [0, 0],
     chartOptions: {
       labels: ["Working hours", "Pause hours"],
       chart: {
@@ -51,12 +53,15 @@ export default {
           formatter: function(value) {
             var decimalTimeString = value;
             var decimalTime = parseFloat(decimalTimeString);
-            decimalTime = decimalTime * 60 * 60;
+            decimalTime = decimalTime * 60;
             var hours = Math.floor(decimalTime / (60 * 60));
+
             decimalTime = decimalTime - hours * 60 * 60;
             var minutes = Math.floor(decimalTime / 60);
+
             decimalTime = decimalTime - minutes * 60;
             var seconds = Math.round(decimalTime);
+
             if (hours < 10) {
               hours = "0" + hours;
             }
@@ -94,6 +99,53 @@ export default {
         }
       ]
     }
-  })
+  }),
+  created() {
+    var xhttp = new XMLHttpRequest();
+    var records;
+    xhttp.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+        var recordsDB = JSON.parse(xhttp.responseText);
+
+        records = recordsDB._embedded.records;
+      }
+    };
+    xhttp.open(
+      "GET",
+      baseUri +
+        "/records/search/allForUser?username=" +
+        sessionStorage.getItem("username") +
+        "&projection=overview",
+      false
+    );
+
+    xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+
+    xhttp.send(null);
+
+    var paidTime = 0;
+      var breakTime = 0;
+      
+    for (let index = 0; index < records.length; index++) {
+      var record = records[index];
+      var type = record.type + "";
+      
+
+      if (type == "PAID") {
+        paidTime += record.duration;
+      } else {
+        breakTime += record.duration;
+      }
+    }
+    this.series[0] = paidTime;
+    this.series[1] = breakTime;
+  }
 };
 </script>
+
+
+<style scoped>
+.v-card {
+  border-radius: 20px !important;
+}
+</style>