working on chart
This commit is contained in:
@@ -7,7 +7,8 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Odoo Hours</title>
|
<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/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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
44
app/package-lock.json
generated
44
app/package-lock.json
generated
@@ -9,8 +9,10 @@
|
|||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "^5.3.3",
|
"bootstrap": "^5.3.3",
|
||||||
|
"chart.js": "^4.4.8",
|
||||||
"pinia": "^3.0.1",
|
"pinia": "^3.0.1",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
|
"vue-chartjs": "^5.3.2",
|
||||||
"vue-router": "^4.5.0"
|
"vue-router": "^4.5.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@@ -298,14 +300,14 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@babel/helpers": {
|
"node_modules/@babel/helpers": {
|
||||||
"version": "7.26.9",
|
"version": "7.26.10",
|
||||||
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.9.tgz",
|
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.10.tgz",
|
||||||
"integrity": "sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==",
|
"integrity": "sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/template": "^7.26.9",
|
"@babel/template": "^7.26.9",
|
||||||
"@babel/types": "^7.26.9"
|
"@babel/types": "^7.26.10"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=6.9.0"
|
"node": ">=6.9.0"
|
||||||
@@ -476,9 +478,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@babel/types": {
|
"node_modules/@babel/types": {
|
||||||
"version": "7.26.9",
|
"version": "7.26.10",
|
||||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz",
|
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.10.tgz",
|
||||||
"integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==",
|
"integrity": "sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/helper-string-parser": "^7.25.9",
|
"@babel/helper-string-parser": "^7.25.9",
|
||||||
@@ -965,6 +967,12 @@
|
|||||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
"@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": {
|
"node_modules/@polka/url": {
|
||||||
"version": "1.0.0-next.28",
|
"version": "1.0.0-next.28",
|
||||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
|
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
|
||||||
@@ -1631,6 +1639,18 @@
|
|||||||
],
|
],
|
||||||
"license": "CC-BY-4.0"
|
"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": {
|
"node_modules/convert-source-map": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
|
"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": {
|
"node_modules/vue-router": {
|
||||||
"version": "4.5.0",
|
"version": "4.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
|
||||||
|
|||||||
@@ -10,8 +10,10 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "^5.3.3",
|
"bootstrap": "^5.3.3",
|
||||||
|
"chart.js": "^4.4.8",
|
||||||
"pinia": "^3.0.1",
|
"pinia": "^3.0.1",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
|
"vue-chartjs": "^5.3.2",
|
||||||
"vue-router": "^4.5.0"
|
"vue-router": "^4.5.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
89
app/src/components/BarChartComponent.vue
Normal file
89
app/src/components/BarChartComponent.vue
Normal 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>
|
||||||
@@ -114,13 +114,13 @@
|
|||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<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>
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
|
|
||||||
<label for="inputDate" class="form-label">wybierz date:</label>
|
<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>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,169 @@
|
|||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
<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>
|
||||||
Reference in New Issue
Block a user