Feat: implement Chart Js for analytics
This commit is contained in:
Sallu9007
@@ -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
|
||||
Reference in New Issue
Block a user