Implement diagrams with backend data

This commit is contained in:
the_kellner 2020-05-30 18:38:32 +02:00
parent 9a8faa3f0d
commit 918cf67b1f
4 changed files with 354 additions and 31 deletions

View File

@ -1,18 +1,13 @@
<template> <template>
<v-row class="ma-5"> <v-row class="ma-5">
<v-col cols="5"><WorkPausePie/></v-col> <v-col cols="3">
<v-col cols="7"> <WorkPausePie />
<WeekSummary/>
</v-col> </v-col>
<v-col cols="4"><WeekSummary/></v-col> <v-col cols="9">
<v-col cols="4"><WeekSummary/></v-col> <WeekSummary />
<v-col cols="4"><WorkPausePie/></v-col>
<v-col cols="7">
<div><WeekSummary/></div>
</v-col> </v-col>
<v-col cols="5"> <v-col cols="12">
<div><WorkPausePie/></div> <MonthSummary />
</v-col> </v-col>
</v-row> </v-row>
</template> </template>
@ -20,11 +15,13 @@
<script> <script>
import WeekSummary from "./charts/WeekSummary.vue"; import WeekSummary from "./charts/WeekSummary.vue";
import MonthSummary from "./charts/MonthSummary.vue";
import WorkPausePie from "./charts/WorkPausePie.vue"; import WorkPausePie from "./charts/WorkPausePie.vue";
export default { export default {
name: "StatisticOverview", name: "StatisticOverview",
components: { components: {
WeekSummary, WeekSummary,
MonthSummary,
WorkPausePie WorkPausePie
} }
}; };

View File

@ -0,0 +1,203 @@
<template>
<v-card color="main_accent" outlined>
<div>
<p></p>
<h3 align="center">My last 30 Days</h3>
<div id="chart">
<apexchart class="ma-5" type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
</div>
</div>
</v-card>
</template>
<script>
import VueApexCharts from "vue-apexcharts";
import { baseUri } from "../../variables.js";
export default {
name: "MonthSummary",
components: {
apexchart: VueApexCharts
},
data() {
return {
series: [
{
name: "Working Hours",
data: []
},
{
name: "Pause Hours",
data: []
}
],
chartOptions: {
chart: {
type: "bar",
stacked: true,
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"
}
},
colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
theme: {
mode: "dark"
},
dataLabels: {
enabled: false
},
tooltip: {
enabled: true,
followCursor: true,
x: {
show: true
},
y: {
formatter: function(value) {
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;
}
}
},
responsive: [
{
breakpoint: 480,
options: {
legend: {
position: "bottom",
offsetX: -10,
offsetY: 0
}
}
}
],
plotOptions: {
bar: {
horizontal: false,
columnWidth: "50%"
}
},
xaxis: {
type: "datetime",
categories: []
},
legend: {
show: false,
position: "left",
offsetY: 40
},
fill: {
opacity: 1
}
}
};
},
created() {
var daysToDisplay = 31;
var xhttp = new XMLHttpRequest();
var records;
this.chartOptions.xaxis.categories = new Array(daysToDisplay);
this.series[0].data = new Array(daysToDisplay);
this.series[1].data = new Array(daysToDisplay);
for (let index = 0; index < daysToDisplay; index++) {
this.series[0].data[index] = 0;
this.series[1].data[index] = 0;
}
var today = new Date();
var dd = String(today.getDate()).padStart(2, "0");
var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
var yyyy = today.getFullYear();
for (let index = 0; index < daysToDisplay; index++) {
var lastSeven = new Date();
lastSeven.setDate(today.getDate() - index);
var ddS = String(lastSeven.getDate()).padStart(2, "0");
var mmS = String(lastSeven.getMonth() + 1).padStart(2, "0"); //January is 0!
var yyyyS = lastSeven.getFullYear();
this.chartOptions.xaxis.categories[index] = yyyyS + "-" + mmS + "-" + ddS;
}
today = yyyy + "-" + mm + "-" + dd;
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/allBetweenAndUser?start=" +
this.chartOptions.xaxis.categories[daysToDisplay - 1] +
"T00:00:01" +
"&end=" +
today +
"T00:00:01" +
"&username=" +
sessionStorage.getItem("username") +
"&size=50",
false
);
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(null);
for (let index = 0; index < records.length; index++) {
var record = records[index];
for (let indexA = 0; indexA < daysToDisplay; indexA++) {
if (record.startdate.split("T")[0] == this.chartOptions.xaxis.categories[indexA]) {
if (record.type == "PAID") {
this.series[0].data[indexA] += record.duration;
} else {
this.series[1].data[indexA] += record.duration;
}
}
}
}
// Dirty fix for known bug from apexcharts
this.series[0].data[daysToDisplay - 1] = 0;
this.series[1].data[daysToDisplay - 1] = 0;
}
};
</script>
<style scoped>
.v-card {
border-radius: 20px !important;
}
</style>

