feat: students heatmap
This commit is contained in:
Jannat Patel
@@ -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: {
|
||||
|
||||
@@ -20,67 +20,59 @@
|
||||
</div>
|
||||
|
||||
<!-- Assessments -->
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class="grid grid-cols-[70%,30%] border-b pl-2 pb-1 mb-2 text-xs text-gray-700 font-medium"
|
||||
>
|
||||
<span>
|
||||
{{ __('Assessment') }}
|
||||
</span>
|
||||
<span>
|
||||
{{ __('Progress') }}
|
||||
</span>
|
||||
</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"
|
||||
>
|
||||
<span>
|
||||
{{ assessment }}
|
||||
</span>
|
||||
<span v-if="isAssignment(student.assessments[assessment])">
|
||||
<Badge :theme="getStatusTheme(student.assessments[assessment])">
|
||||
{{ student.assessments[assessment] }}
|
||||
</Badge>
|
||||
</span>
|
||||
<span v-else>
|
||||
<div class="space-y-4 text-sm">
|
||||
<div
|
||||
class="flex items-center border-b pb-1 text-xs text-gray-700 font-medium"
|
||||
>
|
||||
<span class="flex-1">
|
||||
{{ __('Assessment') }}
|
||||
</span>
|
||||
<span>
|
||||
{{ __('Progress') }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="assessment in Object.keys(student.assessments)"
|
||||
class="flex items-center text-gray-700 font-medium"
|
||||
>
|
||||
<span class="flex-1">
|
||||
{{ assessment }}
|
||||
</span>
|
||||
<span v-if="isAssignment(student.assessments[assessment])">
|
||||
<Badge :theme="getStatusTheme(student.assessments[assessment])">
|
||||
{{ student.assessments[assessment] }}
|
||||
</span>
|
||||
</div>
|
||||
</Badge>
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ student.assessments[assessment] }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Courses -->
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class="grid grid-cols-[70%,30%] mb-2 text-xs text-gray-700 border-b pl-2 pb-1 font-medium"
|
||||
>
|
||||
<span>
|
||||
{{ __('Courses') }}
|
||||
</span>
|
||||
<span>
|
||||
{{ __('Progress') }}
|
||||
</span>
|
||||
</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"
|
||||
>
|
||||
<span>
|
||||
{{ course }}
|
||||
</span>
|
||||
<span>
|
||||
{{ Math.floor(student.courses[course]) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="space-y-4 text-sm">
|
||||
<div
|
||||
class="flex items-center text-xs text-gray-700 border-b pb-1 font-medium"
|
||||
>
|
||||
<span class="flex-1">
|
||||
{{ __('Courses') }}
|
||||
</span>
|
||||
<span>
|
||||
{{ __('Progress') }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="course in Object.keys(student.courses)"
|
||||
class="flex items-center text-gray-700 font-medium"
|
||||
>
|
||||
<span class="flex-1">
|
||||
{{ course }}
|
||||
</span>
|
||||
<span>
|
||||
{{ Math.floor(student.courses[course]) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <span class="mt-4">
|
||||
{{ student }}
|
||||
</span> -->
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
90
frontend/src/components/StudentHeatmap.vue
Normal file
90
frontend/src/components/StudentHeatmap.vue
Normal file
@@ -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>
|
||||
@@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<div class="mb-10">
|
||||
<Button v-if="isStudent" @click="openEvalModal" class="float-right">
|
||||
{{ __('Schedule Evaluation') }}
|
||||
</Button>
|
||||
<div class="text-lg font-semibold mb-4">
|
||||
{{ __('Upcoming Evaluations') }}
|
||||
<div>
|
||||
<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>
|
||||
<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,
|
||||
|
||||
Reference in New Issue
Block a user