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

Reformat chart components

Browse Source
This commit is contained in:
Marcel Schwarz 2020-07-19 22:40:52 +02:00
parent a0a4e1ca97
commit 33a0b0840b
5 changed files with 882 additions and 903 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

383
frontend/src/views/charts/AccountPie.vue
View File

@ -11,225 +11,218 @@
</template> </template>
<script> <script>
import VueApexCharts from "vue-apexcharts"; import VueApexCharts from "vue-apexcharts";
import { baseUri } from "../../variables.js"; import {baseUri} from "../../variables.js";
export default { export default {
components: { components: {
apexchart: VueApexCharts apexchart: VueApexCharts
}, },
computed: { computed: {
chartOptions: function() { chartOptions: function () {
return { return {
labels: ["Working hours", "Pause hours"], labels: ["Working hours", "Pause hours"],
chart: { chart: {
type: "donut", type: "donut",
background: "#202020", background: "#202020",
toolbar: { toolbar: {
show: true, show: true,
offsetX: 0, offsetX: 0,
offsetY: 0, offsetY: 0,
tools: { tools: {
download: true, download: true,
selection: true, selection: true,
zoom: false, zoom: false,
zoomin: false, zoomin: false,
zoomout: false, zoomout: false,
pan: false, pan: false,
reset: false, reset: false,
customIcons: [] customIcons: []
}, },
autoSelected: "zoom" autoSelected: "zoom"
} }
},
tooltip: {
enabled: true,
followCursor: true,
fillSeriesColor: false,
x: {
show: false
}, },
y: { tooltip: {
formatter: value => { enabled: true,
var revenueTMP = 0; followCursor: true,
for (let index = 0; index < this.series.length; index++) { fillSeriesColor: false,
if (value == this.series[index]) { x: {
revenueTMP = this.revenue[index]; 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.0;
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"
} }
} }
revenueTMP = (revenueTMP / 60) * value * 1.0;
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( data: () => ({
"GET", series: [0, 0],
baseUri + revenue: [0, 0]
"/accounts/search/findByUsername?username=" + }),
sessionStorage.getItem("username"), created() {
false // Get all Timetrack accounts for the current user
); var accounts;
var timeTrackAccountsTMP;
accountxhttp.setRequestHeader( var accountxhttp = new XMLHttpRequest();
"Authorization", accountxhttp.onreadystatechange = function () {
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 = new Array(0);
var hasNext = true;
var page = 0;
while (hasNext) {
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
var recordsDB = JSON.parse(xhttp.responseText); accounts = JSON.parse(accountxhttp.responseText);
recordsDB._embedded.records.forEach(tmpRecord => { timeTrackAccountsTMP = accounts._embedded.accounts;
records.push(tmpRecord);
});
page++;
if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
hasNext = false;
}
}
if (this.status == 403) {
hasNext = false;
} }
}; };
xhttp.open( accountxhttp.open(
"GET", "GET",
baseUri + 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 = new Array(0);
var hasNext = true;
var page = 0;
while (hasNext) {
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var recordsDB = JSON.parse(xhttp.responseText);
recordsDB._embedded.records.forEach(tmpRecord => {
records.push(tmpRecord);
});
page++;
if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
hasNext = false;
}
}
if (this.status == 403) {
hasNext = false;
}
};
xhttp.open(
"GET",
baseUri +
"/records/search/allForUser?username=" + "/records/search/allForUser?username=" +
sessionStorage.getItem("username") + sessionStorage.getItem("username") +
"&projection=overview" + "&projection=overview" +
"&page=" + "&page=" +
page + page +
"&size=50", "&size=50",
false false
); );
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(null); xhttp.send(null);
} }
for (let index = 0; index < records.length; index++) { for (let index = 0; index < records.length; index++) {
var record = records[index]; var record = records[index];
for ( for (let indexAccs = 0; indexAccs < this.chartOptions.labels.length; indexAccs++) {
let indexAccs = 0; if (record.account == this.chartOptions.labels[indexAccs] && record.type == "PAID") {
indexAccs < this.chartOptions.labels.length; this.series[indexAccs] += record.duration;
indexAccs++ }
) {
if (
record.account == this.chartOptions.labels[indexAccs] &&
record.type == "PAID"
) {
this.series[indexAccs] += record.duration;
} }
} }
} }
} };
};
</script> </script>
<style scoped> <style scoped>
.v-card { .v-card {
border-radius: 20px !important; border-radius: 20px !important;
} }
</style> </style>

399
frontend/src/views/charts/MonthSummary.vue
View File

@ -12,191 +12,191 @@
<script> <script>
import VueApexCharts from "vue-apexcharts"; import VueApexCharts from "vue-apexcharts";
import { baseUri } from "../../variables.js"; import {baseUri} from "../../variables.js";
export default { export default {
name: "MonthSummary", name: "MonthSummary",
components: { components: {
apexchart: VueApexCharts apexchart: VueApexCharts
}, },
data() { data() {
return { return {
series: [ 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, name: "Working Hours",
options: { data: []
legend: { },
position: "bottom", {
offsetX: -10, name: "Pause Hours",
offsetY: 0 data: []
}
}
} }
], ],
plotOptions: { chartOptions: {
bar: { chart: {
horizontal: false, type: "bar",
columnWidth: "50%" stacked: true,
} background: "#202020",
}, toolbar: {
xaxis: { show: true,
type: "datetime", offsetX: 0,
categories: [] offsetY: 0,
}, tools: {
yaxis: { download: true,
labels: { selection: true,
formatter: function(value) { zoom: false,
var decimalTimeString = value; zoomin: false,
var decimalTime = parseFloat(decimalTimeString); zoomout: false,
decimalTime = decimalTime * 60; pan: false,
var hours = Math.floor(decimalTime / (60 * 60)); reset: false,
decimalTime = decimalTime - hours * 60 * 60; customIcons: []
var minutes = Math.floor(decimalTime / 60); },
decimalTime = decimalTime - minutes * 60; autoSelected: "zoom"
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"
},
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: []
},
yaxis: {
labels: {
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;
}
}
},
legend: {
show: false,
position: "left",
offsetY: 40
},
fill: {
opacity: 1
} }
},
legend: {
show: false,
position: "left",
offsetY: 40
},
fill: {
opacity: 1
}
}
};
},
created() {
var daysToDisplay = 31;
var xhttp = new XMLHttpRequest();
var records = new Array(0);
var hasNext = true;
var page = 0;
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;
while (hasNext) {
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var recordsDB = JSON.parse(xhttp.responseText);
recordsDB._embedded.records.forEach(tmpRecord => {
records.push(tmpRecord);
});
page++;
if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
hasNext = false;
}
}
if (this.status == 403) {
hasNext = false;
} }
}; };
},
created() {
var daysToDisplay = 31;
var xhttp = new XMLHttpRequest();
var records = new Array(0);
var hasNext = true;
var page = 0;
xhttp.open( this.chartOptions.xaxis.categories = new Array(daysToDisplay);
"GET", this.series[0].data = new Array(daysToDisplay);
baseUri + 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;
while (hasNext) {
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var recordsDB = JSON.parse(xhttp.responseText);
recordsDB._embedded.records.forEach(tmpRecord => {
records.push(tmpRecord);
});
page++;
if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
hasNext = false;
}
}
if (this.status == 403) {
hasNext = false;
}
};
xhttp.open(
"GET",
baseUri +
"/records/search/allBetweenAndUser?start=" + "/records/search/allBetweenAndUser?start=" +
this.chartOptions.xaxis.categories[daysToDisplay - 1] + this.chartOptions.xaxis.categories[daysToDisplay - 1] +
"T00:00:01" + "T00:00:01" +
@ -208,39 +208,36 @@ export default {
"&page=" + "&page=" +
page + page +
"&size=50", "&size=50",
false false
); );
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(null); xhttp.send(null);
} }
for (let index = 0; index < records.length; index++) { for (let index = 0; index < records.length; index++) {
var record = records[index]; var record = records[index];
for (let indexA = 0; indexA < daysToDisplay; indexA++) { for (let indexA = 0; indexA < daysToDisplay; indexA++) {
if ( if (record.startdate.split("T")[0] == this.chartOptions.xaxis.categories[indexA]) {
record.startdate.split("T")[0] == if (record.type == "PAID") {
this.chartOptions.xaxis.categories[indexA] this.series[0].data[indexA] += record.duration;
) { } else {
if (record.type == "PAID") { this.series[1].data[indexA] += record.duration;
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;
} }
// 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 { .v-card {
border-radius: 20px !important; border-radius: 20px !important;
} }
</style> </style>

317
frontend/src/views/charts/RevenuePie.vue
View File

@ -11,192 +11,185 @@
</template> </template>
<script> <script>
import VueApexCharts from "vue-apexcharts"; import VueApexCharts from "vue-apexcharts";
import { baseUri } from "../../variables.js"; import {baseUri} from "../../variables.js";
export default { export default {
components: { components: {
apexchart: VueApexCharts apexchart: VueApexCharts
}, },
computed: { computed: {
chartOptions: function() { chartOptions: function () {
return { return {
labels: ["Working hours", "Pause hours"], labels: ["Working hours", "Pause hours"],
chart: { chart: {
type: "donut", type: "donut",
background: "#202020", background: "#202020",
toolbar: { toolbar: {
show: true, show: true,
offsetX: 0, offsetX: 0,
offsetY: 0, offsetY: 0,
tools: { tools: {
download: true, download: true,
selection: true, selection: true,
zoom: false, zoom: false,
zoomin: false, zoomin: false,
zoomout: false, zoomout: false,
pan: false, pan: false,
reset: false, reset: false,
customIcons: [] customIcons: []
},
autoSelected: "zoom"
}
},
tooltip: {
enabled: true,
followCursor: true,
fillSeriesColor: false,
x: {
show: false
},
y: {
formatter: value => {
return Math.round(value * 100) / 100 + "$"
}
}
},
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: { autoSelected: "zoom"
position: "bottom" }
},
tooltip: {
enabled: true,
followCursor: true,
fillSeriesColor: false,
x: {
show: false
},
y: {
formatter: value => {
return Math.round(value * 100) / 100 + "$"
} }
} }
} },
] colors: [
}; "#0096ff",
} "#e21d1f",
}, "#03ac13",
data: () => ({ "#800080",
series: [0, 0], "#f9d71c",
revenue: [0, 0] "ff1694"
}), ],
created() { theme: {
// Get all Timetrack accounts for the current user mode: "dark"
var accounts; },
var timeTrackAccountsTMP; legend: {
var accountxhttp = new XMLHttpRequest(); show: false,
accountxhttp.onreadystatechange = function() { position: "left",
if (this.readyState == 4 && this.status == 200) { offsetY: 40
accounts = JSON.parse(accountxhttp.responseText); },
timeTrackAccountsTMP = accounts._embedded.accounts;
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 300
},
legend: {
position: "bottom"
}
}
}
]
};
} }
}; },
accountxhttp.open( data: () => ({
"GET", series: [0, 0],
baseUri + revenue: [0, 0]
"/accounts/search/findByUsername?username=" + }),
sessionStorage.getItem("username"), created() {
false // Get all Timetrack accounts for the current user
); var accounts;
var timeTrackAccountsTMP;
accountxhttp.setRequestHeader( var accountxhttp = new XMLHttpRequest();
"Authorization", accountxhttp.onreadystatechange = function () {
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 = new Array(0);
var hasNext = true;
var page = 0;
while (hasNext) {
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
var recordsDB = JSON.parse(xhttp.responseText); accounts = JSON.parse(accountxhttp.responseText);
recordsDB._embedded.records.forEach(tmpRecord => { timeTrackAccountsTMP = accounts._embedded.accounts;
records.push(tmpRecord);
});
page++;
if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
hasNext = false;
}
}
if (this.status == 403) {
hasNext = false;
} }
}; };
xhttp.open( accountxhttp.open(
"GET", "GET",
baseUri + 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 = new Array(0);
var hasNext = true;
var page = 0;
while (hasNext) {
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var recordsDB = JSON.parse(xhttp.responseText);
recordsDB._embedded.records.forEach(tmpRecord => {
records.push(tmpRecord);
});
page++;
if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
hasNext = false;
}
}
if (this.status == 403) {
hasNext = false;
}
};
xhttp.open(
"GET",
baseUri +
"/records/search/allForUser?username=" + "/records/search/allForUser?username=" +
sessionStorage.getItem("username") + sessionStorage.getItem("username") +
"&projection=overview" + "&projection=overview" +
"&page=" + "&page=" +
page + page +
"&size=50", "&size=50",
false false
); );
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(null); xhttp.send(null);
} }
for (let index = 0; index < records.length; index++) { for (let index = 0; index < records.length; index++) {
var record = records[index]; var record = records[index];
for ( for (let indexAccs = 0; indexAccs < this.chartOptions.labels.length; indexAccs++) {
let indexAccs = 0; if (record.account == this.chartOptions.labels[indexAccs] && record.type == "PAID") {
indexAccs < this.chartOptions.labels.length; this.series[indexAccs] += record.duration;
indexAccs++ }
) {
if (
record.account == this.chartOptions.labels[indexAccs] &&
record.type == "PAID"
) {
this.series[indexAccs] += record.duration;
} }
} }
}
for (let index = 0; index < this.series.length; index++) { for (let index = 0; index < this.series.length; index++) {
this.series[index] = this.series[index] * this.revenue[index] /60; this.series[index] = this.series[index] * this.revenue[index] / 60;
}
} }
} };
};
</script> </script>
<style scoped> <style scoped>
.v-card { .v-card {
border-radius: 20px !important; border-radius: 20px !important;
} }
</style> </style>

423
frontend/src/views/charts/WeekSummary.vue
View File

@ -12,236 +12,233 @@
<script> <script>
import VueApexCharts from "vue-apexcharts"; import VueApexCharts from "vue-apexcharts";
import { baseUri } from "../../variables.js"; import {baseUri} from "../../variables.js";
export default { export default {
name: "WeekSummary", name: "WeekSummary",
components: { components: {
apexchart: VueApexCharts apexchart: VueApexCharts
}, },
data() { data() {
return { return {
series: [ 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: false
},
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, name: "Working Hours",
options: { data: []
legend: { },
position: "bottom", {
offsetX: -10, name: "Pause Hours",
offsetY: 0 data: []
}
}
} }
], ],
plotOptions: { chartOptions: {
bar: { chart: {
horizontal: false, type: "bar",
columnWidth: "30%" 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: false
},
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: "30%"
}
},
xaxis: {
type: "datetime",
categories: []
},
yaxis: {
labels: {
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;
}
}
},
legend: {
show: false,
position: "left",
offsetY: 40
},
fill: {
opacity: 1
} }
}, }
xaxis: { };
type: "datetime", },
categories: [] created() {
}, var daysToDisplay = 8;
yaxis: { var xhttp = new XMLHttpRequest();
labels: { var records = new Array(0);
formatter: function(value) { var hasNext = true;
var decimalTimeString = value; var page = 0;
var decimalTime = parseFloat(decimalTimeString);
decimalTime = decimalTime * 60; this.chartOptions.xaxis.categories = new Array(daysToDisplay);
var hours = Math.floor(decimalTime / (60 * 60)); this.series[0].data = new Array(daysToDisplay);
decimalTime = decimalTime - hours * 60 * 60; this.series[1].data = new Array(daysToDisplay);
var minutes = Math.floor(decimalTime / 60);
decimalTime = decimalTime - minutes * 60; for (let index = 0; index < daysToDisplay; index++) {
var seconds = Math.round(decimalTime); this.series[0].data[index] = 0;
if (hours < 10) { this.series[1].data[index] = 0;
hours = "0" + hours; }
} var today = new Date();
if (minutes < 10) { var dd = String(today.getDate()).padStart(2, "0");
minutes = "0" + minutes; var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
} var yyyy = today.getFullYear();
if (seconds < 10) {
seconds = "0" + seconds; for (let index = 0; index < daysToDisplay; index++) {
} var lastSeven = new Date();
return hours + ":" + minutes + ":" + seconds; 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;
while (hasNext) {
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var recordsDB = JSON.parse(xhttp.responseText);
recordsDB._embedded.records.forEach(tmpRecord => {
records.push(tmpRecord);
});
page++;
if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
hasNext = false;
} }
} }
}, if (this.status == 403) {
legend: {
show: false,
position: "left",
offsetY: 40
},
fill: {
opacity: 1
}
}
};
},
created() {
var daysToDisplay = 8;
var xhttp = new XMLHttpRequest();
var records = new Array(0);
var hasNext = true;
var page = 0;
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;
while (hasNext) {
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var recordsDB = JSON.parse(xhttp.responseText);
recordsDB._embedded.records.forEach(tmpRecord => {
records.push(tmpRecord);
});
page++;
if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
hasNext = false; hasNext = false;
} }
} };
if (this.status == 403) { xhttp.open(
hasNext = false; "GET",
baseUri +
"/records/search/allBetweenAndUser?start=" +
this.chartOptions.xaxis.categories[daysToDisplay - 1] +
"T00:00:01" +
"&end=" +
today +
"T23:59:59" +
"&username=" +
sessionStorage.getItem("username") +
"&page=" +
page +
"&size=50",
false
);
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(null);
} }
};
xhttp.open(
"GET",
baseUri +
"/records/search/allBetweenAndUser?start=" +
this.chartOptions.xaxis.categories[daysToDisplay - 1] +
"T00:00:01" +
"&end=" +
today +
"T23:59:59" +
"&username=" +
sessionStorage.getItem("username") +
"&page=" +
page +
"&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 index = 0; index < records.length; index++) { for (let indexA = 0; indexA < daysToDisplay; indexA++) {
var record = records[index]; if (record.startdate.split("T")[0] == this.chartOptions.xaxis.categories[indexA]) {
if (record.type == "PAID") {
for (let indexA = 0; indexA < daysToDisplay; indexA++) { this.series[0].data[indexA] += record.duration;
if ( } else {
record.startdate.split("T")[0] == this.series[1].data[indexA] += record.duration;
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;
} }
// 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 { .v-card {
border-radius: 20px !important; border-radius: 20px !important;
} }
</style> </style>

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

@ -11,156 +11,155 @@
</template> </template>
<script> <script>
import VueApexCharts from "vue-apexcharts"; import VueApexCharts from "vue-apexcharts";
import { baseUri } from "../../variables.js"; import {baseUri} from "../../variables.js";
export default { export default {
components: { components: {
apexchart: VueApexCharts apexchart: VueApexCharts
}, },
data: () => ({ data: () => ({
series: [0, 0], series: [0, 0],
chartOptions: { chartOptions: {
labels: ["Working hours", "Pause hours"], labels: ["Working hours", "Pause hours"],
chart: { chart: {
type: "donut", type: "donut",
background: "#202020", background: "#202020",
toolbar: { toolbar: {
show: true, show: true,
offsetX: 0, offsetX: 0,
offsetY: 0, offsetY: 0,
tools: { tools: {
download: true, download: true,
selection: true, selection: true,
zoom: false, zoom: false,
zoomin: false, zoomin: false,
zoomout: false, zoomout: false,
pan: false, pan: false,
reset: false, reset: false,
customIcons: [] 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;
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: { autoSelected: "zoom"
position: "bottom" }
},
tooltip: {
enabled: true,
followCursor: true,
fillSeriesColor: false,
x: {
show: false
},
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;
} }
} }
} },
] colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
} theme: {
}), mode: "dark"
created() { },
var xhttp = new XMLHttpRequest(); legend: {
var records = new Array(0); show: false,
var hasNext = true; position: "left",
var page = 0; offsetY: 40
},
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 300
},
legend: {
position: "bottom"
}
}
}
]
}
}),
created() {
var xhttp = new XMLHttpRequest();
var records = new Array(0);
var hasNext = true;
var page = 0;
while (hasNext) { while (hasNext) {
xhttp.onreadystatechange = function() { xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
var recordsDB = JSON.parse(xhttp.responseText); var recordsDB = JSON.parse(xhttp.responseText);
recordsDB._embedded.records.forEach(tmpRecord => { recordsDB._embedded.records.forEach(tmpRecord => {
records.push(tmpRecord) records.push(tmpRecord)
}); });
page++; page++;
if (recordsDB.page.number == recordsDB.page.totalPages - 1) { if (recordsDB.page.number == recordsDB.page.totalPages - 1) {
hasNext = false;
}
}
if (this.status == 403) {
hasNext = false; hasNext = false;
} }
} };
if (this.status == 403) { xhttp.open(
hasNext = false; "GET",
} baseUri +
};
xhttp.open(
"GET",
baseUri +
"/records/search/allForUser?username=" + "/records/search/allForUser?username=" +
sessionStorage.getItem("username") + sessionStorage.getItem("username") +
"&page=" + "&page=" +
page + page +
"&projection=overview" + "&projection=overview" +
"&size=50", "&size=50",
false false
); );
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(null); 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;
} }
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;
} }
this.series[0] = paidTime; };
this.series[1] = breakTime;
}
};
</script> </script>
<style scoped> <style scoped>
.v-card { .v-card {
border-radius: 20px !important; border-radius: 20px !important;
} }
</style> </style>