Add donut diagram for time by type paid for accounts with revenue calc display in tooltip

frontend/src/views/About.vue

@@ -2,7 +2,7 @@
   <v-container fluid>
     <v-card>
        <p class="text-center  logowhite--text" style="font-size:20pt">This is a ubiquitos computing project.</p>
-        <p class="text-center  logowhite--text" style="font-size:20pt">It was created by the team Tacoct.</p>
+        <p class="text-center  logowhite--text" style="font-size:20pt">It was created by the team TacocaT.</p>
     </v-card>
     <v-card>
        <p class="text-center  logowhite--text" style="font-size:30pt">Team TacocaT</p>

frontend/src/views/StatisticOverview.vue

@@ -6,9 +6,12 @@
     <v-col cols="9">
       <WeekSummary />
     </v-col>
-    <v-col cols="12">
+    <v-col cols="9">
       <MonthSummary />
     </v-col>
+    <v-col cols="3">
+      <account-pie/>
+    </v-col>
   </v-row>
 </template>
 
@@ -17,12 +20,15 @@
 import WeekSummary from "./charts/WeekSummary.vue";
 import MonthSummary from "./charts/MonthSummary.vue";
 import WorkPausePie from "./charts/WorkPausePie.vue";
+import AccountPie from "./charts/AccountPie.vue";
+
 export default {
   name: "StatisticOverview",
   components: {
     WeekSummary,
     MonthSummary,
-    WorkPausePie
+    WorkPausePie,
+    AccountPie
   }
 };
 </script>

frontend/src/views/charts/AccountPie.vue

@@ -0,0 +1,195 @@
+<template>
+  <v-card color="main_accent" outlined>
+    <div>
+      <p></p>
+      <h3 align="center">Times by type PAID and TimetrackAccount</h3>
+      <div id="chart">
+        <apexchart class="ma-5" type="donut" width="100%" :options="chartOptions" :series="series"></apexchart>
+      </div>
+    </div>
+  </v-card>
+</template>
+
+<script>
+import VueApexCharts from "vue-apexcharts";
+import { baseUri } from "../../variables.js";
+
+export default {
+  components: {
+    apexchart: VueApexCharts
+  },
+  computed: {
+    chartOptions: function() {
+      return{labels: ["Working hours", "Pause hours"],
+      chart: {
+        type: "donut",
+        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"
+        }
+      },
+      tooltip: {
+        enabled: true,
+        followCursor: true,
+        fillSeriesColor: false,
+        x: {
+          show: false
+        },
+        y: {
+          formatter: (value) => {
+            var revenueTMP = 0;
+            for (let index = 0; index < this.series.length; index++) {
+              if (value == this.series[index]) {
+                revenueTMP = this.revenue[index];
+              }
+            }
+            revenueTMP = revenueTMP / 60 * value * 1.00;
+            revenueTMP = Math.round(revenueTMP * 100) / 100;
+            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 + " with " + revenueTMP + "$ revenue.";
+          }
+        }
+      },
+      colors: ["#0096ff", "#e21d1f", "#03ac13", "#800080", "#f9d71c", "ff1694"],
+      theme: {
+        mode: "dark"
+      },
+      legend: {
+        show: false,
+        position: "left",
+        offsetY: 40
+      },
+
+      responsive: [
+        {
+          breakpoint: 480,
+          options: {
+            chart: {
+              width: 300
+            },
+            legend: {
+              position: "bottom"
+            }
+          }
+        }
+      ]
+    }}
+  },
+  data: () => ({
+    series: [0, 0],
+    revenue: [0, 0],
+  }),
+  created() {
+    // Get all Timetrack accounts for the current user
+    var accounts;
+    var timeTrackAccountsTMP;
+    var accountxhttp = new XMLHttpRequest();
+    accountxhttp.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+        accounts = JSON.parse(accountxhttp.responseText);
+        timeTrackAccountsTMP = accounts._embedded.accounts;
+      }
+    };
+    accountxhttp.open(
+      "GET",
+      baseUri +
+        "/accounts/search/findByUsername?username=" +
+        sessionStorage.getItem("username"),
+      false
+    );
+
+    accountxhttp.setRequestHeader(
+      "Authorization",
+      sessionStorage.getItem("jwt")
+    );
+
+    accountxhttp.send(null);
+
+    this.chartOptions.labels = new Array(timeTrackAccountsTMP.length);
+
+    this.series = new Array(timeTrackAccountsTMP.length);
+    this.revenue = new Array(timeTrackAccountsTMP.length);
+    for (let index = 0; index < this.series.length; index++) {
+      this.series[index] = 0;
+      this.revenue[index] = 0;
+    }
+
+    for (let index = 0; index < timeTrackAccountsTMP.length; index++) {
+      this.chartOptions.labels[index] = timeTrackAccountsTMP[index].name;
+      this.revenue[index] = timeTrackAccountsTMP[index].revenue;
+    }
+
+    // Get and sort all Records to the accounts
+    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" +
+        "&size=1000",
+      false
+    );
+
+    xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+
+    xhttp.send(null);
+
+    for (let index = 0; index < records.length; index++) {
+      var record = records[index];
+      for (let indexAccs = 0; indexAccs < this.chartOptions.labels.length; indexAccs++) {
+        if (record.account == this.chartOptions.labels[indexAccs] && record.type == "PAID") {
+          this.series[indexAccs] += record.duration;
+        }
+      }
+    }
+  }
+};
+</script>
+
+
+<style scoped>
+.v-card {
+  border-radius: 20px !important;
+}
+</style>

frontend/src/views/charts/WorkPausePie.vue

@@ -2,7 +2,7 @@
   <v-card color="main_accent" outlined>
     <div>
       <p></p>
-      <h3 align="center">Working hours to pause hours</h3>
+      <h3 align="center">Times by type PAID and BREAK</h3>
       <div id="chart">
         <apexchart class="ma-5" type="donut" width="100%" :options="chartOptions" :series="series"></apexchart>
       </div>