update
This commit is contained in:
@@ -35,17 +35,26 @@ SELECT
|
||||
WHEN LOWER(ap.test_Rating) NOT IN ('pass', 'p', 'comply', 'complies', 'fail', 'f', 'doesn\'t comply') THEN 1
|
||||
ELSE 0
|
||||
END) AS data_analyses,
|
||||
GREATEST(0, 10 - (
|
||||
SUM(
|
||||
CASE
|
||||
WHEN LOWER(ap.test_Rating) IN ('fail', 'f', 'doesn\'t comply') THEN
|
||||
COALESCE(asv.severity, 1) *
|
||||
CASE WHEN COALESCE(asv.is_legal, 'N') = 'Y' THEN 1.5 ELSE 1.0 END
|
||||
ELSE 0
|
||||
END
|
||||
) * (1 + SUM(CASE WHEN LOWER(ap.test_Rating) IN ('fail', 'f', 'doesn\'t comply') THEN 1 ELSE 0 END) / NULLIF(COUNT(ap.idAnalysis_Project), 0))
|
||||
/ NULLIF(COUNT(ap.idAnalysis_Project), 0) * 100
|
||||
)) AS rating,
|
||||
CASE
|
||||
WHEN SUM(CASE WHEN LOWER(ap.test_Rating) IN ('fail', 'f', 'doesn\'t comply') THEN 1 ELSE 0 END) = 0
|
||||
AND SUM(CASE WHEN LOWER(ap.test_Rating) NOT IN ('pass', 'p', 'comply', 'complies', 'fail', 'f', 'doesn\'t comply') THEN 1 ELSE 0 END) = 0
|
||||
THEN 100
|
||||
ELSE GREATEST(0, 100 - (
|
||||
SUM(
|
||||
CASE
|
||||
WHEN LOWER(ap.test_Rating) IN ('fail', 'f', 'doesn\'t comply') THEN
|
||||
POWER(COALESCE(asv.severity, 1), 2) *
|
||||
CASE WHEN COALESCE(asv.is_legal, 'N') = 'Y' THEN 2.0 ELSE 1.0 END
|
||||
ELSE 0
|
||||
END
|
||||
) / NULLIF(COUNT(ap.idAnalysis_Project), 0) * 100 *
|
||||
(1 + 2 * (SUM(CASE WHEN LOWER(ap.test_Rating) IN ('fail', 'f', 'doesn\'t comply') THEN 1 ELSE 0 END) / NULLIF(COUNT(ap.idAnalysis_Project), 0)))
|
||||
+ SUM(CASE
|
||||
WHEN LOWER(ap.test_Rating) NOT IN ('pass', 'p', 'comply', 'complies', 'fail', 'f', 'doesn\'t comply') THEN 0.3
|
||||
ELSE 0
|
||||
END)
|
||||
))
|
||||
END AS rating,
|
||||
NOW() AS calculation_date
|
||||
FROM products p
|
||||
JOIN reports r ON p.idproducts = r.idproducts
|
||||
@@ -61,7 +70,6 @@ ON DUPLICATE KEY UPDATE
|
||||
data_analyses = VALUES(data_analyses),
|
||||
rating = VALUES(rating),
|
||||
calculation_date = VALUES(calculation_date);
|
||||
|
||||
";
|
||||
|
||||
if ($conn->query($query) === TRUE) {
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
|
||||
<script src="https://cdn.datatables.net/buttons/2.3.7/js/buttons.html5.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/buttons/2.3.7/js/buttons.print.min.js"></script>
|
||||
<link href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
</head>
|
||||
@@ -46,14 +47,22 @@
|
||||
|
||||
<div class="page-content-wrapper">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="page-title-box">
|
||||
<h4 class="page-title">Supplier Ratings</h4>
|
||||
<br>
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card p-4">
|
||||
<div class="rating-box">
|
||||
<h3 class="m-0">
|
||||
RATE&GO
|
||||
</h3>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Button for Rating Calculation -->
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-right">
|
||||
@@ -64,6 +73,24 @@
|
||||
</div>
|
||||
|
||||
<!-- Chart Section -->
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-right">
|
||||
<label for="rating-filter">Filter by Rating:</label>
|
||||
<select id="rating-filter" class="form-control w-auto d-inline-block">
|
||||
<option value="green">Green (80-100)</option>
|
||||
<option value="orange">Orange (50-79)</option>
|
||||
<option value="red">Red (0-49)</option>
|
||||
<option value="all">All</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div id="supplier-rating-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div id="supplier-rating-chart"></div>
|
||||
@@ -105,11 +132,17 @@
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Funzione per aggiornare il grafico
|
||||
function updateChart(response) {
|
||||
const suppliers = response.map(s => s.name);
|
||||
const ratings = response.map(s => s.rating);
|
||||
const colors = response.map(s => s.color);
|
||||
let chart; // Variabile per memorizzare l'istanza del grafico
|
||||
|
||||
// Funzione per generare il grafico
|
||||
function renderChart(filteredData) {
|
||||
const suppliers = filteredData.map(s => s.name);
|
||||
const ratings = filteredData.map(s => s.rating);
|
||||
const colors = filteredData.map(s => {
|
||||
if (s.rating >= 80) return '#28a745'; // Green
|
||||
if (s.rating >= 50) return '#ffc107'; // Orange
|
||||
return '#dc3545'; // Red
|
||||
});
|
||||
|
||||
const options = {
|
||||
series: [{
|
||||
@@ -117,26 +150,92 @@
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 400
|
||||
height: Math.max(filteredData.length * 18, 300), // Altezza dinamica
|
||||
toolbar: {
|
||||
show: true
|
||||
},
|
||||
animations: {
|
||||
enabled: true, // Abilita animazioni fluide
|
||||
easing: 'easeinout',
|
||||
speed: 800
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
distributed: true,
|
||||
horizontal: true,
|
||||
barHeight: '80%', // Altezza barra
|
||||
dataLabels: {
|
||||
position: 'inside' // Valori all'interno delle barre
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: colors,
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
colors: ['#000'], // Colore nero per i valori
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
formatter: function(val) {
|
||||
return val; // Mostra il valore direttamente
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: suppliers
|
||||
categories: suppliers,
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '12px'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
text: 'Supplier Ratings',
|
||||
text: 'Supplier Ratings (Filtered)',
|
||||
align: 'center'
|
||||
}
|
||||
};
|
||||
|
||||
// Renderizza il grafico
|
||||
const chart = new ApexCharts(
|
||||
document.querySelector("#supplier-rating-chart"),
|
||||
options
|
||||
);
|
||||
// Distruggi il grafico precedente, se esiste
|
||||
if (chart) {
|
||||
chart.destroy();
|
||||
}
|
||||
|
||||
// Crea un nuovo grafico
|
||||
chart = new ApexCharts(document.querySelector("#supplier-rating-chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Funzione per filtrare i dati
|
||||
function filterData(data, filter) {
|
||||
if (filter === "green") return data.filter(s => s.rating >= 80);
|
||||
if (filter === "orange") return data.filter(s => s.rating >= 50 && s.rating < 80);
|
||||
if (filter === "red") return data.filter(s => s.rating < 50);
|
||||
return data; // All
|
||||
}
|
||||
|
||||
// Caricamento iniziale
|
||||
$.get('get_supplier_ratings.php', function(response) {
|
||||
const allData = response;
|
||||
|
||||
// Filtro predefinito: Green
|
||||
const defaultFilter = "green";
|
||||
const filteredData = filterData(allData, defaultFilter);
|
||||
$("#rating-filter").val(defaultFilter); // Imposta il filtro predefinito nel dropdown
|
||||
|
||||
// Renderizza il grafico iniziale
|
||||
renderChart(filteredData);
|
||||
|
||||
// Cambia filtro
|
||||
$("#rating-filter").on('change', function() {
|
||||
const selectedFilter = $(this).val();
|
||||
const filteredData = filterData(allData, selectedFilter);
|
||||
renderChart(filteredData); // Re-renderizza il grafico con i dati filtrati
|
||||
});
|
||||
});
|
||||
|
||||
// Inizializza DataTables
|
||||
const supplierTable = $('#supplierTable').DataTable({
|
||||
ajax: {
|
||||
@@ -167,7 +266,7 @@
|
||||
{
|
||||
data: 'rating',
|
||||
render: function(data, type, row) {
|
||||
const color = data >= 8 ? '#28a745' : data >= 5 ? '#ffc107' : '#dc3545';
|
||||
const color = data >= 80 ? '#28a745' : data >= 50 ? '#ffc107' : '#dc3545';
|
||||
return `<span style="color: ${color}; font-weight: bold;">${data}</span>`;
|
||||
}
|
||||
},
|
||||
@@ -184,12 +283,15 @@
|
||||
buttons: [
|
||||
'copy', 'csv', 'excel', 'pdf', 'print' // Tipi di esportazione
|
||||
],
|
||||
lengthMenu: [
|
||||
[10, 25, 50, 100, -1], // Valori
|
||||
[10, 25, 50, 100, "All"] // Etichette corrispondenti
|
||||
],
|
||||
initComplete: function(settings, json) {
|
||||
updateChart(json); // Aggiorna il grafico dopo aver caricato la tabella
|
||||
renderChart(json); // Aggiorna il grafico dopo aver caricato la tabella
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Funzione per calcolare i rating e aggiornare grafico e tabella
|
||||
$('#calculate-rating').on('click', function() {
|
||||
$.ajax({
|
||||
@@ -199,7 +301,7 @@
|
||||
alert('Ratings calculated successfully!');
|
||||
supplierTable.ajax.reload(); // Ricarica la tabella
|
||||
$.get('get_supplier_ratings.php', function(response) {
|
||||
updateChart(response); // Aggiorna il grafico
|
||||
renderChart(response); // Aggiorna il grafico
|
||||
});
|
||||
},
|
||||
error: function() {
|
||||
@@ -211,6 +313,7 @@
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -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