View File

@ -1,10 +1,10 @@
<template> <template>
<v-card color="main_accent" outlined shaped> <v-card color="main_accent" outlined>
<div> <div>
<p></p> <p></p>
<h3 align="center">Week Summary</h3> <h3 align="center">My last 7 Days</h3>
<div id="chart"> <div id="chart">
<apexchart class="ma-5" type="bar" width="100%" :options="chartOptions" :series="series"></apexchart> <apexchart class="ma-5" type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
</div> </div>
</div> </div>
</v-card> </v-card>
@ -13,6 +13,8 @@
<script> <script>
import VueApexCharts from "vue-apexcharts"; import VueApexCharts from "vue-apexcharts";
import { baseUri } from "../../variables.js";
export default { export default {
name: "WeekSummary", name: "WeekSummary",
components: { components: {
@ -23,11 +25,11 @@ export default {
series: [ series: [
{ {
name: "Working Hours", name: "Working Hours",
data: [6, 4, 8, 8, 9, 2] data: []
}, },
{ {
name: "Pause Hours", name: "Pause Hours",
data: [1, 0.5, 2, 1, 3, 0.2] data: []
} }
], ],
chartOptions: { chartOptions: {
@ -69,7 +71,7 @@ export default {
formatter: function(value) { formatter: function(value) {
var decimalTimeString = value; var decimalTimeString = value;
var decimalTime = parseFloat(decimalTimeString); var decimalTime = parseFloat(decimalTimeString);
decimalTime = decimalTime * 60 * 60; decimalTime = decimalTime * 60;
var hours = Math.floor(decimalTime / (60 * 60)); var hours = Math.floor(decimalTime / (60 * 60));
decimalTime = decimalTime - hours * 60 * 60; decimalTime = decimalTime - hours * 60 * 60;
var minutes = Math.floor(decimalTime / 60); var minutes = Math.floor(decimalTime / 60);
@ -102,19 +104,13 @@ export default {
], ],
plotOptions: { plotOptions: {
bar: { bar: {
horizontal: false horizontal: false,
columnWidth: "30%"
} }
}, },
xaxis: { xaxis: {
type: "datetime", type: "datetime",
categories: [ categories: []
"01/01/2011 GMT",
"01/02/2011 GMT",
"01/03/2011 GMT",
"01/04/2011 GMT",
"01/05/2011 GMT",
"01/06/2011 GMT"
]
}, },
legend: { legend: {
show: false, show: false,
@ -126,10 +122,85 @@ export default {
} }
} }
}; };
},
created() {
var daysToDisplay = 8;
var xhttp = new XMLHttpRequest();
var records;
this.chartOptions.xaxis.categories = new Array(daysToDisplay);
this.series[0].data = new Array(daysToDisplay);
this.series[1].data = new Array(daysToDisplay);
for (let index = 0; index < daysToDisplay; index++) {
this.series[0].data[index] = 0;
this.series[1].data[index] = 0;
}
var today = new Date();
var dd = String(today.getDate()).padStart(2, "0");
var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
var yyyy = today.getFullYear();
for (let index = 0; index < daysToDisplay; index++) {
var lastSeven = new Date();
lastSeven.setDate(today.getDate() - index);
var ddS = String(lastSeven.getDate()).padStart(2, "0");
var mmS = String(lastSeven.getMonth() + 1).padStart(2, "0"); //January is 0!
var yyyyS = lastSeven.getFullYear();
this.chartOptions.xaxis.categories[index] = yyyyS + "-" + mmS + "-" + ddS;
}
today = yyyy + "-" + mm + "-" + dd;
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/allBetweenAndUser?start=" +
this.chartOptions.xaxis.categories[daysToDisplay - 1] +
"T00:00:01" +
"&end=" +
today +
"T00:00:01" +
"&username=" +
sessionStorage.getItem("username") +
"&size=50",
false
);
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(null);
for (let index = 0; index < records.length; index++) {
var record = records[index];
for (let indexA = 0; indexA < daysToDisplay; indexA++) {
if (
record.startdate.split("T")[0] ==
this.chartOptions.xaxis.categories[indexA]
) {
if (record.type == "PAID") {
this.series[0].data[indexA] += record.duration;
} else {
this.series[1].data[indexA] += record.duration;
}
}
}
}
// Dirty fix for known bug from apexcharts
this.series[0].data[daysToDisplay - 1] = 0;
this.series[1].data[daysToDisplay - 1] = 0;
} }
}; };
</script> </script>
<style scoped> <style scoped>
.v-card {
border-radius: 20px !important;
}
</style> </style>

View File

@ -1,5 +1,5 @@
<template> <template>
<v-card color="main_accent" outlined shaped> <v-card color="main_accent" outlined>
<div> <div>
<p></p> <p></p>
<h3 align="center">Working hours to pause hours</h3> <h3 align="center">Working hours to pause hours</h3>
@ -12,12 +12,14 @@
<script> <script>
import VueApexCharts from "vue-apexcharts"; import VueApexCharts from "vue-apexcharts";
import { baseUri } from "../../variables.js";
export default { export default {
components: { components: {
apexchart: VueApexCharts apexchart: VueApexCharts
}, },
data: () => ({ data: () => ({
series: [40, 5], series: [0, 0],
chartOptions: { chartOptions: {
labels: ["Working hours", "Pause hours"], labels: ["Working hours", "Pause hours"],
chart: { chart: {
@ -51,12 +53,15 @@ export default {
formatter: function(value) { formatter: function(value) {
var decimalTimeString = value; var decimalTimeString = value;
var decimalTime = parseFloat(decimalTimeString); var decimalTime = parseFloat(decimalTimeString);
decimalTime = decimalTime * 60 * 60; decimalTime = decimalTime * 60;
var hours = Math.floor(decimalTime / (60 * 60)); var hours = Math.floor(decimalTime / (60 * 60));
decimalTime = decimalTime - hours * 60 * 60; decimalTime = decimalTime - hours * 60 * 60;
var minutes = Math.floor(decimalTime / 60); var minutes = Math.floor(decimalTime / 60);
decimalTime = decimalTime - minutes * 60; decimalTime = decimalTime - minutes * 60;
var seconds = Math.round(decimalTime); var seconds = Math.round(decimalTime);
if (hours < 10) { if (hours < 10) {
hours = "0" + hours; hours = "0" + hours;
} }
@ -94,6 +99,53 @@ export default {
} }
] ]
} }
}) }),
created() {
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",
false
);
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(null);
var paidTime = 0;
var breakTime = 0;
for (let index = 0; index < records.length; index++) {
var record = records[index];
var type = record.type + "";
if (type == "PAID") {
paidTime += record.duration;
} else {
breakTime += record.duration;
}
}
this.series[0] = paidTime;
this.series[1] = breakTime;
}
}; };
</script> </script>
<style scoped>
.v-card {
border-radius: 20px !important;
}
</style>