From 33a0b0840bed42506c3d4d028d6761be38e151d1 Mon Sep 17 00:00:00 2001
From: Marcel Schwarz <marcel@icaotix.de>
Date: Sun, 19 Jul 2020 22:40:52 +0200
Subject: [PATCH] Reformat chart components

---
 frontend/src/views/charts/AccountPie.vue   | 383 +++++++++----------
 frontend/src/views/charts/MonthSummary.vue | 399 ++++++++++---------
 frontend/src/views/charts/RevenuePie.vue   | 317 ++++++++-------
 frontend/src/views/charts/WeekSummary.vue  | 423 ++++++++++-----------
 frontend/src/views/charts/WorkPausePie.vue | 263 +++++++------
 5 files changed, 882 insertions(+), 903 deletions(-)

diff --git a/frontend/src/views/charts/AccountPie.vue b/frontend/src/views/charts/AccountPie.vue
index 5debcc9..a3416f5 100644
--- a/frontend/src/views/charts/AccountPie.vue
+++ b/frontend/src/views/charts/AccountPie.vue
@@ -11,225 +11,218 @@
 </template>
 
 <script>
-import VueApexCharts from "vue-apexcharts";
-import { baseUri } from "../../variables.js";
+  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
+  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"
+            }
           },
-          y: {
-            formatter: value => {
-              var revenueTMP = 0;
-              for (let index = 0; index < this.series.length; index++) {
-                if (value == this.series[index]) {
-                  revenueTMP = this.revenue[index];
+          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.0;
+                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"
                 }
               }
-              revenueTMP = (revenueTMP / 60) * value * 1.0;
-              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 = new Array(0);
-    var hasNext = true;
-    var page = 0;
-
-    while (hasNext) {
-      xhttp.onreadystatechange = function() {
+    },
+    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) {
-          var recordsDB = JSON.parse(xhttp.responseText);
-          recordsDB._embedded.records.forEach(tmpRecord => {
-            records.push(tmpRecord);
-          });
-          page++;
-          if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
-            hasNext = false;
-          }
-        } 
-        if (this.status == 403) {
-          hasNext = false;
+          accounts = JSON.parse(accountxhttp.responseText);
+          timeTrackAccountsTMP = accounts._embedded.accounts;
         }
       };
-      xhttp.open(
+      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 = new Array(0);
+      var hasNext = true;
+      var page = 0;
+
+      while (hasNext) {
+        xhttp.onreadystatechange = function () {
+          if (this.readyState == 4 && this.status == 200) {
+            var recordsDB = JSON.parse(xhttp.responseText);
+            recordsDB._embedded.records.forEach(tmpRecord => {
+              records.push(tmpRecord);
+            });
+            page++;
+            if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
+              hasNext = false;
+            }
+          }
+          if (this.status == 403) {
+            hasNext = false;
+          }
+        };
+        xhttp.open(
+          "GET",
+          baseUri +
           "/records/search/allForUser?username=" +
           sessionStorage.getItem("username") +
           "&projection=overview" +
           "&page=" +
           page +
           "&size=50",
-        false
-      );
+          false
+        );
 
-      xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
 
-      xhttp.send(null);
-    }
+        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;
+      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>
\ No newline at end of file
+  .v-card {
+    border-radius: 20px !important;
+  }
+</style>
diff --git a/frontend/src/views/charts/MonthSummary.vue b/frontend/src/views/charts/MonthSummary.vue
index cfdbbd3..56c5d68 100644
--- a/frontend/src/views/charts/MonthSummary.vue
+++ b/frontend/src/views/charts/MonthSummary.vue
@@ -12,191 +12,191 @@
 
 
 <script>
