Feat: implement Chart Js for analytics

app/Http/Controllers/AdminController.php

@@ -2,13 +2,16 @@
 
 namespace App\Http\Controllers;
 
-namespace App\Http\Controllers;
-
-use Illuminate\Http\Request;
-use Yajra\DataTables\Facades\DataTables;
 use App\Models\ActivitiesAttended;
+use App\Models\ActivitiesOrganised;
+use App\Models\BooksPublished;
 use App\Models\Department;
-use Illuminate\Support\Facades\Storage;
+use App\Models\ExternalEngagement;
+use App\Models\IvOrganised;
+use App\Models\OnlineCourse;
+use App\Models\Patent;
+use App\Models\Publication;
+use Illuminate\Http\Request;
 
 class AdminController extends Controller
 {
@@ -52,4 +55,130 @@ class AdminController extends Controller
     {
         return view('pages.patents.index');
     }
+    public function analyticsActivitiesAttended()
+    {
+        $data = ActivitiesAttended::selectRaw('departments.name as department, COUNT(*) as count')
+            ->join('departments', 'activities_attendeds.department_id', '=', 'departments.id')
+            ->groupBy('departments.name')
+            ->get();
+
+        $total = $data->sum('count');
+
+        return response()->json([
+            'labels' => $data->pluck('department'),
+            'values' => $data->pluck('count'),
+            'total' => $total,
+        ]);
+    }
+
+    public function analyticsActivitiesOrganised()
+    {
+        $data = ActivitiesOrganised::selectRaw('departments.name as department, COUNT(*) as count')
+            ->join('departments', 'activities_organiseds.department_id', '=', 'departments.id')
+            ->groupBy('departments.name')
+            ->get();
+
+        $total = $data->sum('count');
+
+        return response()->json([
+            'labels' => $data->pluck('department'),
+            'values' => $data->pluck('count'),
+            'total' => $total,
+        ]);
+    }
+
+    public function analyticsIvOrganised()
+    {
+        $data = IvOrganised::selectRaw('departments.name as department, COUNT(*) as count')
+            ->join('departments', 'iv_organiseds.department_id', '=', 'departments.id')
+            ->groupBy('departments.name')
+            ->get();
+
+        $total = $data->sum('count');
+
+        return response()->json([
+            'labels' => $data->pluck('department'),
+            'values' => $data->pluck('count'),
+            'total' => $total,
+        ]);
+    }
+    
+    public function analyticsPaperPublished()
+    {
+        $data = Publication::selectRaw('departments.name as department, COUNT(*) as count')
+            ->join('departments', 'publications.department_id', '=', 'departments.id')
+            ->groupBy('departments.name')
+            ->get();
+
+        $total = $data->sum('count');
+
+        return response()->json([
+            'labels' => $data->pluck('department'),
+            'values' => $data->pluck('count'),
+            'total' => $total,
+        ]);
+    }
+
+    public function analyticsBooksPublished()
+    {
+        $data = BooksPublished::selectRaw('departments.name as department, COUNT(*) as count')
+            ->join('departments', 'books_published.department_id', '=', 'departments.id')
+            ->groupBy('departments.name')
+            ->get();
+
+        $total = $data->sum('count');
+
+        return response()->json([
+            'labels' => $data->pluck('department'),
+            'values' => $data->pluck('count'),
+            'total' => $total,
+        ]);
+    }
+
+    public function analyticsExternalEngagement()
+    {
+        $data = ExternalEngagement::selectRaw('departments.name as department, COUNT(*) as count')
+            ->join('departments', 'external_engagements.department_id', '=', 'departments.id')
+            ->groupBy('departments.name')
+            ->get();
+
+        $total = $data->sum('count');
+
+        return response()->json([
+            'labels' => $data->pluck('department'),
+            'values' => $data->pluck('count'),
+            'total' => $total,
+        ]);
+    }
+
+    public function analyticsOnlineCourse()
+    {
+        $data = OnlineCourse::selectRaw('departments.name as department, COUNT(*) as count')
+            ->join('departments', 'online_courses.department_id', '=', 'departments.id')
+            ->groupBy('departments.name')
+            ->get();
+
+        $total = $data->sum('count');
+
+        return response()->json([
+            'labels' => $data->pluck('department'),
+            'values' => $data->pluck('count'),
+            'total' => $total,
+        ]);
+    }
+    public function analyticsPatent()
+    {
+        $data = Patent::selectRaw('departments.name as department, COUNT(*) as count')
+            ->join('departments', 'patents.department_id', '=', 'departments.id')
+            ->groupBy('departments.name')
+            ->get();
+
+        $total = $data->sum('count');
+
+        return response()->json([
+            'labels' => $data->pluck('department'),
+            'values' => $data->pluck('count'),
+            'total' => $total,
+        ]);
+    }
 }

