127 lines
3.8 KiB
JavaScript
127 lines
3.8 KiB
JavaScript
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);
|
|
}
|