Update web/index.html

web/index.html

@@ -1048,193 +1048,195 @@
             });
 
             function createOrUpdateChart(dates, totalConsultations, positiveCases, negativeCases) {
-                if (areaChartInstance && typeof areaChartInstance.destroy === 'function') {
-                    try {
-                        areaChartInstance.destroy();
-                        areaChartInstance = null;
-                    } catch (error) {
-                        console.log('Error destruyendo grafico anterior:', error);
-                    }
-                }
-
-                const chartElement = document.querySelector("#areaChart");
-                if (!chartElement) {
-                    console.error('Elemento #areaChart no encontrado');
-                    return;
-                }
+    if (areaChartInstance && typeof areaChartInstance.destroy === 'function') {
+        try {
+            areaChartInstance.destroy();
+            areaChartInstance = null;
+        } catch (error) {
+            console.log('Error destruyendo grafico anterior:', error);
+        }
+    }
 
-                chartElement.innerHTML = '';
+    const chartElement = document.querySelector("#areaChart");
+    if (!chartElement) {
+        console.error('Elemento #areaChart no encontrado');
+        return;
+    }
 
-                setTimeout(() => {
-                    try {
-                        const options = {
-                            chart: {
-                                type: 'area',
-                                height: 350,
-                                width: '100%',
-                                toolbar: {
-                                    show: true,
-                                    tools: {
-                                        download: false,
-                                        selection: false,
-                                        zoom: false,
-                                        zoomin: false,
-                                        zoomout: false,
-                                        pan: false,
-                                        reset: false
-                                    }
-                                },
-                                animations: {
-                                    enabled: true,
-                                    easing: 'easeinout',
-                                    speed: 800
-                                },
-                                background: 'transparent'
-                            },
-                            colors: ['#2E93fA', '#FF9800', '#66DA26'],
-                            // Convertir "YYYY-MM-DD" a timestamp UTC mediodia para evitar
-                            // desfases de zona horaria que desplazan el dia al anterior
-                            series: (function() {
-                                function toTs(d) {
-                                    var p = d.split('-').map(Number);
-                                    return Date.UTC(p[0], p[1] - 1, p[2], 12, 0, 0);
-                                }
-                                function toSeries(vals) {
-                                    return dates.map(function(d, i) { return { x: toTs(d), y: vals[i] }; });
-                                }
-                                return [
-                                    { name: 'Total Consultas', data: toSeries(totalConsultations) },
-                                    { name: 'Con Retinopatía',  data: toSeries(positiveCases) },
-                                    { name: 'Sin Retinopatía',  data: toSeries(negativeCases) }
-                                ];
-                            })(),
-                            xaxis: {
-                                type: 'datetime',
-                                labels: {
-                                    datetimeUTC: false,
-                                    datetimeFormatter: {
-                                        year:  'yyyy',
-                                        month: "MMM 'yy",
-                                        day:   'dd/MM',
-                                        hour:  'HH:mm'
-                                    },
-                                    style: {
-                                        fontSize: '12px',
-                                        fontFamily: 'inherit'
-                                    }
-                                },
-                                title: {
-                                    text: 'Fecha',
-                                    style: {
-                                        fontSize: '14px',
-                                        fontFamily: 'inherit'
-                                    }
-                                }
-                            },
-                            yaxis: {
-                                title: {
-                                    text: 'Número de Consultas',
-                                    style: {
-                                        fontSize: '14px',
-                                        fontFamily: 'inherit'
-                                    }
-                                },
-                                min: 0,
-                                tickAmount: Math.max.apply(null, totalConsultations) || 1,
-                                labels: {
-                                    formatter: function(val) { return Math.floor(val); },
-                                    style: {
-                                        fontSize: '12px',
-                                        fontFamily: 'inherit'
-                                    }
-                                }
-                            },
-                            tooltip: {
-                                shared: true,
-                                intersect: false,
-                                x: {
-                                    formatter: function(value) {
-                                        return new Date(value).toLocaleDateString('es-ES', {
-                                            weekday: 'long',
-                                            year: 'numeric',
-                                            month: 'long',
-                                            day: 'numeric'
-                                        });
-                                    }
-                                },
-                                y: {
-                                    formatter: function(value) {
-                                        return value + ' consulta' + (value !== 1 ? 's' : '');
-                                    }
-                                }
-                            },
-                            stroke: {
-                                curve: 'smooth',
-                                width: 2
-                            },
-                            fill: {
-                                type: 'gradient',
-                                gradient: {
-                                    shadeIntensity: 1,
-                                    opacityFrom: 0.7,
-                                    opacityTo: 0.3,
-                                    stops: [0, 90, 100]
-                                }
-                            },
-                            legend: {
-                                position: 'top',
-                                horizontalAlign: 'left',
-                                labels: {
-                                    colors: '#9aa0ac'
-                                }
-                            },
-                            grid: {
-                                borderColor: '#f1f1f1',
-                                strokeDashArray: 4,
-                                xaxis: {
-                                    lines: {
-                                        show: true
-                                    }
-                                },
-                                yaxis: {
-                                    lines: {
-                                        show: true
-                                    }
-                                }
-                            },
-                            dataLabels: {
-                                enabled: false
-                            },
-                            responsive: [{
-                                breakpoint: 768,
-                                options: {
-                                    chart: {
-                                        height: 300
-                                    },
-                                    legend: {
-                                        position: 'bottom'
-                                    }
-                                }
-                            }]
-                        };
-
-                        areaChartInstance = new ApexCharts(chartElement, options);
-
-                        areaChartInstance.render()
-                            .then(() => {
-                                console.log('Gráfico creado exitosamente');
-                            })
-                            .catch((error) => {
-                                console.error('Error renderizando gráfico:', error);
-                                createFallbackChart(chartElement, dates, totalConsultations, positiveCases, negativeCases);
+    chartElement.innerHTML = '';
+
+    setTimeout(() => {
+        try {
+            const options = {
+                chart: {
+                    type: 'area',
+                    height: 350,
+                    width: '100%',
+                    toolbar: {
+                        show: true,
+                        tools: {
+                            download: false,
+                            selection: false,
+                            zoom: false,
+                            zoomin: false,
+                            zoomout: false,
+                            pan: false,
+                            reset: false
+                        }
+                    },
+                    animations: {
+                        enabled: true,
+                        easing: 'easeinout',
+                        speed: 800
+                    },
+                    background: 'transparent'
+                },
+                colors: ['#2E93fA', '#FF9800', '#66DA26'],
+                series: (function() {
+                    function toTs(d) {
+                        var p = d.split('-').map(Number);
+                        return Date.UTC(p[0], p[1] - 1, p[2], 12, 0, 0);
+                    }
+                    function toSeries(vals) {
+                        return dates.map(function(d, i) { return { x: toTs(d), y: vals[i] }; });
+                    }
+                    return [
+                        { name: 'Total Consultas', data: toSeries(totalConsultations) },
+                        { name: 'Con Retinopatía',  data: toSeries(positiveCases) },
+                        { name: 'Sin Retinopatía',  data: toSeries(negativeCases) }
+                    ];
+                })(),
+                xaxis: {
+                    type: 'datetime',
+                    labels: {
+                        datetimeUTC: false,
+                        datetimeFormatter: {
+                            year:  'yyyy',
+                            month: "MMM 'yy",
+                            day:   'dd/MM',
+                            hour:  'HH:mm'
+                        },
+                        style: {
+                            fontSize: '12px',
+                            fontFamily: 'inherit',
+                            colors: '#212529'
+                        }
+                    },
+                    title: {
+                        text: 'Fecha',
+                        style: {
+                            fontSize: '14px',
+                            fontFamily: 'inherit',
+                            color: '#212529'
+                        }
+                    }
+                },
+                yaxis: {
+                    title: {
+                        text: 'Número de Consultas',
+                        style: {
+                            fontSize: '14px',
+                            fontFamily: 'inherit',
+                            color: '#212529'
+                        }
+                    },
+                    min: 0,
+                    tickAmount: Math.max.apply(null, totalConsultations) || 1,
+                    labels: {
+                        formatter: function(val) { return Math.floor(val); },
+                        style: {
+                            fontSize: '12px',
+                            fontFamily: 'inherit',
+                            colors: '#212529'
+                        }
+                    }
+                },
+                tooltip: {
+                    shared: true,
+                    intersect: false,
+                    x: {
+                        formatter: function(value) {
+                            return new Date(value).toLocaleDateString('es-ES', {
+                                weekday: 'long',
+                                year: 'numeric',
+                                month: 'long',
+                                day: 'numeric'
                             });
-
-                    } catch (error) {
-                        console.error('Error creando gráfico:', error);
-                        createFallbackChart(chartElement, dates, totalConsultations, positiveCases, negativeCases);
+                        }
+                    },
+                    y: {
+                        formatter: function(value) {
+                            return value + ' consulta' + (value !== 1 ? 's' : '');
+                        }
                     }
-                }, 100);
-            }
+                },
+                stroke: {
+                    curve: 'smooth',
+                    width: 2
+                },
+                fill: {
+                    type: 'gradient',
+                    gradient: {
+                        shadeIntensity: 1,
+                        opacityFrom: 0.7,
+                        opacityTo: 0.3,
+                        stops: [0, 90, 100]
+                    }
+                },
+                legend: {
+                    position: 'top',
+                    horizontalAlign: 'left',
+                    labels: {
+                        colors: '#9aa0ac'
+                    }
+                },
+                grid: {
+                    borderColor: '#f1f1f1',
+                    strokeDashArray: 4,
+                    xaxis: {
+                        lines: {
+                            show: true
+                        }
+                    },
+                    yaxis: {
+                        lines: {
+                            show: true
+                        }
+                    }
+                },
+                dataLabels: {
+                    enabled: false
+                },
+                responsive: [{
+                    breakpoint: 768,
+                    options: {
+                        chart: {
+                            height: 300
+                        },
+                        legend: {
+                            position: 'bottom'
+                        }
+                    }
+                }]
+            };
+
+            areaChartInstance = new ApexCharts(chartElement, options);
+
+            areaChartInstance.render()
+                .then(() => {
+                    console.log('Gráfico creado exitosamente');
+                })
+                .catch((error) => {
+                    console.error('Error renderizando gráfico:', error);
+                    createFallbackChart(chartElement, dates, totalConsultations, positiveCases, negativeCases);
+                });
+
+        } catch (error) {
+            console.error('Error creando gráfico:', error);
+            createFallbackChart(chartElement, dates, totalConsultations, positiveCases, negativeCases);
+        }
+    }, 100);
+}
 
             function createFallbackChart(chartElement, dates, totalConsultations, positiveCases, negativeCases) {
                 console.log('Creando grafico de respaldo...');