|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Progress - SAML LMS</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
'sa-orange': '#FF6B35', |
|
|
'sa-teal': '#008080', |
|
|
'sa-yellow': '#FFD23F', |
|
|
'sa-purple': '#6A4C93', |
|
|
'sa-red': '#C1121F', |
|
|
'sa-green': '#007200', |
|
|
'sa-blue': '#003049' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100"> |
|
|
|
|
|
<nav class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between items-center h-16"> |
|
|
<div class="flex items-center space-x-8"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-8 h-8 bg-gradient-to-br from-sa-orange to-sa-purple rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="cpu" class="w-5 h-5 text-white"></i> |
|
|
</div> |
|
|
<span class="font-bold text-xl">SAML LMS</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-6"> |
|
|
<a href="index.html" class="nav-link text-gray-600 dark:text-gray-300 hover:text-sa-teal dark:hover:text-sa-teal transition-colors flex items-center gap-2"> |
|
|
<i data-feather="home" class="w-4 h-4"></i> Dashboard |
|
|
</a> |
|
|
<a href="activities.html" class="nav-link text-gray-600 dark:text-gray-300 hover:text-sa-teal dark:hover:text-sa-teal transition-colors flex items-center gap-2"> |
|
|
<i data-feather="grid" class="w-4 h-4"></i> Activities |
|
|
</a> |
|
|
<a href="tools.html" class="nav-link text-gray-600 dark:text-gray-300 hover:text-sa-teal dark:hover:text-sa-teal transition-colors flex items-center gap-2"> |
|
|
<i data-feather="tool" class="w-4 h-4"></i> Tools |
|
|
</a> |
|
|
<a href="progress.html" class="nav-link text-sa-teal dark:text-sa-teal font-medium flex items-center gap-2"> |
|
|
<i data-feather="trending-up" class="w-4 h-4"></i> Progress |
|
|
</a> |
|
|
<a href="resources.html" class="nav-link text-gray-600 dark:text-gray-300 hover:text-sa-teal dark:hover:text-sa-teal transition-colors flex items-center gap-2"> |
|
|
<i data-feather="book-open" class="w-4 h-4"></i> Resources |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="bg-sa-green text-white px-3 py-1 rounded-full text-xs font-medium flex items-center gap-2"> |
|
|
<i data-feather="wifi-off" class="w-3 h-3"></i> Offline |
|
|
</button> |
|
|
<button onclick="toggleTheme()" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i data-feather="moon" class="w-5 h-5 hidden dark:block"></i> |
|
|
<i data-feather="sun" class="w-5 h-5 block dark:hidden"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h1 class="text-3xl font-bold mb-2">Progress Tracking</h1> |
|
|
<p class="text-gray-600 dark:text-gray-400">Monitor student progress and learning outcomes</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 mb-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Class/Grade</label> |
|
|
<select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700"> |
|
|
<option>Grade 2 - Class A</option> |
|
|
<option>Grade 2 - Class B</option> |
|
|
<option>Grade 1 - Class A</option> |
|
|
<option>Grade 3 - Class A</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Time Period</label> |
|
|
<select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700"> |
|
|
<option>This Week</option> |
|
|
<option>This Month</option> |
|
|
<option>This Term</option> |
|
|
<option>This Year</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Concept Focus</label> |
|
|
<select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700"> |
|
|
<option>All Concepts</option> |
|
|
<option>Sequencing</option> |
|
|
<option>Patterns</option> |
|
|
<option>Algorithms</option> |
|
|
<option>Debugging</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Student</label> |
|
|
<select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700"> |
|
|
<option>All Students</option> |
|
|
<option>Amina Patel</option> |
|
|
<option>Bongani Ndlovu</option> |
|
|
<option>Catherine Smith</option> |
|
|
<option>David Chen</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> |
|
|
<div class="bg-gradient-to-br from-sa-green to-sa-green/80 p-6 rounded-xl text-white"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<i data-feather="users" class="w-8 h-8 opacity-80"></i> |
|
|
<span class="text-2xl font-bold">28</span> |
|
|
</div> |
|
|
<p class="text-sm opacity-90">Active Students</p> |
|
|
<p class="text-xs opacity-75 mt-1">+3 from last week</p> |
|
|
</div> |
|
|
<div class="bg-gradient-to-br from-sa-teal to-sa-teal/80 p-6 rounded-xl text-white"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<i data-feather="activity" class="w-8 h-8 opacity-80"></i> |
|
|
<span class="text-2xl font-bold">87%</span> |
|
|
</div> |
|
|
<p class="text-sm opacity-90">Average Progress</p> |
|
|
<p class="text-xs opacity-75 mt-1">+5% improvement</p> |
|
|
</div> |
|
|
<div class="bg-gradient-to-br from-sa-purple to-sa-purple/80 p-6 rounded-xl text-white"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<i data-feather="award" class="w-8 h-8 opacity-80"></i> |
|
|
<span class="text-2xl font-bold">156</span> |
|
|
</div> |
|
|
<p class="text-sm opacity-90">Activities Completed</p> |
|
|
<p class="text-xs opacity-75 mt-1">This month</p> |
|
|
</div> |
|
|
<div class="bg-gradient-to-br from-sa-orange to-sa-orange/80 p-6 rounded-xl text-white"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<i data-feather="clock" class="w-8 h-8 opacity-80"></i> |
|
|
<span class="text-2xl font-bold">42h</span> |
|
|
</div> |
|
|
<p class="text-sm opacity-90">Total Learning Time</p> |
|
|
<p class="text-xs opacity-75 mt-1">This term</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
|
|
<h3 class="font-bold text-lg mb-4">Concept Mastery Overview</h3> |
|
|
<canvas id="masteryChart" height="200"></canvas> |
|
|
</div> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
|
|
<h3 class="font-bold text-lg mb-4">Weekly Activity Completion</h3> |
|
|
<canvas id="weeklyChart" height="200"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 mb-8"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h3 class="font-bold text-lg">Individual Student Progress</h3> |
|
|
<button class="text-sa-teal hover:text-sa-teal/80 font-medium text-sm flex items-center gap-1"> |
|
|
Export Report <i data-feather="download" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="w-full"> |
|
|
<thead> |
|
|
<tr class="border-b border-gray-200 dark:border-gray-700"> |
|
|
<th class="text-left py-3 px-4 font-medium text-sm">Student</th> |
|
|
<th class="text-left py-3 px-4 font-medium text-sm">Grade</th> |
|
|
<th class="text-left py-3 px-4 font-medium text-sm">Activities</th> |
|
|
<th class="text-left py-3 px-4 font-medium text-sm">Avg Score</th> |
|
|
<th class="text-left py-3 px-4 font-medium text-sm">Progress</th> |
|
|
<th class="text-left py-3 px-4 font-medium text-sm">Status</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr class="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50"> |
|
|
<td class="py-3 px-4"> |
|
|
<div class="flex items-center gap-3"> |
|
|
<img src="http://static.photos/people/40x40/101" class="w-10 h-10 rounded-full"> |
|
|
<div> |
|
|
<p class="font-medium">Amina Patel</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">ID: STU001</p> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-3 px-4">Grade 2</td> |
|
|
<td class="py-3 px-4">24</td> |
|
|
<td class="py-3 px-4"> |
|
|
<div class="flex items-center gap-1"> |
|
|
<span class="font-medium">92%</span> |
|
|
<i data-feather="trending-up" class="w-4 h-4 text-green-500"></i> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-3 px-4"> |
|
|
<div class="w-24 bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-sa-green h-2 rounded-full" style="width: 92%"></div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-3 px-4"> |
|
|
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-medium">Advanced</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50"> |
|
|
<td class="py-3 px-4"> |
|
|
<div class="flex items-center gap-3"> |
|
|
<img src="http://static.photos/people/40x40/102" class="w-10 h-10 rounded-full"> |
|
|
<div> |
|
|
<p class="font-medium">Bongani Ndlovu</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">ID: STU002</p> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-3 px-4">Grade 2</td> |
|
|
<td class="py-3 px-4">22</td> |
|
|
<td class="py-3 px-4"> |
|
|
<div class="flex items-center gap-1"> |
|
|
<span class="font-medium">85%</span> |
|
|
<i data-feather="trending-up" class="w-4 h-4 text-green-500"></i> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-3 px-4"> |
|
|
<div class="w-24 bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-sa-teal h-2 rounded-full" style="width: 85%"></div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-3 px-4"> |
|
|
<span class="bg-sa-teal/10 text-sa-teal px-2 py-1 rounded text-xs font-medium">Proficient</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50"> |
|
|
<td class="py-3 px-4"> |
|
|
<div class="flex items-center gap-3"> |
|
|
<img src="http://static.photos/people/40x40/103" class="w-10 h-10 rounded-full"> |
|
|
<div> |
|
|
<p class="font-medium">Catherine Smith</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">ID: STU003</p> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-3 px-4">Grade 2</td> |
|
|
<td class="py-3 px-4">20</td> |
|
|
<td class="py-3 px-4"> |
|
|
<div class="flex items-center gap-1"> |
|
|
<span class="font-medium">78%</span> |
|
|
<i data-feather="trending-up" class="w-4 h-4 text-green-500"></i> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-3 px-4"> |
|
|
<div class="w-24 bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-sa-yellow h-2 rounded-full" style="width: 78%"></div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-3 px-4"> |
|
|
<span class="bg-sa-yellow/10 text-sa-yellow px-2 py-1 rounded text-xs font-medium">Developing</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50"> |
|
|
<td class="py-3 px-4"> |
|
|
<div class="flex items-center gap-3"> |
|
|
<img src="http://static.photos/people/40x40/104" class="w-10 h-10 rounded-full"> |
|
|
<div> |
|
|
<p class="font-medium">David Chen</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">ID: STU004</p> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-3 px-4">Grade 2</td> |
|
|
<td class="py-3 px-4">18</td> |
|
|
<td class="py-3 px-4"> |
|
|
<div class="flex items-center gap-1"> |
|
|
<span class="font-medium">65%</span> |
|
|
<i data-feather="trending-up" class="w-4 h-4 text-green-500"></i> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-3 px-4"> |
|
|
<div class="w-24 bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-sa-orange h-2 rounded-full" style="width: 65%"></div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-3 px-4"> |
|
|
<span class="bg-sa-orange/10 text-sa-orange px-2 py-1 rounded text-xs font-medium">Emerging</span> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
|
|
<h3 class="font-bold text-lg mb-4">Top Performing Concepts</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<div class="w-8 h-8 bg-sa-green/10 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="check" class="w-4 h-4 text-sa-green"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium">Sequencing</span> |
|
|
</div> |
|
|
<span class="text-sm font-bold text-sa-green">94%</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<div class="w-8 h-8 bg-sa-teal/10 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="check" class="w-4 h-4 text-sa-teal"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium">Patterns</span> |
|
|
</div> |
|
|
<span class="text-sm font-bold text-sa-teal">89%</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<div class="w-8 h-8 bg-sa-yellow/10 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="check" class="w-4 h-4 text-sa-yellow"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium">Algorithms</span> |
|
|
</div> |
|
|
<span class="text-sm font-bold text-sa-yellow">82%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
|
|
<h3 class="font-bold text-lg mb-4">Areas Needing Support</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<div class="w-8 h-8 bg-sa-orange/10 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="alert-triangle" class="w-4 h-4 text-sa-orange"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium">Debugging</span> |
|
|
</div> |
|
|
<span class="text-sm font-bold text-sa-orange">68%</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<div class="w-8 h-8 bg-sa-purple/10 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="alert-triangle" class="w-4 h-4 text-sa-purple"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium">Decomposition</span> |
|
|
</div> |
|
|
<span class="text-sm font-bold text-sa-purple">72%</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<div class="w-8 h-8 bg-sa-red/10 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="alert-triangle" class="w-4 h-4 text-sa-red"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium">Abstraction</span> |
|
|
</div> |
|
|
<span class="text-sm font-bold text-sa-red">65%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"> |
|
|
<h3 class="font-bold text-lg mb-4">Recent Achievements</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-start gap-3"> |
|
|
<div class="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center flex-shrink-0"> |
|
|
<i data-feather="award" class="w-4 h-4 text-yellow-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium">Pattern Master</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">5 students earned</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start gap-3"> |
|
|
<div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0"> |
|
|
<i data-feather="zap" class="w-4 h-4 text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium">Speed Solver</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">3 students earned</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start gap-3"> |
|
|
<div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0"> |
|
|
<i data-feather="star" class="w-4 h-4 text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium">Perfect Week</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">8 students earned</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
function toggleTheme() { |
|
|
document.documentElement.classList.toggle('dark'); |
|
|
localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); |
|
|
} |
|
|
|
|
|
|
|
|
if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
|
|
document.documentElement.classList.add('dark'); |
|
|
} |
|
|
|
|
|
|
|
|
const masteryCtx = document.getElementById('masteryChart').getContext('2d'); |
|
|
new Chart(masteryCtx, { |
|
|
type: 'radar', |
|
|
data: { |
|
|
labels: ['Sequencing', 'Patterns', 'Algorithms', 'Debugging', 'Decomposition', 'Abstraction'], |
|
|
datasets: [{ |
|
|
label: 'Class Average', |
|
|
data: [94, 89, 82, 68, 72, 65], |
|
|
backgroundColor: 'rgba(0, 128, 128, 0.2)', |
|
|
borderColor: 'rgba(0, 128, 128, 1)', |
|
|
borderWidth: 2 |
|
|
}, { |
|
|
label: 'Target', |
|
|
data: [85, 85, 85, 85, 85, 85], |
|
|
backgroundColor: 'rgba(255, 107, 53, 0.1)', |
|
|
borderColor: 'rgba(255, 107, 53, 1)', |
|
|
borderWidth: 2, |
|
|
borderDash: [5, 5] |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
r: { |
|
|
beginAtZero: true, |
|
|
max: 100 |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
const weeklyCtx = document.getElementById('weeklyChart').getContext('2d'); |
|
|
new Chart(weeklyCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], |
|
|
datasets: [{ |
|
|
label: 'Activities Completed', |
|
|
data: [12, 19, 15, 25, 22], |
|
|
backgroundColor: 'rgba(106, 76, 147, 0.8)', |
|
|
borderRadius: 6 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
