Dashboard corrections

resources/views/home/home2.blade.php

@@ -86,18 +86,17 @@
                                 $heads = [
                                     'Industry',
                                     'Organization Name',
-                                    'API Key',
                                     'Data Type',
                                     'Monthly API Calls',
                                     ['label' => 'Actions', 'no-export' => true, 'width' => 5],
                                 ];
 
                                 $data = [
-                                    ['Telco', 'Safaricom', 'API-1243', 'ID + Birth', '45,000'],
-                                    ['Telco', 'Airtel', 'API-9421', 'ID Only', '33,500'],
-                                    ['FBSI', 'Equity Bank', 'API-5521', 'All', '64,200'],
-                                    ['FBSI', 'NCBA', 'API-6211', 'ID + Passport', '22,700'],
-                                    ['Gov', 'NHIF', 'API-7710', 'Birth Only', '17,000'],
+                                    ['Telco', 'Safaricom', 'ID + Birth', '45,000'],
+                                    ['Telco', 'Airtel', 'ID Only', '33,500'],
+                                    ['FBSI', 'Equity Bank', 'All', '64,200'],
+                                    ['FBSI', 'NCBA', 'ID + Passport', '22,700'],
+                                    ['Gov', 'NHIF', 'Birth Only', '17,000'],
                                 ];
 
                                 $config = [
@@ -146,8 +145,6 @@
             </div>
 
             <div class="col-lg-5 d-flex flex-column">
-                <div>
-                    <div>
                 <x-adminlte-card title="Total API Requests Processed" theme="" icon="" collapsible>
                     <x-slot name="titleSlot">
                         <h4 class="card-title">Total API Requests Processed</h4>
@@ -157,18 +154,17 @@
                             $heads = [
                                 'Organization',
                                 'Industry',
-                                        'API Key',
                                 'Total Requests',
                                 'Success Rate (%)',
                                 ['label' => 'Actions', 'no-export' => true, 'width' => 5],
                             ];
 
                             $data = [
-                                        ['Safaricom', 'Telco', 'API-1243', '1,203,421', '98.2'],
-                                        ['Airtel', 'Telco', 'API-9421', '834,775', '97.5'],
-                                        ['Equity Bank', 'FBSI', 'API-5521', '1,509,342', '96.9'],
-                                        ['NCBA', 'FBSI', 'API-6211', '675,312', '95.3'],
-                                        ['NHIF', 'Gov', 'API-7710', '321,008', '92.6'],
+                                ['Safaricom', 'Telco', '1,203,421', '98.2'],
+                                ['Airtel', 'Telco', '834,775', '97.5'],
+                                ['Equity Bank', 'FBSI', '1,509,342', '96.9'],
+                                ['NCBA', 'FBSI', '675,312', '95.3'],
+                                ['NHIF', 'Gov', '321,008', '92.6'],
                             ];
 
                             $config = [
@@ -195,17 +191,16 @@
                         </x-adminlte-datatable>
                     </div>
                 </x-adminlte-card>
-                    </div>
 
                 <x-adminlte-card title="Data Sources" theme="" icon="" collapsible>
                     <x-slot name="titleSlot">
                         <h4 class="card-title">Data Sources</h4>
                     </x-slot>
-                        <div class="py-4">
-                            <canvas id="dataSource1"></canvas>
-                        </div>
+                    <canvas id="dataSource1" height="250"></canvas>
+                    <div class="chart-legend text-center mt-3" id="dataSource1-legend"></div>
                 </x-adminlte-card>
-                </div>
+                
+                
             </div>
         </div>
     </main>
@@ -220,30 +215,66 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script>
 
-        let chart1;
-
         $(document).ready(() => {
-            chart1 = document.getElementById('dataSource1');
-
-            new Chart(chart1, {
-                type: 'doughnut',
-                data: {
-                    labels: ['CRD', 'DOI', 'NRB', 'RAD', 'RG'],
-                    datasets: [{
-                        label: 'Population Dataset',
-                        data: [300, 50, 100, 150, 125],
-                        backgroundColor: [
+            const ctx = document.getElementById('dataSource1');
+            const data = [41.3, 6.9, 13.8, 20.7, 17.2];
+            const labels = ['CRD', 'DOI', 'NRB', 'RAD', 'RG'];
+            const colors = [
                 'rgb(255,99,132)',
                 'rgb(54,162,235)',
                 'rgb(255,205,86)',
                 'rgb(16,203,23)',
-                            'rgb(159,8,234)',
-                        ],
+                'rgb(159,8,234)'
+            ];
+
+            // Calculate total for percentages
+            const total = data.reduce((sum, value) => sum + value, 0);
+            const percentages = data.map(value => ((value / total) * 100).toFixed(1) + '%');
+
+            const chart = new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        data: data,
+                        backgroundColor: colors,
                         hoverOffset: 4
                     }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            position: 'bottom',
+                            labels: {
+                                generateLabels: function(chart) {
+                                    const data = chart.data;
+                                    return data.labels.map((label, i) => {
+                                        const value = data.datasets[0].data[i];
+                                        const percentage = ((value / total) * 100).toFixed(1) + '%';
+                                        return {
+                                            text: `${label}: ${percentage}`,
+                                            fillStyle: data.datasets[0].backgroundColor[i],
+                                            hidden: false,
+                                            index: i
+                                        };
+                                    });
+                                }
+                            }
+                        },
+                        tooltip: {
+                            callbacks: {
+                                label: function(context) {
+                                    const label = context.label || '';
+                                    const value = context.raw || 0;
+                                    const percentage = ((value / total) * 100).toFixed(1) + '%';
+                                    return `${label}: ${value} (${percentage})`;
+                                }
+                            }
+                        }
+                    }
                 }
             });
-
         });
 
         $(document).ready(function() {