118 lines
3.2 KiB
JavaScript
118 lines
3.2 KiB
JavaScript
import { generatePieTable } from "../utils/tableGenerator.js";
|
|
|
|
export function renderAnalysisDistributionChart(
|
|
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 analysisDistribution = chartData || [];
|
|
const labels = analysisDistribution.map((item) => item.analysisName);
|
|
const series = analysisDistribution.map((item) => {
|
|
const value = parseInt(item.totalTests);
|
|
return isNaN(value) || value < 0 ? 0 : value;
|
|
});
|
|
|
|
// 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>';
|
|
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",
|
|
"#546E7A",
|
|
"#26A69A",
|
|
"#D81B60",
|
|
"#F06292",
|
|
"#4FC3F7",
|
|
"#AED581",
|
|
"#FF8A65",
|
|
"#A1887F",
|
|
"#E0E0E0",
|
|
"#90A4AE",
|
|
"#FFCA28",
|
|
"#78909C",
|
|
"#D4E157",
|
|
"#F4FF81",
|
|
],
|
|
responsive: [
|
|
{
|
|
breakpoint: 480,
|
|
options: {
|
|
chart: {
|
|
width: 200,
|
|
},
|
|
legend: {
|
|
position: "bottom",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
tooltip: {
|
|
y: {
|
|
formatter: function (val) {
|
|
return val + " tests";
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
// 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);
|
|
|
|
const tableContainer = document.querySelector(`#${tableContainerId}`);
|
|
if (tableContainer) {
|
|
tableContainer.innerHTML = tableHTML;
|
|
} else {
|
|
console.error(
|
|
`Contenitore della tabella non trovato: #${tableContainerId}`,
|
|
);
|
|
}
|
|
}
|