resources/views/admin/dashboard.blade.php

@@ -1,23 +1,471 @@
 @extends('layouts.app')
 
 @section('header')
-    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+<h2 class="font-semibold text-xl text-gray-800 leading-tight">
     Admin Dashboard
-    </h2>
+</h2>
 @endsection
 
 @section('content')
-    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
     <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
         <div class="p-6 text-gray-900">
             Welcome, Admin! Here you can manage roles, users, and departments.
         </div>
     </div>
+
+    <!-- Graphs Section -->
     <div class="mt-6">
-            <a href="{{ route('roles.index') }}" class="text-blue-500 underline">Manage Roles</a><br>
+        <h3 class="text-lg font-semibold">Analytics</h3>
-            <a href="{{ route('departments.index') }}" class="text-blue-500 underline">Manage Departments</a><br>
+        <div id="graphs-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-4">
-            <a href="{{ route('users.index') }}" class="text-blue-500 underline">Manage Users</a><br>
+            <div class="bg-white p-4 shadow rounded">
-            <a href="{{ route('profile.edit') }}" class="text-blue-500 underline">Edit Profile</a>
+                <h4 class="text-md font-semibold mb-4">Activities Attended by Department</h4>
+                <canvas id="activitiesAttendedChart"></canvas>
+            </div>
+            <div class="bg-white p-4 shadow rounded">
+                <h4 class="text-md font-semibold mb-4">Activities Organised by Department</h4>
+                <canvas id="activitiesOrganisedChart"></canvas>
+            </div>
+            <div class="bg-white p-4 shadow rounded">
+                <h4 class="text-md font-semibold mb-4">Iv Organised by Department</h4>
+                <canvas id="ivOrganisedChart"></canvas>
+            </div>
+            <div class="bg-white p-4 shadow rounded">
+                <h4 class="text-md font-semibold mb-4">Publications by Department</h4>
+                <canvas id="publicationsChart"></canvas>
+            </div>
+            <div class="bg-white p-4 shadow rounded">
+                <h4 class="text-md font-semibold mb-4">Books Published by Department</h4>
+                <canvas id="booksPublishedChart"></canvas>
+            </div>
+            <div class="bg-white p-4 shadow rounded">
+                <h4 class="text-md font-semibold mb-4">External Engagement by Department</h4>
+                <canvas id="externalEngagementChart"></canvas>
+            </div>
+            <div class="bg-white p-4 shadow rounded">
+                <h4 class="text-md font-semibold mb-4">Online Course by Department</h4>
+                <canvas id="onlineCourseChart"></canvas>
+            </div>
+            <div class="bg-white p-4 shadow rounded">
+                <h4 class="text-md font-semibold mb-4">Patents by Department</h4>
+                <canvas id="patentsChart"></canvas>
+            </div>
+            <!-- Add more charts as needed -->
         </div>
     </div>
