added charts and fixed analysis component

2024-11-22 11:57:39 +01:00
parent 18735127bb
commit 22c95fa063
12 changed files with 1355 additions and 556 deletions
@@ -641,6 +641,27 @@ include('parsedatachart.php');
                                </div>
                            </div>

+                            <div class="row mt-4">
+                                <!-- Colonna Sinistra per il Grafico a Torta -->
+                                <div class="col-md-6">
+                                    <div class="card">
+                                        <div class="card-body">
+                                            <h5 class="card-title">Products Distribution by Phase</h5>
+                                            <div id="phasePieChart"></div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Colonna Destra (Vuota o per futuri contenuti) -->
+                                <div class="col-md-6">
+                                    <div class="card">
+                                        <div class="card-body">
+                                            <h5 class="card-title">Phase Rating Distribution</h5>
+                                            <div id="phaseBarChart"></div> <!-- Contenitore per il grafico -->
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>


                        </div>
@@ -1273,6 +1294,144 @@ include('parsedatachart.php');
                        alert('Error retrieving data.');
                    }
                });
+
+                function renderPhasePieChart(phaseData) {
+                    const labels = phaseData.map(item => item.phase);
+                    const values = phaseData.map(item => parseInt(item.totalProducts, 10));
+
+                    const options = {
+                        series: values,
+                        chart: {
+                            type: 'pie',
+                            height: 350
+                        },
+                        labels: labels,
+                        responsive: [{
+                            breakpoint: 480,
+                            options: {
+                                chart: {
+                                    width: 300
+                                },
+                                legend: {
+                                    position: 'bottom'
+                                }
+                            }
+                        }],
+                        colors: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#C9CB8D'], // Custom Colors
+                        legend: {
+                            position: 'bottom'
+                        }
+                    };
+
+                    const chart = new ApexCharts(document.querySelector("#phasePieChart"), options);
+                    chart.render();
+                }
+
+                // Funzione per il grafico a barre (Phase Ratings)
+                function renderPhaseBarChart(phaseRatingsData) {
+                    const labels = phaseRatingsData.map(item => item.phase); // Etichette per le fasi
+                    const passCounts = phaseRatingsData.map(item => parseInt(item.passCount, 10));
+                    const failCounts = phaseRatingsData.map(item => parseInt(item.failCount, 10));
+                    const otherCounts = phaseRatingsData.map(item => parseInt(item.otherCount, 10));
+
+                    const options = {
+                        series: [{
+                                name: 'Pass',
+                                data: passCounts
+                            },
+                            {
+                                name: 'Fail',
+                                data: failCounts
+                            },
+                            {
+                                name: 'Other',
+                                data: otherCounts
+                            }
+                        ],
+                        chart: {
+                            type: 'bar',
+                            height: 400,
+                            stacked: true, // Barre impilate
+                            horizontal: true
+                        },
+                        xaxis: {
+                            categories: labels, // Fasi come categorie
+                            title: {
+                                text: 'Ratings Count' // Titolo per l'asse X
+                            }
+                        },
+                        colors: ['#28A745', '#FF4D4D', '#FFA500'], // Colori per Pass, Fail e Other
+                        plotOptions: {
+                            bar: {
+                                horizontal: true,
+                                dataLabels: {
+                                    enabled: false // Disabilitiamo le etichette per ogni barra
+                                }
+                            }
+                        },
+                        legend: {
+                            position: 'top', // Posizioniamo la leggenda sopra il grafico
+                        },
+                        tooltip: {
+                            y: {
+                                formatter: val => `${val} reports` // Tooltip personalizzato
+                            }
+                        }
+                    };
+
+                    $('#phaseBarChart').html(''); // Reset grafico esistente
+                    const chart = new ApexCharts(document.querySelector("#phaseBarChart"), options);
+                    chart.render();
+                }
+
+
+
+                // Chiama questa funzione dopo aver recuperato i dati tramite AJAX
+                $(document).ready(function() {
+                    updateData(); // Aggiorna i dati iniziali
+                });
+
+                function updateData() {
+                    $.ajax({
+                        url: 'parsedatachart.php', // Endpoint per ottenere i dati
+                        method: 'POST',
+                        data: {
+                            startDate: $('#startDate').val(),
+                            endDate: $('#endDate').val(),
+                            supplier: $('#supplierFilter').val(),
+                            productsRefnumber: $('#productsRefnumber').val(),
+                            productsSeason: $('#productsSeason').val(),
+                            ageRange: $('#ageRange').val(),
+                            reportsLabName: $('#reportsLabName').val(),
+                            reportsTestType: $('#reportsTestType').val(),
+                            reportsNumberLab: $('#reportsNumberLab').val(),
+                        },
+                        success: function(response) {
+                            const data = JSON.parse(response);
+
+                            // Aggiorna il grafico della distribuzione per fase
+                            if (data.phaseData && data.phaseData.length > 0) {
+                                renderPhasePieChart(data.phaseData);
+                            } else {
+                                console.log('No phase data available.');
+                            }
+
+                            // Aggiorna il grafico delle valutazioni per fase (Bar Chart)
+                            if (data.phaseRatingsData && data.phaseRatingsData.length > 0) {
+                                renderPhaseBarChart(data.phaseRatingsData);
+                            } else {
+                                console.log('No phase ratings data available for Bar Chart.');
+                                $('#phaseBarChart').html('<p>No data available</p>');
+                            }
+                        },
+                        error: function() {
+                            console.log('Error retrieving data.');
+                        }
+                    });
+                }
+
+
+
            }