-import VueApexCharts from "vue-apexcharts";
-import { baseUri } from "../../variables.js";
+  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: [
+  export default {
+    name: "MonthSummary",
+    components: {
+      apexchart: VueApexCharts
+    },
+    data() {
+      return {
+        series: [
           {
-            breakpoint: 480,
-            options: {
-              legend: {
-                position: "bottom",
-                offsetX: -10,
-                offsetY: 0
-              }
-            }
+            name: "Working Hours",
+            data: []
+          },
+          {
+            name: "Pause Hours",
+            data: []
           }
         ],
-        plotOptions: {
-          bar: {
-            horizontal: false,
-            columnWidth: "50%"
-          }
-        },
-        xaxis: {
-          type: "datetime",
-          categories: []
-        },
-        yaxis: {
-          labels: {
-            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;
+        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: []
+          },
+          yaxis: {
+            labels: {
+              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;
+              }
+            }
+          },
+          legend: {
+            show: false,
+            position: "left",
+            offsetY: 40
+          },
+          fill: {
+            opacity: 1
           }
-        },
-        legend: {
-          show: false,
-          position: "left",
-          offsetY: 40
-        },
-        fill: {
-          opacity: 1
-        }
-      }
-    };
-  },
-  created() {
-    var daysToDisplay = 31;
-    var xhttp = new XMLHttpRequest();
-    var records = new Array(0);
-    var hasNext = true;
-    var page = 0;
-
-    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;
-
-    while (hasNext) {
-      xhttp.onreadystatechange = function() {
-        if (this.readyState == 4 && this.status == 200) {
-          var recordsDB = JSON.parse(xhttp.responseText);
-          recordsDB._embedded.records.forEach(tmpRecord => {
-            records.push(tmpRecord);
-          });
-          page++;
-          if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
-            hasNext = false;
-          }
-        } 
-        if (this.status == 403) {
-          hasNext = false;
         }
       };
+    },
+    created() {
+      var daysToDisplay = 31;
+      var xhttp = new XMLHttpRequest();
+      var records = new Array(0);
+      var hasNext = true;
+      var page = 0;
 
-      xhttp.open(
-        "GET",
-        baseUri +
+      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;
+
+      while (hasNext) {
+        xhttp.onreadystatechange = function () {
+          if (this.readyState == 4 && this.status == 200) {
+            var recordsDB = JSON.parse(xhttp.responseText);
+            recordsDB._embedded.records.forEach(tmpRecord => {
+              records.push(tmpRecord);
+            });
+            page++;
+            if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
+              hasNext = false;
+            }
+          }
+          if (this.status == 403) {
+            hasNext = false;
+          }
+        };
+
+        xhttp.open(
+          "GET",
+          baseUri +
           "/records/search/allBetweenAndUser?start=" +
           this.chartOptions.xaxis.categories[daysToDisplay - 1] +
           "T00:00:01" +
@@ -208,39 +208,36 @@ export default {
           "&page=" +
           page +
           "&size=50",
-        false
-      );
+          false
+        );
 
-      xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
 
-      xhttp.send(null);
-    }
+        xhttp.send(null);
+      }
 
-    for (let index = 0; index < records.length; index++) {
-      var record = records[index];
+      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;
+        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;
     }
-    // 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>
\ No newline at end of file
+  .v-card {
+    border-radius: 20px !important;
+  }
+</style>
diff --git a/frontend/src/views/charts/RevenuePie.vue b/frontend/src/views/charts/RevenuePie.vue
index dc12777..ac2057f 100644
--- a/frontend/src/views/charts/RevenuePie.vue
+++ b/frontend/src/views/charts/RevenuePie.vue
@@ -11,192 +11,185 @@
 </template>
 
 <script>
-import VueApexCharts from "vue-apexcharts";
-import { baseUri } from "../../variables.js";
+  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 => {
-              return Math.round(value * 100) / 100 + "$"
-            }
-          }
-        },
-        colors: [
-          "#0096ff",
-          "#e21d1f",
-          "#03ac13",
-          "#800080",
-          "#f9d71c",
-          "ff1694"
-        ],
-        theme: {
-          mode: "dark"
-        },
-        legend: {
-          show: false,
-          position: "left",
-          offsetY: 40
-        },
-
-        responsive: [
-          {
-            breakpoint: 480,
-            options: {
-              chart: {
-                width: 300
+  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: []
               },
-              legend: {
-                position: "bottom"
+              autoSelected: "zoom"
+            }
+          },
+          tooltip: {
+            enabled: true,
+            followCursor: true,
+            fillSeriesColor: false,
+            x: {
+              show: false
+            },
+            y: {
+              formatter: value => {
+                return Math.round(value * 100) / 100 + "$"
               }
             }
-          }
-        ]
-      };
-    }
-  },
-  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;
+          },
+          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"
+                }
+              }
+            }
+          ]
+        };
       }
-    };
-    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 = new Array(0);
-    var hasNext = true;
-    var page = 0;
-
-    while (hasNext) {
-      xhttp.onreadystatechange = function() {
+    },
+    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) {
-          var recordsDB = JSON.parse(xhttp.responseText);
-          recordsDB._embedded.records.forEach(tmpRecord => {
-            records.push(tmpRecord);
-          });
-          page++;
-          if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
-            hasNext = false;
-          }
-        } 
-        if (this.status == 403) {
-          hasNext = false;
+          accounts = JSON.parse(accountxhttp.responseText);
+          timeTrackAccountsTMP = accounts._embedded.accounts;
         }
       };