+</div>
+@endsection
+
+<!-- <style>
+    #graphs-container canvas {
+        max-width:500px; /* Set a maximum width for each graph */
+        max-height:500px; /* Set a maximum height for each graph */
+        margin: auto; /* Center the graphs */
+    }
+</style> -->
+
+@section('scripts')
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // Fetch data for Activities Attended
+        fetch("{{ route('admin.analytics.activitiesAttended') }}")
+            .then(response => response.json())
+            .then(data => {
+                const ctx = document.getElementById('activitiesAttendedChart').getContext('2d');
+                new Chart(ctx, {
+                    type: 'pie', // Changed to pie chart
+                    data: {
+                        labels: data.labels,
+                        datasets: [{
+                            label: 'Activities Attended',
+                            data: data.values,
+                            backgroundColor: [
+                                'rgba(255, 99, 132, 0.2)',
+                                'rgba(54, 162, 235, 0.2)',
+                                'rgba(255, 206, 86, 0.2)',
+                                'rgba(75, 192, 192, 0.2)'
+                            ],
+                            borderColor: [
+                                'rgba(255, 99, 132, 1)',
+                                'rgba(54, 162, 235, 1)',
+                                'rgba(255, 206, 86, 1)',
+                                'rgba(75, 192, 192, 1)'
+                            ],
+                            borderWidth: 1
+                        }]
+                    },
+                    plugins: [ChartDataLabels],
+                    options: {
+                        responsive: true,
+                        plugins: {
+                            legend: {
+                                position: 'bottom',
+                            },
+                            tooltip: {
+                                callbacks: {
+                                    label: function(tooltipItem) {
+                                        return `${tooltipItem.label}: ${tooltipItem.raw}`;
+                                    }
+                                }
+                            },
+                            datalabels: {
+                                color: '#000',
+                                font: {
+                                    weight: 'bold'
+                                },
+                                formatter: (value, ctx) => {
+                                    return value;
+                                }
+                            }
+                        }
+                    }
+                });
+
+                // Display total for Activities Attended
+                const activitiesTotal = document.createElement('p');
+                activitiesTotal.textContent = `Total: ${data.total}`;
+                activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
+                document.getElementById('activitiesAttendedChart').parentElement.appendChild(activitiesTotal);
+            });
+
+        // Fetch data for Books Published
+        fetch("{{ route('admin.analytics.booksPublished') }}")
+            .then(response => response.json())
+            .then(data => {
+                const ctx = document.getElementById('booksPublishedChart').getContext('2d');
+                new Chart(ctx, {
+                    type: 'pie',
+                    data: {
+                        labels: data.labels,
+                        datasets: [{
+                            label: 'Books Published',
+                            data: data.values,
+                            // backgroundColor: 'rgba(153, 102, 255, 0.2)',
+                            // borderColor: 'rgba(153, 102, 255, 1)',
+                            borderWidth: 1
+                        }]
+                    },
+                    plugins: [ChartDataLabels],
+                    options: {
+                        plugins: {
+                            legend: {
+                                position: 'bottom',
+                            },
+                            tooltip: {
+                                callbacks: {
+                                    label: function(tooltipItem) {
+                                        return `${tooltipItem.label}: ${tooltipItem.raw}`;
+                                    }
+                                }
+                            },
+                            datalabels: {
+                                color: '#000',
+                                font: {
+                                    weight: 'bold'
+                                },
+                                formatter: (value, ctx) => {
+                                    return value;
+                                }
+                            }
+                        },
+                        responsive: true,
+                    }
+                });
+                const activitiesTotal = document.createElement('p');
+                activitiesTotal.textContent = `Total: ${data.total}`;
+                activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
+                document.getElementById('booksPublishedChart').parentElement.appendChild(activitiesTotal);
+            });
+
+        // Fetch data for Publications
+        fetch("{{ route('admin.analytics.paperPublished') }}")
+            .then(response => response.json())
+            .then(data => {
+                const ctx = document.getElementById('publicationsChart').getContext('2d');
+                new Chart(ctx, {
+                    type: 'pie',
+                    data: {
+                        labels: data.labels,
+                        datasets: [{
+                            label: 'Papers Published',
+                            data: data.values,
+                            // backgroundColor: 'rgba(153, 102, 255, 0.2)',
+                            // borderColor: 'rgba(153, 102, 255, 1)',
+                            borderWidth: 1
+                        }]
+                    },
+                    plugins: [ChartDataLabels],
+                    options: {
+                        plugins: {
+                            legend: {
+                                position: 'bottom',
+                            },
+                            tooltip: {
+                                callbacks: {
+                                    label: function(tooltipItem) {
+                                        return `${tooltipItem.label}: ${tooltipItem.raw}`;
+                                    }
+                                }
+                            },
+                            datalabels: {
+                                color: '#000',
+                                font: {
+                                    weight: 'bold'
+                                },
+                                formatter: (value, ctx) => {
+                                    return value;
+                                }
+                            }
+                        },
+                        responsive: true,
+                    }
+                });
+                const activitiesTotal = document.createElement('p');
+                activitiesTotal.textContent = `Total: ${data.total}`;
+                activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
+                document.getElementById('publicationsChart').parentElement.appendChild(activitiesTotal);
+            });
+
+        fetch("{{ route('admin.analytics.activitiesOrganised') }}")
+            .then(response => response.json())
+            .then(data => {
+                const ctx = document.getElementById('activitiesOrganisedChart').getContext('2d');
+                new Chart(ctx, {
+                    type: 'pie',
+                    data: {
+                        labels: data.labels,
+                        datasets: [{
+                            label: 'Activities Organised',
+                            data: data.values,
+                            // backgroundColor: 'rgba(153, 102, 255, 0.2)',
+                            // borderColor: 'rgba(153, 102, 255, 1)',
+                            borderWidth: 1
+                        }]
+                    },
+                    plugins: [ChartDataLabels],
+                    options: {
+                        plugins: {
+                            legend: {
+                                position: 'bottom',
+                            },
+                            tooltip: {
+                                callbacks: {
+                                    label: function(tooltipItem) {
+                                        return `${tooltipItem.label}: ${tooltipItem.raw}`;
+                                    }
+                                }
+                            },
+                            datalabels: {
+                                color: '#000',
+                                font: {
+                                    weight: 'bold'
+                                },
+                                formatter: (value, ctx) => {
+                                    return value;
+                                }
+                            }
+                        },
+                        responsive: true,
+                    }
+                });
+                const activitiesTotal = document.createElement('p');
+                activitiesTotal.textContent = `Total: ${data.total}`;
+                activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
+                document.getElementById('activitiesOrganisedChart').parentElement.appendChild(activitiesTotal);
+            });
+
+        fetch("{{ route('admin.analytics.ivOrganised') }}")
+            .then(response => response.json())
+            .then(data => {
+                const ctx = document.getElementById('ivOrganisedChart').getContext('2d');
+                new Chart(ctx, {
+                    type: 'pie',
+                    data: {
+                        labels: data.labels,
+                        datasets: [{
+                            label: 'Iv Organised',
+                            data: data.values,
+                            // backgroundColor: 'rgba(153, 102, 255, 0.2)',
+                            // borderColor: 'rgba(153, 102, 255, 1)',
+                            borderWidth: 1
+                        }]
+                    },
+                    plugins: [ChartDataLabels],
+                    options: {
+                        plugins: {
+                            legend: {
+                                position: 'bottom',
+                            },
+                            tooltip: {
+                                callbacks: {
+                                    label: function(tooltipItem) {
+                                        return `${tooltipItem.label}: ${tooltipItem.raw}`;
+                                    }
+                                }
+                            },
+                            datalabels: {
+                                color: '#000',
+                                font: {
+                                    weight: 'bold'
+                                },
+                                formatter: (value, ctx) => {
+                                    return value;
+                                }
+                            }
+                        },
+                        responsive: true,
+                    }
+                });
+                const activitiesTotal = document.createElement('p');
+                activitiesTotal.textContent = `Total: ${data.total}`;
+                activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
+                document.getElementById('ivOrganisedChart').parentElement.appendChild(activitiesTotal);
+            });
+
+        fetch("{{ route('admin.analytics.externalEngagement') }}")
+            .then(response => response.json())
+            .then(data => {
+                const ctx = document.getElementById('externalEngagementChart').getContext('2d');
+                new Chart(ctx, {
+                    type: 'pie',
+                    data: {
+                        labels: data.labels,
+                        datasets: [{
+                            label: 'External Engagement',
+                            data: data.values,
+                            // backgroundColor: 'rgba(153, 102, 255, 0.2)',
+                            // borderColor: 'rgba(153, 102, 255, 1)',
+                            borderWidth: 1
+                        }]
+                    },
+                    plugins: [ChartDataLabels],
+                    options: {
+                        plugins: {
+                            legend: {
+                                position: 'bottom',
+                            },
+                            tooltip: {
+                                callbacks: {
+                                    label: function(tooltipItem) {
+                                        return `${tooltipItem.label}: ${tooltipItem.raw}`;
+                                    }
+                                }
+                            },
+                            datalabels: {
+                                color: '#000',
+                                font: {
+                                    weight: 'bold'
+                                },
+                                formatter: (value, ctx) => {
+                                    return value;
+                                }
+                            }
+                        },
+                        responsive: true,
+                    }
+                });
+                const activitiesTotal = document.createElement('p');
+                activitiesTotal.textContent = `Total: ${data.total}`;
+                activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
+                document.getElementById('externalEngagementChart').parentElement.appendChild(activitiesTotal);
+            });
+
+        fetch("{{ route('admin.analytics.onlineCourse') }}")
+            .then(response => response.json())
+            .then(data => {
+                const ctx = document.getElementById('onlineCourseChart').getContext('2d');
+                new Chart(ctx, {
+                    type: 'pie',
+                    data: {
+                        labels: data.labels,
+                        datasets: [{
+                            label: 'Online Course',
+                            data: data.values,
+                            // backgroundColor: 'rgba(153, 102, 255, 0.2)',
+                            // borderColor: 'rgba(153, 102, 255, 1)',
+                            borderWidth: 1
+                        }]
+                    },
+                    plugins: [ChartDataLabels],
+                    options: {
+                        plugins: {
+                            legend: {
+                                position: 'bottom',
+                            },
+                            tooltip: {
+                                callbacks: {
+                                    label: function(tooltipItem) {
+                                        return `${tooltipItem.label}: ${tooltipItem.raw}`;
+                                    }
+                                }
+                            },
+                            datalabels: {
+                                color: '#000',
+                                font: {
+                                    weight: 'bold'
+                                },
+                                formatter: (value, ctx) => {
+                                    return value;
+                                }
+                            }
+                        },
+                        responsive: true,
+                    }
+                });
+                const activitiesTotal = document.createElement('p');
+                activitiesTotal.textContent = `Total: ${data.total}`;
+                activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
+                document.getElementById('onlineCourseChart').parentElement.appendChild(activitiesTotal);
+            });
+
+        fetch("{{ route('admin.analytics.patent') }}")
+            .then(response => response.json())
+            .then(data => {
+                const ctx = document.getElementById('patentsChart').getContext('2d');
+                new Chart(ctx, {
+                    type: 'pie',
+                    data: {
+                        labels: data.labels,
+                        datasets: [{
+                            label: 'Online Course',
+                            data: data.values,
+                            // backgroundColor: 'rgba(153, 102, 255, 0.2)',
+                            // borderColor: 'rgba(153, 102, 255, 1)',
+                            borderWidth: 1
+                        }]
+                    },
+                    plugins: [ChartDataLabels],
+                    options: {
+                        plugins: {
+                            legend: {
+                                position: 'bottom',
+                            },
+                            tooltip: {
+                                callbacks: {
+                                    label: function(tooltipItem) {
+                                        return `${tooltipItem.label}: ${tooltipItem.raw}`;
+                                    }
+                                }
+                            },
+                            datalabels: {
+                                color: '#000',
+                                font: {
+                                    weight: 'bold'
+                                },
+                                formatter: (value, ctx) => {
+                                    return value;
+                                }
+                            }
+                        },
+                        responsive: true,
+                    }
+                });
+                const activitiesTotal = document.createElement('p');
+                activitiesTotal.textContent = `Total: ${data.total}`;
+                activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
+                document.getElementById('patentsChart').parentElement.appendChild(activitiesTotal);
+            });
+    });
+</script>
 @endsection

