92 lines
2.6 KiB
JavaScript
92 lines
2.6 KiB
JavaScript
import { generatePieTable } from "../utils/tableGenerator.js";
|
|
|
|
export function renderBarChart(data, 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;
|
|
}
|
|
|
|
// Dati per il grafico a barre (usa gli stessi dati del grafico a torta)
|
|
const intFailReports = parseInt(data.failReportsPie) || 0;
|
|
const intPassReports = parseInt(data.passReportsPie) || 0;
|
|
const intOtherReports = parseInt(data.otherReportsPie) || 0;
|
|
|
|
const barLabels = ["Fail", "Pass", "Others"];
|
|
const barSeries = [intFailReports, intPassReports, intOtherReports];
|
|
|
|
// Configurazione del grafico a barre
|
|
const options = {
|
|
series: [
|
|
{
|
|
name: "Reports",
|
|
data: barSeries,
|
|
},
|
|
],
|
|
chart: {
|
|
height: 350,
|
|
type: "bar",
|
|
toolbar: {
|
|
show: true,
|
|
tools: {
|
|
download: true,
|
|
selection: false,
|
|
zoom: false,
|
|
zoomin: false,
|
|
zoomout: false,
|
|
pan: false,
|
|
reset: false,
|
|
},
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: "55%",
|
|
endingShape: "rounded",
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ["transparent"],
|
|
},
|
|
xaxis: {
|
|
categories: barLabels,
|
|
},
|
|
colors: ["#FF4D4D", "#28A745", "#FFA500"],
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: function (val) {
|
|
return val + " reports";
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
// Render del grafico
|
|
const chart = new ApexCharts(chartContainer, options);
|
|
chart.render();
|
|
|
|
// Genera la tabella e aggiungi un log
|
|
const tableHTML = generatePieTable(barLabels, barSeries);
|
|
|
|
const tableContainer = document.querySelector(`#${tableContainerId}`);
|
|
if (tableContainer) {
|
|
tableContainer.innerHTML = tableHTML;
|
|
} else {
|
|
console.error(
|
|
`Contenitore della tabella non trovato: #${tableContainerId}`,
|
|
);
|
|
}
|
|
}
|