add week summary component + router link
This commit is contained in:
parent
f3237419dd
commit
dc9b7ef1ef
82
frontend/package-lock.json
generated
82
frontend/package-lock.json
generated
@ -1957,6 +1957,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"apexcharts": {
|
||||||
|
"version": "3.19.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.19.0.tgz",
|
||||||
|
"integrity": "sha512-fzupCGVDvOoU6kEzguLAfgRgrlHynHM5fnkkyCL85tYf9U8bw1hCijs4A+kWXurC/SNytJrArBc21kA/2wuHYg==",
|
||||||
|
"requires": {
|
||||||
|
"svg.draggable.js": "^2.2.2",
|
||||||
|
"svg.easing.js": "^2.0.0",
|
||||||
|
"svg.filter.js": "^2.0.2",
|
||||||
|
"svg.pathmorphing.js": "^0.1.3",
|
||||||
|
"svg.resize.js": "^1.4.3",
|
||||||
|
"svg.select.js": "^3.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"aproba": {
|
"aproba": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
|
||||||
@ -10402,6 +10415,70 @@
|
|||||||
"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
|
"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"svg.draggable.js": {
|
||||||
|
"version": "2.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
|
||||||
|
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"svg.easing.js": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
|
||||||
|
"integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
|
||||||
|
"requires": {
|
||||||
|
"svg.js": ">=2.3.x"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"svg.filter.js": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
|
||||||
|
"integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.2.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"svg.js": {
|
||||||
|
"version": "2.7.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
|
||||||
|
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
|
||||||
|
},
|
||||||
|
"svg.pathmorphing.js": {
|
||||||
|
"version": "0.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
|
||||||
|
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"svg.resize.js": {
|
||||||
|
"version": "1.4.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
|
||||||
|
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.6.5",
|
||||||
|
"svg.select.js": "^2.1.2"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"svg.select.js": {
|
||||||
|
"version": "2.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
|
||||||
|
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.2.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"svg.select.js": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.6.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"svgo": {
|
"svgo": {
|
||||||
"version": "1.3.2",
|
"version": "1.3.2",
|
||||||
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
|
||||||
@ -11084,6 +11161,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
|
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
|
||||||
"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
|
"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
|
||||||
},
|
},
|
||||||
|
"vue-apexcharts": {
|
||||||
|
"version": "1.5.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.5.3.tgz",
|
||||||
|
"integrity": "sha512-ImbvQxgwbLMrEc9/veDIJ7lzncf1fJDSNqqK0x2YDNUCq5tE9uqM4Gb/ZYUB5WlDM3vDpzwDEmsidWcaO6/WXQ=="
|
||||||
|
},
|
||||||
"vue-eslint-parser": {
|
"vue-eslint-parser": {
|
||||||
"version": "7.0.0",
|
"version": "7.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz",
|
||||||
|
|||||||
@ -8,8 +8,10 @@
|
|||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"apexcharts": "^3.19.0",
|
||||||
"core-js": "^3.6.4",
|
"core-js": "^3.6.4",
|
||||||
"vue": "^2.6.11",
|
"vue": "^2.6.11",
|
||||||
|
"vue-apexcharts": "^1.5.3",
|
||||||
"vue-router": "^3.1.6"
|
"vue-router": "^3.1.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@ -7,6 +7,8 @@ footer
|
|||||||
<u><router-link to="/about">About</router-link></u>
|
<u><router-link to="/about">About</router-link></u>
|
||||||
<br>
|
<br>
|
||||||
<u><router-link to="/timerecords">Time Records</router-link></u>
|
<u><router-link to="/timerecords">Time Records</router-link></u>
|
||||||
|
<br>
|
||||||
|
<u><router-link to="/weeksummary">Week Summary</router-link></u>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -8,6 +8,7 @@ import TimeRecords from "../views/TimeRecords.vue";
|
|||||||
import About from "../views/About.vue";
|
import About from "../views/About.vue";
|
||||||
import Login from "../views/Login.vue";
|
import Login from "../views/Login.vue";
|
||||||
import Register from "../views/Register.vue";
|
import Register from "../views/Register.vue";
|
||||||
|
import WeekSummary from "../views/WeekSummary.vue";
|
||||||
Vue.use(VueRouter);
|
Vue.use(VueRouter);
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
@ -53,6 +54,11 @@ const routes = [
|
|||||||
name: "About",
|
name: "About",
|
||||||
component: About
|
component: About
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/weeksummary",
|
||||||
|
name: "Week Summary",
|
||||||
|
component: WeekSummary
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '*',
|
path: '*',
|
||||||
component: missing
|
component: missing
|
||||||
|
|||||||
132
frontend/src/views/WeekSummary.vue
Normal file
132
frontend/src/views/WeekSummary.vue
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h3 align='center'>Weeky Summary</h3>
|
||||||
|
<div id="chart">
|
||||||
|
<apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import VueApexCharts from "vue-apexcharts";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
apexchart: VueApexCharts
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "Working Hours",
|
||||||
|
data: [6, 4, 8, 8, 9, 2]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Pause Hours",
|
||||||
|
data: [1, 0.5, 2, 1, 3, 0.2]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
chartOptions: {
|
||||||
|
chart: {
|
||||||
|
type: "bar",
|
||||||
|
height: 350,
|
||||||
|
stacked: true,
|
||||||
|
background: "#131313",
|
||||||
|
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 * 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
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
type: "datetime",
|
||||||
|
categories: [
|
||||||
|
"01/01/2011 GMT",
|
||||||
|
"01/02/2011 GMT",
|
||||||
|
"01/03/2011 GMT",
|
||||||
|
"01/04/2011 GMT",
|
||||||
|
"01/05/2011 GMT",
|
||||||
|
"01/06/2011 GMT"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
position: "left",
|
||||||
|
offsetY: 40
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user