update entra id

2025-05-13 15:03:09 +02:00
parent 6752d3515f
commit 2a96d24de7
44 changed files with 3835 additions and 1856 deletions
@@ -0,0 +1,126 @@
+import { generatePieTable } from "../utils/tableGenerator.js";
+
+export function renderPhasePieChart(chartData, containerId, tableContainerId) {
+    // Pulizia del contenitore del grafico
+    const chartContainer = document.querySelector(`#${containerId}`);
+    if (chartContainer) {
+        chartContainer.innerHTML = "";
+    } else {
+        console.error(`Contenitore del grafico non trovato: #${containerId}`);
+        return;
+    }
+
+    // Estrai i dati per il grafico a torta
+    const phaseData = chartData || [];
+
+    // Validazione dei dati
+    if (!Array.isArray(phaseData) || phaseData.length === 0) {
+        chartContainer.innerHTML =
+            '<p class="text-center text-muted">No data available for Products Distribution by Phase.</p>';
+        const tableContainer = document.querySelector(`#${tableContainerId}`);
+        if (tableContainer) {
+            tableContainer.innerHTML =
+                '<p class="text-center text-muted">No data available.</p>';
+        }
+        return;
+    }
+
+    const labels = phaseData.map((item) => item.phase || "Unknown");
+    const series = phaseData.map((item) => {
+        const count = parseInt(item.totalProducts, 10);
+        return isNaN(count) ? 0 : count;
+    });
+
+    // Verifica se ci sono dati validi da visualizzare
+    const hasValidData = series.some((value) => value > 0);
+
+    if (!hasValidData) {
+        chartContainer.innerHTML =
+            '<p class="text-center text-muted">No valid data to display.</p>';
+        const tableContainer = document.querySelector(`#${tableContainerId}`);
+        if (tableContainer) {
+            tableContainer.innerHTML =
+                '<p class="text-center text-muted">No valid data to display.</p>';
+        }
+        return;
+    }
+
+    // Configurazione del grafico a torta
+    const options = {
+        series: series,
+        chart: {
+            type: "pie",
+            height: 350,
+            toolbar: {
+                show: true,
+                tools: {
+                    download: true,
+                    selection: false,
+                    zoom: false,
+                    zoomin: false,
+                    zoomout: false,
+                    pan: false,
+                    reset: false,
+                },
+            },
+        },
+        labels: labels,
+        colors: [
+            "#FF4560",
+            "#008FFB",
+            "#00E396",
+            "#FEB019",
+            "#FF66FF",
+            "#775DD0",
+        ],
+        responsive: [
+            {
+                breakpoint: 480,
+                options: {
+                    chart: {
+                        width: 200,
+                    },
+                    legend: {
+                        position: "bottom",
+                    },
+                },
+            },
+        ],
+        tooltip: {
+            y: {
+                formatter: function (val) {
+                    return val + " products";
+                },
+            },
+        },
+    };
+
+    // Render del grafico
+    const chart = new ApexCharts(chartContainer, options);
+    chart.render();
+
+    // Forza un aggiornamento del grafico dopo un breve ritardo
+    setTimeout(() => {
+        chart.updateOptions({});
+    }, 100);
+
+    // Genera la tabella usando la funzione esistente
+    const tableHTML = generatePieTable(labels, series);
+
+    // Riprova a trovare il contenitore della tabella con un ritardo
+    const renderTable = () => {
+        const tableContainer = document.querySelector(`#${tableContainerId}`);
+        if (tableContainer) {
+            tableContainer.innerHTML = tableHTML;
+            tableContainer.style.display = "block"; // Forza la visibilità
+        } else {
+            console.error(
+                `Contenitore della tabella non trovato: #${tableContainerId}`,
+            );
+        }
+    };
+
+    // Prova immediatamente e riprova dopo un breve ritardo
+    renderTable();
+    setTimeout(renderTable, 100);
+}