Grafico presenze

app/Http/Livewire/Member.php

@@ -49,7 +49,10 @@ class Member extends Component
         if ($type === 'corsi' && $this->dataId > 0) {
             $this->loadMemberCards();
             $this->checkCourseAvailability();
-        }
+        }        
+        if ($type === 'presenze') {
+            $this->emit('load-chart', $this->mesi, $this->valori);
+        }        
         $this->dispatchBrowserEvent('scroll-to-top');
     }
     public function sortBy($field)
@@ -169,6 +172,9 @@ class Member extends Component
         'birth_date' => 'before_or_equal:today'
     ];
 
+    public $mesi = [];
+    public $valori = [];
+
     public function resetFields()
     {
         $this->dataId = -1;
@@ -755,6 +761,9 @@ class Member extends Component
     public function loadMemberPresences()
     {
 
+        $this->mesi = array('Settembre', 'Ottobre', 'Novembre', 'Dicembre', 'Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto');
+        $this->valori = array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
+
         $this->loadCombo();
 
         $this->member_presences = [];
@@ -799,6 +808,21 @@ class Member extends Component
                 {
                     $status = "<span style=\"color:green\">Prezenza ordinaria</span>";
                     $this->presenze += 1;
+                    $monthMap = [
+                        9 => 0,
+                        10 => 1,
+                        11 => 2,
+                        12 => 3,
+                        1 => 4,
+                        2 => 5,
+                        3 => 6,
+                        4 => 7,
+                        5 => 8,
+                        6 => 9,
+                        7 => 10,
+                        8 => 11,
+                    ];
+                    $this->valori[$monthMap[date('n', strtotime($calendar->from))]] += 1;
                 }
                 else
                 {
@@ -851,6 +875,9 @@ class Member extends Component
             fn(array $a, array $b): int => $a[$sortVariable] <=> $b[$sortVariable]
         );
 
+        
+        $this->emit('load-chart', $this->mesi, $this->valori);
+
         //usort($this->member_presences, $this->cmp);
         //usort($this->member_presences, function ($a, $b) { return $a['from'] > $b['from']; });
         

resources/views/livewire/member.blade.php

@@ -1175,9 +1175,10 @@
                                                     {{$annullate}}
                                                 </div>
                                             </div>
-                                        </div>
+                                        </div>                                        
                                         <div class="row ">
                                             <div class="col-md-12">
+                                                  <canvas id="presenzeChart" style="padding:20px"></canvas>
                                             </div>
                                         </div>
                                         <div class="row " style="height: 300px; overflow:auto; ">
@@ -2234,9 +2235,11 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 @endpush
 
 @push('scripts')
+
     <script>
 
         function showData(id)
@@ -2817,5 +2820,44 @@
             }, 200);
         });
 
+        Livewire.on('load-chart', (mesi, valori) => {
+
+            try 
+            {
+
+                const ctx = document.getElementById('presenzeChart');
+
+                try
+                {
+                    x.destroy();
+                }
+                catch (ee)
+                {}
+
+                x = new Chart(ctx, {
+                    type: 'bar',
+                    data: {
+                    labels: mesi,
+                    datasets: [{
+                        label: 'Presenze',
+                        data: valori,
+                        borderWidth: 1
+                    }]
+                    },
+                    options: {
+                    scales: {
+                        y: {
+                        beginAtZero: true
+                        }
+                    }
+                    }
+                });
+            }
+            catch(e)
+            {
+                console.log(e);
+            }
+        });
+
     </script>
 @endpush