routes/web.php

@@ -20,7 +20,7 @@ use App\Http\Controllers\PublicationsController;
 use App\Http\Middleware\CheckRole;
 
 Route::get('/', function () {
-    return view('welcome');
+    return redirect('/login');
 });
 
 Route::get('/dashboard', function () {
@@ -272,3 +272,14 @@ Route::apiResources([
 Route::get('/api/users', [UserController::class, 'index'])->name('api.users.index');
 
 require __DIR__ . '/auth.php';
+
+Route::prefix('admin')->name('admin.')->group(function () {
+    Route::get('analytics/activitiesAttended', [AdminController::class, 'analyticsActivitiesAttended'])->name('analytics.activitiesAttended');
+    Route::get('analytics/activitiesOrganised', [AdminController::class, 'analyticsActivitiesOrganised'])->name('analytics.activitiesOrganised');
+    Route::get('analytics/ivOrganised', [AdminController::class, 'analyticsIvOrganised'])->name('analytics.ivOrganised');
+    Route::get('analytics/paperPublished', [AdminController::class, 'analyticsPaperPublished'])->name('analytics.paperPublished');
+    Route::get('analytics/booksPublished', [AdminController::class, 'analyticsBooksPublished'])->name('analytics.booksPublished');
+    Route::get('analytics/externalEngagement', [AdminController::class, 'analyticsExternalEngagement'])->name('analytics.externalEngagement');
+    Route::get('analytics/onlineCourse', [AdminController::class, 'analyticsOnlineCourse'])->name('analytics.onlineCourse');
+    Route::get('analytics/patent', [AdminController::class, 'analyticsPatent'])->name('analytics.patent');
+});