estadisticas

Front/src/Componentes/Estadisticas/fChart.svelte

@@ -1,49 +1,59 @@
 <script>
-    import { onMount } from "svelte";
-    import {
-      Chart,
-      registerables
-    } from "chart.js";
-  
-    Chart.register(...registerables);
-  
-    export let data;
-  
-    let chartCanvas;
-    let chartInstance;
-  
-    onMount(() => {
-      if (chartCanvas) {
-        chartInstance = new Chart(chartCanvas, {
-          type: "bar",
-          data: data,
-          options: {
-            responsive: true,
-            plugins: {
-              legend: {
-                position: "top"
-              },
-              tooltip: {
-                enabled: true
-              }
-            },
-            scales: {
-              y: {
-                beginAtZero: true
-              }
-            }
-          }
-        });
-      }
-  
-      return () => {
-        if (chartInstance) {
-          chartInstance.destroy();
-        }
-      };
+  import { onDestroy, onMount } from 'svelte';
+  import Chart from 'chart.js/auto';
+
+  let {chartData, typec='bar'} = $props();
+
+  let chartContainer;
+  let instance;
+
+
+  onDestroy(() => {
+    if (instance) {
+      instance.destroy(); 
+    }
+  });
+
+  const createChart = () => {
+    if (instance) {
+      instance.destroy();
+    }
+    
+    const ctx = chartContainer.getContext('2d');
+    instance = new Chart(ctx, {
+      type: typec,
+      data: {
+        labels: chartData.labels,
+        datasets: chartData.datasets.map(dataset => ({
+          label: dataset.label,
+          data: dataset.data.map(x => String(x)), 
+          borderWidth: dataset.borderWidth
+        }))
+      },
+      options: {
+        responsive: true,
+        plugins: {
+          legend: {
+            position: 'top',
+          },
+        },
+        scales: {
+          x: {
+            beginAtZero: true,
+          },
+          y: {
+            beginAtZero: true,
+          },
+        },
+      },
     });
-  </script>
-  
-  <div class="card card-body">
-    <canvas bind:this={chartCanvas}></canvas>
-  </div>
+  };
+  onMount(createChart);
+  $effect(createChart); 
+
+</script>
+
+<div class="card card-body">
+  <canvas bind:this={chartContainer}></canvas>
+</div>
+