hft-informatik/ubiquitous-computing-geo-timetracking
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add Statistics Page - move WeekSummary into Statistics

Browse Source
This commit is contained in:
the_kellner 2020-05-17 17:32:50 +02:00
parent 8b2e26042c
commit 4c81923977
5 changed files with 152 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.vue
View File

@ -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">

8
frontend/src/router/index.js
View File

@ -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",
name: "Week Summary",
component: WeekSummary
path: "/statistics",
name: "Statistics",
component: StatisticOverview
},
{
path: '*',

35
frontend/src/views/StatisticOverview.vue Normal file
View File

@ -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>

21
frontend/src/views/WeekSummary.vue → frontend/src/views/charts/WeekSummary.vue
View File

@ -1,16 +1,20 @@
<template>
<div>
<h3 align='center'>Week Summary</h3>
<div id="chart">
<apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
<v-card color="main_accent" outlined shaped>
<div>
<p></p>
<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
},

99
frontend/src/views/charts/WorkPausePie.vue Normal file
View File

@ -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>