diff --git a/package-lock.json b/package-lock.json
index 9fbf9e7..e8c9c45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
{
- "name": "template-laravel-vuejs",
+ "name": "maquetador-graficas",
"lockfileVersion": 3,
"requires": true,
"packages": {
@@ -8,12 +8,14 @@
"@inertiajs/vue3": "^1.0.0-beta.2",
"@soketi/soketi": "^1.6.0",
"@vueuse/core": "^9.6.0",
+ "chart.js": "^4.5.0",
"dotenv": "^16.3.1",
"express": "^4.18.2",
"laravel-echo": "^1.14.2",
"pusher-js": "^7.5.0",
"sweetalert2": "^11.4.8",
"toastr": "^2.1.4",
+ "vue-chartjs": "^5.3.2",
"vue-i18n": "^9.2.2",
"vue-multiselect": "^3.0.0-alpha.2"
},
@@ -523,6 +525,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/@msgpackr-extract/msgpackr-extract-darwin-arm64": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.2.tgz",
@@ -1678,6 +1686,18 @@
"resolved": "https://registry.npmjs.org/charm/-/charm-0.1.2.tgz",
"integrity": "sha512-syedaZ9cPe7r3hoQA9twWYKu5AIyCswN5+szkmPBe9ccdLrj4bYaCnLVPTLd2kgVRc7+zoX4tyPgRnFKCj5YjQ=="
},
+ "node_modules/chart.js": {
+ "version": "4.5.0",
+ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
+ "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@kurkle/color": "^0.3.0"
+ },
+ "engines": {
+ "pnpm": ">=8"
+ }
+ },
"node_modules/chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -5451,6 +5471,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-i18n": {
"version": "9.7.1",
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.7.1.tgz",
diff --git a/package.json b/package.json
index cf5cb41..1778756 100644
--- a/package.json
+++ b/package.json
@@ -22,12 +22,14 @@
"@inertiajs/vue3": "^1.0.0-beta.2",
"@soketi/soketi": "^1.6.0",
"@vueuse/core": "^9.6.0",
+ "chart.js": "^4.5.0",
"dotenv": "^16.3.1",
"express": "^4.18.2",
"laravel-echo": "^1.14.2",
"pusher-js": "^7.5.0",
"sweetalert2": "^11.4.8",
"toastr": "^2.1.4",
+ "vue-chartjs": "^5.3.2",
"vue-i18n": "^9.2.2",
"vue-multiselect": "^3.0.0-alpha.2"
}
diff --git a/resources/js/Components/Dashboard/Charts/Bars.vue b/resources/js/Components/Dashboard/Charts/Bars.vue
new file mode 100644
index 0000000..2c4513a
--- /dev/null
+++ b/resources/js/Components/Dashboard/Charts/Bars.vue
@@ -0,0 +1,34 @@
+
+
+
+
+ La fecha fin debe ser mayor o igual a la fecha inicio.
+
Resumen por unidad administrativa
++ Trámites Abiertos Hoy +
++ {{ + new Intl.NumberFormat().format( + data.procedures_opened_today + ) + }} +
++ Con Movimientos Hoy +
++ {{ + new Intl.NumberFormat().format( + data.procedures_with_movements_today + ) + }} +
+| + Unidad Administrativa + | ++ Abiertos + | ++ Movimientos Hoy + | ++ Cerrados + | ++ Total + | +
|---|---|---|---|---|
|
+
+ {{ administration.name }}
+
+ |
+ + + {{ + new Intl.NumberFormat().format(administration.opened) + }} + + | ++ + {{ + new Intl.NumberFormat().format( + administration.movement_today + ) + }} + + | ++ + {{ + new Intl.NumberFormat().format(administration.closed) + }} + + | +
+
+ {{
+ new Intl.NumberFormat().format(
+ administration.opened + administration.closed
+ )
+ }}
+
+ |
+
|
+ No hay datos disponibles
+ |
+ ||||
| + Procedimiento + | ++ Abiertos + | ++ Movimientos Hoy + | ++ Cerrados + | ++ Total + | +
|---|---|---|---|---|
|
+
+ {{ procedure.name }}
+
+ |
+ + + {{ new Intl.NumberFormat().format(procedure.opened) }} + + | ++ + {{ + new Intl.NumberFormat().format( + procedure.movement_today + ) + }} + + | ++ + {{ new Intl.NumberFormat().format(procedure.closed) }} + + | +
+
+ {{
+ new Intl.NumberFormat().format(
+ procedure.opened + procedure.closed
+ )
+ }}
+
+ |
+
|
+ No hay datos disponibles
+ |
+ ||||
Modo actual: {{ mode }}
++ Reporte generado el {{ new Date().toLocaleString("es-MX") }} +
+