Differenze

Queste sono le differenze tra la revisione selezionata e la versione attuale della pagina.

--- dashboard:test_report_2018-224_semplice [2025/07/04 22:03] – creata admin
+++ dashboard:test_report_2018-224_semplice [2025/07/04 22:05] (versione attuale) – eliminata admin
@@ Linea 1: / Linea 1: @@
-<!DOCTYPE html>
-<html lang="it">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Control Chart - TIN ASST Lecco (Centro 297)</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
-    <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            margin: 0;
-            padding: 20px;
-            min-height: 100vh;
-        }
-        .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            background: rgba(255, 255, 255, 0.95);
-            border-radius: 20px;
-            padding: 30px;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-            backdrop-filter: blur(10px);
-        }
-        .header {
-            text-align: center;
-            margin-bottom: 40px;
-            color: #2c3e50;
-        }
-        .header h1 {
-            font-size: 2.5em;
-            margin: 0;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
-            background: linear-gradient(45deg, #667eea, #764ba2);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .header p {
-            font-size: 1.2em;
-            margin: 10px 0 0 0;
-            color: #7f8c8d;
-        }
-        .charts-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
-            gap: 30px;
-            margin-top: 30px;
-        }
-        .chart-container {
-            background: white;
-            border-radius: 15px;
-            padding: 25px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            border: 2px solid transparent;
-            background-clip: padding-box;
-        }
-        .chart-container:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
-            border-color: #667eea;
-        }
-        .chart-title {
-            font-size: 1.3em;
-            font-weight: bold;
-            text-align: center;
-            margin-bottom: 20px;
-            color: #2c3e50;
-            padding-bottom: 10px;
-            border-bottom: 3px solid #ecf0f1;
-        }
-        .current-value {
-            text-align: center;
-            font-size: 2em;
-            font-weight: bold;
-            margin-bottom: 15px;
-            padding: 10px;
-            border-radius: 10px;
-            background: linear-gradient(45deg, #f8f9fa, #e9ecef);
-            display: none;
-        }
-        .value-good {
-            color: #27ae60;
-            background: linear-gradient(45deg, #d4edda, #c3e6cb);
-        }
-        .value-warning {
-            color: #f39c12;
-            background: linear-gradient(45deg, #fff3cd, #ffeaa7);
-        }
-        .value-danger {
-            color: #e74c3c;
-            background: linear-gradient(45deg, #f8d7da, #f5c6cb);
-        }
-        .chart-canvas {
-            height: 300px !important;
-        }
-        .legend {
-            display: flex;
-            justify-content: center;
-            gap: 20px;
-            margin-top: 15px;
-            flex-wrap: wrap;
-        }
-        .legend-item {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            font-size: 0.9em;
-            padding: 5px 10px;
-            border-radius: 20px;
-            background: #f8f9fa;
-        }
-        .legend-color {
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <h1>Control Chart - KPI Clinici</h1>
-            <p>TIN ASST Lecco (Centro 297) - Periodo 2018-2024</p>
-        </div>
-        <div class="charts-grid">
-            <div class="chart-container">
-                <div class="chart-title">Mortalità</div>
-                <canvas id="mortalityChart" class="chart-canvas"></canvas>
-                <div class="legend">
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #e74c3c;"></div>
-                        <span>Valori</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #f39c12;"></div>
-                        <span>Limite Superiore (Q3)</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #27ae60;"></div>
-                        <span>Limite Inferiore (Q1)</span>
-                    </div>
-                </div>
-            </div>
-            <div class="chart-container">
-                <div class="chart-title">Morte o Morbidità</div>
-                <canvas id="deathOrMorbidityChart" class="chart-canvas"></canvas>
-                <div class="legend">
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #8e44ad;"></div>
-                        <span>Valori</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #f39c12;"></div>
-                        <span>Limite Superiore (Q3)</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #27ae60;"></div>
-                        <span>Limite Inferiore (Q1)</span>
-                    </div>
-                </div>
-            </div>
-            <div class="chart-container">
-                <div class="chart-title">Infezioni Tardive</div>
-                <canvas id="anyLateInfectionChart" class="chart-canvas"></canvas>
-                <div class="legend">
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #3498db;"></div>
-                        <span>Valori</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #f39c12;"></div>
-                        <span>Limite Superiore (Q3)</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #27ae60;"></div>
-                        <span>Limite Inferiore (Q1)</span>
-                    </div>
-                </div>
-            </div>
-            <div class="chart-container">
-                <div class="chart-title">Enterocolite Necrotizzante</div>
-                <canvas id="necrotizingEnterocolitis" class="chart-canvas"></canvas>
-                <div class="legend">
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #e67e22;"></div>
-                        <span>Valori</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #f39c12;"></div>
-                        <span>Limite Superiore (Q3)</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #27ae60;"></div>
-                        <span>Limite Inferiore (Q1)</span>
-                    </div>
-                </div>
-            </div>
-            <div class="chart-container">
-                <div class="chart-title">Malattia Polmonare Cronica</div>
-                <canvas id="chronicLungDiseaseChart" class="chart-canvas"></canvas>
-                <div class="legend">
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #9b59b6;"></div>
-                        <span>Valori</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #f39c12;"></div>
-                        <span>Limite Superiore (Q3)</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #27ae60;"></div>
-                        <span>Limite Inferiore (Q1)</span>
-                    </div>
-                </div>
-            </div>
-            <div class="chart-container">
-                <div class="chart-title">Pneumotorace</div>
-                <canvas id="pneumothoraxChart" class="chart-canvas"></canvas>
-                <div class="legend">
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #1abc9c;"></div>
-                        <span>Valori</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #f39c12;"></div>
-                        <span>Limite Superiore (Q3)</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #27ae60;"></div>
-                        <span>Limite Inferiore (Q1)</span>
-                    </div>
-                </div>
-            </div>
-            <div class="chart-container">
-                <div class="chart-title">Emorragia Intraventricolare Grave</div>
-                <canvas id="severeIVHChart" class="chart-canvas"></canvas>
-                <div class="legend">
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #e74c3c;"></div>
-                        <span>Valori</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #f39c12;"></div>
-                        <span>Limite Superiore (Q3)</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #27ae60;"></div>
-                        <span>Limite Inferiore (Q1)</span>
-                    </div>
-                </div>
-            </div>
-            <div class="chart-container">
-                <div class="chart-title">Leucomalacia Periventricolare Cistica</div>
-                <canvas id="cysticPVLChart" class="chart-canvas"></canvas>
-                <div class="legend">
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #34495e;"></div>
-                        <span>Valori</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #f39c12;"></div>
-                        <span>Limite Superiore (Q3)</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #27ae60;"></div>
-                        <span>Limite Inferiore (Q1)</span>
-                    </div>
-                </div>
-            </div>
-            <div class="chart-container">
-                <div class="chart-title">Retinopatia del Prematuro Grave</div>
-                <canvas id="severeROPChart" class="chart-canvas"></canvas>
-                <div class="legend">
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #2ecc71;"></div>
-                        <span>Valori</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #f39c12;"></div>
-                        <span>Limite Superiore (Q3)</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #27ae60;"></div>
-                        <span>Limite Inferiore (Q1)</span>
-                    </div>
-                </div>
-            </div>
-            <div class="chart-container">
-                <div class="chart-title">Latte Materno</div>
-                <canvas id="anyHumanMilkChart" class="chart-canvas"></canvas>
-                <div class="legend">
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #f1c40f;"></div>
-                        <span>Valori</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #f39c12;"></div>
-                        <span>Limite Superiore (Q3)</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color" style="background-color: #27ae60;"></div>
-                        <span>Limite Inferiore (Q1)</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <script>
-        // Dati per i grafici
-        const data = {
-            years: [2018, 2019, 2020, 2021, 2022, 2023, 2024],
-            mortality: {
-                values: [0.0, 3.8, 6.1, 0.0, 10.3, 6.9, 2.9],
-                q1: 5.7,
-                q3: 14.8
-            },
-            deathOrMorbidity: {
-                values: [19.4, 26.9, 27.3, 30.8, 34.5, 41.4, 35.3],
-                q1: 27.3,
-                q3: 50.0
-            },
-            anyLateInfection: {
-                values: [13.9, 15.4, 18.8, 15.4, 19.4, 11.1, 5.9],
-                q1: 2.9,
-                q3: 13.7
-            },
-            necrotizingEnterocolitis: {
-                values: [5.6, 3.7, 0.0, 0.0, 15.6, 7.1, 14.7],
-                q1: 0.0,
-                q3: 6.7
-            },
-            chronicLungDisease: {
-                values: [6.7, 15.8, 17.2, 19.0, 20.0, 27.3, 11.1],
-                q1: 10.5,
-                q3: 35.3
-            },
-            pneumothorax: {
-                values: [0.0, 0.0, 0.0, 7.7, 0.0, 0.0, 11.8],
-                q1: 0.0,
-                q3: 5.6
-            },
-            severeIVH: {
-                values: [2.9, 7.4, 3.1, 3.8, 3.3, 0.0, 5.9],
-                q1: 0.0,
-                q3: 10.0
-            },
-            cysticPVL: {
-                values: [0.0, 3.7, 0.0, 0.0, 0.0, 7.7, 0.0],
-                q1: 0.0,
-                q3: 3.3
-            },
-            severeROP: {
-                values: [2.8, 0.0, 3.7, 0.0, 0.0, 0.0, 0.0],
-                q1: 0.0,
-                q3: 7.1
-            },
-            anyHumanMilk: {
-                values: [66.7, 77.3, 71.4, 61.5, 52.0, 52.0, 61.3],
-                q1: 47.8,
-                q3: 78.9
-            }
-        };
-        // Script corretto senza riferimenti ai valori eliminati
-        // Funzione per creare i grafici
-        function createChart(canvasId, chartData, color, title) {
-            const ctx = document.getElementById(canvasId).getContext('2d');
-            const upperLimit = Array(data.years.length).fill(chartData.q3);
-            const lowerLimit = Array(data.years.length).fill(chartData.q1);
-            new Chart(ctx, {
-                type: 'line',
-                data: {
-                    labels: data.years,
-                    datasets: [
-                        {
-                            label: title,
-                            data: chartData.values,
-                            borderColor: color,
-                            backgroundColor: color + '20',
-                            borderWidth: 3,
-                            pointBackgroundColor: color,
-                            pointBorderColor: '#fff',
-                            pointBorderWidth: 2,
-                            pointRadius: 6,
-                            pointHoverRadius: 8,
-                            fill: false,
-                            tension: 0
-                        },
-                        {
-                            label: 'Limite Superiore (Q3)',
-                            data: upperLimit,
-                            borderColor: '#f39c12',
-                            backgroundColor: 'transparent',
-                            borderWidth: 2,
-                            borderDash: [5, 5],
-                            pointRadius: 0,
-                            fill: false
-                        },
-                        {
-                            label: 'Limite Inferiore (Q1)',
-                            data: lowerLimit,
-                            borderColor: '#27ae60',
-                            backgroundColor: 'transparent',
-                            borderWidth: 2,
-                            borderDash: [5, 5],
-                            pointRadius: 0,
-                            fill: false
-                        }
-                    ]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: {
-                            display: false
-                        },
-                        tooltip: {
-                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
-                            titleColor: 'white',
-                            bodyColor: 'white',
-                            borderColor: color,
-                            borderWidth: 1,
-                            cornerRadius: 8,
-                            callbacks: {
-                                label: function(context) {
-                                    return context.dataset.label + ': ' + context.parsed.y.toFixed(1) + '%';
-                                }
-                            }
-                        }
-                    },
-                    scales: {
-                        x: {
-                            grid: {
-                                color: 'rgba(0, 0, 0, 0.1)',
-                                drawBorder: false
-                            },
-                            ticks: {
-                                color: '#666',
-                                font: {
-                                    size: 12,
-                                    weight: 'bold'
-                                }
-                            }
-                        },
-                        y: {
-                            beginAtZero: true,
-                            grid: {
-                                color: 'rgba(0, 0, 0, 0.1)',
-                                drawBorder: false
-                            },
-                            ticks: {
-                                color: '#666',
-                                font: {
-                                    size: 12
-                                },
-                                callback: function(value) {
-                                    return value + '%';
-                                }
-                            }
-                        }
-                    },
-                    elements: {
-                        line: {
-                            tension: 0
-                        }
-                    },
-                    interaction: {
-                        intersect: false,
-                        mode: 'index'
-                    }
-                }
-            });
-        }
-        // Creazione di tutti i grafici
-        createChart('mortalityChart', data.mortality, '#e74c3c', 'Mortalità');
-        createChart('deathOrMorbidityChart', data.deathOrMorbidity, '#8e44ad', 'Morte o Morbidità');
-        createChart('anyLateInfectionChart', data.anyLateInfection, '#3498db', 'Infezioni Tardive');
-        createChart('necrotizingEnterocolitis', data.necrotizingEnterocolitis, '#e67e22', 'Enterocolite Necrotizzante');
-        createChart('chronicLungDiseaseChart', data.chronicLungDisease, '#9b59b6', 'Malattia Polmonare Cronica');
-        createChart('pneumothoraxChart', data.pneumothorax, '#1abc9c', 'Pneumotorace');
-        createChart('severeIVHChart', data.severeIVH, '#e74c3c', 'Emorragia Intraventricolare Grave');
-        createChart('cysticPVLChart', data.cysticPVL, '#34495e', 'Leucomalacia Periventricolare Cistica');
-        createChart('severeROPChart', data.severeROP, '#2ecc71', 'Retinopatia del Prematuro Grave');
-        createChart('anyHumanMilkChart', data.anyHumanMilk, '#f1c40f', 'Latte Materno');
-    </script>
-</body>
-</html>