colour

pages/graph.html

@@ -47,8 +47,8 @@
         <h2>Gráficos</h2>
         <div class="row d-flex justify-content-center">
             <div class="col-md-8">
-                <canvas id="snapshot" width="400" height="400"
-                    @vue:mounted="createMultiLineGraph($el, datos.snapshots)">
+                <div id="snapshot" width="400" height="400" @vue:mounted="createMultiLineGraph($el, datos.snapshots)">
+                </div>
             </div>
             <div class="col-md-8">
                 <div id="calificaciones" width="400" height="400" @vue:mounted="createGraph($el,
@@ -109,13 +109,15 @@
                 'rgba(153, 102, 255, 0.7)', // Purple
                 'rgba(201, 203, 207, 0.7)', // Gray
             ];
+            const series =  data.map((datum, index) => ({
+                    name: labels[index], // Assuming each label corresponds to a course
+                    data: datum,
+                    colors: colors[i],
+                }));
+
+                console.log(series);
             const options = {
-                series: [{
-                    data: data.map((data, index, array) => ({
-                        ...data,
-                        fillColor: colors[array.length % index]
-                    })),
-                }],
+                series: [{data, labels, colors}],
                 chart: {
                     type: 'bar',
                     height: 350
@@ -145,40 +147,54 @@
 
         createMultiLineGraph($el, snapshots) {
             const labels = snapshots.map(snapshot => snapshot.fecha);
-            const datasets = snapshots[0].calificaciones.map(calificacion => {
+            const series = snapshots[0].calificaciones.map(calificacion => {
                 return {
-                    label: calificacion.course_name,
-                    data: snapshots.map(snapshot => snapshot.calificaciones.find(c => c.course_name === calificacion.course_name).calificación_final),
-                    fill: false,
-                    // borderColor: borderColor.slice(0, snapshots[0].calificaciones.length),
-                    tension: 0.1,
-                }
+                    name: calificacion.course_name,
+                    data: snapshots.map(snapshot => snapshot.calificaciones.find(c => c.course_name === calificacion.course_name).calificación_final)
+                };
             });
 
-
-
-            const ctx = $el.getContext('2d');
-            const multiLineChart = new Chart(ctx, {
-                type: 'line',
-                data: {
-                    labels: labels, // Las fechas de tus snapshots
-                    datasets: datasets, // Un array de objetos, cada uno representando una materia
+            const options = {
+                chart: {
+                    type: 'line',
+                    height: 'auto'
+                },
+                series: series,
+                xaxis: {
+                    categories: labels
                 },
-                options: {
-                    scales: {
-                        y: {
-                            beginAtZero: true,
-                            max: 1, // Asumiendo que las calificaciones están normalizadas entre 0 y 1
+                yaxis: {
+                    min: 0,
+                    max: 1, // Assuming scores are normalized between 0 and 1
+                    tickAmount: 5, // Adjust tick amount as needed
+                    labels: {
+                        formatter: function (val) {
+                            return val.toFixed(2); // Adjust the number of decimal places as needed
                         }
-                    },
-                    plugins: {
-                        title: {
-                            display: true,
-                            text: 'Calificaciones por Materia a lo largo del Tiempo',
-                        },
-                    },
+                    }
+                },
+                title: {
+                    text: 'Calificaciones por Materia a lo largo del Tiempo',
+                    align: 'center'
+                },
+                stroke: {
+                    width: 2, // Line thickness
+                    curve: 'smooth' // 'straight' or 'smooth'
+                },
+                fill: {
+                    opacity: 1,
+                },
+                tooltip: {
+                    y: {
+                        formatter: function (val) {
+                            return val.toFixed(2); // Adjust the number of decimal places as needed
+                        }
+                    }
                 }
-            });
+            };
+
+            var chart = new ApexCharts($el, options);
+            chart.render();
         },
         async fetchDatos() {
             if (this.filter.username == null) return;