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

Add donut diagram for time by type paid for accounts with revenue calc display in tooltip

Browse Source
This commit is contained in:
Simon Kellner 2020-06-06 18:38:16 +02:00 committed by the_kellner
parent 5e13d103d0
commit edd03c5a7e
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>