Merge branch '68-statistic-overview-view' into 'master'

Resolve "Statistic Overview view"

Closes #68

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!51

frontend/src/App.vue

@@ -20,12 +20,12 @@
               <v-list-item-title>Time Records</v-list-item-title>
             </v-list-item-content>
           </v-list-item>
-          <v-list-item link to="/weeksummary" v-bind:class="{'d-none':!login}">
+            <v-list-item link to="/statistics" v-bind:class="{'d-none':!login}">
             <v-list-item-action>
               <v-icon>mdi-chart-bar</v-icon>
             </v-list-item-action>
             <v-list-item-content>
-              <v-list-item-title>Week Summary</v-list-item-title>
+              <v-list-item-title>Statistics</v-list-item-title>
             </v-list-item-content>
           </v-list-item>
           <v-list-item link to="/about">

frontend/src/router/index.js

@@ -8,7 +8,7 @@ import TimeRecords from "../views/TimeRecords.vue";
 import About from "../views/About.vue";
 import Login from "../views/Login.vue";
 import Register from "../views/Register.vue";
-import WeekSummary from "../views/WeekSummary.vue";
+import StatisticOverview from "../views/StatisticOverview.vue"
 
 Vue.use(VueRouter);
 
@@ -56,9 +56,9 @@ const routes = [
     component: About
   },
   {
-    path: "/weeksummary",
+    path: "/statistics",
-    name: "Week Summary",
+    name: "Statistics",
-    component: WeekSummary
+    component: StatisticOverview
   },
   {
     path: '*',

frontend/src/views/StatisticOverview.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-row class="ma-5">
+    <v-col cols="5"><WorkPausePie/></v-col>
+    <v-col cols="7">
+      <WeekSummary/>
+    </v-col>
+    <v-col cols="4"><WeekSummary/></v-col>
+    <v-col cols="4"><WeekSummary/></v-col>
+    <v-col cols="4"><WorkPausePie/></v-col>
+
+    <v-col cols="7">
+      <div><WeekSummary/></div>
+    </v-col>
+    <v-col cols="5">
+      <div><WorkPausePie/></div>
+    </v-col>
+  </v-row>
+</template>
+
+
+<script>
+import WeekSummary from "./charts/WeekSummary.vue";
+import WorkPausePie from "./charts/WorkPausePie.vue";
+export default {
+  name: "StatisticOverview",
+  components: {
+    WeekSummary,
+    WorkPausePie
+  }
+};
+</script>
+
+
+<style scoped>
+</style>

frontend/src/views/charts/WeekSummary.vue

@@ -1,16 +1,20 @@
 <template>
-  <div>
+  <v-card color="main_accent" outlined shaped>
-    <h3 align='center'>Week Summary</h3>
+    <div>
-    <div id="chart">
+      <p></p>
-      <apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
+      <h3 align="center">Week Summary</h3>
+      <div id="chart">
+        <apexchart class="ma-5" type="bar" width="100%"  :options="chartOptions" :series="series"></apexchart>
+      </div>
     </div>
-  </div>
+  </v-card>
 </template>
 
 
 <script>
 import VueApexCharts from "vue-apexcharts";
 export default {
+  name: "WeekSummary",
   components: {
     apexchart: VueApexCharts
   },
@@ -29,9 +33,8 @@ export default {
       chartOptions: {
         chart: {
           type: "bar",
-          height: 350,
           stacked: true,
-          background: "#131313",
+          background: "#202020",
           toolbar: {
             show: true,
             offsetX: 0,
@@ -81,7 +84,7 @@ export default {
               if (seconds < 10) {
                 seconds = "0" + seconds;
               }
-              return  hours + ":" + minutes + ":" + seconds;
+              return hours + ":" + minutes + ":" + seconds;
             }
           }
         },
@@ -114,7 +117,7 @@ export default {
           ]
         },
         legend: {
-          show: true,
+          show: false,
           position: "left",
           offsetY: 40
         },

frontend/src/views/charts/WorkPausePie.vue

@@ -0,0 +1,99 @@
+<template>
+  <v-card color="main_accent" outlined shaped>
+    <div>
+      <p></p>
+      <h3 align="center">Working hours to pause hours</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";
+export default {
+  components: {
+    apexchart: VueApexCharts
+  },
+  data: () => ({
+    series: [40, 5],
+    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 * 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
+            },
+            legend: {
+              position: "bottom"
+            }
+          }
+        }
+      ]
+    }
+  })
+};
+</script>