-      xhttp.open(
+      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 = new Array(0);
+      var hasNext = true;
+      var page = 0;
+
+      while (hasNext) {
+        xhttp.onreadystatechange = function () {
+          if (this.readyState == 4 && this.status == 200) {
+            var recordsDB = JSON.parse(xhttp.responseText);
+            recordsDB._embedded.records.forEach(tmpRecord => {
+              records.push(tmpRecord);
+            });
+            page++;
+            if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
+              hasNext = false;
+            }
+          }
+          if (this.status == 403) {
+            hasNext = false;
+          }
+        };
+        xhttp.open(
+          "GET",
+          baseUri +
           "/records/search/allForUser?username=" +
           sessionStorage.getItem("username") +
           "&projection=overview" +
           "&page=" +
           page +
           "&size=50",
-        false
-      );
+          false
+        );
 
-      xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
 
-      xhttp.send(null);
-    }
+        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;
+      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;
+          }
         }
       }
-    }
 
-    for (let index = 0; index < this.series.length; index++) {
-      this.series[index] = this.series[index] * this.revenue[index] /60;
+      for (let index = 0; index < this.series.length; index++) {
+        this.series[index] = this.series[index] * this.revenue[index] / 60;
+      }
     }
-  }
-};
+  };
 </script>
 
 
 <style scoped>
-.v-card {
-  border-radius: 20px !important;
-}
-</style>
\ No newline at end of file
+  .v-card {
+    border-radius: 20px !important;
+  }
+</style>
diff --git a/frontend/src/views/charts/WeekSummary.vue b/frontend/src/views/charts/WeekSummary.vue
index f2ed34d..f0ab0e2 100644
--- a/frontend/src/views/charts/WeekSummary.vue
+++ b/frontend/src/views/charts/WeekSummary.vue
@@ -12,236 +12,233 @@
 
 
 <script>
-import VueApexCharts from "vue-apexcharts";
-import { baseUri } from "../../variables.js";
+  import VueApexCharts from "vue-apexcharts";
+  import {baseUri} from "../../variables.js";
 
