feat: students heatmap

frontend/src/components/BatchDashboard.vue

@@ -1,17 +1,18 @@
 <template>
-	<div>
+	<div class="space-y-10">
+		<Assessments :batch="batch.data.name" />
 		<UpcomingEvaluations
 			:batch="batch.data.name"
 			:endDate="batch.data.evaluation_end_date"
 			:courses="batch.data.courses"
-			:isStudent="isStudent"
 		/>
-		<Assessments :batch="batch.data.name" />
+		<StudentHeatmap :batch="batch.data.name" />
 	</div>
 </template>
 <script setup>
 import UpcomingEvaluations from '@/components/UpcomingEvaluations.vue'
 import Assessments from '@/components/Assessments.vue'
+import StudentHeatmap from '@/components/StudentHeatmap.vue'
 
 const props = defineProps({
 	batch: {

frontend/src/components/Modals/BatchStudentProgress.vue

@@ -20,12 +20,11 @@
 				</div>
 
 				<!-- Assessments -->
-				<div>
+				<div class="space-y-4 text-sm">
-					<div>
 					<div
-							class="grid grid-cols-[70%,30%] border-b pl-2 pb-1 mb-2 text-xs text-gray-700 font-medium"
+						class="flex items-center border-b pb-1 text-xs text-gray-700 font-medium"
 					>
-							<span>
+						<span class="flex-1">
 							{{ __('Assessment') }}
 						</span>
 						<span>
@@ -34,9 +33,9 @@
 					</div>
 					<div
 						v-for="assessment in Object.keys(student.assessments)"
-							class="grid grid-cols-[70%,30%] pl-2 mb-2 text-gray-700 font-medium"
+						class="flex items-center text-gray-700 font-medium"
 					>
-							<span>
+						<span class="flex-1">
 							{{ assessment }}
 						</span>
 						<span v-if="isAssignment(student.assessments[assessment])">
@@ -49,15 +48,13 @@
 						</span>
 					</div>
 				</div>
-				</div>
 
 				<!-- Courses -->
-				<div>
+				<div class="space-y-4 text-sm">
-					<div>
 					<div
-							class="grid grid-cols-[70%,30%] mb-2 text-xs text-gray-700 border-b pl-2 pb-1 font-medium"
+						class="flex items-center text-xs text-gray-700 border-b pb-1 font-medium"
 					>
-							<span>
+						<span class="flex-1">
 							{{ __('Courses') }}
 						</span>
 						<span>
@@ -66,9 +63,9 @@
 					</div>
 					<div
 						v-for="course in Object.keys(student.courses)"
-							class="grid grid-cols-[70%,30%] pl-2 mb-2 text-gray-700 font-medium"
+						class="flex items-center text-gray-700 font-medium"
 					>
-							<span>
+						<span class="flex-1">
 							{{ course }}
 						</span>
 						<span>
@@ -77,11 +74,6 @@
 					</div>
 				</div>
 			</div>
-
-				<!-- <span class="mt-4">
-                    {{ student }}
-                </span> -->
-			</div>
 		</template>
 	</Dialog>
 </template>

frontend/src/components/StudentHeatmap.vue

@@ -0,0 +1,90 @@
+<template>
+	<ApexChart
+		v-if="heatmap.data"
+		:options="chartOptions"
+		:series="chartSeries"
+		height="350"
+	/>
+	{{ heatmap.data }}
+</template>
+<script setup>
+import { createResource } from 'frappe-ui'
+import { computed, inject } from 'vue'
+import ApexChart from 'vue3-apexcharts'
+
+const user = inject('$user')
+
+const props = defineProps({
+	batch: {
+		type: String,
+		required: true,
+	},
+})
+
+const heatmap = createResource({
+	url: 'lms.lms.api.get_heatmap_data',
+	auto: true,
+	cache: ['heatmap', user.data?.name],
+})
+
+const chartOptions = computed(() => {
+	return {
+		chart: {
+			type: 'heatmap',
+			height: 50,
+			toolbar: {
+				show: false,
+			},
+		},
+		plotOptions: {
+			heatmap: {
+				shadeIntensity: 0.5,
+				enableShades: true,
+				colorScale: {
+					ranges: [
+						{ from: 0, to: 0, color: '#e3f2fd' }, // No activity
+						{ from: 1, to: 5, color: '#81c784' }, // Low activity
+						{ from: 6, to: 15, color: '#66bb6a' }, // Medium activity
+						{ from: 16, to: 30, color: '#388e3c' }, // High activity
+						{ from: 31, to: 100, color: '#1b5e20' }, // Very high activity
+					],
+				},
+			},
+		},
+		dataLabels: {
+			enabled: false,
+		},
+		xaxis: {
+			type: 'category',
+			labels: { rotate: -45 },
+		},
+		yaxis: {
+			type: 'category',
+			categories: [
+				'Monday',
+				'Tuesday',
+				'Wednesday',
+				'Thursday',
+				'Friday',
+				'Saturday',
+				'Sunday',
+			],
+		},
+		tooltip: {
+			y: { formatter: (value) => `${value} activities` },
+		},
+		colors: ['#008FFB'],
+	}
+})
+
+const chartSeries = computed(() => {
+	let series = []
+	heatmap.data?.forEach((week) => {
+		series.push({
+			name: week.name,
+			data: week.data,
+		})
+	})
+	return series
+})
+</script>

frontend/src/components/UpcomingEvaluations.vue

@@ -1,10 +1,12 @@
 <template>
-	<div class="mb-10">
+	<div>
-		<Button v-if="isStudent" @click="openEvalModal" class="float-right">
+		<div class="flex items-center justify-between mb-4">
+			<div class="text-lg font-semibold">
+				{{ __('Upcoming Evaluations') }}
+			</div>
+			<Button @click="openEvalModal">
 				{{ __('Schedule Evaluation') }}
 			</Button>
-		<div class="text-lg font-semibold mb-4">
-			{{ __('Upcoming Evaluations') }}
 		</div>
 		<div v-if="upcoming_evals.data?.length">
 			<div class="grid grid-cols-2 gap-4">
@@ -67,10 +69,6 @@ const props = defineProps({
 		type: Array,
 		default: [],
 	},
-	isStudent: {
-		type: Boolean,
-		default: false,
-	},
 	endDate: {
 		type: String,
 		default: null,

lms/lms/api.py

@@ -13,7 +13,15 @@ from frappe.translate import get_all_translations
 from frappe import _
 from frappe.query_builder import DocType
 from frappe.query_builder.functions import Count
-from frappe.utils import time_diff, now_datetime, get_datetime, flt
+from frappe.utils import (
+	time_diff,
+	now_datetime,
+	get_datetime,
+	flt,
+	now,
+	add_days,
+	format_date,
+)
 from typing import Optional
 from lms.lms.utils import get_average_rating, get_lesson_count
 from xml.dom.minidom import parseString
@@ -1043,3 +1051,54 @@ def mark_lesson_progress(course, chapter_number, lesson_number):
 		"Lesson Reference", {"parent": chapter_name, "idx": lesson_number}, "lesson"
 	)
 	save_progress(lesson_name, course)
+
+
+@frappe.whitelist()
+def get_heatmap_data(member=None):
+	if not member:
+		member = frappe.session.user
+
+	last_90_days = [add_days(now(), -i) for i in range(90)]
+	date_count = {format_date(day, "YYYY-MM-dd"): 0 for day in last_90_days}
+
+	def count_dates(data):
+		for entry in data:
+			date = format_date(entry.creation, "YYYY-MM-dd")
+			if date in date_count:
+				date_count[date] += 1
+
+	lesson_completions = frappe.get_all(
+		"LMS Course Progress",
+		fields=["creation"],
+		filters={"member": member, "creation": [">", add_days(now(), -90)]},
+	)
+
+	quiz_submissions = frappe.get_all(
+		"LMS Quiz Submission",
+		fields=["creation"],
+		filters={"member": member, "creation": [">", add_days(now(), -90)]},
+	)
+
+	assigment_submissions = frappe.get_all(
+		"LMS Assignment Submission",
+		fields=["creation"],
+		filters={"member": member, "creation": [">", add_days(now(), -90)]},
+	)
+
+	count_dates(lesson_completions)
+	count_dates(quiz_submissions)
+	count_dates(assigment_submissions)
+
+	weekMap = {}
+	heatmap_data = []
+
+	for date, count in date_count.items():
+		week = get_datetime(date).strftime("%U")
+		if week not in weekMap:
+			weekMap[week] = []
+		weekMap[week].append({"x": date, "y": count})
+
+	for week in weekMap.keys():
+		heatmap_data.update({"name": week, "data": weekMap[week]})
+
+	return heatmap_data