69 lines
1.9 KiB
JavaScript
69 lines
1.9 KiB
JavaScript
import { generatePieTable } from "../utils/tableGenerator.js";
|
|
|
|
export function renderPieChart(data, containerId, tableContainerId) {
|
|
// Pulizia del contenitore
|
|
document.querySelector(`#${containerId}`).innerHTML = "";
|
|
|
|
// Dati per il grafico a torta
|
|
const intFailReports = parseInt(data.failReportsPie);
|
|
const intPassReports = parseInt(data.passReportsPie);
|
|
const intOtherReports = parseInt(data.otherReportsPie);
|
|
|
|
const pieLabels = ["Fail", "Pass", "Others"];
|
|
const pieSeries = [intFailReports, intPassReports, intOtherReports];
|
|
|
|
// Configurazione del grafico
|
|
const options = {
|
|
series: pieSeries,
|
|
chart: {
|
|
width: "100%",
|
|
type: "pie",
|
|
toolbar: {
|
|
show: true,
|
|
tools: {
|
|
download: true,
|
|
selection: false,
|
|
zoom: false,
|
|
zoomin: false,
|
|
zoomout: false,
|
|
pan: false,
|
|
reset: false,
|
|
},
|
|
},
|
|
},
|
|
labels: pieLabels,
|
|
colors: ["#FF4D4D", "#28A745", "#FFA500"],
|
|
responsive: [
|
|
{
|
|
breakpoint: 480,
|
|
options: {
|
|
chart: {
|
|
width: 250,
|
|
},
|
|
legend: {
|
|
position: "bottom",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
legend: {
|
|
position: "bottom",
|
|
offsetY: 0,
|
|
height: 50,
|
|
},
|
|
};
|
|
|
|
// Render del grafico
|
|
const chart = new ApexCharts(
|
|
document.querySelector(`#${containerId}`),
|
|
options,
|
|
);
|
|
chart.render();
|
|
|
|
// Genera la tabella
|
|
document.querySelector(`#${tableContainerId}`).innerHTML = generatePieTable(
|
|
pieLabels,
|
|
pieSeries,
|
|
);
|
|
}
|