feedback grafici report corsi

app/Http/Livewire/Reports.php

@@ -508,6 +508,20 @@ class Reports extends Component
             7 => 'Lug',
             8 => 'Ago'
         ];
+        $monthNamesExtended = [
+            0 => 'Settembre',
+            1 => 'Ottobre',
+            2 => 'Novembre',
+            3 => 'Dicembre',
+            4 => 'Gennaio',
+            5 => 'Febbraio',
+            6 => 'Marzo',
+            7 => 'Aprile',
+            8 => 'Maggio',
+            9 => 'Giugno',
+            10 => 'Luglio',
+            11 => 'Agosto'
+        ];
 
         $monthlyData = [];
         foreach ($monthOrder as $i) {
@@ -631,13 +645,15 @@ class Reports extends Component
                     'label' => 'TOT. INCASSATO',
                     'data' => $earnedData,
                     'participantData' => $participantData,
-                    'suspendedData' => $suspendedData
+                    'suspendedData' => $suspendedData,
+                    'monthNamesExtended' => $monthNamesExtended,
                 ],
                 [
                     'label' => 'TOT. DA INCASSARE',
                     'data' => $daIncassareData,
                     'participantData' => $participantData,
-                    'suspendedData' => $suspendedData
+                    'suspendedData' => $suspendedData,
+                    'monthNamesExtended' => $monthNamesExtended,
                 ]
             ],
             'tableData' => $tableData,

public/css/chart-reports.css

@@ -561,7 +561,7 @@
 
 .course-table .table-header {
     display: grid;
-    grid-template-columns: 1fr 40px 110px 75px;
+    grid-template-columns: 1fr 89px 110px 75px;
     background: white;
     padding: 12px 16px;
     font-weight: 600;
@@ -572,7 +572,7 @@
 
 .course-table .table-row {
     display: grid;
-    grid-template-columns: 1fr 40px 110px 75px;
+    grid-template-columns: 1fr 89px 110px 75px;
     padding: 12px 16px;
     border-bottom: 1px solid #f3f4f6;
     transition: background-color 0.2s;
@@ -630,10 +630,11 @@
     justify-content: center;
     font-weight: 600;
     font-size: 0.8rem;
+    color: #10b981;
 }
 /*
 .course-table .table-cell.percentage.good {
-    color: #059669;
+    color: #10b981;
 }
 
 .course-table .table-cell.percentage.warning {
@@ -964,7 +965,7 @@ canvas[id^="courses-chart-"] {
 
 .modern-chart-layout {
     display: grid;
-    grid-template-columns: minmax(350px, 350px) minmax(0, 1fr);
+    grid-template-columns: minmax(400px, 400px) minmax(0, 1fr);
     gap: 24px;
     align-items: start;
     margin-top: 20px;

resources/views/livewire/reports.blade.php

@@ -996,6 +996,7 @@
 
                     const participantData = courseData.datasets.find(d => d.participantData)?.participantData || [];
                     const suspendedData = courseData.datasets.find(d => d.suspendedData)?.suspendedData || [];
+                    const monthNamesExtended = courseData.datasets.find(d => d.monthNamesExtended)?.monthNamesExtended || [];
 
                     const ctx = canvasElement.getContext('2d');
 
@@ -1031,6 +1032,7 @@
                                     order: 1,
                                     participantData: participantData,
                                     suspendedData: suspendedData,
+                                    monthNamesExtended: monthNamesExtended,
                                 },
                                 {
                                     label: 'TOT. DA INCASSARE',
@@ -1052,6 +1054,7 @@
                                     order: 2,
                                     participantData: participantData,
                                     suspendedData: suspendedData,
+                                    monthNamesExtended: monthNamesExtended,
                                 }
                             ]
                         },
@@ -1134,20 +1137,20 @@
                                     titleColor: '#111827',
                                     bodyFont: {
                                         size: 14,
-                                        weight: 'bold',
+                                        weight: '400',
                                     },
                                     bodyColor: '#111827',
                                     footerFont: {
                                         size: 14,
-                                        weight: 'bold',
+                                        weight: '400',
                                     },
-                                    footerColor: '#0C6197',
+                                    // footerColor: '#0C6197',
                                     footerSpacing: 0,
                                     footerMarginTop: 0,
                                     padding: 16,
                                     boxPadding: 8,
                                     usePointStyle: true,
-                                    displayColors: false,
+                                    displayColors: true,
                                     callbacks: {
                                         title: function (tooltipItems) {
                                             let sum = 0;
@@ -1156,23 +1159,28 @@
                                                 sum += tooltipItem.parsed.y;
                                             });
 
-                                            return tooltipItems[0].label + '\n' + 'TOTALE ATTESO: €' + new Intl.NumberFormat('it-IT').format(sum);
-                                        },
-                                        labelTextColor: function(tooltipItems) {
-                                            return tooltipItems.dataset.backgroundColor;
+                                            let item = tooltipItems[0];
+                                            let index = item.dataIndex;
+                                            let monthNameExtended = item.dataset["monthNamesExtended"] ? item.dataset["monthNamesExtended"][index] : 0;
+
+                                            // return item.label + '\n' + 'TOTALE ATTESO: €' + new Intl.NumberFormat('it-IT').format(sum);
+                                            return monthNameExtended + '\n' + 'TOTALE ATTESO: €' + new Intl.NumberFormat('it-IT').format(sum);
                                         },
+                                        // labelTextColor: function(tooltipItems) {
+                                        //     return tooltipItems.dataset.backgroundColor;
+                                        // },
                                         label: function (tooltipItems) {
                                             let label = tooltipItems.dataset.label + ': €' + new Intl.NumberFormat('it-IT').format(tooltipItems.parsed.y);
 
                                             return label;
                                         },
-                                        footer: function (tooltipItems) {
-                                            let item = tooltipItems[0];
-                                            let index = item.dataIndex;
-                                            let suspendedData = item.dataset["suspendedData"] ? item.dataset["suspendedData"][index] : 0;
+                                        // footer: function (tooltipItems) {
+                                        //     let item = tooltipItems[0];
+                                        //     let index = item.dataIndex;
+                                        //     let suspendedData = item.dataset["suspendedData"] ? item.dataset["suspendedData"][index] : 0;
 
-                                            return "TOTALE SOSPESI: " + suspendedData;
-                                        }
+                                        //     return "TOTALE SOSPESI: " + suspendedData;
+                                        // }
                                     }
                                 }
                             },
@@ -1211,7 +1219,7 @@
                 let tableHtml = `<div class="course-table">
                                     <div class="table-header">
                                         <div class="table-cell month">MESE</div>
-                                        <div class="table-cell percentage">%</div>
+                                        <div class="table-cell percentage">%<br/>INCASSATO</div>
                                         <div class="table-cell delta">TOT. DA INCASSARE</div>
                                         <div class="table-cell suspended">SOSPESI</div>
                                     </div>`;