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

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

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

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

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

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

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