update table on charts
This commit is contained in:
@@ -280,7 +280,8 @@ include('parsedatachart.php');
|
||||
<!-- Begin page -->
|
||||
<div id="wrapper">
|
||||
|
||||
<?php include('../include/navigationbar.php'); ?>
|
||||
<?php // include('../include/navigationbar.php');
|
||||
?>
|
||||
|
||||
<!-- Start right Content here -->
|
||||
|
||||
@@ -553,17 +554,27 @@ include('parsedatachart.php');
|
||||
<div class="card-body">
|
||||
<h5 class="card-title" id="reports_overview">Reports Overview</h5>
|
||||
<div id="reportPieChart"></div>
|
||||
<!-- Pulsante per mostrare/nascondere la tabella -->
|
||||
<button class="btn btn-sm btn-primary toggle-table" data-target="#tableChart2">Toggle Data Table</button>
|
||||
<!-- Contenitore per la tabella -->
|
||||
<div id="tableChart2" class="hidden table-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8"> <!-- Colonna per il secondo grafico -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Worst Analysis</h5>
|
||||
<div id="worsttenanalysis"></div> <!-- Questo è lo spazio per il secondo grafico -->
|
||||
<div id="worsttenanalysis"></div>
|
||||
<!-- Pulsante per mostrare/nascondere la tabella -->
|
||||
<button class="btn btn-sm btn-primary toggle-table" data-target="#tableChartWorst">Toggle Data Table</button>
|
||||
<!-- Contenitore per la tabella -->
|
||||
<div id="tableChartWorst" class="hidden table-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row chart-box" id="chart3" data-id="3">
|
||||
@@ -572,44 +583,64 @@ include('parsedatachart.php');
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Worst Suppliers by Failed Report Percentage</h5>
|
||||
<div id="worstSuppliersChart"></div> <!-- Il grafico verrà inserito qui -->
|
||||
<!-- Pulsante per mostrare/nascondere la tabella -->
|
||||
<button class="btn btn-sm btn-primary toggle-table" data-target="#tableChartWorstSuppliers">Toggle Data Table</button>
|
||||
<!-- Contenitore per la tabella -->
|
||||
<div id="tableChartWorstSuppliers" class="hidden table-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row chart-box" id="chart4" data-id="4">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Number of Products by Supplier</h5>
|
||||
<div id="productBySupplierChart"></div> <!-- Lo spazio per il grafico -->
|
||||
<div id="productBySupplierChart"></div> <!-- Spazio per il grafico -->
|
||||
<!-- Pulsante per mostrare/nascondere la tabella -->
|
||||
<button class="btn btn-sm btn-primary toggle-table" data-target="#tableChartProductsBySupplier">Toggle Data Table</button>
|
||||
<!-- Contenitore per la tabella -->
|
||||
<div id="tableChartProductsBySupplier" class="hidden table-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row chart-box" id="chart5" data-id="5">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Analysis Distribution</h5>
|
||||
<div id="analysisDistributionChart"></div> <!-- Il grafico verrà inserito qui -->
|
||||
<!-- Pulsante per mostrare/nascondere la tabella -->
|
||||
<button class="btn btn-sm btn-primary toggle-table" data-target="#tableChartAnalysisDistribution">Toggle Data Table</button>
|
||||
<!-- Contenitore per la tabella -->
|
||||
<div id="tableChartAnalysisDistribution" class="hidden table-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row chart-box" id="chart6" data-id="6">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Analytes with Most Failures</h5>
|
||||
<div id="analytesFailChart"></div> <!-- Lo spazio per il grafico -->
|
||||
<!-- Pulsante per mostrare/nascondere la tabella -->
|
||||
<button class="btn btn-sm btn-primary toggle-table" data-target="#tableChartAnalytesFail">Toggle Data Table</button>
|
||||
<!-- Contenitore per la tabella -->
|
||||
<div id="tableChartAnalytesFail" class="hidden table-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row chart-box" id="chart7" data-id="7">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
@@ -648,6 +679,10 @@ include('parsedatachart.php');
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Products Distribution by Phase</h5>
|
||||
<div id="phasePieChart"></div>
|
||||
<!-- Pulsante per mostrare/nascondere la tabella -->
|
||||
<button class="btn btn-sm btn-primary toggle-table" data-target="#tablePhasePie">Toggle Data Table</button>
|
||||
<!-- Contenitore per la tabella -->
|
||||
<div id="tablePhasePie" class="hidden table-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -658,12 +693,17 @@ include('parsedatachart.php');
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Phase Rating Distribution</h5>
|
||||
<div id="phaseBarChart"></div> <!-- Contenitore per il grafico -->
|
||||
<!-- Pulsante per mostrare/nascondere la tabella -->
|
||||
<button class="btn btn-sm btn-primary toggle-table" data-target="#tablePhaseBar">Toggle Data Table</button>
|
||||
<!-- Contenitore per la tabella -->
|
||||
<div id="tablePhaseBar" class="hidden table-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div><!-- container -->
|
||||
|
||||
@@ -679,6 +719,7 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
<!-- END wrapper -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
|
||||
<!-- script for chart order -->
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const chartContainer = document.getElementById('charts');
|
||||
@@ -819,26 +860,60 @@ include('parsedatachart.php');
|
||||
}
|
||||
|
||||
// remove pie chart and create a new one
|
||||
// Funzione per generare la tabella dal pie chart
|
||||
function generatePieTable(labels, series) {
|
||||
let tableHTML = `
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Category</th>
|
||||
<th>Count</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
for (let i = 0; i < labels.length; i++) {
|
||||
tableHTML += `
|
||||
<tr>
|
||||
<td>${labels[i]}</td>
|
||||
<td>${series[i]}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
tableHTML += `
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
return tableHTML;
|
||||
}
|
||||
|
||||
// Pulizia del contenitore
|
||||
$('#reportPieChart').html('');
|
||||
|
||||
var intFailReports = parseInt(data.failReportsPie);
|
||||
var intPassReports = parseInt(data.passReportsPie);
|
||||
var intOtherReports = parseInt(data.otherReportsPie);
|
||||
|
||||
// Data for pie chart (Reports: Fail, Pass, Others)
|
||||
// Dati per il grafico a torta
|
||||
var pieLabels = ['Fail', 'Pass', 'Others'];
|
||||
var pieSeries = [intFailReports, intPassReports, intOtherReports];
|
||||
|
||||
var options = {
|
||||
series: [intFailReports, intPassReports, intOtherReports],
|
||||
series: pieSeries,
|
||||
chart: {
|
||||
width: '100%', // Mantieni la larghezza al 100% all'interno della colonna Bootstrap
|
||||
type: 'pie',
|
||||
width: '100%',
|
||||
type: 'pie'
|
||||
},
|
||||
labels: ['Fail', 'Pass', 'Others'],
|
||||
colors: ['#FF4D4D', '#28A745', '#FFA500'], // Red for Fail, Green for Pass, Orange for Others
|
||||
labels: pieLabels,
|
||||
colors: ['#FF4D4D', '#28A745', '#FFA500'],
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 250 // Riduci la larghezza sui dispositivi mobili
|
||||
width: 250
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
@@ -846,19 +921,54 @@ include('parsedatachart.php');
|
||||
}
|
||||
}],
|
||||
legend: {
|
||||
position: 'bottom', // Posiziona la legenda sotto il grafico
|
||||
position: 'bottom',
|
||||
offsetY: 0,
|
||||
height: 50, // Altezza della legenda
|
||||
height: 50
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#reportPieChart"), options);
|
||||
chart.render();
|
||||
|
||||
// Genera la tabella
|
||||
$('#tableChart2').html(generatePieTable(pieLabels, pieSeries));
|
||||
|
||||
|
||||
|
||||
// remove bar chart and create a new one
|
||||
// Funzione per generare la tabella
|
||||
function generateTable(names, counts) {
|
||||
let tableHTML = `
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Analysis</th>
|
||||
<th>Number of Failures</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
for (let i = 0; i < names.length; i++) {
|
||||
tableHTML += `
|
||||
<tr>
|
||||
<td>${names[i]}</td>
|
||||
<td>${counts[i]}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
tableHTML += `
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
return tableHTML;
|
||||
}
|
||||
|
||||
// Inizializza il grafico come prima
|
||||
$('#worsttenanalysis').html('');
|
||||
|
||||
// Data for the bar chart
|
||||
var analysisNames = data.topFailingAnalysis.map(function(item) {
|
||||
return item.name;
|
||||
});
|
||||
@@ -878,35 +988,35 @@ include('parsedatachart.php');
|
||||
bar: {
|
||||
horizontal: true,
|
||||
dataLabels: {
|
||||
position: 'center' // Posiziona i nomi delle analisi al centro delle barre
|
||||
position: 'center'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
colors: ['#fff'], // Colore del testo all'interno delle barre (bianco)
|
||||
colors: ['#fff'],
|
||||
fontSize: '12px'
|
||||
},
|
||||
formatter: function(val, opt) {
|
||||
return analysisNames[opt.dataPointIndex]; // Mostra il nome dell'analisi dentro la barra
|
||||
return analysisNames[opt.dataPointIndex];
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: failCounts, // Visualizza solo i numeri sull'asse X
|
||||
categories: failCounts,
|
||||
title: {
|
||||
text: 'Number of Failures'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false // Nascondiamo le etichette dell'asse Y
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
text: 'Analysis'
|
||||
}
|
||||
},
|
||||
colors: ['#FF4D4D'], // Rosso per i Fail
|
||||
colors: ['#FF4D4D'],
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
@@ -929,6 +1039,12 @@ include('parsedatachart.php');
|
||||
var chart = new ApexCharts(document.querySelector("#worsttenanalysis"), options);
|
||||
chart.render();
|
||||
|
||||
// Genera la tabella
|
||||
$('#tableChartWorst').html(generateTable(analysisNames, failCounts));
|
||||
|
||||
|
||||
|
||||
|
||||
// Genera il nuovo grafico a barre orizzontali
|
||||
$('#horizontalBarChart').html('');
|
||||
var horizontalBarData = data.horizontalBarData;
|
||||
@@ -1025,10 +1141,43 @@ include('parsedatachart.php');
|
||||
var chartAnalysis = new ApexCharts(document.querySelector("#horizontalBarAnalysisChart"), optionsAnalysis);
|
||||
chartAnalysis.render();
|
||||
|
||||
// remove bar chart and create a new one
|
||||
// Funzione per generare la tabella
|
||||
function generateSupplierTable(names, failPercentages, totalReports, failedReports) {
|
||||
let tableHTML = `
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Supplier</th>
|
||||
<th>Failure Percentage (%)</th>
|
||||
<th>Failed Reports</th>
|
||||
<th>Total Reports</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
for (let i = 0; i < names.length; i++) {
|
||||
tableHTML += `
|
||||
<tr>
|
||||
<td>${names[i]}</td>
|
||||
<td>${failPercentages[i].toFixed(2)}%</td>
|
||||
<td>${failedReports[i]}</td>
|
||||
<td>${totalReports[i]}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
tableHTML += `
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
return tableHTML;
|
||||
}
|
||||
|
||||
// Rimuove il grafico precedente
|
||||
$('#worstSuppliersChart').html('');
|
||||
|
||||
// Data for the bar chart of worst suppliers
|
||||
var supplierNames = data.worstSuppliers.map(function(item) {
|
||||
return item.supplier;
|
||||
});
|
||||
@@ -1054,38 +1203,37 @@ include('parsedatachart.php');
|
||||
bar: {
|
||||
horizontal: true,
|
||||
dataLabels: {
|
||||
position: 'center' // Etichette al centro delle barre
|
||||
position: 'center'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
colors: ['#fff'], // Colore del testo all'interno delle barre
|
||||
colors: ['#fff'],
|
||||
fontSize: '12px'
|
||||
},
|
||||
formatter: function(val, opt) {
|
||||
// Aggiungi nome del fornitore, percentuale, numero di fail e numero totale di report
|
||||
var totalReports = totalReportsForSupplier[opt.dataPointIndex]; // Numero totale di report
|
||||
var failedReports = failedReportsForSupplier[opt.dataPointIndex]; // Numero di report falliti
|
||||
var totalReports = totalReportsForSupplier[opt.dataPointIndex];
|
||||
var failedReports = failedReportsForSupplier[opt.dataPointIndex];
|
||||
return supplierNames[opt.dataPointIndex] + ' (' + val.toFixed(2) + '%) (Fail: ' + failedReports + ' - Total: ' + totalReports + ')';
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: supplierNames, // Visualizza i nomi dei fornitori
|
||||
categories: supplierNames,
|
||||
title: {
|
||||
text: 'Failure Percentage (%)'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false // Nascondiamo le etichette dell'asse Y
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
text: 'Suppliers'
|
||||
}
|
||||
},
|
||||
colors: ['#3368FF'], // Colore blu chiaro per le barre
|
||||
colors: ['#3368FF'],
|
||||
title: {
|
||||
text: 'Top 10 Suppliers with the Highest Failed Reports Percentage',
|
||||
align: 'center'
|
||||
@@ -1095,10 +1243,59 @@ include('parsedatachart.php');
|
||||
var chart = new ApexCharts(document.querySelector("#worstSuppliersChart"), options);
|
||||
chart.render();
|
||||
|
||||
// Genera la tabella
|
||||
$('#tableChartWorstSuppliers').html(
|
||||
generateSupplierTable(supplierNames, failPercentages, totalReportsForSupplier, failedReportsForSupplier)
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
// remove bar chart and create a new one
|
||||
// Funzione per abbreviare i nomi lunghi dei fornitori
|
||||
function abbreviateNames(names, maxLength = 15) {
|
||||
return names.map(name => (name.length > maxLength ? name.substring(0, maxLength) + '...' : name));
|
||||
}
|
||||
|
||||
// Funzione per calcolare dinamicamente l'altezza del grafico in base alla lunghezza massima dei nomi
|
||||
function calculateChartHeight(names) {
|
||||
const maxLength = Math.max(...names.map(name => name.length));
|
||||
return maxLength > 15 ? 400 + (maxLength - 15) * 10 : 400;
|
||||
}
|
||||
|
||||
// Funzione per generare la tabella
|
||||
function generateProductTable(supplierNames, totalProducts) {
|
||||
let tableHTML = `
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Supplier</th>
|
||||
<th>Number of Products</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
for (let i = 0; i < supplierNames.length; i++) {
|
||||
tableHTML += `
|
||||
<tr>
|
||||
<td>${supplierNames[i]}</td>
|
||||
<td>${totalProducts[i]}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
tableHTML += `
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
return tableHTML;
|
||||
}
|
||||
|
||||
// Rimuove il contenuto precedente del grafico
|
||||
$('#productBySupplierChart').html('');
|
||||
|
||||
// Prepara i dati per il grafico
|
||||
var supplierNames = data.productBySupplier.map(function(item) {
|
||||
return item.supplier;
|
||||
});
|
||||
@@ -1106,6 +1303,9 @@ include('parsedatachart.php');
|
||||
return parseInt(item.totalProducts, 10);
|
||||
});
|
||||
|
||||
// Abbrevia i nomi dei fornitori per il grafico
|
||||
var supplierNamesAbbreviated = abbreviateNames(supplierNames);
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Total Products',
|
||||
@@ -1113,14 +1313,14 @@ include('parsedatachart.php');
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 400
|
||||
height: calculateChartHeight(supplierNames) // Altezza dinamica basata sui nomi completi
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false, // Imposta il grafico a barre verticali
|
||||
horizontal: false,
|
||||
columnWidth: '50%',
|
||||
dataLabels: {
|
||||
position: 'top', // Etichette nella parte superiore delle barre
|
||||
position: 'top'
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -1133,7 +1333,13 @@ include('parsedatachart.php');
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: supplierNames,
|
||||
categories: supplierNamesAbbreviated, // Usa i nomi abbreviati nel grafico
|
||||
labels: {
|
||||
rotate: -45, // Ruota le etichette per maggiore leggibilità
|
||||
style: {
|
||||
fontSize: '12px'
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Suppliers'
|
||||
}
|
||||
@@ -1153,10 +1359,48 @@ include('parsedatachart.php');
|
||||
var chart = new ApexCharts(document.querySelector("#productBySupplierChart"), options);
|
||||
chart.render();
|
||||
|
||||
// remove bar chart and create a new one
|
||||
$('#analysisDistributionChart').html(''); // Resetta il contenuto del div
|
||||
// Genera la tabella con i nomi completi dei fornitori
|
||||
$('#tableChartProductsBySupplier').html(
|
||||
generateProductTable(supplierNames, totalProducts)
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
// remove bar chart and create a new one
|
||||
// Funzione per generare la tabella
|
||||
function generateAnalysisTable(analysisNames, totalTests) {
|
||||
let tableHTML = `
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Analysis Name</th>
|
||||
<th>Total Tests</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
for (let i = 0; i < analysisNames.length; i++) {
|
||||
tableHTML += `
|
||||
<tr>
|
||||
<td>${analysisNames[i]}</td>
|
||||
<td>${totalTests[i]}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
tableHTML += `
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
return tableHTML;
|
||||
}
|
||||
|
||||
// Resetta il contenuto del grafico
|
||||
$('#analysisDistributionChart').html('');
|
||||
|
||||
var analysisNames = data.analysisDistribution.map(function(item) {
|
||||
return item.analysisName;
|
||||
});
|
||||
@@ -1232,8 +1476,48 @@ include('parsedatachart.php');
|
||||
var analysisBarChart = new ApexCharts(document.querySelector("#analysisDistributionChart"), analysisBarChartOptions);
|
||||
analysisBarChart.render();
|
||||
|
||||
// Genera la tabella con i dati delle analisi
|
||||
$('#tableChartAnalysisDistribution').html(
|
||||
generateAnalysisTable(analysisNames, totalTests)
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
// remove bar chart and create a new one
|
||||
// Funzione per generare la tabella
|
||||
function generateAnalytesTable(analyteNames, failCounts) {
|
||||
let tableHTML = `
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Analyte Name</th>
|
||||
<th>Number of Failures</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
for (let i = 0; i < analyteNames.length; i++) {
|
||||
tableHTML += `
|
||||
<tr>
|
||||
<td>${analyteNames[i]}</td>
|
||||
<td>${failCounts[i]}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
tableHTML += `
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
return tableHTML;
|
||||
}
|
||||
|
||||
// Resetta il contenuto del grafico
|
||||
$('#analytesFailChart').html('');
|
||||
|
||||
var analyteNames = data.failedAnalytes.map(function(item) {
|
||||
return item.AnalyteName;
|
||||
});
|
||||
@@ -1281,20 +1565,89 @@ include('parsedatachart.php');
|
||||
text: 'Analytes'
|
||||
}
|
||||
},
|
||||
colors: ['#ffa515'], // Rosso per i Fail
|
||||
colors: ['#ffa515'], // Colore per i Fail
|
||||
title: {
|
||||
text: 'Top 10 Analytes with the Most Failures',
|
||||
align: 'center'
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#analytesFailChart"), options);
|
||||
chart.render();
|
||||
|
||||
$('#tableChartAnalytesFail').html(
|
||||
generateAnalytesTable(analyteNames, failCounts)
|
||||
);
|
||||
},
|
||||
error: function() {
|
||||
alert('Error retrieving data.');
|
||||
}
|
||||
});
|
||||
|
||||
// Funzione per generare la tabella del grafico a torta
|
||||
function generatePhasePieTable(labels, values) {
|
||||
let tableHTML = `
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Phase</th>
|
||||
<th>Total Products</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
for (let i = 0; i < labels.length; i++) {
|
||||
tableHTML += `
|
||||
<tr>
|
||||
<td>${labels[i]}</td>
|
||||
<td>${values[i]}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
tableHTML += `
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
return tableHTML;
|
||||
}
|
||||
|
||||
// Funzione per generare la tabella del grafico a barre
|
||||
function generatePhaseBarTable(labels, passCounts, failCounts, otherCounts) {
|
||||
let tableHTML = `
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Phase</th>
|
||||
<th>Pass</th>
|
||||
<th>Fail</th>
|
||||
<th>Other</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
for (let i = 0; i < labels.length; i++) {
|
||||
tableHTML += `
|
||||
<tr>
|
||||
<td>${labels[i]}</td>
|
||||
<td>${passCounts[i]}</td>
|
||||
<td>${failCounts[i]}</td>
|
||||
<td>${otherCounts[i]}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
tableHTML += `
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
return tableHTML;
|
||||
}
|
||||
|
||||
function renderPhasePieChart(phaseData) {
|
||||
const labels = phaseData.map(item => item.phase);
|
||||
const values = phaseData.map(item => parseInt(item.totalProducts, 10));
|
||||
@@ -1325,11 +1678,13 @@ include('parsedatachart.php');
|
||||
|
||||
const chart = new ApexCharts(document.querySelector("#phasePieChart"), options);
|
||||
chart.render();
|
||||
|
||||
// Genera la tabella e inseriscila nel contenitore
|
||||
$('#tablePhasePie').html(generatePhasePieTable(labels, values));
|
||||
}
|
||||
|
||||
// Funzione per il grafico a barre (Phase Ratings)
|
||||
function renderPhaseBarChart(phaseRatingsData) {
|
||||
const labels = phaseRatingsData.map(item => item.phase); // Etichette per le fasi
|
||||
const labels = phaseRatingsData.map(item => item.phase);
|
||||
const passCounts = phaseRatingsData.map(item => parseInt(item.passCount, 10));
|
||||
const failCounts = phaseRatingsData.map(item => parseInt(item.failCount, 10));
|
||||
const otherCounts = phaseRatingsData.map(item => parseInt(item.otherCount, 10));
|
||||
@@ -1351,30 +1706,30 @@ include('parsedatachart.php');
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 400,
|
||||
stacked: true, // Barre impilate
|
||||
stacked: true,
|
||||
horizontal: true
|
||||
},
|
||||
xaxis: {
|
||||
categories: labels, // Fasi come categorie
|
||||
categories: labels,
|
||||
title: {
|
||||
text: 'Ratings Count' // Titolo per l'asse X
|
||||
text: 'Ratings Count'
|
||||
}
|
||||
},
|
||||
colors: ['#28A745', '#FF4D4D', '#FFA500'], // Colori per Pass, Fail e Other
|
||||
colors: ['#28A745', '#FF4D4D', '#FFA500'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
dataLabels: {
|
||||
enabled: false // Disabilitiamo le etichette per ogni barra
|
||||
enabled: false
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'top', // Posizioniamo la leggenda sopra il grafico
|
||||
position: 'top'
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: val => `${val} reports` // Tooltip personalizzato
|
||||
formatter: val => `${val} reports`
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1382,9 +1737,17 @@ include('parsedatachart.php');
|
||||
$('#phaseBarChart').html(''); // Reset grafico esistente
|
||||
const chart = new ApexCharts(document.querySelector("#phaseBarChart"), options);
|
||||
chart.render();
|
||||
|
||||
// Genera la tabella e inseriscila nel contenitore
|
||||
$('#tablePhaseBar').html(generatePhaseBarTable(labels, passCounts, failCounts, otherCounts));
|
||||
}
|
||||
|
||||
|
||||
// Mostra o nascondi la tabella al clic del pulsante
|
||||
$('.toggle-table').on('click', function() {
|
||||
const target = $(this).data('target');
|
||||
$(target).toggleClass('hidden');
|
||||
});
|
||||
|
||||
// Chiama questa funzione dopo aver recuperato i dati tramite AJAX
|
||||
$(document).ready(function() {
|
||||
|
||||
Reference in New Issue
Block a user