From 91b3490ff93d0dc5e5480f34ec1c2d069a21d889 Mon Sep 17 00:00:00 2001
From: kapsona777 <lasha.kapanadze.1@btu.edu.ge>
Date: Tue, 24 Sep 2024 23:17:16 +0400
Subject: [PATCH] made filters and fixed chart problems

---
 public/userarea/assets/pages/dashboard.js  |   4 +-
 public/userarea/statkpi/parsedatachart.php | 245 ++++++-
 public/userarea/statkpi/statkpi.php        | 794 +++++++++++++--------
 3 files changed, 733 insertions(+), 310 deletions(-)

diff --git a/public/userarea/assets/pages/dashboard.js b/public/userarea/assets/pages/dashboard.js
index 540b2dc..14427d5 100644
--- a/public/userarea/assets/pages/dashboard.js
+++ b/public/userarea/assets/pages/dashboard.js
@@ -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');
diff --git a/public/userarea/statkpi/parsedatachart.php b/public/userarea/statkpi/parsedatachart.php
index 9f9f30d..61a7c61 100644
--- a/public/userarea/statkpi/parsedatachart.php
+++ b/public/userarea/statkpi/parsedatachart.php
@@ -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
diff --git a/public/userarea/statkpi/statkpi.php b/public/userarea/statkpi/statkpi.php
index 872e130..5debed4 100644
--- a/public/userarea/statkpi/statkpi.php
+++ b/public/userarea/statkpi/statkpi.php
@@ -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}')">&times;</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>