made filters and fixed chart problems
This commit is contained in:
parent
4583537638
commit
91b3490ff9
@ -11,7 +11,9 @@
|
|||||||
|
|
||||||
|
|
||||||
//line-chart
|
//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 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||||
gradientStroke1.addColorStop(0, '#008cff');
|
gradientStroke1.addColorStop(0, '#008cff');
|
||||||
|
|||||||
@ -1,11 +1,97 @@
|
|||||||
<?php include('../../Connections/repnew.php'); ?>
|
<?php include('../../Connections/repnew.php'); ?>
|
||||||
<?php
|
<?php
|
||||||
$conn = new mysqli($servername, $username, $password, $database);
|
$conn = new mysqli($servername, $username, $password, $database);
|
||||||
|
// error_reporting(1);
|
||||||
|
// ini_set('display_errors', 1);
|
||||||
// Ottieni i filtri dal POST
|
// Ottieni i filtri dal POST
|
||||||
$startDate = isset($_POST['startDate']) ? $_POST['startDate'] : '';
|
$startDate = isset($_POST['startDate']) ? $_POST['startDate'] : '';
|
||||||
$endDate = isset($_POST['endDate']) ? $_POST['endDate'] : '';
|
$endDate = isset($_POST['endDate']) ? $_POST['endDate'] : '';
|
||||||
$supplierFilter = isset($_POST['supplier']) ? $_POST['supplier'] : '';
|
// 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
|
// Creazione della condizione dei filtri di data e supplier
|
||||||
$filters = "WHERE 1=1";
|
$filters = "WHERE 1=1";
|
||||||
@ -13,13 +99,45 @@ if (!empty($startDate) && !empty($endDate)) {
|
|||||||
$filters .= " AND r.reportsDateOut BETWEEN '$startDate' AND '$endDate'";
|
$filters .= " AND r.reportsDateOut BETWEEN '$startDate' AND '$endDate'";
|
||||||
}
|
}
|
||||||
if (!empty($supplierFilter)) {
|
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)
|
// 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)) {
|
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);
|
$totalProductsResult = $conn->query($totalProductsQuery);
|
||||||
$totalProducts = $totalProductsResult->fetch_assoc()['totalProducts'];
|
$totalProducts = $totalProductsResult->fetch_assoc()['totalProducts'];
|
||||||
@ -138,13 +256,28 @@ while ($row = $worstSuppliersResult->fetch_assoc()) {
|
|||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$suPfilters='';
|
||||||
// Statistic for products by suppliers
|
// 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 = "
|
$productBySupplierQuery = "
|
||||||
SELECT p.namesupplier AS supplier, COUNT(p.idproducts) AS totalProducts
|
SELECT p.namesupplier AS supplier, COUNT(p.idproducts) AS totalProducts
|
||||||
FROM products p
|
FROM products p
|
||||||
WHERE p.namesupplier IS NOT NULL
|
WHERE p.namesupplier IS NOT NULL $suPfilters
|
||||||
GROUP BY p.namesupplier
|
GROUP BY p.namesupplier
|
||||||
ORDER BY totalProducts DESC";
|
ORDER BY totalProducts DESC";
|
||||||
|
|
||||||
$productBySupplierResult = $conn->query($productBySupplierQuery);
|
$productBySupplierResult = $conn->query($productBySupplierQuery);
|
||||||
$productBySupplier = [];
|
$productBySupplier = [];
|
||||||
while ($row = $productBySupplierResult->fetch_assoc()) {
|
while ($row = $productBySupplierResult->fetch_assoc()) {
|
||||||
@ -153,6 +286,96 @@ while ($row = $productBySupplierResult->fetch_assoc()) {
|
|||||||
'totalProducts' => $row['totalProducts']
|
'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)
|
// New Query: Distribution of analyses (for pie chart)
|
||||||
$analysisDistributionQuery = "
|
$analysisDistributionQuery = "
|
||||||
@ -192,6 +415,12 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
'topFailingAnalysis' => $topFailingAnalysis,
|
'topFailingAnalysis' => $topFailingAnalysis,
|
||||||
'worstSuppliers' => $worstSuppliers,
|
'worstSuppliers' => $worstSuppliers,
|
||||||
'productBySupplier' => $productBySupplier,
|
'productBySupplier' => $productBySupplier,
|
||||||
|
'refNumbers' => $refNumbers,
|
||||||
|
'productsSeasons' => $productsSeasons,
|
||||||
|
'ageRange' => $ageRange,
|
||||||
|
'labName' => $labName,
|
||||||
|
'tesType' => $tesType,
|
||||||
|
'numberLabs' => $numberLabs,
|
||||||
'analysisDistribution' => $analysisDistribution // Distribuzione delle analisi per il grafico a torta
|
'analysisDistribution' => $analysisDistribution // Distribuzione delle analisi per il grafico a torta
|
||||||
]);
|
]);
|
||||||
exit; // Ferma l'esecuzione del resto dello script dopo aver risposto all'AJAX
|
exit; // Ferma l'esecuzione del resto dello script dopo aver risposto all'AJAX
|
||||||
|
|||||||
@ -186,8 +186,7 @@ include('parsedatachart.php');
|
|||||||
}
|
}
|
||||||
|
|
||||||
.filters-applied {
|
.filters-applied {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: #3368ff;
|
|
||||||
color: white;
|
color: white;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
@ -208,6 +207,28 @@ include('parsedatachart.php');
|
|||||||
</div>
|
</div>
|
||||||
</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 -->
|
<!-- Begin page -->
|
||||||
@ -242,6 +263,116 @@ include('parsedatachart.php');
|
|||||||
</div>
|
</div>
|
||||||
<!-- end page title end breadcrumb -->
|
<!-- 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">
|
<div class="row">
|
||||||
@ -262,8 +393,7 @@ include('parsedatachart.php');
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<label for="supplierFilter">Supplier</label>
|
<label for="supplierFilter">Supplier</label>
|
||||||
<select id="supplierFilter" class="form-control select2">
|
<select id="supplierFilter" class="form-control select2" multiple>
|
||||||
<option value="">All Suppliers</option>
|
|
||||||
<?php foreach ($productBySupplier as $supplier): ?>
|
<?php foreach ($productBySupplier as $supplier): ?>
|
||||||
<option value="<?php echo $supplier['supplier']; ?>"><?php echo $supplier['supplier']; ?></option>
|
<option value="<?php echo $supplier['supplier']; ?>"><?php echo $supplier['supplier']; ?></option>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
@ -272,9 +402,9 @@ include('parsedatachart.php');
|
|||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
<!-- Active Filters Display -->
|
<!-- 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>
|
<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>
|
<button id="clearFilters" class="btn btn-sm btn-warning ml-3">Clear Filters</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -351,7 +481,7 @@ include('parsedatachart.php');
|
|||||||
<div class="col-md-4"> <!-- Colonna per il primo grafico (Pie Chart) -->
|
<div class="col-md-4"> <!-- Colonna per il primo grafico (Pie Chart) -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<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 id="reportPieChart"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -416,74 +546,6 @@ include('parsedatachart.php');
|
|||||||
</div>
|
</div>
|
||||||
<!-- END wrapper -->
|
<!-- END wrapper -->
|
||||||
<script>
|
<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>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
@ -495,6 +557,12 @@ include('parsedatachart.php');
|
|||||||
var startDate = $('#startDate').val();
|
var startDate = $('#startDate').val();
|
||||||
var endDate = $('#endDate').val();
|
var endDate = $('#endDate').val();
|
||||||
var supplier = $('#supplierFilter').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({
|
$.ajax({
|
||||||
url: 'parsedatachart.php',
|
url: 'parsedatachart.php',
|
||||||
@ -502,10 +570,22 @@ include('parsedatachart.php');
|
|||||||
data: {
|
data: {
|
||||||
startDate: startDate,
|
startDate: startDate,
|
||||||
endDate: endDate,
|
endDate: endDate,
|
||||||
supplier: supplier
|
supplier: supplier,
|
||||||
|
productsRefnumber: productsRefnumber,
|
||||||
|
productsSeason: productsSeason,
|
||||||
|
ageRange: ageRange,
|
||||||
|
reportsLabName: reportsLabName,
|
||||||
|
reportsTestType: reportsTestType,
|
||||||
|
reportsNumberLab: reportsNumberLab
|
||||||
},
|
},
|
||||||
success: function(response) {
|
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
|
// Aggiorna le cards con i nuovi dati
|
||||||
$('#totalProducts').text(data.totalProducts);
|
$('#totalProducts').text(data.totalProducts);
|
||||||
@ -530,16 +610,326 @@ include('parsedatachart.php');
|
|||||||
return parseInt(item.totalTests, 10); // Converte il conteggio dei test in numeri interi
|
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() {
|
error: function() {
|
||||||
alert('Error retrieving data.');
|
alert('Error retrieving data.');
|
||||||
@ -548,7 +938,7 @@ include('parsedatachart.php');
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Eventi per applicare i filtri
|
// Eventi per applicare i filtri
|
||||||
$('#startDate, #endDate, #supplierFilter').on('change', function() {
|
$('#startDate, #endDate, #supplierFilter, #productsRefnumber, #productsSeason, #ageRange, #reportsLabName, #reportsTestType, #reportsNumberLab').on('change', function() {
|
||||||
updateData();
|
updateData();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -557,8 +947,14 @@ include('parsedatachart.php');
|
|||||||
$('#startDate').val('');
|
$('#startDate').val('');
|
||||||
$('#endDate').val('');
|
$('#endDate').val('');
|
||||||
$('#supplierFilter').val('').trigger('change');
|
$('#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();
|
updateData();
|
||||||
$('#activeFilters').hide();
|
// $('#activeFilters').hide();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Chiamata iniziale per caricare i dati alla prima visualizzazione della pagina
|
// 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); ?>%)";
|
document.getElementById('failedTestsPercent').innerText = "(<?php echo number_format($failedTestsPercent, 2); ?>%)";
|
||||||
</script>
|
</script>
|
||||||
<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 -->
|
<!-- plugin JS -->
|
||||||
<script src="../assets/js/popper.min.js"></script>
|
<script src="../assets/js/popper.min.js"></script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user