feat: show student progress heatmap on moderators dashboard

frontend/src/components/StudentHeatmap.vue

@@ -1,52 +1,91 @@
 <template>
-	<ApexChart
-		v-if="heatmap.data"
-		:options="chartOptions"
-		:series="chartSeries"
-		height="350"
-	/>
-	{{ heatmap.data }}
+	<div v-if="heatmap.data">
+		<div class="text-lg font-semibold mb-2">
+			{{ heatmap.data.total_activities }}
+			{{
+				heatmap.data.total_activities > 1 ? __('activities') : __('activity')
+			}}
+			{{ __('in the last') }}
+			{{ heatmap.data.weeks }}
+			{{ __('weeks') }}
+		</div>
+
+		<ApexChart :options="chartOptions" :series="chartSeries" height="240" />
+	</div>
 </template>
 <script setup>
 import { createResource } from 'frappe-ui'
-import { computed, inject } from 'vue'
+import { computed, inject, onMounted, ref, watch } from 'vue'
 import ApexChart from 'vue3-apexcharts'
+import { theme } from '@/utils/theme'
 
 const user = inject('$user')
+const labels = ref([])
+const memberName = ref(null)
 
 const props = defineProps({
-	batch: {
+	member: {
 		type: String,
-		required: true,
 	},
+	base_days: {
+		type: Number,
+		default: 200,
+	},
+})
+
+onMounted(() => {
+	memberName.value = props.member || user.data?.name
 })
 
 const heatmap = createResource({
 	url: 'lms.lms.api.get_heatmap_data',
-	auto: true,
-	cache: ['heatmap', user.data?.name],
+	makeParams(values) {
+		return {
+			member: values.member,
+			base_days: props.base_days,
+		}
+	},
+	auto: false,
+	cache: ['heatmap', memberName.value],
+})
+
+watch(memberName, (newVal) => {
+	heatmap.reload(
+		{
+			member: newVal,
+		},
+		{
+			onSuccess(data) {
+				labels.value = data.labels
+			},
+		}
+	)
 })
 
 const chartOptions = computed(() => {
 	return {
 		chart: {
 			type: 'heatmap',
-			height: 50,
 			toolbar: {
 				show: false,
 			},
 		},
+		highlightOnHover: false,
+		grid: {
+			show: false,
+		},
 		plotOptions: {
 			heatmap: {
-				shadeIntensity: 0.5,
+				radius: 8,
+				shadeIntensity: 0.2,
 				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
+						{ from: 0, to: 0, color: theme.colors.gray[400] },
+						{ from: 1, to: 5, color: theme.colors.green[200] },
+						{ from: 6, to: 15, color: theme.colors.green[500] },
+						{ from: 16, to: 30, color: theme.colors.green[700] },
+						{ from: 31, to: 100, color: theme.colors.green[800] },
 					],
 				},
 			},
@@ -56,34 +95,43 @@ const chartOptions = computed(() => {
 		},
 		xaxis: {
 			type: 'category',
-			labels: { rotate: -45 },
+			categories: labels.value,
+			position: 'top',
+			axisBorder: {
+				show: false,
+			},
+			axisTicks: {
+				show: false,
+			},
+			tooltip: {
+				enabled: false,
+			},
 		},
 		yaxis: {
 			type: 'category',
-			categories: [
-				'Monday',
-				'Tuesday',
-				'Wednesday',
-				'Thursday',
-				'Friday',
-				'Saturday',
-				'Sunday',
-			],
+			categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+			reversed: true,
+			tooltip: {
+				enabled: false,
+			},
 		},
 		tooltip: {
-			y: { formatter: (value) => `${value} activities` },
+			custom: ({ series, seriesIndex, dataPointIndex, w }) => {
+				return `<div class="text-xs bg-gray-900 text-white font-medium p-1">
+					<div class="text-center">${heatmap.data.heatmap_data[seriesIndex].data[dataPointIndex].label}</div>
+				</div>`
+			},
 		},
-		colors: ['#008FFB'],
 	}
 })
 
 const chartSeries = computed(() => {
-	let series = []
-	heatmap.data?.forEach((week) => {
-		series.push({
-			name: week.name,
-			data: week.data,
-		})
+	if (!heatmap.data) return []
+	let series = heatmap.data.heatmap_data.map((row) => {
+		return {
+			name: row.name,
+			data: row.data.map((value) => value.count),
+		}
 	})
 	return series
 })