forked from TDTP/admin_transporte_frontend
mejora de aspecto de grafico
Francisco Sandoval
parent
ee4051e7ef
commit
ab94efc77d
|
|
@ -6,6 +6,7 @@
|
|||
import { routes } from '$/routes/guest.routes'
|
||||
import { Router, Route, createHistory } from 'svelte-navigator'
|
||||
import hashHistory from './hashHistory'
|
||||
// @ts-ignore
|
||||
const history = createHistory(hashHistory())
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
|
||||
|
||||
let triggerEvent = false;
|
||||
// @ts-ignore
|
||||
const history = createHistory(hashHistory())
|
||||
|
||||
onMount(() => {
|
||||
|
|
|
|||
|
|
@ -1,53 +1,55 @@
|
|||
<script>
|
||||
import { getCountBuses } from "$/services/lineas";
|
||||
import { createEventDispatcher, onMount } from "svelte";
|
||||
const dispatch = createEventDispatcher()
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let canvasChart = null;
|
||||
let data = []
|
||||
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)
|
||||
dispatch("loading", true);
|
||||
const result = await getCountBuses();
|
||||
data = result.sort((a, b) =>
|
||||
a.route_short_name < b.route_short_name ? -1 : 1,
|
||||
);
|
||||
|
||||
const resumen = []
|
||||
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;
|
||||
const servicio = row.route_short_name.substring(0, 2);
|
||||
const elem = resumen.find((el) => el.servicio === servicio) || null;
|
||||
if (elem) {
|
||||
elem.count += row.count
|
||||
elem.count += row.count;
|
||||
} else {
|
||||
resumen.push({ servicio, count: row.count })
|
||||
resumen.push({ servicio, count: row.count });
|
||||
}
|
||||
}
|
||||
|
||||
const labels = resumen.map(el => `Servicio ${el.servicio}`)
|
||||
const values = resumen.map(el => el.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 + ((valor + index) * 150)).toString(16)
|
||||
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 + ((valor + index) * 150)).toString(16)
|
||||
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 + ((valor + index) * 150)).toString(16)
|
||||
const color = parseInt(theme.warning.replace("#", "0x"));
|
||||
return "#" + Number(color + index * 150).toString(16);
|
||||
} else {
|
||||
const color = parseInt('0xdee2e6')
|
||||
return '#' + Number(color + ((valor + index) * 150)).toString(16)
|
||||
const color = parseInt("0xdee2e6");
|
||||
return "#" + Number(color + index * 200).toString(16);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
dispatch('loading', false)
|
||||
dispatch("loading", false);
|
||||
|
||||
new Chart(canvasChart, {
|
||||
type: "pie",
|
||||
type: "doughnut",
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
|
|
@ -60,37 +62,37 @@
|
|||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
cutoutPercentage: 65,
|
||||
cutoutPercentage: 50,
|
||||
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 línea</h5>
|
||||
</div>
|
||||
<div class="card-body d-flex">
|
||||
<div class="align-self-center w-100">
|
||||
<div class="py-3">
|
||||
<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="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 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue