made filters and fixed chart problems
This commit is contained in:
parent
4583537638
commit
91b3490ff9
@ -11,7 +11,9 @@
|
||||
|
||||
|
||||
//line-chart
|
||||
var ctx = document.getElementById('lineChart').getContext('2d');
|
||||
if( $('#lineChart').length > 0 ){
|
||||
var ctx = document.getElementById('lineChart').getContext('2d');
|
||||
}
|
||||
|
||||
gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke1.addColorStop(0, '#008cff');
|
||||
|
||||
@ -1,11 +1,97 @@
|
||||
<?php include('../../Connections/repnew.php'); ?>
|
||||
<?php
|
||||
$conn = new mysqli($servername, $username, $password, $database);
|
||||
|
||||
// error_reporting(1);
|
||||
// ini_set('display_errors', 1);
|
||||
// Ottieni i filtri dal POST
|
||||
$startDate = isset($_POST['startDate']) ? $_POST['startDate'] : '';
|
||||
$endDate = isset($_POST['endDate']) ? $_POST['endDate'] : '';
|
||||
$supplierFilter = isset($_POST['supplier']) ? $_POST['supplier'] : '';
|
||||
$endDate = isset($_POST['endDate']) ? $_POST['endDate'] : '';
|
||||
// suppliers can be multiple
|
||||
if(isset($_POST['supplier']) && !empty($_POST['supplier'])){
|
||||
$suppliers = implode(',', $_POST['supplier']);
|
||||
$supplierArr = explode(',', $suppliers);
|
||||
$supplierFilter = '';
|
||||
foreach($supplierArr as $supplier){
|
||||
$supplierFilter .= "'".$supplier."',";
|
||||
}
|
||||
$supplierFilter = substr($supplierFilter,0,-1);
|
||||
} else{
|
||||
$supplierFilter = "";
|
||||
}
|
||||
|
||||
if(isset($_POST["productsRefnumber"]) && !empty($_POST["productsRefnumber"])){
|
||||
$refNumbers = implode(',', $_POST['productsRefnumber']);
|
||||
$refNumbersArr = explode(',', $refNumbers);
|
||||
$refNumberFilter = '';
|
||||
foreach($refNumbersArr as $refNumber){
|
||||
$refNumberFilter .= "'".$refNumber."',";
|
||||
}
|
||||
$refNumberFilter = substr($refNumberFilter,0,-1);
|
||||
}else{
|
||||
$refNumberFilter = "";
|
||||
}
|
||||
|
||||
if(isset($_POST["productsSeason"]) && !empty($_POST["productsSeason"])){
|
||||
$productsSeasons = implode(',', $_POST['productsSeason']);
|
||||
$productsSeasonsArr = explode(',', $productsSeasons);
|
||||
$productsSeasonFilter = '';
|
||||
foreach($productsSeasonsArr as $productsSeason){
|
||||
$productsSeasonFilter .= "'".$productsSeason."',";
|
||||
}
|
||||
$productsSeasonFilter = substr($productsSeasonFilter,0,-1);
|
||||
}else{
|
||||
$productsSeasonFilter = "";
|
||||
}
|
||||
|
||||
if(isset($_POST["ageRange"]) && !empty($_POST["ageRange"])){
|
||||
$ageRanges = implode(',', $_POST['ageRange']);
|
||||
$ageRangesArr = explode(',', $ageRanges);
|
||||
$ageRangeFilter = '';
|
||||
foreach($ageRangesArr as $ageRange){
|
||||
$ageRangeFilter .= "'".$ageRange."',";
|
||||
}
|
||||
$ageRangeFilter = substr($ageRangeFilter,0,-1);
|
||||
}else{
|
||||
$ageRangeFilter = "";
|
||||
}
|
||||
|
||||
if(isset($_POST["reportsLabName"]) && !empty($_POST["reportsLabName"])){
|
||||
$labNames = implode(',', $_POST['reportsLabName']);
|
||||
$labNamesArr = explode(',', $labNames);
|
||||
$labNameFilter = '';
|
||||
foreach($labNamesArr as $labName){
|
||||
$labNameFilter .= "'".$labName."',";
|
||||
}
|
||||
$labNameFilter = substr($labNameFilter,0,-1);
|
||||
}else{
|
||||
$labNameFilter = "";
|
||||
}
|
||||
|
||||
if(isset($_POST["reportsTestType"]) && !empty($_POST["reportsTestType"])){
|
||||
$tesTypes = implode(',', $_POST['reportsTestType']);
|
||||
$tesTypesArr = explode(',', $tesTypes);
|
||||
$tesTypeFilter = '';
|
||||
foreach($tesTypesArr as $tesType){
|
||||
$tesTypeFilter .= "'".$tesType."',";
|
||||
}
|
||||
$tesTypeFilter = substr($tesTypeFilter,0,-1);
|
||||
}else{
|
||||
$tesTypeFilter = "";
|
||||
}
|
||||
|
||||
if(isset($_POST["reportsNumberLab"]) && !empty($_POST["reportsNumberLab"])){
|
||||
$numberLabs = implode(',', $_POST['reportsNumberLab']);
|
||||
$numberLabsArr = explode(',', $numberLabs);
|
||||
$numberLabFilter = '';
|
||||
foreach($numberLabsArr as $numberLab){
|
||||
$numberLabFilter .= "'".$numberLab."',";
|
||||
}
|
||||
$numberLabFilter = substr($numberLabFilter,0,-1);
|
||||
}else{
|
||||
$numberLabFilter = "";
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Creazione della condizione dei filtri di data e supplier
|
||||
$filters = "WHERE 1=1";
|
||||
@ -13,13 +99,45 @@ if (!empty($startDate) && !empty($endDate)) {
|
||||
$filters .= " AND r.reportsDateOut BETWEEN '$startDate' AND '$endDate'";
|
||||
}
|
||||
if (!empty($supplierFilter)) {
|
||||
$filters .= " AND p.namesupplier = '$supplierFilter'";
|
||||
$filters .= " AND p.namesupplier IN ($supplierFilter)";
|
||||
}
|
||||
if (!empty($refNumberFilter)) {
|
||||
$filters .= " AND p.products_refnumber IN ($refNumberFilter)";
|
||||
}
|
||||
|
||||
if (!empty($productsSeasonFilter)) {
|
||||
$filters .= " AND p.products_season IN ($productsSeasonFilter)";
|
||||
}
|
||||
|
||||
if (!empty($ageRangeFilter)) {
|
||||
$filters .= " AND p.agerange IN ($ageRangeFilter)";
|
||||
}
|
||||
|
||||
if (!empty($labNameFilter)) {
|
||||
$filters .= " AND r.reports_LabName IN ($labNameFilter)";
|
||||
}
|
||||
|
||||
if (!empty($tesTypeFilter)) {
|
||||
$filters .= " AND r.reports_testype IN ($tesTypeFilter)";
|
||||
}
|
||||
|
||||
if (!empty($numberLabFilter)) {
|
||||
$filters .= " AND r.reportsNumberLab IN ($numberLabFilter)";
|
||||
}
|
||||
|
||||
// Statistic 1: Total number of products (filtered by supplier if necessary)
|
||||
$totalProductsQuery = "SELECT COUNT(DISTINCT p.idproducts) AS totalProducts FROM products p";
|
||||
$totalProductsQuery = "SELECT COUNT(DISTINCT p.idproducts) AS totalProducts FROM products p WHERE 1=1";
|
||||
if (!empty($supplierFilter)) {
|
||||
$totalProductsQuery .= " WHERE p.namesupplier = '$supplierFilter'";
|
||||
$totalProductsQuery .= " AND p.namesupplier IN ($supplierFilter)";
|
||||
}
|
||||
if (!empty($refNumberFilter)) {
|
||||
$totalProductsQuery .= " AND p.products_refnumber IN ($refNumberFilter)";
|
||||
}
|
||||
if (!empty($productsSeasonFilter)) {
|
||||
$totalProductsQuery .= " AND p.products_season IN ($productsSeasonFilter)";
|
||||
}
|
||||
if (!empty($ageRangeFilter)) {
|
||||
$totalProductsQuery .= " AND p.agerange IN ($ageRangeFilter)";
|
||||
}
|
||||
$totalProductsResult = $conn->query($totalProductsQuery);
|
||||
$totalProducts = $totalProductsResult->fetch_assoc()['totalProducts'];
|
||||
@ -138,13 +256,28 @@ while ($row = $worstSuppliersResult->fetch_assoc()) {
|
||||
];
|
||||
}
|
||||
|
||||
$suPfilters='';
|
||||
// Statistic for products by suppliers
|
||||
|
||||
if(!empty($supplierFilter)){
|
||||
$suPfilters .= " AND p.namesupplier IN ($supplierFilter)";
|
||||
}
|
||||
if(!empty($refNumberFilter)){
|
||||
$suPfilters .= " AND p.products_refnumber IN ($refNumberFilter)";
|
||||
}
|
||||
if(!empty($productsSeasonFilter)){
|
||||
$suPfilters .= " AND p.products_season IN ($productsSeasonFilter)";
|
||||
}
|
||||
if(!empty($ageRangeFilter)){
|
||||
$suPfilters .= " AND p.agerange IN ($ageRangeFilter)";
|
||||
}
|
||||
$productBySupplierQuery = "
|
||||
SELECT p.namesupplier AS supplier, COUNT(p.idproducts) AS totalProducts
|
||||
FROM products p
|
||||
WHERE p.namesupplier IS NOT NULL
|
||||
WHERE p.namesupplier IS NOT NULL $suPfilters
|
||||
GROUP BY p.namesupplier
|
||||
ORDER BY totalProducts DESC";
|
||||
ORDER BY totalProducts DESC";
|
||||
|
||||
$productBySupplierResult = $conn->query($productBySupplierQuery);
|
||||
$productBySupplier = [];
|
||||
while ($row = $productBySupplierResult->fetch_assoc()) {
|
||||
@ -153,6 +286,96 @@ while ($row = $productBySupplierResult->fetch_assoc()) {
|
||||
'totalProducts' => $row['totalProducts']
|
||||
];
|
||||
}
|
||||
// refNumbers
|
||||
$refNumbersQuery = "
|
||||
SELECT p.products_refnumber AS refNumber
|
||||
FROM products p
|
||||
WHERE p.products_refnumber IS NOT NULL
|
||||
GROUP BY p.products_refnumber
|
||||
";
|
||||
$refNumbersResult = $conn->query($refNumbersQuery);
|
||||
$refNumbers = [];
|
||||
while ($row = $refNumbersResult->fetch_assoc()) {
|
||||
$refNumbers[] = [
|
||||
'refNumber' => $row['refNumber']
|
||||
];
|
||||
}
|
||||
// productsSeason
|
||||
$productsSeasonQuery = "
|
||||
SELECT p.products_season AS season
|
||||
FROM products p
|
||||
WHERE p.products_season IS NOT NULL
|
||||
GROUP BY p.products_season
|
||||
";
|
||||
$productsSeasonResult = $conn->query($productsSeasonQuery);
|
||||
$productsSeasons = [];
|
||||
while ($row = $productsSeasonResult->fetch_assoc()) {
|
||||
$productsSeasons[] = [
|
||||
"season" => $row['season']
|
||||
];
|
||||
}
|
||||
|
||||
// ageRanges
|
||||
$ageRangeQuery = "
|
||||
SELECT p.agerange AS ageRange
|
||||
FROM products p
|
||||
WHERE p.agerange IS NOT NULL
|
||||
GROUP BY p.agerange
|
||||
";
|
||||
|
||||
$ageRangeResult = $conn->query($ageRangeQuery);
|
||||
$ageRange = [];
|
||||
while ($row = $ageRangeResult->fetch_assoc()) {
|
||||
$ageRange[] = [
|
||||
"ageRange" => $row['ageRange']
|
||||
];
|
||||
}
|
||||
|
||||
// labNames
|
||||
$labNameQuery = "
|
||||
SELECT r.reports_LabName AS LabName
|
||||
FROM reports r
|
||||
WHERE r.reports_LabName IS NOT NULL
|
||||
GROUP BY r.reports_LabName
|
||||
";
|
||||
$labNameResult = $conn->query($labNameQuery);
|
||||
$labName = [];
|
||||
while ($row = $labNameResult->fetch_assoc()) {
|
||||
$labName[] = [
|
||||
"LabName" => $row['LabName']
|
||||
];
|
||||
}
|
||||
|
||||
// tesTypes
|
||||
$tesTypeQuery = "
|
||||
SELECT r.reports_testype AS tesType
|
||||
FROM reports r
|
||||
WHERE r.reports_testype IS NOT NULL
|
||||
GROUP BY r.reports_testype
|
||||
";
|
||||
$tesTypeResult = $conn->query($tesTypeQuery);
|
||||
$tesType = [];
|
||||
while ($row = $tesTypeResult->fetch_assoc()) {
|
||||
$tesType[] = [
|
||||
"tesType" => $row['tesType']
|
||||
];
|
||||
}
|
||||
|
||||
// numberLabs
|
||||
$numberLabsQuery = "
|
||||
SELECT r.reportsNumberLab as reportNumber
|
||||
FROM reports r
|
||||
WHERE r.reportsNumberLab IS NOT NULL
|
||||
GROUP BY r.reportsNumberLab
|
||||
";
|
||||
$numberLabsResult = $conn->query($numberLabsQuery);
|
||||
$numberLabs = [];
|
||||
while ($row = $numberLabsResult->fetch_assoc()) {
|
||||
$numberLabs[] = [
|
||||
"reportNumber" => $row['reportNumber']
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
// New Query: Distribution of analyses (for pie chart)
|
||||
$analysisDistributionQuery = "
|
||||
@ -192,6 +415,12 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
'topFailingAnalysis' => $topFailingAnalysis,
|
||||
'worstSuppliers' => $worstSuppliers,
|
||||
'productBySupplier' => $productBySupplier,
|
||||
'refNumbers' => $refNumbers,
|
||||
'productsSeasons' => $productsSeasons,
|
||||
'ageRange' => $ageRange,
|
||||
'labName' => $labName,
|
||||
'tesType' => $tesType,
|
||||
'numberLabs' => $numberLabs,
|
||||
'analysisDistribution' => $analysisDistribution // Distribuzione delle analisi per il grafico a torta
|
||||
]);
|
||||
exit; // Ferma l'esecuzione del resto dello script dopo aver risposto all'AJAX
|
||||
|
||||
@ -186,8 +186,7 @@ include('parsedatachart.php');
|
||||
}
|
||||
|
||||
.filters-applied {
|
||||
display: inline-block;
|
||||
background-color: #3368ff;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
@ -208,6 +207,28 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- sidebar filter style -->
|
||||
<style>
|
||||
|
||||
.filter-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
background: #f8f9fa;
|
||||
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
|
||||
padding: 20px;
|
||||
display: none;
|
||||
z-index: 999;
|
||||
}
|
||||
.active-filters {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Begin page -->
|
||||
@ -242,6 +263,116 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
<!-- end page title end breadcrumb -->
|
||||
|
||||
<button id="toggleFilters" class="btn btn-primary">Toggle Filters</button>
|
||||
|
||||
<!-- Right Sidebar -->
|
||||
<div class="filter-sidebar" id="filterSidebar">
|
||||
<?php
|
||||
|
||||
// 'refNumbers' => $refNumbers,
|
||||
// 'productsSeasons' => $productsSeasons,
|
||||
// 'ageRange' => $ageRange,
|
||||
// 'labName' => $labName,
|
||||
// 'tesType' => $tesType,
|
||||
// 'numberLabs' => $numberLabs,
|
||||
|
||||
?>
|
||||
<div class="form-group">
|
||||
<label for="productsRefnumber">Product Ref Number</label>
|
||||
<br>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="productsSeason">Product Season</label>
|
||||
<br>
|
||||
<select id="productsSeason" class="form-control select2" multiple>
|
||||
<?php foreach ($productsSeasons as $productSeason): ?>
|
||||
<option value="<?php echo $productSeason['season']; ?>"><?php echo $productSeason['season']; ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="ageRange">Age Range</label>
|
||||
<br>
|
||||
<select id="ageRange" class="form-control select2" multiple>
|
||||
<?php foreach ($ageRange as $age): ?>
|
||||
<option value="<?php echo $age['ageRange']; ?>"><?php echo $age['ageRange']; ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="reportsLabName">Lab Name</label>
|
||||
<br>
|
||||
<select id="reportsLabName" class="form-control select2" multiple>
|
||||
<?php foreach ($labName as $lab): ?>
|
||||
<option value="<?php echo $lab['labName']; ?>"><?php echo $lab['labName']; ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="reportsTestType">Tes Type</label>
|
||||
<br>
|
||||
<select id="reportsTestType" class="form-control select2" multiple>
|
||||
<?php foreach ($tesType as $test): ?>
|
||||
<option value="<?php echo $test['tesType']; ?>"><?php echo $test['tesType']; ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="reportsNumberLab">Report Number</label>
|
||||
<br>
|
||||
<select id="reportsNumberLab" class="form-control select2" multiple>
|
||||
<?php foreach ($numberLabs as $number): ?>
|
||||
<option value="<?php echo $number['reportNumber']; ?>"><?php echo $number['reportNumber']; ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.select2').select2({
|
||||
placeholder: "Select options",
|
||||
allowClear: true
|
||||
});
|
||||
|
||||
$('#toggleFilters').on('click', function() {
|
||||
$('#filterSidebar').toggle();
|
||||
});
|
||||
|
||||
$('.select2').on('change', function() {
|
||||
updateActiveFilters();
|
||||
});
|
||||
|
||||
function updateActiveFilters() {
|
||||
let activeFilters = [];
|
||||
$('.select2').each(function() {
|
||||
const selectedValues = $(this).val();
|
||||
if (selectedValues) {
|
||||
activeFilters.push(`${$(this).prev('label').text()}: ${selectedValues.join(', ')}`);
|
||||
}
|
||||
});
|
||||
|
||||
$('#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];
|
||||
$(`select:has(option:contains('${filter.split(': ')[1]}'))`).val(null).trigger('change');
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class="row">
|
||||
@ -262,8 +393,7 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="supplierFilter">Supplier</label>
|
||||
<select id="supplierFilter" class="form-control select2">
|
||||
<option value="">All Suppliers</option>
|
||||
<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; ?>
|
||||
@ -272,9 +402,9 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
<hr>
|
||||
<!-- Active Filters Display -->
|
||||
<div id="activeFilters" class="mt-3" style="display: none;">
|
||||
<div id="activeFiltersDiv" class="mt-3" style="background-color:white;">
|
||||
<h6>Active Filters:</h6>
|
||||
<div id="filterDisplay" class="filters-applied badge badge-info p-2" style="font-size: 16px;"></div>
|
||||
<div id="activeFilters" class="filters-applied badge badge-info p-2" style="font-size: 16px;"></div>
|
||||
<button id="clearFilters" class="btn btn-sm btn-warning ml-3">Clear Filters</button>
|
||||
</div>
|
||||
|
||||
@ -351,7 +481,7 @@ include('parsedatachart.php');
|
||||
<div class="col-md-4"> <!-- Colonna per il primo grafico (Pie Chart) -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Reports Overview</h5>
|
||||
<h5 class="card-title" id="reports_overview">Reports Overview</h5>
|
||||
<div id="reportPieChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -416,74 +546,6 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
<!-- END wrapper -->
|
||||
<script>
|
||||
// Define the horizontal bar chart for analysis distribution
|
||||
var analysisBarChartOptions = {
|
||||
series: [{
|
||||
name: 'Total Tests',
|
||||
data: [] // Initially empty, will be filled via AJAX
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 500
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
columnWidth: '100%',
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
xaxis: {
|
||||
title: {
|
||||
text: 'Number of Tests'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: true,
|
||||
maxWidth: 700, // Increased max width for labels
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: ['#000']
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Analysis Name'
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
colors: ['#004d00']
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function(val) {
|
||||
return val + " tests";
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Analysis Distribution',
|
||||
align: 'center'
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
left: 10 // Increased left padding for more label space
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Create the initial chart
|
||||
var analysisBarChart = new ApexCharts(document.querySelector("#analysisDistributionChart"), analysisBarChartOptions);
|
||||
analysisBarChart.render();
|
||||
</script>
|
||||
|
||||
|
||||
@ -495,6 +557,12 @@ include('parsedatachart.php');
|
||||
var startDate = $('#startDate').val();
|
||||
var endDate = $('#endDate').val();
|
||||
var supplier = $('#supplierFilter').val();
|
||||
var productsRefnumber = $('#productsRefnumber').val();
|
||||
var productsSeason = $('#productsSeason').val();
|
||||
var ageRange = $('#ageRange').val();
|
||||
var reportsLabName = $('#reportsLabName').val();
|
||||
var reportsTestType = $('#reportsTestType').val();
|
||||
var reportsNumberLab = $('#reportsNumberLab').val();
|
||||
|
||||
$.ajax({
|
||||
url: 'parsedatachart.php',
|
||||
@ -502,10 +570,22 @@ include('parsedatachart.php');
|
||||
data: {
|
||||
startDate: startDate,
|
||||
endDate: endDate,
|
||||
supplier: supplier
|
||||
supplier: supplier,
|
||||
productsRefnumber: productsRefnumber,
|
||||
productsSeason: productsSeason,
|
||||
ageRange: ageRange,
|
||||
reportsLabName: reportsLabName,
|
||||
reportsTestType: reportsTestType,
|
||||
reportsNumberLab: reportsNumberLab
|
||||
},
|
||||
success: function(response) {
|
||||
var data = JSON.parse(response);
|
||||
if (!response) {
|
||||
alert('No data found.');
|
||||
data = {};
|
||||
return;
|
||||
}else{
|
||||
var data = JSON.parse(response);
|
||||
}
|
||||
|
||||
// Aggiorna le cards con i nuovi dati
|
||||
$('#totalProducts').text(data.totalProducts);
|
||||
@ -530,16 +610,326 @@ include('parsedatachart.php');
|
||||
return parseInt(item.totalTests, 10); // Converte il conteggio dei test in numeri interi
|
||||
});
|
||||
|
||||
// Aggiorna il grafico a barre verticali
|
||||
analysisBarChart.updateOptions({
|
||||
xaxis: {
|
||||
categories: analysisLabels // Aggiorna le etichette
|
||||
}
|
||||
});
|
||||
analysisBarChart.updateSeries([{
|
||||
data: analysisCounts // Aggiorna i dati del grafico
|
||||
}]);
|
||||
}
|
||||
|
||||
// remove pie chart and create a new one
|
||||
$('#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)
|
||||
var options = {
|
||||
series: [intFailReports, intPassReports, intOtherReports],
|
||||
chart: {
|
||||
width: '100%', // Mantieni la larghezza al 100% all'interno della colonna Bootstrap
|
||||
type: 'pie',
|
||||
},
|
||||
labels: ['Fail', 'Pass', 'Others'],
|
||||
colors: ['#FF4D4D', '#28A745', '#FFA500'], // Red for Fail, Green for Pass, Orange for Others
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 250 // Riduci la larghezza sui dispositivi mobili
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
}],
|
||||
legend: {
|
||||
position: 'bottom', // Posiziona la legenda sotto il grafico
|
||||
offsetY: 0,
|
||||
height: 50, // Altezza della legenda
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#reportPieChart"), options);
|
||||
chart.render();
|
||||
|
||||
// remove bar chart and create a new one
|
||||
$('#worsttenanalysis').html('');
|
||||
|
||||
// Data for the bar chart
|
||||
var analysisNames = data.topFailingAnalysis.map(function(item) {
|
||||
return item.name;
|
||||
});
|
||||
var failCounts = data.topFailingAnalysis.map(function(item) {
|
||||
return parseInt(item.failCount, 10);
|
||||
});
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
data: failCounts
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
dataLabels: {
|
||||
position: 'center' // Posiziona i nomi delle analisi al centro delle barre
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
colors: ['#fff'], // Colore del testo all'interno delle barre (bianco)
|
||||
fontSize: '12px'
|
||||
},
|
||||
formatter: function(val, opt) {
|
||||
return analysisNames[opt.dataPointIndex]; // Mostra il nome dell'analisi 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: 'Analysis'
|
||||
}
|
||||
},
|
||||
colors: ['#FF4D4D'], // Rosso per i Fail
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
height: 300
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}],
|
||||
title: {
|
||||
text: 'Top 10 Analyses with the Most Failures',
|
||||
align: 'center'
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#worsttenanalysis"), options);
|
||||
chart.render();
|
||||
|
||||
// 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;
|
||||
});
|
||||
var failPercentages = data.worstSuppliers.map(function(item) {
|
||||
return parseFloat(item.failPercentage);
|
||||
});
|
||||
var totalReportsForSupplier = data.worstSuppliers.map(function(item) {
|
||||
return parseInt(item.totalReports, 10);
|
||||
});
|
||||
var failedReportsForSupplier = data.worstSuppliers.map(function(item) {
|
||||
return parseInt(item.failedReports, 10);
|
||||
});
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
data: failPercentages
|
||||
}],
|
||||
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) {
|
||||
// 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
|
||||
return supplierNames[opt.dataPointIndex] + ' (' + val.toFixed(2) + '%) (Fail: ' + failedReports + ' - Total: ' + totalReports + ')';
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: supplierNames, // Visualizza i nomi dei fornitori
|
||||
title: {
|
||||
text: 'Failure Percentage (%)'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false // Nascondiamo le etichette dell'asse Y
|
||||
},
|
||||
title: {
|
||||
text: 'Suppliers'
|
||||
}
|
||||
},
|
||||
colors: ['#3368FF'], // Colore blu chiaro per le barre
|
||||
title: {
|
||||
text: 'Top 10 Suppliers with the Highest Failed Reports Percentage',
|
||||
align: 'center'
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#worstSuppliersChart"), options);
|
||||
chart.render();
|
||||
|
||||
// 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;
|
||||
});
|
||||
var totalProducts = data.productBySupplier.map(function(item) {
|
||||
return parseInt(item.totalProducts, 10);
|
||||
});
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Total Products',
|
||||
data: totalProducts
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 400
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false, // Imposta il grafico a barre verticali
|
||||
columnWidth: '50%',
|
||||
dataLabels: {
|
||||
position: 'top', // Etichette nella parte superiore delle barre
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
offsetY: -20,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: ['#000']
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: supplierNames,
|
||||
title: {
|
||||
text: 'Suppliers'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Number of Products'
|
||||
}
|
||||
},
|
||||
colors: ['#3368FF'],
|
||||
title: {
|
||||
text: 'Number of Products by Supplier',
|
||||
align: 'center'
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#productBySupplierChart"), options);
|
||||
chart.render();
|
||||
|
||||
// remove bar chart and create a new one
|
||||
$('#analysisDistributionChart').html('');
|
||||
|
||||
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
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 500
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
columnWidth: '100%',
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
xaxis: {
|
||||
categories: analysisNames,
|
||||
title: {
|
||||
text: 'Number of Tests'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: true,
|
||||
maxWidth: 700, // Increased max width for labels
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: ['#000']
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Analysis Name'
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
colors: ['#004d00']
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function(val) {
|
||||
return val + " tests";
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Analysis Distribution',
|
||||
align: 'center'
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
left: 10 // Increased left padding for more label space
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Create the initial chart
|
||||
var analysisBarChart = new ApexCharts(document.querySelector("#analysisDistributionChart"), analysisBarChartOptions);
|
||||
analysisBarChart.render();
|
||||
|
||||
},
|
||||
error: function() {
|
||||
alert('Error retrieving data.');
|
||||
@ -548,7 +938,7 @@ include('parsedatachart.php');
|
||||
}
|
||||
|
||||
// Eventi per applicare i filtri
|
||||
$('#startDate, #endDate, #supplierFilter').on('change', function() {
|
||||
$('#startDate, #endDate, #supplierFilter, #productsRefnumber, #productsSeason, #ageRange, #reportsLabName, #reportsTestType, #reportsNumberLab').on('change', function() {
|
||||
updateData();
|
||||
});
|
||||
|
||||
@ -557,8 +947,14 @@ include('parsedatachart.php');
|
||||
$('#startDate').val('');
|
||||
$('#endDate').val('');
|
||||
$('#supplierFilter').val('').trigger('change');
|
||||
$('#productsRefnumber').val('').trigger('change');
|
||||
$('#productsSeason').val('').trigger('change');
|
||||
$('#ageRange').val('').trigger('change');
|
||||
$('#reportsLabName').val('').trigger('change');
|
||||
$('#reportsTestType').val('').trigger('change');
|
||||
$('#reportsNumberLab').val('').trigger('change');
|
||||
updateData();
|
||||
$('#activeFilters').hide();
|
||||
// $('#activeFilters').hide();
|
||||
});
|
||||
|
||||
// Chiamata iniziale per caricare i dati alla prima visualizzazione della pagina
|
||||
@ -577,220 +973,16 @@ include('parsedatachart.php');
|
||||
document.getElementById('failedTestsPercent').innerText = "(<?php echo number_format($failedTestsPercent, 2); ?>%)";
|
||||
</script>
|
||||
<script>
|
||||
// Data for pie chart (Reports: Fail, Pass, Others)
|
||||
var options = {
|
||||
series: [<?php echo $failReportsPie; ?>, <?php echo $passReportsPie; ?>, <?php echo $otherReportsPie; ?>],
|
||||
chart: {
|
||||
width: '100%', // Mantieni la larghezza al 100% all'interno della colonna Bootstrap
|
||||
type: 'pie',
|
||||
},
|
||||
labels: ['Fail', 'Pass', 'Others'],
|
||||
colors: ['#FF4D4D', '#28A745', '#FFA500'], // Red for Fail, Green for Pass, Orange for Others
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 250 // Riduci la larghezza sui dispositivi mobili
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
}],
|
||||
legend: {
|
||||
position: 'bottom', // Posiziona la legenda sotto il grafico
|
||||
offsetY: 0,
|
||||
height: 50, // Altezza della legenda
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#reportPieChart"), options);
|
||||
chart.render();
|
||||
</script>
|
||||
<script>
|
||||
// Data for the bar chart
|
||||
var analysisNames = <?php echo json_encode(array_column($topFailingAnalysis, 'name')); ?>;
|
||||
var failCounts = <?php echo json_encode(array_column($topFailingAnalysis, 'failCount')); ?>;
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
data: failCounts
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
dataLabels: {
|
||||
position: 'center' // Posiziona i nomi delle analisi al centro delle barre
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
colors: ['#fff'], // Colore del testo all'interno delle barre (bianco)
|
||||
fontSize: '12px'
|
||||
},
|
||||
formatter: function(val, opt) {
|
||||
return analysisNames[opt.dataPointIndex]; // Mostra il nome dell'analisi 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: 'Analysis'
|
||||
}
|
||||
},
|
||||
colors: ['#FF4D4D'], // Rosso per i Fail
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
height: 300
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}],
|
||||
title: {
|
||||
text: 'Top 10 Analyses with the Most Failures',
|
||||
align: 'center'
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#worsttenanalysis"), options);
|
||||
chart.render();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Data for the bar chart of worst suppliers
|
||||
var supplierNames = <?php echo json_encode(array_column($worstSuppliers, 'supplier')); ?>;
|
||||
var failPercentages = <?php echo json_encode(array_column($worstSuppliers, 'failPercentage')); ?>;
|
||||
var totalReportsForSupplier = <?php echo json_encode(array_column($worstSuppliers, 'totalReports')); ?>;
|
||||
var failedReportsForSupplier = <?php echo json_encode(array_column($worstSuppliers, 'failedReports')); ?>;
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
data: failPercentages
|
||||
}],
|
||||
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) {
|
||||
// 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
|
||||
return supplierNames[opt.dataPointIndex] + ' (' + val.toFixed(2) + '%) (Fail: ' + failedReports + ' - Total: ' + totalReports + ')';
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: supplierNames, // Visualizza i nomi dei fornitori
|
||||
title: {
|
||||
text: 'Failure Percentage (%)'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false // Nascondiamo le etichette dell'asse Y
|
||||
},
|
||||
title: {
|
||||
text: 'Suppliers'
|
||||
}
|
||||
},
|
||||
colors: ['#3368FF'], // Colore blu chiaro per le barre
|
||||
title: {
|
||||
text: 'Top 10 Suppliers with the Highest Failed Reports Percentage',
|
||||
align: 'center'
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#worstSuppliersChart"), options);
|
||||
chart.render();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Prepara i dati per il grafico
|
||||
var supplierNames = <?php echo json_encode(array_column($productBySupplier, 'supplier')); ?>;
|
||||
var totalProducts = <?php echo json_encode(array_column($productBySupplier, 'totalProducts')); ?>;
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Total Products',
|
||||
data: totalProducts
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 400
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false, // Imposta il grafico a barre verticali
|
||||
columnWidth: '50%',
|
||||
dataLabels: {
|
||||
position: 'top', // Etichette nella parte superiore delle barre
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
offsetY: -20,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: ['#000']
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: supplierNames,
|
||||
title: {
|
||||
text: 'Suppliers'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Number of Products'
|
||||
}
|
||||
},
|
||||
colors: ['#3368FF'],
|
||||
title: {
|
||||
text: 'Number of Products by Supplier',
|
||||
align: 'center'
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#productBySupplierChart"), options);
|
||||
chart.render();
|
||||
</script>
|
||||
|
||||
|
||||
// for multiple select
|
||||
$(document).ready(function() {
|
||||
$('.select2').select2({
|
||||
placeholder: "Select options",
|
||||
allowClear: true,
|
||||
width: '100%'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- plugin JS -->
|
||||
<script src="../assets/js/popper.min.js"></script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user