-export default {
-  name: "WeekSummary",
-  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: false
-          },
-          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: [
+  export default {
+    name: "WeekSummary",
+    components: {
+      apexchart: VueApexCharts
+    },
+    data() {
+      return {
+        series: [
           {
-            breakpoint: 480,
-            options: {
-              legend: {
-                position: "bottom",
-                offsetX: -10,
-                offsetY: 0
-              }
-            }
+            name: "Working Hours",
+            data: []
+          },
+          {
+            name: "Pause Hours",
+            data: []
           }
         ],
-        plotOptions: {
-          bar: {
-            horizontal: false,
-            columnWidth: "30%"
+        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: false
+            },
+            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: "30%"
+            }
+          },
+          xaxis: {
+            type: "datetime",
+            categories: []
+          },
+          yaxis: {
+            labels: {
+              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;
+              }
+            }
+          },
+          legend: {
+            show: false,
+            position: "left",
+            offsetY: 40
+          },
+          fill: {
+            opacity: 1
           }
-        },
-        xaxis: {
-          type: "datetime",
-          categories: []
-        },
-        yaxis: {
-          labels: {
-            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;
+        }
+      };
+    },
+    created() {
+      var daysToDisplay = 8;
+      var xhttp = new XMLHttpRequest();
+      var records = new Array(0);
+      var hasNext = true;
+      var page = 0;
+
+      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;
+
+
+      while (hasNext) {
+        xhttp.onreadystatechange = function () {
+          if (this.readyState == 4 && this.status == 200) {
+            var recordsDB = JSON.parse(xhttp.responseText);
+            recordsDB._embedded.records.forEach(tmpRecord => {
+              records.push(tmpRecord);
+            });
+            page++;
+            if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
+              hasNext = false;
             }
           }
-        },
-        legend: {
-          show: false,
-          position: "left",
-          offsetY: 40
-        },
-        fill: {
-          opacity: 1
-        }
-      }
-    };
-  },
-  created() {
-    var daysToDisplay = 8;
-    var xhttp = new XMLHttpRequest();
-    var records = new Array(0);
-    var hasNext = true;
-    var page = 0;
-
-    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;
-
-
-    while (hasNext) {
-      xhttp.onreadystatechange = function() {
-      if (this.readyState == 4 && this.status == 200) {
-        var recordsDB = JSON.parse(xhttp.responseText);
-          recordsDB._embedded.records.forEach(tmpRecord => {
-            records.push(tmpRecord);
-          });
-          page++;
-          if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
+          if (this.status == 403) {
             hasNext = false;
           }
-      } 
-      if (this.status == 403) {
-          hasNext = false;
+        };
+        xhttp.open(
+          "GET",
+          baseUri +
+          "/records/search/allBetweenAndUser?start=" +
+          this.chartOptions.xaxis.categories[daysToDisplay - 1] +
+          "T00:00:01" +
+          "&end=" +
+          today +
+          "T23:59:59" +
+          "&username=" +
+          sessionStorage.getItem("username") +
+          "&page=" +
+          page +
+          "&size=50",
+          false
+        );
+
+        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+
+        xhttp.send(null);
       }
-    };
-    xhttp.open(
-      "GET",
-      baseUri +
-        "/records/search/allBetweenAndUser?start=" +
-        this.chartOptions.xaxis.categories[daysToDisplay - 1] +
-        "T00:00:01" +
-        "&end=" +
-        today +
-        "T23:59:59" +
-        "&username=" +
-        sessionStorage.getItem("username") +
-        "&page=" +
-        page + 
-        "&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 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;
+        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;
     }
-    // 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>
\ No newline at end of file
+  .v-card {
+    border-radius: 20px !important;
+  }
+</style>
diff --git a/frontend/src/views/charts/WorkPausePie.vue b/frontend/src/views/charts/WorkPausePie.vue
index b67ca9d..9c188b0 100644
--- a/frontend/src/views/charts/WorkPausePie.vue
+++ b/frontend/src/views/charts/WorkPausePie.vue
@@ -11,156 +11,155 @@
 </template>
 
 <script>
-import VueApexCharts from "vue-apexcharts";
-import { baseUri } from "../../variables.js";
+  import VueApexCharts from "vue-apexcharts";
+  import {baseUri} from "../../variables.js";
 
-export default {
-  components: {
-    apexchart: VueApexCharts
-  },
-  data: () => ({
-    series: [0, 0],
-    chartOptions: {
-      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: 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;
-          }
-        }
-      },
-      colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
-      theme: {
-        mode: "dark"
-      },
-      legend: {
-        show: false,
-        position: "left",
-        offsetY: 40
-      },
-
-      responsive: [
-        {
-          breakpoint: 480,
-          options: {
-            chart: {
-              width: 300
+  export default {
+    components: {
+      apexchart: VueApexCharts
+    },
+    data: () => ({
+      series: [0, 0],
+      chartOptions: {
+        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: []
             },
-            legend: {
-              position: "bottom"
+            autoSelected: "zoom"
+          }
+        },
+        tooltip: {
+          enabled: true,
+          followCursor: true,
+          fillSeriesColor: false,
+          x: {
+            show: false
+          },
+          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;
             }
           }
-        }
-      ]
-    }
-  }),
-  created() {
-    var xhttp = new XMLHttpRequest();
-    var records = new Array(0);
-    var hasNext = true;
-    var page = 0;
+        },
+        colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
+        theme: {
+          mode: "dark"
+        },
+        legend: {
+          show: false,
+          position: "left",
+          offsetY: 40
+        },
+        responsive: [
+          {
+            breakpoint: 480,
+            options: {
+              chart: {
+                width: 300
+              },
+              legend: {
+                position: "bottom"
+              }
+            }
+          }
+        ]
+      }
+    }),
+    created() {
+      var xhttp = new XMLHttpRequest();
+      var records = new Array(0);
+      var hasNext = true;
+      var page = 0;
 
-    while (hasNext) {
-      xhttp.onreadystatechange = function() {
-        if (this.readyState == 4 && this.status == 200) {
-          var recordsDB = JSON.parse(xhttp.responseText);
-          recordsDB._embedded.records.forEach(tmpRecord => {
-            records.push(tmpRecord)
-          });
-          page++;
-          if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
+      while (hasNext) {
+        xhttp.onreadystatechange = function () {
+          if (this.readyState == 4 && this.status == 200) {
+            var recordsDB = JSON.parse(xhttp.responseText);
+            recordsDB._embedded.records.forEach(tmpRecord => {
+              records.push(tmpRecord)
+            });
+            page++;
+            if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
+              hasNext = false;
+            }
+          }
+          if (this.status == 403) {
             hasNext = false;
           }
-        } 
-        if (this.status == 403) {
-          hasNext = false;
-        }
-      };
-      xhttp.open(
-        "GET",
-        baseUri +
+        };
+        xhttp.open(
+          "GET",
+          baseUri +
           "/records/search/allForUser?username=" +
           sessionStorage.getItem("username") +
           "&page=" +
           page +
           "&projection=overview" +
           "&size=50",
-        false
-      );
+          false
+        );
 
-      xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+        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;
+        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;
     }
-    this.series[0] = paidTime;
-    this.series[1] = breakTime;
-  }
-};
+  };
 </script>
 
 
 <style scoped>
-.v-card {
-  border-radius: 20px !important;
-}
-</style>
\ No newline at end of file
+  .v-card {
+    border-radius: 20px !important;
+  }
+</style>