update table on charts
This commit is contained in:
parent
22c95fa063
commit
1e1e078489
@ -272,7 +272,7 @@
|
||||
<h6 class="card-subtitle">Choose the analysis to add to the RSL for the material <?php echo $name_material; ?></h6><br>
|
||||
<?php
|
||||
$analysislist = new WA_MySQLi_RS("analysislist", $repnew, 0);
|
||||
$analysislist->setQuery("SELECT * FROM analysis WHERE analysis.company_id='$idcompany' ORDER BY analysis.name_analysis");
|
||||
$analysislist->setQuery("SELECT * FROM analysisvocabulary WHERE analysisvocabulary.preferred='Y' ORDER BY analysisvocabulary.nameanalysisvoc");
|
||||
$analysislist->execute();
|
||||
?>
|
||||
<form method="post" id="addanalysis">
|
||||
@ -282,8 +282,8 @@
|
||||
<select name="analysis" class="form-select form-control-sm" id="analysis">
|
||||
<?php while (!$analysislist->atEnd()) { //dyn select
|
||||
?>
|
||||
<option value="<?php echo ($analysislist->getColumnVal("idanalysis")); ?>">
|
||||
<?php echo ($analysislist->getColumnVal("name_analysis")); ?>
|
||||
<option value="<?php echo ($analysislist->getColumnVal("idanalysisvocabulary")); ?>">
|
||||
<?php echo ($analysislist->getColumnVal("nameanalysisvoc")); ?>
|
||||
</option>
|
||||
<?php $analysislist->moveNext(); ?>
|
||||
<?php } //dyn select
|
||||
@ -294,7 +294,7 @@
|
||||
<input name="material_id" type="hidden" id="material_id" value="<?php echo $material_id; ?>">
|
||||
<input name="id" type="hidden" id="id" value="<?php echo ($tablequery->getColumnVal("id")); ?>">
|
||||
<input type="submit" class="btn btn-primary btn-sm" value="Submit">
|
||||
<button type="button" id="openPopuppreset" class="btn btn-success btn-sm ml-2">Analysis Preset</button>
|
||||
<!-- <button type="button" id="openPopuppreset" class="btn btn-success btn-sm ml-2">Analysis Preset</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -354,7 +354,7 @@
|
||||
<tbody class="table-danger">
|
||||
<?php
|
||||
$tablequery2 = new WA_MySQLi_RS("tablequery2", $repnew, 0);
|
||||
$tablequery2->setQuery("SELECT * FROM `analysis_rsl` LEFT JOIN analysis ON analysis_rsl.analysis_id=analysis.idanalysis LEFT JOIN standards ON `analysis_rsl`.idmethods=standards.idstandards WHERE analysis_rsl.rsl_id='$idrsl' AND analysis_rsl.material_id='$material_id'");
|
||||
$tablequery2->setQuery("SELECT * FROM `analysis_rsl` LEFT JOIN analysisvocabulary ON analysis_rsl.analysis_id=analysisvocabulary.idanalysisvocabulary LEFT JOIN standards ON `analysis_rsl`.idmethods=standards.idstandards WHERE analysis_rsl.rsl_id='$idrsl' AND analysis_rsl.material_id='$material_id'");
|
||||
$tablequery2->execute();
|
||||
|
||||
?>
|
||||
@ -365,7 +365,7 @@
|
||||
$idanalysis = $tablequery2->getColumnVal("analysis_id");
|
||||
?>
|
||||
<tr class="parent" id="row<?php echo $idanalysis; ?>">
|
||||
<td><?php echo ($tablequery2->getColumnVal("name_analysis")); ?></td>
|
||||
<td><?php echo ($tablequery2->getColumnVal("nameanalysisvoc")); ?></td>
|
||||
<td>
|
||||
<label for="standards-<?php echo $idanalysis; ?>"></label>
|
||||
<div class="select-container">
|
||||
@ -449,7 +449,7 @@
|
||||
</script>
|
||||
<?php
|
||||
$companalysis = new WA_MySQLi_RS("companalysis", $repnew, 0);
|
||||
$companalysis->setQuery("SELECT * FROM analysis_component LEFT JOIN component ON analysis_component.idcomponent=component.idcomponent WHERE analysis_component.idanalysis='$idanalysis'");
|
||||
$companalysis->setQuery("SELECT * FROM analysis_component LEFT JOIN compundsvocabulary ON analysis_component.idcomponent=compundsvocabulary.idcompoundsvocabulary WHERE analysis_component.idanalysis='$idanalysis'");
|
||||
$companalysis->execute(); ?>
|
||||
<?php
|
||||
$umlist = new WA_MySQLi_RS("umlist", $repnew, 1);
|
||||
@ -481,9 +481,9 @@
|
||||
<?php $testo = "Prova suggerimento"; ?>
|
||||
<td class="sa-trigger" data-testo="<?php echo $testo; ?>">
|
||||
<i class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" title="Suggestion"></i>
|
||||
<?php echo ($companalysis->getColumnVal("name_component")); ?>
|
||||
<?php echo ($companalysis->getColumnVal("namecompoundsvocabulary")); ?>
|
||||
</td>
|
||||
<td><?php echo ($companalysis->getColumnVal("cas_component")); ?></td>
|
||||
<td><?php echo ($companalysis->getColumnVal("cascompoundvocabulary")); ?></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
|
||||
@ -25,16 +25,12 @@ if ($_SERVER["REQUEST_METHOD"] === "POST") {
|
||||
|
||||
$InsertQuery = new WA_MySQLi_Query($repnew);
|
||||
$InsertQuery->Action = "insert";
|
||||
$InsertQuery->Table = "`analysis`";
|
||||
$InsertQuery->Table = "`analysisvocabulary`";
|
||||
$InsertQuery->bindColumn("idanalysis", "s", "" . ((isset($_POST["idanalysis"])) ? $_POST["idanalysis"] : "") . "", "WA_DEFAULT");
|
||||
$InsertQuery->bindColumn("name_analysis", "s", "" . ((isset($_POST["name_analysis"])) ? $_POST["name_analysis"] : "") . "", "WA_DEFAULT");
|
||||
$InsertQuery->bindColumn("nameanalysisvoc", "s", "" . ((isset($_POST["name_analysis"])) ? $_POST["name_analysis"] : "") . "", "WA_DEFAULT");
|
||||
$InsertQuery->bindColumn("description_analysis", "s", "" . ((isset($_POST["description_analysis"])) ? $_POST["description_analysis"] : "") . "", "WA_DEFAULT");
|
||||
$InsertQuery->bindColumn("family_analysis", "s", "" . ((isset($_POST["family_analysis"])) ? $_POST["family_analysis"] : "") . "", "WA_DEFAULT");
|
||||
$InsertQuery->bindColumn("company_id", "s", "" . ((isset($_POST["company_id"])) ? $_POST["company_id"] : "") . "", "WA_DEFAULT");
|
||||
$InsertQuery->bindColumn("department_id", "s", "" . ((isset($_POST["department_id"])) ? $_POST["department_id"] : "") . "", "WA_DEFAULT");
|
||||
$InsertQuery->bindColumn("created_at", "s", "" . ((isset($_POST["created_at"])) ? $_POST["created_at"] : "") . "", "WA_DEFAULT");
|
||||
$InsertQuery->bindColumn("updated_at", "s", "" . ((isset($_POST["updated_at"])) ? $_POST["updated_at"] : "") . "", "WA_DEFAULT");
|
||||
$InsertQuery->bindColumn("preset", "s", "" . ((isset($_POST["preset"])) ? $_POST["preset"] : "") . "", "WA_DEFAULT");
|
||||
$InsertQuery->bindColumn("preferred", "s", "Y", "WA_DEFAULT");
|
||||
$InsertQuery->saveInSession("");
|
||||
$InsertQuery->execute();
|
||||
$InsertGoTo = "analysis.php";
|
||||
|
||||
@ -5,12 +5,11 @@
|
||||
if ($_SERVER["REQUEST_METHOD"] === "POST") {
|
||||
$UpdateQuery = new WA_MySQLi_Query($repnew);
|
||||
$UpdateQuery->Action = "update";
|
||||
$UpdateQuery->Table = "`analysis`";
|
||||
$UpdateQuery->bindColumn("name_analysis", "s", "" . ((isset($_POST["name_analysis"])) ? $_POST["name_analysis"] : "") . "", "WA_DEFAULT");
|
||||
$UpdateQuery->Table = "`analysisvocabulary`";
|
||||
$UpdateQuery->bindColumn("nameanalysisvoc", "s", "" . ((isset($_POST["name_analysis"])) ? $_POST["name_analysis"] : "") . "", "WA_DEFAULT");
|
||||
$UpdateQuery->bindColumn("description_analysis", "s", "" . ((isset($_POST["description_analysis"])) ? $_POST["description_analysis"] : "") . "", "WA_DEFAULT");
|
||||
$UpdateQuery->bindColumn("updated_at", "s", "" . ((isset($_POST["updated_at"])) ? $_POST["updated_at"] : "") . "", "WA_DEFAULT");
|
||||
$UpdateQuery->bindColumn("family_analysis", "s", "" . ((isset($_POST["family_analysis"])) ? $_POST["family_analysis"] : "") . "", "WA_DEFAULT");
|
||||
$UpdateQuery->addFilter("idanalysis", "=", "i", "" . ($_GET['idanalysis']) . "");
|
||||
$UpdateQuery->addFilter("idanalysisvocabulary", "=", "i", "" . ($_GET['idanalysis']) . "");
|
||||
$UpdateQuery->execute();
|
||||
$UpdateGoTo = "analysis.php";
|
||||
if (function_exists("rel2abs")) $UpdateGoTo = $UpdateGoTo ? rel2abs($UpdateGoTo, dirname(__FILE__)) : "";
|
||||
@ -125,8 +124,9 @@ if ($_SERVER["REQUEST_METHOD"] === "POST") {
|
||||
<?php $idanalysis = $_GET['idanalysis']; ?>
|
||||
<?php
|
||||
$updatequery = new WA_MySQLi_RS("updatequery", $repnew, 0);
|
||||
$updatequery->setQuery("SELECT * FROM analysis LEFT JOIN family_analysis ON analysis.family_analysis=family_analysis.idfamilyanalysis WHERE analysis.idanalysis='$idanalysis'");
|
||||
$updatequery->setQuery("SELECT * FROM analysisvocabulary LEFT JOIN family_analysis ON analysisvocabulary.family_analysis=family_analysis.idfamilyanalysis WHERE analysisvocabulary.idanalysisvocabulary='$idanalysis'");
|
||||
$updatequery->execute();
|
||||
|
||||
?>
|
||||
|
||||
<!-- end row -->
|
||||
@ -145,7 +145,7 @@ if ($_SERVER["REQUEST_METHOD"] === "POST") {
|
||||
<div class="col-sm-9">
|
||||
<div class="input-group">
|
||||
|
||||
<input name="name_analysis" type="text" class="form-control" id="name_analysis" value="<?php echo htmlspecialchars($updatequery->getColumnVal("name_analysis")); ?>">
|
||||
<input name="name_analysis" type="text" class="form-control" id="name_analysis" value="<?php echo htmlspecialchars($updatequery->getColumnVal("nameanalysisvoc")); ?>">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -202,7 +202,7 @@ LEFT JOIN products ON result_project.idproducts = products.idproducts
|
||||
WHERE LOWER(result_project.result_Rating) = 'fail'
|
||||
GROUP BY namesupplier
|
||||
ORDER BY counter DESC
|
||||
LIMIT 10;
|
||||
LIMIT 30;
|
||||
";
|
||||
|
||||
$resultworstsupplier = mysqli_query($repnew, $worstsupplier) or die("Error in Selecting " . mysqli_error($repnew));
|
||||
|
||||
@ -21,6 +21,17 @@
|
||||
|
||||
<!-- DataTables JS -->
|
||||
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
|
||||
<!-- DataTables Buttons CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.7/css/buttons.dataTables.min.css">
|
||||
|
||||
<!-- DataTables Buttons JS -->
|
||||
<script src="https://cdn.datatables.net/buttons/2.3.7/js/dataTables.buttons.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/buttons/2.3.7/js/buttons.flash.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
|
||||
<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>
|
||||
|
||||
|
||||
</head>
|
||||
@ -167,13 +178,18 @@
|
||||
order: [
|
||||
[6, 'desc']
|
||||
], // Ordina per rating di default
|
||||
pageLength: 50, // Mostra 10 righe per pagina
|
||||
responsive: true, // Adatta il layout alla finestra
|
||||
pageLength: 50,
|
||||
responsive: true,
|
||||
dom: 'lBfrtip', // Aggiunge l'area per i pulsanti
|
||||
buttons: [
|
||||
'copy', 'csv', 'excel', 'pdf', 'print' // Tipi di esportazione
|
||||
],
|
||||
initComplete: function(settings, json) {
|
||||
updateChart(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({
|
||||
|
||||
@ -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() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user