solocla/reportify_mncl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update table on charts

Browse Source
This commit is contained in:
Claudio 2024-11-26 14:21:53 +01:00
parent 22c95fa063
commit 1e1e078489
6 changed files with 446 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/userarea/easyspec/detail-rsl.php
View File

@ -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> <h6 class="card-subtitle">Choose the analysis to add to the RSL for the material <?php echo $name_material; ?></h6><br>
<?php <?php
$analysislist = new WA_MySQLi_RS("analysislist", $repnew, 0); $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(); $analysislist->execute();
?> ?>
<form method="post" id="addanalysis"> <form method="post" id="addanalysis">
@ -282,8 +282,8 @@
<select name="analysis" class="form-select form-control-sm" id="analysis"> <select name="analysis" class="form-select form-control-sm" id="analysis">
<?php while (!$analysislist->atEnd()) { //dyn select <?php while (!$analysislist->atEnd()) { //dyn select
?> ?>
<option value="<?php echo ($analysislist->getColumnVal("idanalysis")); ?>"> <option value="<?php echo ($analysislist->getColumnVal("idanalysisvocabulary")); ?>">
<?php echo ($analysislist->getColumnVal("name_analysis")); ?> <?php echo ($analysislist->getColumnVal("nameanalysisvoc")); ?>
</option> </option>
<?php $analysislist->moveNext(); ?> <?php $analysislist->moveNext(); ?>
<?php } //dyn select <?php } //dyn select
@ -294,7 +294,7 @@
<input name="material_id" type="hidden" id="material_id" value="<?php echo $material_id; ?>"> <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 name="id" type="hidden" id="id" value="<?php echo ($tablequery->getColumnVal("id")); ?>">
<input type="submit" class="btn btn-primary btn-sm" value="Submit"> <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>
</div> </div>
</form> </form>
@ -354,7 +354,7 @@
<tbody class="table-danger"> <tbody class="table-danger">
<?php <?php
$tablequery2 = new WA_MySQLi_RS("tablequery2", $repnew, 0); $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(); $tablequery2->execute();
?> ?>
@ -365,7 +365,7 @@
$idanalysis = $tablequery2->getColumnVal("analysis_id"); $idanalysis = $tablequery2->getColumnVal("analysis_id");
?> ?>
<tr class="parent" id="row<?php echo $idanalysis; ?>"> <tr class="parent" id="row<?php echo $idanalysis; ?>">
<td><?php echo ($tablequery2->getColumnVal("name_analysis")); ?></td> <td><?php echo ($tablequery2->getColumnVal("nameanalysisvoc")); ?></td>
<td> <td>
<label for="standards-<?php echo $idanalysis; ?>"></label> <label for="standards-<?php echo $idanalysis; ?>"></label>
<div class="select-container"> <div class="select-container">
@ -449,7 +449,7 @@
</script> </script>
<?php <?php
$companalysis = new WA_MySQLi_RS("companalysis", $repnew, 0); $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(); ?> $companalysis->execute(); ?>
<?php <?php
$umlist = new WA_MySQLi_RS("umlist", $repnew, 1); $umlist = new WA_MySQLi_RS("umlist", $repnew, 1);
@ -481,9 +481,9 @@
<?php $testo = "Prova suggerimento"; ?> <?php $testo = "Prova suggerimento"; ?>
<td class="sa-trigger" data-testo="<?php echo $testo; ?>"> <td class="sa-trigger" data-testo="<?php echo $testo; ?>">
<i class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" title="Suggestion"></i> <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>
<td><?php echo ($companalysis->getColumnVal("cas_component")); ?></td> <td><?php echo ($companalysis->getColumnVal("cascompoundvocabulary")); ?></td>
<td></td> <td></td>
<td></td> <td></td>
<td></td> <td></td>

10
public/userarea/easyspec/insert-analysis.php
View File

