bartool/odoo_hours_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

working on chart

Browse Source
This commit is contained in:
bartool
2025-03-16 14:39:08 +01:00
parent 182443530a
commit c0aac3e49c
6 changed files with 296 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/index.html
View File

@@ -7,7 +7,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Odoo Hours</title>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>

44
app/package-lock.json generated
View File

@@ -9,8 +9,10 @@
"version": "0.0.0",
"dependencies": {
"bootstrap": "^5.3.3",
"chart.js": "^4.4.8",
"pinia": "^3.0.1",
"vue": "^3.5.13",
"vue-chartjs": "^5.3.2",
"vue-router": "^4.5.0"
},
"devDependencies": {
@@ -298,14 +300,14 @@
}
},
"node_modules/@babel/helpers": {
"version": "7.26.9",
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.9.tgz",
"integrity": "sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==",
"version": "7.26.10",
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.10.tgz",
"integrity": "sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/template": "^7.26.9",
"@babel/types": "^7.26.9"
"@babel/types": "^7.26.10"
},
"engines": {
"node": ">=6.9.0"
@@ -476,9 +478,9 @@
}
},
"node_modules/@babel/types": {
"version": "7.26.9",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz",
"integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==",
"version": "7.26.10",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.10.tgz",
"integrity": "sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==",
"license": "MIT",
"dependencies": {
"@babel/helper-string-parser": "^7.25.9",
@@ -965,6 +967,12 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@kurkle/color": {
"version": "0.3.4",
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
"license": "MIT"
},
"node_modules/@polka/url": {
"version": "1.0.0-next.28",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
@@ -1631,6 +1639,18 @@
],
"license": "CC-BY-4.0"
},
"node_modules/chart.js": {
"version": "4.4.8",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.8.tgz",
"integrity": "sha512-IkGZlVpXP+83QpMm4uxEiGqSI7jFizwVtF3+n5Pc3k7sMO+tkd0qxh2OzLhenM0K80xtmAONWGBn082EiBQSDA==",
"license": "MIT",
"dependencies": {
"@kurkle/color": "^0.3.0"
},
"engines": {
"pnpm": ">=8"
}
},
"node_modules/convert-source-map": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -2759,6 +2779,16 @@
}
}
},
"node_modules/vue-chartjs": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.2.tgz",
"integrity": "sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==",
"license": "MIT",
"peerDependencies": {
"chart.js": "^4.1.1",
"vue": "^3.0.0-0 || ^2.7.0"
}
},
"node_modules/vue-router": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",

2
app/package.json
View File

@@ -10,8 +10,10 @@
},
"dependencies": {
"bootstrap": "^5.3.3",
"chart.js": "^4.4.8",
"pinia": "^3.0.1",
"vue": "^3.5.13",
"vue-chartjs": "^5.3.2",
"vue-router": "^4.5.0"
},
"devDependencies": {

89
app/src/components/BarChartComponent.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<div class="chart-container">
<Bar :data="chartData" :options="chartOptions" :plugins="[chartOptions.plugins.customLabels]" />
</div>
</template>
<script setup>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
// Rejestracja wymaganych komponentów Chart.js
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
// Dane wykresu z dwiema seriami, które będą układane jedna nad drugą
const chartData = {
labels: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec'],
datasets: [
{
label: 'Sprzedaż Online',
data: [30, 40, 50, 60, 70],
backgroundColor: 'rgba(54, 162, 235, 0.7)',
stack: 'stack1',
// borderWidth: 5,
// borderRadius: 15,
// borderSkipped: false,
// borderColor: 'rgba(64, 148, 204, 0.7)',
},
{
label: 'Sprzedaż Stacjonarna',
data: [20, 30, 40, 50, -50],
backgroundColor: 'rgba(255, 99, 132, 0.7)',
stack: 'stack1',
// borderWidth: 5,
// borderRadius: 15,
// borderSkipped: false,
// borderColor: 'rgba(64, 148, 204, 0.7)',
}
]
}
// Konfiguracja wykresu – włączenie stacking
const chartOptions = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'top' },
tooltip: { enabled: true },
// Własny plugin do wyświetlania sumy wartości nad słupkami
customLabels: {
id: 'customLabels',
afterDatasetsDraw(chart) {
const { ctx, data, scales: { x, y } } = chart
ctx.save()
ctx.font = 'bold 12px Arial'
ctx.fillStyle = 'black'
ctx.textAlign = 'center'
data.labels.forEach((label, index) => {
const total = data.datasets.reduce((sum, dataset) => sum + dataset.data[index], 0) // Oblicza sumę wartości dla danej kategorii
const barX = x.getPixelForValue(index)
const barY = y.getPixelForValue(total) - 10 // Umieszcza tekst nad słupkiem
ctx.fillText(total, barX, barY)
})
ctx.restore()
}
}
},
scales: {
x: {
stacked: true,
grid: { display: false }
},
y: {
stacked: true,
// grid: { display: false }
}
}
}
</script>
<style scoped>
.chart-container {
width: 100%;
height: 200px;
/* Ustawienie wysokości */
}
</style>

