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

Extract duplicate formatter code out of chart definitions

Browse Source
This commit is contained in:
Marcel Schwarz 2020-07-22 00:10:35 +02:00
parent a73740f400
commit 417ab3da50
6 changed files with 51 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,7 @@
<script> <script>
import VueApexCharts from "vue-apexcharts"; import VueApexCharts from "vue-apexcharts";
import {baseUri} from "../../variables.js"; import {baseUri} from "../../variables.js";
import {timeFormatter} from "./ApexFormatters";
export default { export default {
components: { components: {
@ -46,69 +47,23 @@
enabled: true, enabled: true,
followCursor: true, followCursor: true,
fillSeriesColor: false, fillSeriesColor: false,
x: { x: {show: false},
show: false
},
y: { y: {
formatter: value => { formatter: value => {
var revenueTMP = 0; let idxInRevenue = this.series.findIndex(revenue => revenue === value)
for (let index = 0; index < this.series.length; index++) { let revenue = (this.revenue[idxInRevenue] / 60) * value;
if (value == this.series[index]) { revenue = Math.ceil(revenue);
revenueTMP = this.revenue[index]; return (timeFormatter(value) + " with " + revenue + "$ revenue.")
}
}
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: [ colors: ["#0096ff", "#e21d1f", "#03ac13", "#800080", "#f9d71c", "#ff1694"],
"#0096ff", theme: {mode: "dark"},
"#e21d1f",
"#03ac13",
"#800080",
"#f9d71c",
"ff1694"
],
theme: {
mode: "dark"
},
legend: { legend: {
show: false, show: false,
position: "left", position: "left",
offsetY: 40 offsetY: 40
}, },
responsive: [ responsive: [
{ {
breakpoint: 480, breakpoint: 480,
@ -148,11 +103,7 @@
false false
); );
accountxhttp.setRequestHeader( accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
"Authorization",
sessionStorage.getItem("jwt")
);
accountxhttp.send(null); accountxhttp.send(null);
this.chartOptions.labels = new Array(timeTrackAccountsTMP.length); this.chartOptions.labels = new Array(timeTrackAccountsTMP.length);
@ -204,7 +155,6 @@
); );
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(null); xhttp.send(null);
} }
@ -220,7 +170,6 @@
}; };
</script> </script>
<style scoped> <style scoped>
.v-card { .v-card {
border-radius: 20px !important; border-radius: 20px !important;

20
frontend/src/views/charts/ApexFormatters.js Normal file
View File

@ -0,0 +1,20 @@
const timeFormatter = value => {
let decimalTime = parseFloat(value);
decimalTime = decimalTime * 60;
let hours = Math.floor(decimalTime / (60 * 60));
decimalTime = decimalTime - hours * 60 * 60;
let minutes = Math.floor(decimalTime / 60);
decimalTime = decimalTime - minutes * 60;
let seconds = Math.round(decimalTime);
hours = hours > 10 ? hours : "0" + hours
minutes = minutes > 10 ? minutes : "0" + minutes
seconds = seconds > 10 ? seconds : "0" + seconds
return (hours + ":" + minutes + ":" + seconds);
}
export {timeFormatter};

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

@ -14,6 +14,7 @@
<script> <script>
import VueApexCharts from "vue-apexcharts"; import VueApexCharts from "vue-apexcharts";
import {baseUri} from "../../variables.js"; import {baseUri} from "../../variables.js";
import {timeFormatter} from "./ApexFormatters";
export default { export default {
name: "MonthSummary", name: "MonthSummary",
@ -55,40 +56,13 @@
} }
}, },
colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"], colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
theme: { theme: {mode: "dark"},
mode: "dark" dataLabels: {enabled: false},
},
dataLabels: {
enabled: false
},
tooltip: { tooltip: {
enabled: true, enabled: true,
followCursor: true, followCursor: true,
x: { x: {show: true},
show: true y: {formatter: timeFormatter}
},
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: [ responsive: [
{ {
@ -113,37 +87,14 @@
categories: [] categories: []
}, },
yaxis: { yaxis: {
labels: { labels: {formatter: timeFormatter}
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: { legend: {
show: false, show: false,
position: "left", position: "left",
offsetY: 40 offsetY: 40
}, },
fill: { fill: {opacity: 1}
opacity: 1
}
} }
}; };
}, },

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

@ -46,32 +46,16 @@
enabled: true, enabled: true,
followCursor: true, followCursor: true,
fillSeriesColor: false, fillSeriesColor: false,
x: { x: {show: false},
show: false y: {formatter: value => Math.ceil(value) + "$"}
},
y: {
formatter: value => {
return Math.round(value * 100) / 100 + "$"
}
}
},
colors: [
"#0096ff",
"#e21d1f",
"#03ac13",
"#800080",
"#f9d71c",
"ff1694"
],
theme: {
mode: "dark"
}, },
colors: ["#0096ff", "#e21d1f", "#03ac13", "#800080", "#f9d71c", "ff1694"],
theme: {mode: "dark"},
legend: { legend: {
show: false, show: false,
position: "left", position: "left",
offsetY: 40 offsetY: 40
}, },
responsive: [ responsive: [
{ {
breakpoint: 480, breakpoint: 480,
@ -111,11 +95,7 @@
false false
); );
accountxhttp.setRequestHeader( accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
"Authorization",
sessionStorage.getItem("jwt")
);
accountxhttp.send(null); accountxhttp.send(null);
this.chartOptions.labels = new Array(timeTrackAccountsTMP.length); this.chartOptions.labels = new Array(timeTrackAccountsTMP.length);
@ -167,7 +147,6 @@
); );
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(null); xhttp.send(null);
} }
@ -187,7 +166,6 @@
}; };
</script> </script>
<style scoped> <style scoped>
.v-card { .v-card {
border-radius: 20px !important; border-radius: 20px !important;

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

@ -14,6 +14,7 @@
<script> <script>
import VueApexCharts from "vue-apexcharts"; import VueApexCharts from "vue-apexcharts";
import {baseUri} from "../../variables.js"; import {baseUri} from "../../variables.js";
import {timeFormatter} from "./ApexFormatters";
export default { export default {
name: "WeekSummary", name: "WeekSummary",
@ -55,40 +56,13 @@
} }
}, },
colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"], colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
theme: { theme: {mode: "dark"},
mode: "dark" dataLabels: {enabled: false},
},
dataLabels: {
enabled: false
},
tooltip: { tooltip: {
enabled: true, enabled: true,
followCursor: true, followCursor: true,
x: { x: {show: false},
show: false y: {formatter: timeFormatter}
},
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: [ responsive: [
{ {
@ -113,28 +87,7 @@
categories: [] categories: []
}, },
yaxis: { yaxis: {
labels: { labels: {formatter: timeFormatter}
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: { legend: {
show: false, show: false,

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

@ -13,6 +13,7 @@
<script> <script>
import VueApexCharts from "vue-apexcharts"; import VueApexCharts from "vue-apexcharts";
import {baseUri} from "../../variables.js"; import {baseUri} from "../../variables.js";
import {timeFormatter} from "./ApexFormatters";
export default { export default {
components: { components: {
@ -46,39 +47,11 @@
enabled: true, enabled: true,
followCursor: true, followCursor: true,
fillSeriesColor: false, fillSeriesColor: false,
x: { x: {show: false},
show: false y: {formatter: timeFormatter}
},
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"], colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
theme: { theme: {mode: "dark"},
mode: "dark"
},
legend: { legend: {
show: false, show: false,
position: "left", position: "left",
@ -134,7 +107,6 @@
); );
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(null); xhttp.send(null);
} }
@ -157,7 +129,6 @@
}; };
</script> </script>
<style scoped> <style scoped>
.v-card { .v-card {
border-radius: 20px !important; border-radius: 20px !important;