synonim pages and new dump
This commit is contained in:
+183
-107
@@ -32,21 +32,21 @@ include('parsedatachart.php');
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
#activeFilters{
|
||||
#activeFilters {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
flex-direction: row;
|
||||
background: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.badge{
|
||||
|
||||
.badge {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.width-100 {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -201,7 +201,7 @@ include('parsedatachart.php');
|
||||
}
|
||||
|
||||
.filters-applied {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
@@ -210,15 +210,15 @@ include('parsedatachart.php');
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
margin: 20px;
|
||||
}
|
||||
.chart-box {
|
||||
|
||||
.chart-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
@@ -235,7 +235,6 @@ include('parsedatachart.php');
|
||||
|
||||
<!-- sidebar filter style -->
|
||||
<style>
|
||||
|
||||
.filter-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -243,29 +242,33 @@ include('parsedatachart.php');
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
background: #f8f9fa;
|
||||
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
|
||||
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
display: none;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.active-filters {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
transition: margin-right 0.3s; /* Smooth transition */
|
||||
transition: margin-right 0.3s;
|
||||
/* Smooth transition */
|
||||
}
|
||||
|
||||
#main-content{
|
||||
transition: margin-right 0.3s; /* Smooth transition */
|
||||
#main-content {
|
||||
transition: margin-right 0.3s;
|
||||
/* Smooth transition */
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
margin-right: 300px; /* Hide the sidebar */
|
||||
margin-right: 300px;
|
||||
/* Hide the sidebar */
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -284,7 +287,7 @@ include('parsedatachart.php');
|
||||
|
||||
<div class="page-content-wrapper " id="main-content">
|
||||
|
||||
<div class="container-fluid" >
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
@@ -304,9 +307,9 @@ include('parsedatachart.php');
|
||||
<button id="toggleFilters" class="btn btn-primary">Toggle Filters</button>
|
||||
|
||||
<!-- Right Sidebar -->
|
||||
<div class="filter-sidebar" id="filterSidebar">
|
||||
<?php
|
||||
|
||||
<div class="filter-sidebar" id="filterSidebar">
|
||||
<?php
|
||||
|
||||
// 'refNumbers' => $refNumbers,
|
||||
// 'productsSeasons' => $productsSeasons,
|
||||
// 'ageRange' => $ageRange,
|
||||
@@ -316,17 +319,17 @@ include('parsedatachart.php');
|
||||
|
||||
?>
|
||||
<div class="form-group">
|
||||
<label for="productsRefnumber">Product Ref Number</label>
|
||||
<label for="productsRefnumber">Product Ref Number</label>
|
||||
<select id="productsRefnumber" class="form-control select2" multiple>
|
||||
|
||||
<?php foreach ($refNumbers as $refNumber): ?>
|
||||
<option value="<?php echo $refNumber['refNumber']; ?>"><?php echo $refNumber['refNumber']; ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<option value="<?php echo $refNumber['refNumber']; ?>"><?php echo $refNumber['refNumber']; ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="productsSeason">Product Season</label>
|
||||
<label for="productsSeason">Product Season</label>
|
||||
<select id="productsSeason" class="form-control select2" multiple>
|
||||
<?php foreach ($productsSeasons as $productSeason): ?>
|
||||
<option value="<?php echo $productSeason['season']; ?>"><?php echo $productSeason['season']; ?></option>
|
||||
@@ -335,7 +338,7 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="ageRange">Age Range</label>
|
||||
<label for="ageRange">Age Range</label>
|
||||
<select id="ageRange" class="form-control select2" multiple>
|
||||
<?php foreach ($ageRange as $age): ?>
|
||||
<option value="<?php echo $age['ageRange']; ?>"><?php echo $age['ageRange']; ?></option>
|
||||
@@ -344,7 +347,7 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="reportsLabName">Lab Name</label>
|
||||
<label for="reportsLabName">Lab Name</label>
|
||||
<select id="reportsLabName" class="form-control select2" multiple>
|
||||
<?php foreach ($labName as $lab): ?>
|
||||
<option value="<?php echo $lab['labName']; ?>"><?php echo $lab['labName']; ?></option>
|
||||
@@ -353,7 +356,7 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="reportsTestType">Tes Type</label>
|
||||
<label for="reportsTestType">Tes Type</label>
|
||||
<select id="reportsTestType" class="form-control select2" multiple>
|
||||
<?php foreach ($tesType as $test): ?>
|
||||
<option value="<?php echo $test['tesType']; ?>"><?php echo $test['tesType']; ?></option>
|
||||
@@ -362,7 +365,7 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="reportsNumberLab">Report Number</label>
|
||||
<label for="reportsNumberLab">Report Number</label>
|
||||
<select id="reportsNumberLab" class="form-control select2" multiple>
|
||||
<?php foreach ($numberLabs as $number): ?>
|
||||
<option value="<?php echo $number['reportNumber']; ?>"><?php echo $number['reportNumber']; ?></option>
|
||||
@@ -373,67 +376,67 @@ include('parsedatachart.php');
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.select2').select2({
|
||||
placeholder: "Select options",
|
||||
allowClear: true
|
||||
});
|
||||
|
||||
$('#toggleFilters').on('click', function() {
|
||||
$('#filterSidebar').toggle();
|
||||
$('#main-content').toggleClass('collapsed');
|
||||
});
|
||||
|
||||
$('.select2').on('change', function() {
|
||||
updateActiveFilters();
|
||||
});
|
||||
|
||||
$('#startDate, #endDate').on('change', function() {
|
||||
updateActiveFilters();
|
||||
});
|
||||
|
||||
function updateActiveFilters() {
|
||||
let activeFilters = [];
|
||||
$('.select2').each(function() {
|
||||
const selectedValues = $(this).val();
|
||||
if (selectedValues) {
|
||||
// activeFilters with values
|
||||
// activeFilters.push(`${$(this).prev('label').text()}: ${selectedValues.join(', ')}`);
|
||||
// activefilters without values
|
||||
activeFilters.push($(this).prev('label').text());
|
||||
}
|
||||
$(document).ready(function() {
|
||||
$('.select2').select2({
|
||||
placeholder: "Select options",
|
||||
allowClear: true
|
||||
});
|
||||
$('#startDate, #endDate').each(function(){
|
||||
const selectedValue = $(this).val();
|
||||
if(selectedValue){
|
||||
activeFilters.push($(this).prev('label').text());
|
||||
}
|
||||
})
|
||||
|
||||
$('#activeFilters').html(activeFilters.map(f => `<span class="badge badge-info mr-1">${f} <button class="close" onclick="removeFilter('${f}')">×</button></span>`).join(''));
|
||||
|
||||
$('#toggleFilters').on('click', function() {
|
||||
$('#filterSidebar').toggle();
|
||||
$('#main-content').toggleClass('collapsed');
|
||||
});
|
||||
|
||||
$('.select2').on('change', function() {
|
||||
updateActiveFilters();
|
||||
});
|
||||
|
||||
$('#startDate, #endDate').on('change', function() {
|
||||
updateActiveFilters();
|
||||
});
|
||||
|
||||
function updateActiveFilters() {
|
||||
let activeFilters = [];
|
||||
$('.select2').each(function() {
|
||||
const selectedValues = $(this).val();
|
||||
if (selectedValues) {
|
||||
// activeFilters with values
|
||||
// activeFilters.push(`${$(this).prev('label').text()}: ${selectedValues.join(', ')}`);
|
||||
// activefilters without values
|
||||
activeFilters.push($(this).prev('label').text());
|
||||
}
|
||||
});
|
||||
$('#startDate, #endDate').each(function() {
|
||||
const selectedValue = $(this).val();
|
||||
if (selectedValue) {
|
||||
activeFilters.push($(this).prev('label').text());
|
||||
}
|
||||
})
|
||||
|
||||
$('#activeFilters').html(activeFilters.map(f => `<span class="badge badge-info mr-1">${f} <button class="close" onclick="removeFilter('${f}')">×</button></span>`).join(''));
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
function removeFilter(filter) {
|
||||
const label = filter.split(':')[0];
|
||||
const select = $('label').filter(function() {
|
||||
return $(this).text().trim() === label;
|
||||
}).next('select');
|
||||
|
||||
const dateInput = $('label').filter(function() {
|
||||
return $(this).text().trim() === label;
|
||||
}).next('input')
|
||||
|
||||
// Clear the select2 field
|
||||
if (select.length) {
|
||||
select.val(null).trigger('change');
|
||||
}
|
||||
// Clear the date field
|
||||
if (dateInput.length) {
|
||||
dateInput.val(null).trigger('change');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function removeFilter(filter) {
|
||||
const label = filter.split(':')[0];
|
||||
const select = $('label').filter(function() {
|
||||
return $(this).text().trim() === label;
|
||||
}).next('select');
|
||||
|
||||
const dateInput = $('label').filter(function(){
|
||||
return $(this).text().trim() === label;
|
||||
}).next('input')
|
||||
|
||||
// Clear the select2 field
|
||||
if (select.length) {
|
||||
select.val(null).trigger('change');
|
||||
}
|
||||
// Clear the date field
|
||||
if(dateInput.length){
|
||||
dateInput.val(null).trigger('change');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -455,7 +458,7 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="supplierFilter">Supplier</label>
|
||||
<select id="supplierFilter" class="form-control select2" multiple>
|
||||
<select id="supplierFilter" class="form-control select2" multiple>
|
||||
<?php foreach ($productBySupplier as $supplier): ?>
|
||||
<option value="<?php echo $supplier['supplier']; ?>"><?php echo $supplier['supplier']; ?></option>
|
||||
<?php endforeach; ?>
|
||||
@@ -593,6 +596,17 @@ include('parsedatachart.php');
|
||||
</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 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@@ -615,7 +629,7 @@ include('parsedatachart.php');
|
||||
const chartContainer = document.getElementById('charts');
|
||||
const sortable = new Sortable(chartContainer, {
|
||||
animation: 150,
|
||||
onEnd: function () {
|
||||
onEnd: function() {
|
||||
saveChartOrder(); // Save chart order after dragging
|
||||
}
|
||||
});
|
||||
@@ -630,7 +644,7 @@ include('parsedatachart.php');
|
||||
url: 'chartorder.php',
|
||||
method: 'POST',
|
||||
data: {
|
||||
method:'save',
|
||||
method: 'save',
|
||||
order: order
|
||||
},
|
||||
success: function(response) {
|
||||
@@ -660,7 +674,7 @@ include('parsedatachart.php');
|
||||
url: 'chartorder.php',
|
||||
method: 'POST',
|
||||
data: {
|
||||
method:'load'
|
||||
method: 'load'
|
||||
},
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
@@ -713,9 +727,9 @@ include('parsedatachart.php');
|
||||
alert('No data found.');
|
||||
data = {};
|
||||
return;
|
||||
}else{
|
||||
} else {
|
||||
var data = JSON.parse(response);
|
||||
}
|
||||
}
|
||||
|
||||
// Aggiorna le cards con i nuovi dati
|
||||
$('#totalProducts').text(data.totalProducts);
|
||||
@@ -855,7 +869,7 @@ include('parsedatachart.php');
|
||||
|
||||
// remove bar chart and create a new one
|
||||
$('#worstSuppliersChart').html('');
|
||||
|
||||
|
||||
// Data for the bar chart of worst suppliers
|
||||
var supplierNames = data.worstSuppliers.map(function(item) {
|
||||
return item.supplier;
|
||||
@@ -925,7 +939,7 @@ include('parsedatachart.php');
|
||||
|
||||
// remove bar chart and create a new one
|
||||
$('#productBySupplierChart').html('');
|
||||
|
||||
|
||||
// Prepara i dati per il grafico
|
||||
var supplierNames = data.productBySupplier.map(function(item) {
|
||||
return item.supplier;
|
||||
@@ -982,19 +996,20 @@ include('parsedatachart.php');
|
||||
chart.render();
|
||||
|
||||
// remove bar chart and create a new one
|
||||
$('#analysisDistributionChart').html('');
|
||||
|
||||
$('#analysisDistributionChart').html(''); // Resetta il contenuto del div
|
||||
|
||||
|
||||
var analysisNames = data.analysisDistribution.map(function(item) {
|
||||
return item.analysisName;
|
||||
});
|
||||
var totalTests = data.analysisDistribution.map(function(item) {
|
||||
return parseInt(item.totalTests, 10);
|
||||
});
|
||||
// Define the horizontal bar chart for analysis distribution
|
||||
|
||||
var analysisBarChartOptions = {
|
||||
series: [{
|
||||
name: 'Total Tests',
|
||||
data: totalTests // Initially empty, will be filled via AJAX
|
||||
data: totalTests
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
@@ -1024,7 +1039,7 @@ include('parsedatachart.php');
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: true,
|
||||
maxWidth: 700, // Increased max width for labels
|
||||
maxWidth: 700,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: ['#000']
|
||||
@@ -1051,15 +1066,73 @@ include('parsedatachart.php');
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
left: 10 // Increased left padding for more label space
|
||||
left: 10
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// Create the initial chart
|
||||
var analysisBarChart = new ApexCharts(document.querySelector("#analysisDistributionChart"), analysisBarChartOptions);
|
||||
analysisBarChart.render();
|
||||
|
||||
// remove bar chart and create a new one
|
||||
$('#analytesFailChart').html('');
|
||||
console.log("Dati degli analiti ricevuti:", data.failedAnalytes);
|
||||
var analyteNames = data.failedAnalytes.map(function(item) {
|
||||
return item.AnalyteName;
|
||||
});
|
||||
var failCounts = data.failedAnalytes.map(function(item) {
|
||||
return parseInt(item.FailCount, 10);
|
||||
});
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
data: failCounts
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 400
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
dataLabels: {
|
||||
position: 'center' // Etichette al centro delle barre
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
colors: ['#fff'], // Colore del testo all'interno delle barre
|
||||
fontSize: '12px'
|
||||
},
|
||||
formatter: function(val, opt) {
|
||||
return analyteNames[opt.dataPointIndex]; // Mostra il nome dell'analita dentro la barra
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: failCounts, // Visualizza solo i numeri sull'asse X
|
||||
title: {
|
||||
text: 'Number of Failures'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false // Nascondiamo le etichette dell'asse Y
|
||||
},
|
||||
title: {
|
||||
text: 'Analytes'
|
||||
}
|
||||
},
|
||||
colors: ['#ffa515'], // Rosso per i Fail
|
||||
title: {
|
||||
text: 'Top 10 Analytes with the Most Failures',
|
||||
align: 'center'
|
||||
}
|
||||
};
|
||||
console.log(data.failedAnalytes);
|
||||
var chart = new ApexCharts(document.querySelector("#analytesFailChart"), options);
|
||||
chart.render();
|
||||
},
|
||||
error: function() {
|
||||
alert('Error retrieving data.');
|
||||
@@ -1067,6 +1140,10 @@ include('parsedatachart.php');
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Eventi per applicare i filtri
|
||||
$('#startDate, #endDate, #supplierFilter, #productsRefnumber, #productsSeason, #ageRange, #reportsLabName, #reportsTestType, #reportsNumberLab').on('change', function() {
|
||||
updateData();
|
||||
@@ -1103,7 +1180,6 @@ include('parsedatachart.php');
|
||||
document.getElementById('failedTestsPercent').innerText = "(<?php echo number_format($failedTestsPercent, 2); ?>%)";
|
||||
</script>
|
||||
<script>
|
||||
|
||||
// for multiple select
|
||||
$(document).ready(function() {
|
||||
$('.select2').select2({
|
||||
@@ -1111,8 +1187,8 @@ include('parsedatachart.php');
|
||||
allowClear: true,
|
||||
width: '100%'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- plugin JS -->
|
||||
<script src="../assets/js/popper.min.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user