@ -25,16 +25,12 @@ if ($_SERVER["REQUEST_METHOD"] === "POST") {
$InsertQuery = new WA_MySQLi_Query($repnew); $InsertQuery = new WA_MySQLi_Query($repnew);
$InsertQuery->Action = "insert"; $InsertQuery->Action = "insert";
$InsertQuery->Table = "`analysis`"; $InsertQuery->Table = "`analysisvocabulary`";
$InsertQuery->bindColumn("idanalysis", "s", "" . ((isset($_POST["idanalysis"])) ? $_POST["idanalysis"] : "") . "", "WA_DEFAULT"); $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("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("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("preferred", "s", "Y", "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->saveInSession(""); $InsertQuery->saveInSession("");
$InsertQuery->execute(); $InsertQuery->execute();
$InsertGoTo = "analysis.php"; $InsertGoTo = "analysis.php";

12
public/userarea/easyspec/update-analysis.php
View File

@ -5,12 +5,11 @@
if ($_SERVER["REQUEST_METHOD"] === "POST") { if ($_SERVER["REQUEST_METHOD"] === "POST") {
$UpdateQuery = new WA_MySQLi_Query($repnew); $UpdateQuery = new WA_MySQLi_Query($repnew);
$UpdateQuery->Action = "update"; $UpdateQuery->Action = "update";
$UpdateQuery->Table = "`analysis`"; $UpdateQuery->Table = "`analysisvocabulary`";
$UpdateQuery->bindColumn("name_analysis", "s", "" . ((isset($_POST["name_analysis"])) ? $_POST["name_analysis"] : "") . "", "WA_DEFAULT"); $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("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->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(); $UpdateQuery->execute();
$UpdateGoTo = "analysis.php"; $UpdateGoTo = "analysis.php";
if (function_exists("rel2abs")) $UpdateGoTo = $UpdateGoTo ? rel2abs($UpdateGoTo, dirname(__FILE__)) : ""; if (function_exists("rel2abs")) $UpdateGoTo = $UpdateGoTo ? rel2abs($UpdateGoTo, dirname(__FILE__)) : "";
@ -125,8 +124,9 @@ if ($_SERVER["REQUEST_METHOD"] === "POST") {
<?php $idanalysis = $_GET['idanalysis']; ?> <?php $idanalysis = $_GET['idanalysis']; ?>
<?php <?php
$updatequery = new WA_MySQLi_RS("updatequery", $repnew, 0); $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(); $updatequery->execute();
?> ?>
<!-- end row --> <!-- end row -->
@ -145,7 +145,7 @@ if ($_SERVER["REQUEST_METHOD"] === "POST") {
<div class="col-sm-9"> <div class="col-sm-9">
<div class="input-group"> <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> </div>
</div> </div>

2
public/userarea/include/parsedatachart.php
View File

@ -202,7 +202,7 @@ LEFT JOIN products ON result_project.idproducts = products.idproducts
WHERE LOWER(result_project.result_Rating) = 'fail' WHERE LOWER(result_project.result_Rating) = 'fail'
GROUP BY namesupplier GROUP BY namesupplier
ORDER BY counter DESC ORDER BY counter DESC
LIMIT 10; LIMIT 30;
"; ";
$resultworstsupplier = mysqli_query($repnew, $worstsupplier) or die("Error in Selecting " . mysqli_error($repnew)); $resultworstsupplier = mysqli_query($repnew, $worstsupplier) or die("Error in Selecting " . mysqli_error($repnew));

20
public/userarea/ratego/ratego.php
View File

@ -21,6 +21,17 @@
<!-- DataTables JS --> <!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script> <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> </head>
@ -167,13 +178,18 @@
order: [ order: [
[6, 'desc'] [6, 'desc']
], // Ordina per rating di default ], // Ordina per rating di default
pageLength: 50, // Mostra 10 righe per pagina pageLength: 50,
responsive: true, // Adatta il layout alla finestra responsive: true,
dom: 'lBfrtip', // Aggiunge l'area per i pulsanti
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print' // Tipi di esportazione
],
initComplete: function(settings, json) { initComplete: function(settings, json) {
updateChart(json); // Aggiorna il grafico dopo aver caricato la tabella updateChart(json); // Aggiorna il grafico dopo aver caricato la tabella
} }
}); });
// Funzione per calcolare i rating e aggiornare grafico e tabella // Funzione per calcolare i rating e aggiornare grafico e tabella
$('#calculate-rating').on('click', function() { $('#calculate-rating').on('click', function() {
$.ajax({ $.ajax({

455
public/userarea/statkpi/statkpi.php
View File

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