update
This commit is contained in:
@@ -171,7 +171,7 @@ if (!$supplier) {
|
||||
<?php echo htmlspecialchars($supplier['name']); ?>
|
||||
</h3>
|
||||
<div class="rating-score
|
||||
<?php echo $supplier['rating'] >= 8 ? 'rating-high' : ($supplier['rating'] >= 5 ? 'rating-medium' : 'rating-low'); ?>">
|
||||
<?php echo $supplier['rating'] >= 80 ? 'rating-high' : ($supplier['rating'] >= 50 ? 'rating-medium' : 'rating-low'); ?>">
|
||||
<?php echo number_format($supplier['rating'], 2); ?>
|
||||
</div>
|
||||
</div>
|
||||
@@ -224,6 +224,18 @@ if (!$supplier) {
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Analysis Distribution</h5>
|
||||
<div id="pie-chart"></div>
|
||||
<button id="toggle-pie-table" class="btn btn-secondary mt-3">Toggle Table</button>
|
||||
<div id="pie-table-container" style="display: none;">
|
||||
<table class="table table-bordered mt-3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Category</th>
|
||||
<th>Count</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="pie-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -233,6 +245,18 @@ if (!$supplier) {
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Analysis Summary</h5>
|
||||
<div id="stacked-bar-chart"></div>
|
||||
<button id="toggle-stacked-table" class="btn btn-secondary mt-3">Toggle Table</button>
|
||||
<div id="stacked-table-container" style="display: none;">
|
||||
<table class="table table-bordered mt-3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Category</th>
|
||||
<th>Count</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="stacked-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -245,18 +269,16 @@ if (!$supplier) {
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Total Analysis Distribution</h5>
|
||||
<div id="distribution-bar-chart"></div>
|
||||
<button class="collapsible">Toggle Table</button>
|
||||
<div class="collapsible-content">
|
||||
<table class="table table-bordered">
|
||||
<button id="toggle-distribution-table" class="btn btn-secondary mt-3">Toggle Table</button>
|
||||
<div id="distribution-table-container" style="display: none;">
|
||||
<table class="table table-bordered mt-3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Analysis Name</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="distribution-table-body">
|
||||
<!-- Data loaded dynamically -->
|
||||
</tbody>
|
||||
<tbody id="distribution-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -272,40 +294,36 @@ if (!$supplier) {
|
||||
<h5 class="card-title">Top FAIL Analyses</h5>
|
||||
<div id="fail-bar-chart"></div>
|
||||
<!-- Pulsante Toggle Table -->
|
||||
<button id="toggle-fail-table" class="btn btn-secondary">Toggle Table</button>
|
||||
<button id="toggle-fail-table" class="btn btn-secondary mt-3">Toggle Table</button>
|
||||
<div id="fail-table-container" style="display: none;">
|
||||
<table class="table table-bordered">
|
||||
<table class="table table-bordered mt-3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Analysis Name</th>
|
||||
<th>Fail Count</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="fail-table-body">
|
||||
<!-- Popolato dinamicamente -->
|
||||
</tbody>
|
||||
<tbody id="fail-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pulsante View Fail Details -->
|
||||
<button id="view-fail-details" class="btn btn-primary">View Fail Details</button>
|
||||
<button id="view-fail-details" class="btn btn-primary mt-3">View Fail Details</button>
|
||||
<div id="fail-details-container" style="display: none;">
|
||||
<table class="table table-bordered">
|
||||
<table class="table table-bordered mt-3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Analysis Name</th>
|
||||
<th>Report Number</th>
|
||||
<th>Ref Numb.</th>
|
||||
<th>Ref Number</th>
|
||||
<th>Product Description</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="fail-details-table-body">
|
||||
<!-- Popolato dinamicamente -->
|
||||
</tbody>
|
||||
<tbody id="fail-details-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -315,12 +333,133 @@ if (!$supplier) {
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// Dati per i grafici principali
|
||||
const supplierName = "<?php echo htmlspecialchars($supplier['name']); ?>";
|
||||
|
||||
// Pie Chart Configuration (Analysis Distribution)
|
||||
const passCount = <?php echo isset($supplier['pass_analyses']) ? $supplier['pass_analyses'] : 0; ?>;
|
||||
const failCount = <?php echo isset($supplier['fail_analyses']) ? $supplier['fail_analyses'] : 0; ?>;
|
||||
const dataCount = <?php echo isset($supplier['data_analyses']) ? $supplier['data_analyses'] : 0; ?>;
|
||||
|
||||
// Pie Chart Configuration
|
||||
|
||||
$.getJSON(`get_fail_details.php?supplier=${supplierName}`, function(data) {
|
||||
if (data.error) {
|
||||
alert(data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
// Configurazione del grafico
|
||||
const failChartOptions = {
|
||||
series: [{
|
||||
data: data.failDistribution.map(item => item.fail)
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
horizontal: true
|
||||
},
|
||||
xaxis: {
|
||||
categories: data.failDistribution.map(item => item.analysis_name),
|
||||
title: {
|
||||
text: 'Fail Count'
|
||||
}
|
||||
},
|
||||
colors: ['#dc3545'],
|
||||
title: {
|
||||
text: 'Top FAIL Analyses',
|
||||
align: 'center'
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '50%'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const failChart = new ApexCharts(document.querySelector("#fail-bar-chart"), failChartOptions);
|
||||
failChart.render();
|
||||
|
||||
// Popola la tabella di riepilogo delle analisi fallite
|
||||
const failTableBody = document.querySelector("#fail-table-body");
|
||||
data.failDistribution.forEach(row => {
|
||||
failTableBody.innerHTML += `
|
||||
<tr>
|
||||
<td>${row.analysis_name}</td>
|
||||
<td>${row.fail}</td>
|
||||
</tr>`;
|
||||
});
|
||||
|
||||
// Gestione del pulsante "View Fail Details"
|
||||
|
||||
|
||||
const failDetailsButton = document.querySelector("#view-fail-details");
|
||||
if (!failDetailsButton) {
|
||||
console.error("Pulsante #view-fail-details non trovato nel DOM.");
|
||||
} else {
|
||||
console.log("Pulsante trovato:", failDetailsButton);
|
||||
}
|
||||
|
||||
|
||||
// Gestione del pulsante "View Fail Details"
|
||||
document.querySelector("#view-fail-details").addEventListener("click", function() {
|
||||
console.log("View Fail Details clicked");
|
||||
const detailsContainer = document.querySelector("#fail-details-container");
|
||||
|
||||
if (!detailsContainer) {
|
||||
console.error("The #fail-details-container was not found.");
|
||||
return;
|
||||
}
|
||||
|
||||
const detailsTableBody = document.querySelector("#fail-details-table-body");
|
||||
|
||||
if (!detailsTableBody) {
|
||||
console.error("The #fail-details-table-body was not found.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove the nested AJAX call and use the existing data from the first AJAX call
|
||||
if (!detailsContainer.hasAttribute("data-loaded")) {
|
||||
// Use the data from the first AJAX call
|
||||
const details = data; // This assumes 'data' is in scope from the previous $.getJSON call
|
||||
|
||||
// Clear any existing content
|
||||
detailsTableBody.innerHTML = '';
|
||||
|
||||
// Populate the table with fail details
|
||||
details.failDetails.forEach(detail => {
|
||||
detailsTableBody.innerHTML += `
|
||||
<tr>
|
||||
<td>${detail.analysis_name}</td>
|
||||
<td>${detail.report_number}</td>
|
||||
<td>${detail.product_refnumber}</td>
|
||||
<td>${detail.product_description}</td>
|
||||
<td>
|
||||
<a href="../products/reportdetails.php?idreports=${detail.report_id}" target="_blank" class="btn btn-sm btn-primary">
|
||||
View Details
|
||||
</a>
|
||||
</td>
|
||||
</tr>`;
|
||||
});
|
||||
|
||||
detailsContainer.setAttribute("data-loaded", "true");
|
||||
detailsContainer.style.display = "block";
|
||||
} else {
|
||||
// Toggle visibility if already loaded
|
||||
detailsContainer.style.display = detailsContainer.style.display === "block" ? "none" : "block";
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Toggle per la tabella Fail Summary
|
||||
document.querySelector("#toggle-fail-table").addEventListener("click", function() {
|
||||
const table = document.querySelector("#fail-table-container");
|
||||
table.style.display = table.style.display === "block" ? "none" : "block";
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
const pieChartOptions = {
|
||||
series: [passCount, failCount, dataCount],
|
||||
chart: {
|
||||
@@ -347,7 +486,7 @@ if (!$supplier) {
|
||||
const pieChart = new ApexCharts(document.querySelector("#pie-chart"), pieChartOptions);
|
||||
pieChart.render();
|
||||
|
||||
// Stacked Bar Chart Configuration
|
||||
// Stacked Bar Chart Configuration (Analysis Summary)
|
||||
const stackedBarChartOptions = {
|
||||
series: [{
|
||||
name: 'PASS',
|
||||
@@ -393,16 +532,14 @@ if (!$supplier) {
|
||||
const stackedBarChart = new ApexCharts(document.querySelector("#stacked-bar-chart"), stackedBarChartOptions);
|
||||
stackedBarChart.render();
|
||||
|
||||
// Fetch and populate data for additional charts and tables
|
||||
const supplierName = "<?php echo htmlspecialchars($supplier['name']); ?>";
|
||||
|
||||
// Fetch Data for Additional Charts and Tables
|
||||
$.getJSON(`get_analysis_data.php?supplier=${supplierName}`, function(data) {
|
||||
if (data.error) {
|
||||
alert(data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
// Distribuzione delle analisi totali
|
||||
// Distribution Bar Chart (Total Analysis Distribution)
|
||||
const distributionChartOptions = {
|
||||
series: [{
|
||||
data: data.analysisDistribution.map(item => item.total)
|
||||
@@ -412,12 +549,6 @@ if (!$supplier) {
|
||||
height: 350,
|
||||
horizontal: true
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '50%'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: data.analysisDistribution.map(item => item.analysis_name),
|
||||
title: {
|
||||
@@ -428,22 +559,29 @@ if (!$supplier) {
|
||||
title: {
|
||||
text: 'Total Analysis Distribution',
|
||||
align: 'center'
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '50%'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const distributionChart = new ApexCharts(document.querySelector("#distribution-bar-chart"), distributionChartOptions);
|
||||
distributionChart.render();
|
||||
|
||||
// Aggiorna tabella per Distribuzione Totale
|
||||
// Populate Distribution Table
|
||||
const distTableBody = document.querySelector("#distribution-table-body");
|
||||
data.analysisDistribution.forEach(row => {
|
||||
distTableBody.innerHTML += `<tr>
|
||||
<td>${row.analysis_name}</td>
|
||||
<td>${row.total}</td>
|
||||
</tr>`;
|
||||
distTableBody.innerHTML += `
|
||||
<tr>
|
||||
<td>${row.analysis_name}</td>
|
||||
<td>${row.total}</td>
|
||||
</tr>`;
|
||||
});
|
||||
|
||||
// Distribuzione delle analisi FAIL
|
||||
// Fail Analysis Chart (Top FAIL Analyses)
|
||||
const failChartOptions = {
|
||||
series: [{
|
||||
data: data.failDistribution.map(item => item.fail)
|
||||
@@ -453,12 +591,6 @@ if (!$supplier) {
|
||||
height: 350,
|
||||
horizontal: true
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '50%'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: data.failDistribution.map(item => item.analysis_name),
|
||||
title: {
|
||||
@@ -469,58 +601,40 @@ if (!$supplier) {
|
||||
title: {
|
||||
text: 'Top FAIL Analyses',
|
||||
align: 'center'
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '50%'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const failChart = new ApexCharts(document.querySelector("#fail-bar-chart"), failChartOptions);
|
||||
failChart.render();
|
||||
|
||||
// Aggiorna tabella per Distribuzione FAIL
|
||||
// Populate Fail Table
|
||||
const failTableBody = document.querySelector("#fail-table-body");
|
||||
data.failDistribution.forEach(row => {
|
||||
failTableBody.innerHTML += `<tr>
|
||||
<td>${row.analysis_name}</td>
|
||||
<td>${row.fail}</td>
|
||||
</tr>`;
|
||||
failTableBody.innerHTML += `
|
||||
<tr>
|
||||
<td>${row.analysis_name}</td>
|
||||
<td>${row.fail}</td>
|
||||
</tr>`;
|
||||
});
|
||||
});
|
||||
|
||||
// Gestione Toggle Table
|
||||
// Toggle Tables
|
||||
document.querySelector("#toggle-distribution-table").addEventListener("click", function() {
|
||||
const table = document.querySelector("#distribution-table-container");
|
||||
table.style.display = table.style.display === "block" ? "none" : "block";
|
||||
});
|
||||
|
||||
document.querySelector("#toggle-fail-table").addEventListener("click", function() {
|
||||
const table = document.querySelector("#fail-table-container");
|
||||
table.style.display = table.style.display === "block" ? "none" : "block";
|
||||
});
|
||||
|
||||
// Gestione View Fail Details
|
||||
document.querySelector("#view-fail-details").addEventListener("click", function() {
|
||||
const table = document.querySelector("#fail-details-container");
|
||||
|
||||
// Evita di richiamare più volte lo stesso contenuto
|
||||
if (!table.hasAttribute("data-loaded")) {
|
||||
$.getJSON(`get_fail_details.php?supplier=${supplierName}`, function(data) {
|
||||
const failDetailsTableBody = document.querySelector("#fail-details-table-body");
|
||||
|
||||
data.failDetails.forEach(row => {
|
||||
failDetailsTableBody.innerHTML += `
|
||||
<tr>
|
||||
<td>${row.analysis_name}</td>
|
||||
<td>${row.report_number}</td>
|
||||
<td>${row.product_refnumber}</td>
|
||||
<td>${row.product_description}</td>
|
||||
<td>
|
||||
<a href="../products/reportdetails.php?idreports=${row.report_id}" target="_blank" class="btn btn-sm btn-primary">
|
||||
View Details
|
||||
</a>
|
||||
</td>
|
||||
</tr>`;
|
||||
});
|
||||
|
||||
table.setAttribute("data-loaded", "true");
|
||||
});
|
||||
}
|
||||
|
||||
table.style.display = table.style.display === "block" ? "none" : "block";
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user