Reformat chart components
This commit is contained in:
parent
a0a4e1ca97
commit
33a0b0840b
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
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);
|
||||||
}
|
}
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
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>
|
||||||
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user