forked from TDTP/admin_transporte_frontend
103 lines
3.5 KiB
Svelte
103 lines
3.5 KiB
Svelte
<script>
|
|
import { getCountBuses } from "$/services/lineas";
|
|
import { createEventDispatcher, onMount } from "svelte";
|
|
const dispatch = createEventDispatcher();
|
|
|
|
let canvasChart = null;
|
|
let data = [];
|
|
|
|
onMount(async () => {
|
|
// @ts-ignore
|
|
const { Chart, theme } = globalThis || {};
|
|
|
|
dispatch("loading", true);
|
|
const result = await getCountBuses();
|
|
data = result.sort((a, b) =>
|
|
a.route_short_name < b.route_short_name ? -1 : 1,
|
|
);
|
|
|
|
const resumen = [];
|
|
for (const row of data) {
|
|
const servicio = row.route_short_name.substring(0, 2);
|
|
const elem = resumen.find((el) => el.servicio === servicio) || null;
|
|
if (elem) {
|
|
elem.count += row.count;
|
|
} else {
|
|
resumen.push({ servicio, count: row.count });
|
|
}
|
|
}
|
|
|
|
const labels = resumen.map((el) => `Servicio ${el.servicio}`);
|
|
const values = resumen.map((el) => el.count);
|
|
const colors = resumen.map((el, index) => {
|
|
const valor = index % 4;
|
|
if (valor === 0) {
|
|
const color = parseInt(theme.primary.replace("#", "0x"));
|
|
return "#" + Number(color + index * 50).toString(16);
|
|
} else if (valor === 1) {
|
|
const color = parseInt(theme.success.replace("#", "0x"));
|
|
return "#" + Number(color + index * 100).toString(16);
|
|
} else if (valor === 2) {
|
|
const color = parseInt(theme.warning.replace("#", "0x"));
|
|
return "#" + Number(color + index * 150).toString(16);
|
|
} else {
|
|
const color = parseInt("0xdee2e6");
|
|
return "#" + Number(color + index * 200).toString(16);
|
|
}
|
|
});
|
|
|
|
dispatch("loading", false);
|
|
|
|
new Chart(canvasChart, {
|
|
type: "doughnut",
|
|
data: {
|
|
labels,
|
|
datasets: [
|
|
{
|
|
data: values,
|
|
backgroundColor: colors,
|
|
// borderColor: "transparent",
|
|
borderWidth: 2,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
aspectRatio: 1,
|
|
maintainAspectRatio: true,
|
|
cutoutPercentage: 30,
|
|
legend: { display: false },
|
|
},
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<div class="card flex-fill w-100">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">Buses en recorrido por Ruta</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-6 d-flex align-items-center">
|
|
<div class="chart chart-sm">
|
|
<canvas bind:this={canvasChart}></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="table-responsive border" style="max-height: 400px;">
|
|
<table class="table mb-0 table-hover">
|
|
<tbody>
|
|
{#each data as row}
|
|
<tr>
|
|
<td>{row.route_short_name}</td>
|
|
<td class="text-end">{row.count}</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|