CSI-KJSCE/Faculty-Documentation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: implement Chart Js for analytics

Browse Source
This commit is contained in:
Sallu9007
2025-04-27 17:43:27 +05:30
parent 2217716225
commit 4156ebe873
3 changed files with 608 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
app/Http/Controllers/AdminController.php
View File

@@ -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,
]);
}
}

476
resources/views/admin/dashboard.blade.php
View File

@@ -1,23 +1,471 @@
@extends('layouts.app')
@section('header')
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Admin Dashboard
</h2>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Admin Dashboard
</h2>
@endsection
@section('content')
<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>
<div class="mt-6">
<a href="{{ route('roles.index') }}" class="text-blue-500 underline">Manage Roles</a><br>
<a href="{{ route('departments.index') }}" class="text-blue-500 underline">Manage Departments</a><br>
<a href="{{ route('users.index') }}" class="text-blue-500 underline">Manage Users</a><br>
<a href="{{ route('profile.edit') }}" class="text-blue-500 underline">Edit Profile</a>
<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">
<h3 class="text-lg font-semibold">Analytics</h3>
<div id="graphs-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-4 shadow rounded">
<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

13
routes/web.php
View File

@@ -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');
});