mejora de aspecto de grafico

src/layouts/LayoutGuest.svelte

@@ -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>
 

src/layouts/LayoutUser.svelte

@@ -22,6 +22,7 @@
 
 
     let triggerEvent = false;
+    // @ts-ignore
     const history = createHistory(hashHistory())
 
     onMount(() => {

src/pages/site/CantidadBusesLinea.svelte

@@ -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)
+        dispatch("loading", true);
-        const result = await getCountBuses()
+        const result = await getCountBuses();
-        data = result.sort((a,b) => a.route_short_name < b.route_short_name ? -1 : 1)
+        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 servicio = row.route_short_name.substring(0, 2);
-            const elem = resumen.find(el => el.servicio === servicio) || null;
+            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 labels = resumen.map((el) => `Servicio ${el.servicio}`);
-        const values = resumen.map(el => el.count)
+        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'))
+                const color = parseInt(theme.primary.replace("#", "0x"));
-                return '#' + Number(color + ((valor + index) * 150)).toString(16)
+                return "#" + Number(color + index * 50).toString(16);
             } else if (valor === 1) {
-                const color = parseInt(theme.success.replace('#','0x'))
+                const color = parseInt(theme.success.replace("#", "0x"));
-                return '#' + Number(color + ((valor + index) * 150)).toString(16)
+                return "#" + Number(color + index * 100).toString(16);
             } else if (valor === 2) {
-                const color = parseInt(theme.warning.replace('#','0x'))
+                const color = parseInt(theme.warning.replace("#", "0x"));
-                return '#' + Number(color + ((valor + index) * 150)).toString(16)
+                return "#" + Number(color + index * 150).toString(16);
             } else {
-                const color = parseInt('0xdee2e6')
+                const color = parseInt("0xdee2e6");
-                return '#' + Number(color + ((valor + index) * 150)).toString(16)
+                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="card-body">
-        <div class="align-self-center w-100">
+        <div class="row">
-            <div class="py-3">
+            <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;">
+                <div class="table-responsive border" style="max-height: 400px;">
-                <table class="table mb-0 table-hover">
+                    <table class="table mb-0 table-hover">
-                    <tbody>
+                        <tbody>
-                        {#each data as row}
+                            {#each data as row}
-                        <tr>
+                                <tr>
-                            <td>{row.route_short_name}</td>
+                                    <td>{row.route_short_name}</td>
-                            <td class="text-end">{row.count}</td>
+                                    <td class="text-end">{row.count}</td>
-                        </tr>
+                                </tr>
-                        {/each}
+                            {/each}
-                    </tbody>
+                        </tbody>
-                </table>
+                    </table>
+                </div>
             </div>
         </div>
     </div>