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

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

@ -11,15 +11,15 @@
</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: {
@ -134,7 +134,7 @@ export default {
var accounts; var accounts;
var timeTrackAccountsTMP; var timeTrackAccountsTMP;
var accountxhttp = new XMLHttpRequest(); var accountxhttp = new XMLHttpRequest();
accountxhttp.onreadystatechange = function() { accountxhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
accounts = JSON.parse(accountxhttp.responseText); accounts = JSON.parse(accountxhttp.responseText);
timeTrackAccountsTMP = accounts._embedded.accounts; timeTrackAccountsTMP = accounts._embedded.accounts;
@ -176,7 +176,7 @@ export default {
var page = 0; 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 => {
@ -210,26 +210,19 @@ export default {
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;
indexAccs++
) {
if (
record.account == this.chartOptions.labels[indexAccs] &&
record.type == "PAID"
) {
this.series[indexAccs] += record.duration; 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>

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

@ -12,10 +12,10 @@
<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
@ -68,7 +68,7 @@ export default {
show: true show: true
}, },
y: { y: {
formatter: function(value) { formatter: function (value) {
var decimalTimeString = value; var decimalTimeString = value;
var decimalTime = parseFloat(decimalTimeString); var decimalTime = parseFloat(decimalTimeString);
decimalTime = decimalTime * 60; decimalTime = decimalTime * 60;
@ -114,7 +114,7 @@ export default {
}, },
yaxis: { yaxis: {
labels: { labels: {
formatter: function(value) { formatter: function (value) {
var decimalTimeString = value; var decimalTimeString = value;
var decimalTime = parseFloat(decimalTimeString); var decimalTime = parseFloat(decimalTimeString);
decimalTime = decimalTime * 60; decimalTime = decimalTime * 60;
@ -178,7 +178,7 @@ export default {
today = yyyy + "-" + mm + "-" + dd; today = yyyy + "-" + mm + "-" + dd;
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 => {
@ -220,10 +220,7 @@ export default {
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] ==
this.chartOptions.xaxis.categories[indexA]
) {
if (record.type == "PAID") { if (record.type == "PAID") {
this.series[0].data[indexA] += record.duration; this.series[0].data[indexA] += record.duration;
} else { } else {
@ -236,11 +233,11 @@ export default {
this.series[0].data[daysToDisplay - 1] = 0; this.series[0].data[daysToDisplay - 1] = 0;
this.series[1].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>

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

@ -11,15 +11,15 @@
</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: {
@ -97,7 +97,7 @@ export default {
var accounts; var accounts;
var timeTrackAccountsTMP; var timeTrackAccountsTMP;
var accountxhttp = new XMLHttpRequest(); var accountxhttp = new XMLHttpRequest();
accountxhttp.onreadystatechange = function() { accountxhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
accounts = JSON.parse(accountxhttp.responseText); accounts = JSON.parse(accountxhttp.responseText);
timeTrackAccountsTMP = accounts._embedded.accounts; timeTrackAccountsTMP = accounts._embedded.accounts;
@ -139,7 +139,7 @@ export default {
var page = 0; 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 => {
@ -173,30 +173,23 @@ export default {
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;
indexAccs++
) {
if (
record.account == this.chartOptions.labels[indexAccs] &&
record.type == "PAID"
) {
this.series[indexAccs] += record.duration; 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>

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

@ -12,10 +12,10 @@
<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
@ -68,7 +68,7 @@ export default {
show: false show: false
}, },
y: { y: {
formatter: function(value) { formatter: function (value) {
var decimalTimeString = value; var decimalTimeString = value;
var decimalTime = parseFloat(decimalTimeString); var decimalTime = parseFloat(decimalTimeString);
decimalTime = decimalTime * 60; decimalTime = decimalTime * 60;
@ -114,7 +114,7 @@ export default {
}, },
yaxis: { yaxis: {
labels: { labels: {
formatter: function(value) { formatter: function (value) {
var decimalTimeString = value; var decimalTimeString = value;
var decimalTime = parseFloat(decimalTimeString); var decimalTime = parseFloat(decimalTimeString);
decimalTime = decimalTime * 60; decimalTime = decimalTime * 60;
@ -179,7 +179,7 @@ export default {
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 => {
@ -221,10 +221,7 @@ export default {
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] ==
this.chartOptions.xaxis.categories[indexA]
) {
if (record.type == "PAID") { if (record.type == "PAID") {
this.series[0].data[indexA] += record.duration; this.series[0].data[indexA] += record.duration;
} else { } else {
@ -237,11 +234,11 @@ export default {
this.series[0].data[daysToDisplay - 1] = 0; this.series[0].data[daysToDisplay - 1] = 0;
this.series[1].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>

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

@ -11,10 +11,10 @@
</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
}, },
@ -50,7 +50,7 @@ export default {
show: false show: false
}, },
y: { y: {
formatter: function(value) { formatter: function (value) {
var decimalTimeString = value; var decimalTimeString = value;
var decimalTime = parseFloat(decimalTimeString); var decimalTime = parseFloat(decimalTimeString);
decimalTime = decimalTime * 60; decimalTime = decimalTime * 60;
@ -84,7 +84,6 @@ export default {
position: "left", position: "left",
offsetY: 40 offsetY: 40
}, },
responsive: [ responsive: [
{ {
breakpoint: 480, breakpoint: 480,
@ -107,7 +106,7 @@ export default {
var page = 0; 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 => {
@ -155,12 +154,12 @@ export default {
this.series[0] = paidTime; this.series[0] = paidTime;
this.series[1] = breakTime; this.series[1] = breakTime;
} }
}; };
</script> </script>
<style scoped> <style scoped>
.v-card { .v-card {
border-radius: 20px !important; border-radius: 20px !important;
} }
</style> </style>