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

Resolve "Statistic Overview view"

Closes #68

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!51
This commit is contained in:
Simon Kellner 2020-05-17 17:57:50 +00:00
commit 6e4200cea6
5 changed files with 152 additions and 15 deletions

View File

@ -20,12 +20,12 @@
<v-list-item-title>Time Records</v-list-item-title> <v-list-item-title>Time Records</v-list-item-title>
</v-list-item-content> </v-list-item-content>
</v-list-item> </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-list-item-action>
<v-icon>mdi-chart-bar</v-icon> <v-icon>mdi-chart-bar</v-icon>
</v-list-item-action> </v-list-item-action>
<v-list-item-content> <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-content>
</v-list-item> </v-list-item>
<v-list-item link to="/about"> <v-list-item link to="/about">

View File

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

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>

View File

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

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>