update
This commit is contained in:
@@ -280,7 +280,7 @@ include('parsedatachart.php');
|
||||
<!-- Begin page -->
|
||||
<div id="wrapper">
|
||||
|
||||
<?php // include('../include/navigationbar.php');
|
||||
<?php include('../include/navigationbar.php');
|
||||
?>
|
||||
|
||||
<!-- Start right Content here -->
|
||||
@@ -484,10 +484,14 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
<div class="container my-4" data-id="1">
|
||||
<h2 class="text-center text-primary fw-bold">Product Statistic</h2>
|
||||
<hr class="my-3">
|
||||
</div>
|
||||
|
||||
<div class="chart-container" id="charts">
|
||||
|
||||
<div class="row chart-box" id="chart1" data-id="1">
|
||||
<div class="row chart-box" id="chart1" data-id="2">
|
||||
<div class="col-xl-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
@@ -548,7 +552,7 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row chart-box" id="chart2" data-id="2">
|
||||
<div class="row chart-box" id="chart2" data-id="3">
|
||||
<div class="col-md-4"> <!-- Colonna per il primo grafico (Pie Chart) -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
@@ -565,19 +569,19 @@ include('parsedatachart.php');
|
||||
<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>
|
||||
<!-- 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>
|
||||
<h5 class="card-title">Reports Breakdown</h5>
|
||||
<div id="reportBarChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row chart-box" id="chart3" data-id="3">
|
||||
<div class="container my-4" data-id="4">
|
||||
<h2 class="text-center text-primary fw-bold">Supplier Statistic</h2>
|
||||
<hr class="my-3">
|
||||
</div>
|
||||
|
||||
<div class="row chart-box" id="chart3" data-id="5">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
@@ -593,7 +597,7 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row chart-box" id="chart4" data-id="4">
|
||||
<div class="row chart-box" id="chart4" data-id="6">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
@@ -608,8 +612,12 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container my-4" data-id="7">
|
||||
<h2 class="text-center text-primary fw-bold">Analysis Statistic</h2>
|
||||
<hr class="my-3">
|
||||
</div>
|
||||
|
||||
<div class="row chart-box" id="chart5" data-id="5">
|
||||
<div class="row chart-box" id="chart5" data-id="8">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
@@ -624,8 +632,29 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row chart-box" id="chart5" data-id="9">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Worst Analysis</h5>
|
||||
<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="chart6" data-id="6">
|
||||
|
||||
|
||||
<div class="container my-4" data-id="10">
|
||||
<h2 class="text-center text-primary fw-bold">Components/Substances Statistic</h2>
|
||||
<hr class="my-3">
|
||||
</div>
|
||||
|
||||
<div class="row chart-box" id="chart6" data-id="11">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
@@ -640,8 +669,12 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container my-4" data-id="12">
|
||||
<h2 class="text-center text-primary fw-bold">Other Parameter Statistic</h2>
|
||||
<hr class="my-3">
|
||||
</div>
|
||||
|
||||
<div class="row chart-box" id="chart7" data-id="7">
|
||||
<div class="row chart-box" id="chart7" data-id="13">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
@@ -672,7 +705,7 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="row mt-4" data-id="14">
|
||||
<!-- Colonna Sinistra per il Grafico a Torta -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
@@ -905,7 +938,19 @@ include('parsedatachart.php');
|
||||
series: pieSeries,
|
||||
chart: {
|
||||
width: '100%',
|
||||
type: 'pie'
|
||||
type: 'pie',
|
||||
toolbar: {
|
||||
show: true, // Mostra l'hamburger menu
|
||||
tools: {
|
||||
download: true, // Opzioni di download
|
||||
selection: false,
|
||||
zoom: false,
|
||||
zoomin: false,
|
||||
zoomout: false,
|
||||
pan: false,
|
||||
reset: false
|
||||
}
|
||||
}
|
||||
},
|
||||
labels: pieLabels,
|
||||
colors: ['#FF4D4D', '#28A745', '#FFA500'],
|
||||
@@ -933,35 +978,83 @@ include('parsedatachart.php');
|
||||
// Genera la tabella
|
||||
$('#tableChart2').html(generatePieTable(pieLabels, pieSeries));
|
||||
|
||||
var pieLabels = ['Pass', 'Fail', 'Others']; // Ordine richiesto
|
||||
var pieSeries = [intPassReports, intFailReports, intOtherReports]; // Ordine dei dati: Pass, Fail, Others
|
||||
|
||||
// Configurazione del grafico a barre
|
||||
var barOptions = {
|
||||
series: [{
|
||||
data: pieSeries // Utilizza i dati aggiornati
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 400, // Altezza del grafico
|
||||
toolbar: {
|
||||
show: true, // Mostra l'hamburger menu
|
||||
tools: {
|
||||
download: true, // Opzioni di download
|
||||
selection: false,
|
||||
zoom: false,
|
||||
zoomin: false,
|
||||
zoomout: false,
|
||||
pan: false,
|
||||
reset: false
|
||||
}
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '50%',
|
||||
distributed: true // Colori diversi per ogni colonna
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true
|
||||
},
|
||||
xaxis: {
|
||||
categories: pieLabels // Stesse etichette della pie chart
|
||||
},
|
||||
colors: ['#28A745', '#FF4D4D', '#FFA500'], // Verde, Rosso, Arancione
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
};
|
||||
|
||||
// Inizializza e renderizza il grafico a barre
|
||||
var barChart = new ApexCharts(document.querySelector("#reportBarChart"), barOptions);
|
||||
barChart.render();
|
||||
|
||||
|
||||
|
||||
|
||||
// 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>
|
||||
`;
|
||||
<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>
|
||||
`;
|
||||
<tr>
|
||||
<td>${names[i]}</td>
|
||||
<td>${counts[i]}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
tableHTML += `
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
return tableHTML;
|
||||
}
|
||||
@@ -969,6 +1062,7 @@ include('parsedatachart.php');
|
||||
// Inizializza il grafico come prima
|
||||
$('#worsttenanalysis').html('');
|
||||
|
||||
|
||||
var analysisNames = data.topFailingAnalysis.map(function(item) {
|
||||
return item.name;
|
||||
});
|
||||
@@ -987,6 +1081,7 @@ include('parsedatachart.php');
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
borderRadius: 10,
|
||||
dataLabels: {
|
||||
position: 'center'
|
||||
}
|
||||
@@ -995,7 +1090,7 @@ include('parsedatachart.php');
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
colors: ['#fff'],
|
||||
colors: ['black'],
|
||||
fontSize: '12px'
|
||||
},
|
||||
formatter: function(val, opt) {
|
||||
@@ -1016,7 +1111,7 @@ include('parsedatachart.php');
|
||||
text: 'Analysis'
|
||||
}
|
||||
},
|
||||
colors: ['#FF4D4D'],
|
||||
colors: ['orange'],
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
@@ -1069,7 +1164,7 @@ include('parsedatachart.php');
|
||||
],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 400,
|
||||
height: 500,
|
||||
stacked: true,
|
||||
horizontal: true
|
||||
},
|
||||
@@ -1080,6 +1175,7 @@ include('parsedatachart.php');
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
borderRadius: 5,
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
}
|
||||
@@ -1118,7 +1214,7 @@ include('parsedatachart.php');
|
||||
],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 400,
|
||||
height: 500,
|
||||
stacked: true,
|
||||
horizontal: true
|
||||
},
|
||||
@@ -1129,6 +1225,7 @@ include('parsedatachart.php');
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
borderRadius: 5,
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
}
|
||||
@@ -1144,33 +1241,33 @@ include('parsedatachart.php');
|
||||
// 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>
|
||||
`;
|
||||
<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>
|
||||
`;
|
||||
<tr>
|
||||
<td>${names[i]}</td>
|
||||
<td>${failPercentages[i].toFixed(2)}%</td>
|
||||
<td>${failedReports[i]}</td>
|
||||
<td>${totalReports[i]}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
tableHTML += `
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
return tableHTML;
|
||||
}
|
||||
@@ -1197,11 +1294,30 @@ include('parsedatachart.php');
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 400
|
||||
height: 900
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
borderRadius: 5,
|
||||
colors: {
|
||||
ranges: [{
|
||||
from: 0,
|
||||
to: 30.00,
|
||||
color: '#008000'
|
||||
}, // Verde
|
||||
{
|
||||
from: 30,
|
||||
to: 70,
|
||||
color: '#FF8C00'
|
||||
}, // Arancione
|
||||
{
|
||||
from: 70,
|
||||
to: 100,
|
||||
color: '#FF0000'
|
||||
} // Rosso
|
||||
]
|
||||
},
|
||||
dataLabels: {
|
||||
position: 'center'
|
||||
}
|
||||
@@ -1233,13 +1349,24 @@ include('parsedatachart.php');
|
||||
text: 'Suppliers'
|
||||
}
|
||||
},
|
||||
colors: ['#3368FF'],
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
y: {
|
||||
formatter: function(val, opt) {
|
||||
return supplierNames[opt.dataPointIndex] +
|
||||
' - ' + val.toFixed(2) + '%' +
|
||||
' (Fail: ' + failedReportsForSupplier[opt.dataPointIndex] +
|
||||
' - Total: ' + totalReportsForSupplier[opt.dataPointIndex] + ')';
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Top 10 Suppliers with the Highest Failed Reports Percentage',
|
||||
text: 'Top Suppliers with the Highest Failed Reports Percentage',
|
||||
align: 'center'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#worstSuppliersChart"), options);
|
||||
chart.render();
|
||||
|
||||
@@ -1318,6 +1445,7 @@ include('parsedatachart.php');
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
borderRadius: 5,
|
||||
columnWidth: '50%',
|
||||
dataLabels: {
|
||||
position: 'top'
|
||||
@@ -1415,11 +1543,12 @@ include('parsedatachart.php');
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 500
|
||||
height: 550
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
borderRadius: 5,
|
||||
columnWidth: '100%',
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
@@ -1453,7 +1582,7 @@ include('parsedatachart.php');
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
colors: ['#004d00']
|
||||
colors: ['green']
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
@@ -1488,29 +1617,29 @@ include('parsedatachart.php');
|
||||
// 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>
|
||||
`;
|
||||
<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>
|
||||
`;
|
||||
<tr>
|
||||
<td>${analyteNames[i]}</td>
|
||||
<td>${failCounts[i]}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
tableHTML += `
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
return tableHTML;
|
||||
}
|
||||
@@ -1536,6 +1665,7 @@ include('parsedatachart.php');
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
borderRadius: 5,
|
||||
dataLabels: {
|
||||
position: 'center' // Etichette al centro delle barre
|
||||
}
|
||||
@@ -1544,12 +1674,14 @@ include('parsedatachart.php');
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
colors: ['#fff'], // Colore del testo all'interno delle barre
|
||||
colors: ['black'], // Colore del testo all'interno delle barre
|
||||
fontSize: '12px'
|
||||
},
|
||||
textAnchor: 'start', // Allinea il testo a sinistra
|
||||
offsetX: -5, // Regola la distanza orizzontale
|
||||
formatter: function(val, opt) {
|
||||
return analyteNames[opt.dataPointIndex]; // Mostra il nome dell'analita dentro la barra
|
||||
}
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: failCounts, // Visualizza solo i numeri sull'asse X
|
||||
@@ -1656,7 +1788,19 @@ include('parsedatachart.php');
|
||||
series: values,
|
||||
chart: {
|
||||
type: 'pie',
|
||||
height: 350
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: true, // Mostra l'hamburger menu
|
||||
tools: {
|
||||
download: true, // Opzioni di download
|
||||
selection: false,
|
||||
zoom: false,
|
||||
zoomin: false,
|
||||
zoomout: false,
|
||||
pan: false,
|
||||
reset: false
|
||||
}
|
||||
}
|
||||
},
|
||||
labels: labels,
|
||||
responsive: [{
|
||||
@@ -1683,6 +1827,7 @@ include('parsedatachart.php');
|
||||
$('#tablePhasePie').html(generatePhasePieTable(labels, values));
|
||||
}
|
||||
|
||||
|
||||
function renderPhaseBarChart(phaseRatingsData) {
|
||||
const labels = phaseRatingsData.map(item => item.phase);
|
||||
const passCounts = phaseRatingsData.map(item => parseInt(item.passCount, 10));
|
||||
@@ -1718,7 +1863,8 @@ include('parsedatachart.php');
|
||||
colors: ['#28A745', '#FF4D4D', '#FFA500'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
horizontal: false,
|
||||
borderRadius: 5,
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user