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

Merge branch '118-donut-diagram-for-time-balance-over-all-accounts' into 'master'

Browse Source 
Resolve "Donut diagram for time balance over all accounts"

Closes #118

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!101
This commit is contained in:
Simon Kellner 2020-06-06 16:46:50 +00:00
commit 8a5904d513
4 changed files with 205 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/views/About.vue
View File

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

10
frontend/src/views/StatisticOverview.vue
View File

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

195
frontend/src/views/charts/AccountPie.vue Normal file
View File

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

2
frontend/src/views/charts/WorkPausePie.vue
View File

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