adcfi/pages/graph.html

<form action="/" method="post">
    <input type="hidden" name="page" value="menu">
    <button class="btn btn-primary mb-4">
        <i class="fas fa-arrow-left"></i> Regresar
    </button>
</form>
<main class="container" @vue:mounted="mounted">
    <fieldset class="mb-4">
        <legend v-if="alumno_y_clave">
            {{ alumno_y_clave }}
        </legend>
        <legend v-else>
            Gráficos
        </legend>
        <form>
            <div class="row mb-3 form-box">
                <label for="alumno.grupo" class="col-sm-1 col-form-label form-group barra">Grupo</label>
                <div class="col-sm-10">
                    <select name="alumno.grupo" id="alumno.grupo" class="form-control col-form-label"
                        v-model="filter.grupo">
                        <option :value="null">Todos los grupos</option>
                        <option v-for="alumno in alumnos.filter(alumno => alumno.grupo)" :value="alumno.grupo">
                            {{ alumno.grupo }}
                        </option>
                    </select>
                </div>
            </div>
            <div class="row mb-3 form-box">
                <label for="alumno" class="col-sm-1 col-form-label form-group barra">Alumno</label>
                <div class="col-sm-10">
                    <input type="item.type" name="item.name" list="item.name" id="alumno"
                        class="form-control col-form-label" @input="fetchDatos" v-model="filter.username">
                    <datalist id="item.name">
                        <option v-for="alumno in alumnos_por_grupo" :value="alumno.username">
                            {{ alumno.nombre }}
                        </option>
                    </datalist>
                </div>
            </div>
            <!-- <button type="reset" class="btn btn-danger btn-sm">
                <i class="fas fa-eraser"></i>
            </button> -->
        </form>
    </fieldset>
    <section v-if="datos != null">
        <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>
            <div class="col-md-8">
                <canvas id="calificaciones" width="400" height="400" @vue:mounted="createGraph($el,
                    datos.calificaciones.map(calificacion => calificacion.course_name),
                    datos.calificaciones.map(calificacion => calificacion.calificación_final),
                    'bar', 'Calificaciones')">
            </div>

        </div>
    </section>
</main>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const filter = PetiteVue.reactive({
        grupo: null,
        username: null,
    });

    const graph = PetiteVue.reactive({
        calificaciones: null,
        snapshot: null,
    })

    PetiteVue.createApp({
        store,
        filter,
        graph,
        alumnos: [], // schema: { grupo: string, alumnos: Array<{ nombre: string, username: string }> }
        get alumnos_por_grupo() { // returns Array<{ nombre: string, username: string }>
            if (this.filter.grupo)
                return this.alumnos.find(alumno => alumno.grupo === this.filter.grupo).alumnos;

            return this.alumnos.flatMap(alumno => alumno.alumnos);
        },
        get alumno_y_clave() { // returns string: (username) nombre
            if (this.filter.username == null) return null;
            const alumno = this.alumnos_por_grupo.find(alumno => alumno.username === this.filter.username);
            return alumno ? `(${alumno.username}) ${alumno.nombre}` : null;
        },
        datos: null,
        async mounted() {
            store.loading = true;
            const response = await fetch('fetch/alumnos.php');
            const data = await response.json();
            this.alumnos = data;
            store.loading = false;
        },
        createGraph($el, labels, data) {
            const colors = [
                'rgba(54, 162, 235, 0.7)', // Blue
                'rgba(255, 99, 132, 0.7)', // Red
                'rgba(255, 159, 64, 0.7)', // Orange
                'rgba(255, 206, 86, 0.7)', // Yellow
                'rgba(75, 192, 192, 0.7)', // Green
                'rgba(153, 102, 255, 0.7)', // Purple
                'rgba(201, 203, 207, 0.7)', // gray
            ]
            var options = {
                
                series: [{
                    data: data.map((d, index) => {
                        return {
                            x: labels[index],
                            y: d,
                            fillColor: colors[colors.length % index]
                        }
                    })
                }],
                chart: {
                    type: 'bar',
                    height: 350
                },
                plotOptions: {
                    bar: {
                        borderRadius: 4,
                        distributed: true // This will apply individual colors to each bar
                    }
                },
                dataLabels: {
                    enabled: false
                },
                xaxis: {
                    categories: labels,
                },
                yaxis: {
                    min: 0,
                    max: 1 // Ensures y-axis scales to a max of 1
                }
            };

            var chart = new ApexCharts($el, options);
            chart.render();
        },

        createMultiLineGraph($el, snapshots) {
            const labels = snapshots.map(snapshot => snapshot.fecha);
            const datasets = 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,
                }
            });



            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
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 1, // Asumiendo que las calificaciones están normalizadas entre 0 y 1
                        }
                    },
                    plugins: {
                        title: {
                            display: true,
                            text: 'Calificaciones por Materia a lo largo del Tiempo',
                        },
                    },
                }
            });
        },
        async fetchDatos() {
            if (this.filter.username == null) return;
            if (this.alumnos_por_grupo.find(alumno => alumno.username === this.filter.username) == null) return;
            store.loading = true;
            this.datos = null;
            // params POST (formadata [username])
            const params = new FormData();
            params.append('username', this.filter.username);

            const response = await fetch('fetch/calificaciones.php', {
                method: 'POST',
                body: params,
            });
            const data = await response.json();
            this.datos = data;
            store.loading = false;

            /* this.createGraph(); */
        }
    }).mount()
</script>