Reformat chart components
This commit is contained in:
parent
a0a4e1ca97
commit
33a0b0840b
@ -11,225 +11,218 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueApexCharts from "vue-apexcharts";
|
||||
import { baseUri } from "../../variables.js";
|
||||
import VueApexCharts from "vue-apexcharts";
|
||||
import {baseUri} from "../../variables.js";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
apexchart: VueApexCharts
|
||||
},
|
||||
computed: {
|
||||
chartOptions: function() {
|
||||
return {
|
||||
labels: ["Working hours", "Pause hours"],
|
||||
chart: {
|
||||
type: "donut",
|
||||
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"
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
followCursor: true,
|
||||
fillSeriesColor: false,
|
||||
x: {
|
||||
show: false
|
||||
export default {
|
||||
components: {
|
||||
apexchart: VueApexCharts
|
||||
},
|
||||
computed: {
|
||||
chartOptions: function () {
|
||||
return {
|
||||
labels: ["Working hours", "Pause hours"],
|
||||
chart: {
|
||||
type: "donut",
|
||||
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"
|
||||
}
|
||||
},
|
||||
y: {
|
||||
formatter: value => {
|
||||
var revenueTMP = 0;
|
||||
for (let index = 0; index < this.series.length; index++) {
|
||||
if (value == this.series[index]) {
|
||||
revenueTMP = this.revenue[index];
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
followCursor: true,
|
||||
fillSeriesColor: 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."
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
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(
|
||||
"GET",
|
||||
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() {
|
||||
},
|
||||
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) {
|
||||
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;
|
||||
accounts = JSON.parse(accountxhttp.responseText);
|
||||
timeTrackAccountsTMP = accounts._embedded.accounts;
|
||||
}
|
||||
};
|
||||
xhttp.open(
|
||||
accountxhttp.open(
|
||||
"GET",
|
||||
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=" +
|
||||
sessionStorage.getItem("username") +
|
||||
"&projection=overview" +
|
||||
"&page=" +
|
||||
page +
|
||||
"&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++) {
|
||||
var record = records[index];
|
||||
for (
|
||||
let indexAccs = 0;
|
||||
indexAccs < this.chartOptions.labels.length;
|
||||
indexAccs++
|
||||
) {
|
||||
if (
|
||||
record.account == this.chartOptions.labels[indexAccs] &&
|
||||
record.type == "PAID"
|
||||
) {
|
||||
this.series[indexAccs] += record.duration;
|
||||
for (let index = 0; index < records.length; index++) {
|
||||
var record = records[index];
|
||||
for (let indexAccs = 0; indexAccs < this.chartOptions.labels.length; indexAccs++) {
|
||||
if (record.account == this.chartOptions.labels[indexAccs] && record.type == "PAID") {
|
||||
this.series[indexAccs] += record.duration;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.v-card {
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
</style>
|
||||
.v-card {
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,191 +12,191 @@
|
||||
|
||||
|
||||
<script>
|
||||
import VueApexCharts from "vue-apexcharts";
|
||||
import { baseUri } from "../../variables.js";
|
||||
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: [
|
||||
export default {
|
||||
name: "MonthSummary",
|
||||
components: {
|
||||
apexchart: VueApexCharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
legend: {
|
||||
position: "bottom",
|
||||
offsetX: -10,
|
||||
offsetY: 0
|
||||
}
|
||||
}
|
||||
name: "Working Hours",
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: "Pause Hours",
|
||||
data: []
|
||||
}
|
||||
],
|
||||
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;
|
||||
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: []
|
||||
},
|
||||
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(
|
||||
"GET",
|
||||
baseUri +
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
xhttp.open(
|
||||
"GET",
|
||||
baseUri +
|
||||
"/records/search/allBetweenAndUser?start=" +
|
||||
this.chartOptions.xaxis.categories[daysToDisplay - 1] +
|
||||
"T00:00:01" +
|
||||
@ -208,39 +208,36 @@ export default {
|
||||
"&page=" +
|
||||
page +
|
||||
"&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++) {
|
||||
var record = records[index];
|
||||
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;
|
||||
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;
|
||||
}
|
||||
// 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>
|
||||
.v-card {
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,192 +11,185 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueApexCharts from "vue-apexcharts";
|
||||
import { baseUri } from "../../variables.js";
|
||||
import VueApexCharts from "vue-apexcharts";
|
||||
import {baseUri} from "../../variables.js";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
apexchart: VueApexCharts
|
||||
},
|
||||
computed: {
|
||||
chartOptions: function() {
|
||||
return {
|
||||
labels: ["Working hours", "Pause hours"],
|
||||
chart: {
|
||||
type: "donut",
|
||||
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"
|
||||
}
|
||||
},
|
||||
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
|
||||
export default {
|
||||
components: {
|
||||
apexchart: VueApexCharts
|
||||
},
|
||||
computed: {
|
||||
chartOptions: function () {
|
||||
return {
|
||||
labels: ["Working hours", "Pause hours"],
|
||||
chart: {
|
||||
type: "donut",
|
||||
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: []
|
||||
},
|
||||
legend: {
|
||||
position: "bottom"
|
||||
autoSelected: "zoom"
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
followCursor: true,
|
||||
fillSeriesColor: false,
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
formatter: value => {
|
||||
return Math.round(value * 100) / 100 + "$"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
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;
|
||||
},
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
accountxhttp.open(
|
||||
"GET",
|
||||
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() {
|
||||
},
|
||||
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) {
|
||||
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;
|
||||
accounts = JSON.parse(accountxhttp.responseText);
|
||||
timeTrackAccountsTMP = accounts._embedded.accounts;
|
||||
}
|
||||
};
|
||||
xhttp.open(
|
||||
accountxhttp.open(
|
||||
"GET",
|
||||
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=" +
|
||||
sessionStorage.getItem("username") +
|
||||
"&projection=overview" +
|
||||
"&page=" +
|
||||
page +
|
||||
"&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++) {
|
||||
var record = records[index];
|
||||
for (
|
||||
let indexAccs = 0;
|
||||
indexAccs < this.chartOptions.labels.length;
|
||||
indexAccs++
|
||||
) {
|
||||
if (
|
||||
record.account == this.chartOptions.labels[indexAccs] &&
|
||||
record.type == "PAID"
|
||||
) {
|
||||
this.series[indexAccs] += record.duration;
|
||||
for (let index = 0; index < records.length; index++) {
|
||||
var record = records[index];
|
||||
for (let indexAccs = 0; indexAccs < this.chartOptions.labels.length; 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++) {
|
||||
this.series[index] = this.series[index] * this.revenue[index] /60;
|
||||
for (let index = 0; index < this.series.length; index++) {
|
||||
this.series[index] = this.series[index] * this.revenue[index] / 60;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.v-card {
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
</style>
|
||||
.v-card {
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,236 +12,233 @@
|
||||
|
||||
|
||||
<script>
|
||||
import VueApexCharts from "vue-apexcharts";
|
||||
import { baseUri } from "../../variables.js";
|
||||
import VueApexCharts from "vue-apexcharts";
|
||||
import {baseUri} from "../../variables.js";
|
||||
|
||||
export default {
|
||||
name: "WeekSummary",
|
||||
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: 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: [
|
||||
export default {
|
||||
name: "WeekSummary",
|
||||
components: {
|
||||
apexchart: VueApexCharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
legend: {
|
||||
position: "bottom",
|
||||
offsetX: -10,
|
||||
offsetY: 0
|
||||
}
|
||||
}
|
||||
name: "Working Hours",
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: "Pause Hours",
|
||||
data: []
|
||||
}
|
||||
],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: "30%"
|
||||
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,
|
||||
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: []
|
||||
},
|
||||
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;
|
||||
}
|
||||
};
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
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) {
|
||||
if (this.status == 403) {
|
||||
hasNext = false;
|
||||
}
|
||||
}
|
||||
if (this.status == 403) {
|
||||
hasNext = false;
|
||||
};
|
||||
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);
|
||||
}
|
||||
};
|
||||
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++) {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
// 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>
|
||||
.v-card {
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,156 +11,155 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueApexCharts from "vue-apexcharts";
|
||||
import { baseUri } from "../../variables.js";
|
||||
import VueApexCharts from "vue-apexcharts";
|
||||
import {baseUri} from "../../variables.js";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
apexchart: VueApexCharts
|
||||
},
|
||||
data: () => ({
|
||||
series: [0, 0],
|
||||
chartOptions: {
|
||||
labels: ["Working hours", "Pause hours"],
|
||||
chart: {
|
||||
type: "donut",
|
||||
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"
|
||||
}
|
||||
},
|
||||
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
|
||||
export default {
|
||||
components: {
|
||||
apexchart: VueApexCharts
|
||||
},
|
||||
data: () => ({
|
||||
series: [0, 0],
|
||||
chartOptions: {
|
||||
labels: ["Working hours", "Pause hours"],
|
||||
chart: {
|
||||
type: "donut",
|
||||
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: []
|
||||
},
|
||||
legend: {
|
||||
position: "bottom"
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}),
|
||||
created() {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
var records = new Array(0);
|
||||
var hasNext = true;
|
||||
var page = 0;
|
||||
},
|
||||
colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
|
||||
theme: {
|
||||
mode: "dark"
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
position: "left",
|
||||
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) {
|
||||
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) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
if (this.status == 403) {
|
||||
hasNext = false;
|
||||
}
|
||||
};
|
||||
xhttp.open(
|
||||
"GET",
|
||||
baseUri +
|
||||
};
|
||||
xhttp.open(
|
||||
"GET",
|
||||
baseUri +
|
||||
"/records/search/allForUser?username=" +
|
||||
sessionStorage.getItem("username") +
|
||||
"&page=" +
|
||||
page +
|
||||
"&projection=overview" +
|
||||
"&size=50",
|
||||
false
|
||||
);
|
||||
false
|
||||
);
|
||||
|
||||
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
|
||||
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;
|
||||
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;
|
||||
}
|
||||
this.series[0] = paidTime;
|
||||
this.series[1] = breakTime;
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.v-card {
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
</style>
|
||||
.v-card {
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user