chart causali tabella

app/Http/Livewire/Reports.php

@@ -253,8 +253,8 @@ class Reports extends Component
 
             $treeName = $tempCausal->getTree();
 
-            $displayName = strlen($treeName) > 30 ? substr($treeName, 0, 27) . '...' : $treeName;
-
+            //$displayName = strlen($treeName) > 30 ? substr($treeName, 0, 27) . '...' : $treeName;
+            $displayName = $treeName;
             $inData[] = [
                 'label' => $displayName,
                 'value' => $causal->total_amount,

public/css/chart-reports.css

@@ -705,3 +705,73 @@
     margin-top: 20px;
     min-height: 500px;
 }
+.causals-table-container {
+    background: #f8f9fa;
+    border-radius: 12px;
+    box-shadow: var(--shadow-sm);
+}
+
+.causale-indicator {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin-right: 8px;
+}
+
+.table-cell.causale-name {
+    text-align: left;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+}
+
+.causals-table.compact {
+    font-size: 0.875rem;
+}
+
+.causals-table.compact .table-header {
+    display: grid;
+    grid-template-columns: 2fr 60px 45px;
+    gap: 8px;
+    padding: 8px 12px;
+    font-size: 0.7rem;
+}
+
+.causals-table.compact .table-row {
+    display: grid;
+    grid-template-columns: 2fr 60px 45px;
+    gap: 8px;
+    padding: 6px 12px;
+    font-size: 0.75rem;
+}
+
+.causals-table.compact .table-cell.causale {
+    text-align: left;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.causals-table.compact .table-cell.euro {
+    text-align: right;
+    font-weight: 600;
+    color: var(--success-color);
+    font-size: 0.7rem;
+}
+
+.causals-table.compact .table-cell.percent {
+    text-align: center;
+    font-weight: 600;
+    color: var(--primary-color);
+    font-size: 0.7rem;
+}
+
+.causals-table.compact .causale-indicator {
+    width: 8px;
+    height: 8px;
+    margin-right: 6px;
+    flex-shrink: 0;
+}

resources/views/livewire/reports.blade.php

@@ -59,8 +59,13 @@
                                 id="causals-season-title">{{ $seasonFilter }}</span></h3>
                     </div>
                     <div class="chart-body">
-                        <div class="chart-container">
-                            <canvas id="causals-chart-{{ str_replace('-', '', $seasonFilter) }}"></canvas>
+                        <div style="display: grid; grid-template-columns: 1fr 700px; gap: 1rem; align-items: start;">
+                            <div class="causals-table-container" id="causals-table">
+                            </div>
+
+                            <div class="chart-container">
+                                <canvas id="causals-chart-{{ str_replace('-', '', $seasonFilter) }}"></canvas>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -287,7 +292,7 @@
                 });
             },
 
-            // Replace your createCausalsChart method with this fixed version:
+            // Updated createCausalsChart method with improved sizing and text visibility
             createCausalsChart: function (seasonKey, causalsData) {
                 const chartId = `causals-chart-${seasonKey}`;
                 const canvas = document.getElementById(chartId);
@@ -329,15 +334,18 @@
                     options: {
                         responsive: true,
                         maintainAspectRatio: false,
-                        cutout: '60%',
+                        cutout: '30%',
+                        layout: {
+                            padding: {
+                                top: 10,
+                                right: 10,
+                                bottom: 10,
+                                left: 10
+                            }
+                        },
                         plugins: {
                             legend: {
-                                position: 'left',
-                                labels: {
-                                    usePointStyle: true,
-                                    padding: 15,
-                                    font: { size: 11, weight: '500' }
-                                }
+                                display: false
                             },
                             tooltip: {
                                 backgroundColor: 'rgba(255, 255, 255, 0.95)',
@@ -346,19 +354,32 @@
                                 borderColor: '#e9ecef',
                                 borderWidth: 1,
                                 cornerRadius: 8,
+                                titleFont: {
+                                    size: 13,
+                                    weight: 'bold'
+                                },
+                                bodyFont: {
+                                    size: 12,
+                                    weight: '500'
+                                },
+                                padding: 12,
                                 callbacks: {
+                                    title: function (context) {
+                                        return context[0].label;
+                                    },
                                     label: function (context) {
                                         const value = context.raw;
                                         const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
-                                        return context.label + ': €' +
-                                            new Intl.NumberFormat('it-IT', {
+                                        return [
+                                            `Importo: €${new Intl.NumberFormat('it-IT', {
                                                 minimumFractionDigits: 2,
                                                 maximumFractionDigits: 2
-                                            }).format(value) +
-                                            ` (${percentage}%)`;
+                                            }).format(value)}`,
+                                            `Percentuale: ${percentage}%`
+                                        ];
                                     }
                                 }
-                            }
+                            },
                         },
                         animation: {
                             animateRotate: true,
@@ -366,8 +387,52 @@
                         }
                     }
                 });
+
+                // Create the causals table
+                this.updateCausalsTable(causalsData, dataValues, total);
             },
 
+            updateCausalsTable: function (causalsData, dataValues, total) {
+                const container = document.getElementById('causals-table');
+                if (!container) return;
+
+                const colors = [
+                    '#3b5bdb', '#00b894', '#22b8cf', '#ffd43b', '#ff6b6b',
+                    '#8e44ad', '#e67e22', '#95a5a6', '#f1c40f', '#e74c3c'
+                ];
+
+                let tableHtml = `
+        <div class="causals-table compact">
+            <div class="table-header">
+                <div class="table-cell causale">Causale</div>
+                <div class="table-cell euro">Importo</div>
+                <div class="table-cell percent">%</div>
+            </div>
+    `;
+
+                causalsData.inLabels.forEach((label, index) => {
+                    const value = dataValues[index] || 0;
+                    const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
+                    const color = colors[index % colors.length];
+
+                    tableHtml += `
+            <div class="table-row">
+                <div class="table-cell causale">
+                    <span class="causale-indicator" style="background-color: ${color}"></span>
+                    ${label}
+                </div>
+                <div class="table-cell euro">€${new Intl.NumberFormat('it-IT', {
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 2
+                    }).format(value)}</div>
+                <div class="table-cell percent">${percentage}%</div>
+            </div>
+        `;
+                });
+
+                tableHtml += '</div>';
+                container.innerHTML = tableHtml;
+            },
             createMembersChart: function (seasonKey, membersData) {
                 const chartId = `members-chart-${seasonKey}`;
                 const canvas = document.getElementById(chartId);