4
app/src/views/EditView.vue
View File

@@ -114,13 +114,13 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="addModalLabel">Wklej swój tekst</h1>
<h1 class="modal-title fs-5" id="addModalLabel">Dodaj dzień roboczy</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<label for="inputDate" class="form-label">wybierz date:</label>
<input type="date" id="inputDate" class="form-control" v-model="newDate">
<input type="date" id="inputDate" class="form-control" placeholder="dd-mm-yyyy" v-model="newDate">
</div>

166
app/src/views/TableView.vue
View File

@@ -1,7 +1,169 @@
<template>
<h1>Table</h1>
<div class="container">
<div class="row gx-3">
<div class="col-4">
<div class="card bg-left text-light h-100">
<div class="row g-0 h-100">
<div class="col-3 ">
<h2 class="rounded-start bg-light h-100 d-flex justify-content-center align-items-center">
<i class="text-left fa-solid fa-calendar"></i>
</h2>
</div>
<div class="col-9 ">
<div class="card-body">
<h6 class="card-title">MIESIĄC:</h6>
<h3 class="card-subtitle">Marzec</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card bg-mid text-light h-100">
<div class="row g-0 ">
<div class="col-3 ">
<h2 class="rounded-start bg-light h-100 d-flex justify-content-center align-items-center">
<i class="text-mid fa-solid fa-hammer"></i>
</h2>
</div>
<div class="col-9 ">
<div class="card-body">
<h6 class="card-title">ILOŚĆ DNI ROBOCZYCH:</h6>
<h3 class="card-subtitle">21</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card bg-right text-light h-100">
<div class="row g-0 ">
<div class="col-3 ">
<h2 class="rounded-start bg-light h-100 d-flex justify-content-center align-items-center">
<i class="text-right fa-solid fa-clock "></i>
</h2>
</div>
<div class="col-9 ">
<div class="card-body">
<h6 class="card-title">WYMAGANA ILOŚĆ GODZIN:</h6>
<h3 class="card-subtitle">168</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row gx-3 mt-3 text-center">
<div class="col-2">
<div class="card h-100">
<div class="card-header text-bg-primary">ILOŚĆ GODZIN</div>
<div class="card-body">
<h3 class="card-title">182</h3>
<!-- <h6 class="card-text mb-2 ">Marzec 2025</h6> -->
</div>
</div>
</div>
<div class="col-2">
<div class="card h-100">
<div class="card-header text-bg-primary">RÓŻNICA GODZIN</div>
<div class="card-body">
<h5 class="card-title">+15</h5>
<!-- <h6 class="card-text mb-2 ">Marzec 2025</h6> -->
</div>
</div>
</div>
<div class="col-2">
<div class="card h-100">
<div class="card-header text-bg-primary">PROGRES</div>
<div class="card-body">
<h5 class="card-title">18/21</h5>
<!-- <h6 class="card-text mb-2 ">Marzec 2025</h6> -->
</div>
</div>
</div>
<div class="col-2">
<div class="card h-100">
<div class="card-header text-bg-primary">DNI URLOPU</div>
<div class="card-body">
<h5 class="card-title">0</h5>
<!-- <h6 class="card-text mb-2 ">Marzec 2025</h6> -->
</div>
</div>
</div>
<div class="col-2">
<div class="card h-100">
<div class="card-header text-bg-primary">DNI CHOROBOWEGO</div>
<div class="card-body">
<h5 class="card-title">0</h5>
<!-- <h6 class="card-text mb-2 ">Marzec 2025</h6> -->
</div>
</div>
</div>
<div class="col-2">
<div class="card h-100">
<div class="card-header text-bg-primary">DNI ŚWIĄTECZNE</div>
<div class="card-body">
<h5 class="card-title">1</h5>
<!-- <h6 class="card-text mb-2 ">Marzec 2025</h6> -->
</div>
</div>
</div>
</div>
<!-- <div class="d-flex justify-content-center g-1">
<div class="col-auto mx-auto"></div>
</div> -->
<div class="row gx-3">
<!-- <div class="col-auto"> -->
<BarChartComponent />
<!-- </div> -->
</div>
</div>
</template>
<script setup>
</script>
import BarChartComponent from '@/components/BarChartComponent.vue';
</script>
<style scoped>
.bg-left {
background: rgb(25, 135, 84);
}
.text-left {
color: rgb(25, 135, 84);
}
.text-left-light {
color: rgb(253, 126, 20);
}
.bg-mid {
background: rgb(202, 101, 16);
}
.text-mid {
color: rgb(202, 101, 16);
}
.text-mid-light {
color: rgb(253, 126, 20);
}
.bg-right {
background: rgb(10, 162, 192);
}
.text-right {
color: rgb(10, 162, 192);
}
.text-right-light {
color: rgb(253, 126, 20);
}
</style>