From 43cf7d04b8a73bd924ea962e8816f9477a86c5a1 Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Fri, 20 Dec 2024 13:12:40 +0530 Subject: [PATCH] feat: batch dashboard for instructors --- frontend/src/components/BatchStudents.vue | 208 ++++++++++------------ frontend/src/pages/Batch.vue | 4 +- 2 files changed, 94 insertions(+), 118 deletions(-) diff --git a/frontend/src/components/BatchStudents.vue b/frontend/src/components/BatchStudents.vue index 46e7fb15..ea2c6037 100644 --- a/frontend/src/components/BatchStudents.vue +++ b/frontend/src/components/BatchStudents.vue @@ -1,13 +1,60 @@ @@ -107,7 +141,7 @@ {{ __('There are no students in this batch.') }} @@ -130,32 +164,12 @@ import { ListView, ListRowItem, } from 'frappe-ui' -import { Trash2, Plus } from 'lucide-vue-next' -import { computed, ref } from 'vue' +import { BookOpen, Plus, ShieldCheck, Trash2, User } from 'lucide-vue-next' +import { ref, watch } from 'vue' import StudentModal from '@/components/Modals/StudentModal.vue' import { showToast } from '@/utils' import ProgressBar from '@/components/ProgressBar.vue' import BatchStudentProgress from '@/components/Modals/BatchStudentProgress.vue' -import { Bar } from 'vue-chartjs' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - BarElement, - CategoryScale, - LinearScale, - Filler, -} from 'chart.js' -ChartJS.register( - Title, - Tooltip, - Legend, - BarElement, - CategoryScale, - LinearScale, - Filler -) import ApexChart from 'vue3-apexcharts' const showStudentModal = ref(false) @@ -163,24 +177,26 @@ const showStudentProgressModal = ref(false) const selectedStudent = ref(null) const chartData = ref(null) const chartOptions = ref(null) +const showProgressChart = ref(false) +const assessmentCount = ref(0) const props = defineProps({ batch: { - type: String, + type: Object, default: null, }, }) const students = createResource({ url: 'lms.lms.utils.get_batch_students', - cache: ['students', props.batch], + cache: ['students', props.batch.name], params: { - batch: props.batch, + batch: props.batch?.name, }, auto: true, onSuccess(data) { chartData.value = getChartData() - console.log(chartData.value) + showProgressChart.value = true }, }) @@ -245,11 +261,8 @@ const removeStudents = (selections, unselectAll) => { } const getChartData = () => { - console.log('called') - let categories = {} - // Initialize categories with categories Object.keys(students.data?.[0].courses).forEach((course) => { categories[course] = { value: 0, @@ -264,7 +277,6 @@ const getChartData = () => { } }) - // Populate data students.data.forEach((student) => { Object.keys(student.courses).forEach((course) => { if (student.courses[course] === 100) { @@ -279,84 +291,33 @@ const getChartData = () => { }) }) - // Transform data for ApexCharts - console.log(Object.values(categories).map((item) => item.value)) chartOptions.value = getChartOptions(categories) return [ { name: __('Student Progress'), data: Object.values(categories).map((item) => item.value), - /* colors: Object.values(categories).map(item => - item.type === 'course' ? courseColor : assessmentColor - ), */ }, ] } -/* const chartOptions = computed(() => { - return { - responsive: true, - fill: true, - scales: { - x: { - ticks: { - maxRotation: 0, - minRotation: 0, - autoSkip: false, - } - }, - y: { - beginAtZero: true, - max: students.data?.length, - ticks: { - stepSize: 5, - }, - }, - }, - plugins: { - legends: { - display: false, - title: { - text: __("Student Progress 1111"), - } - }, - title: { - display: true, - text: __("Student Progress"), - font: { - size: 14, - weight: '500', - }, - color: '#171717', - } - } - } -}) */ - -const chartSeries = ref([ - { - name: 'Courses', - data: [20, 30, 50], // Example data for courses - }, - { - name: 'Assessments', - data: [10, 40, 60], // Example data for assessments - }, -]) - const getChartOptions = (categories) => { - const courseColor = '#3498db' // Blue for courses - const assessmentColor = '#e74c3c' // Red for assessments + const courseColor = '#318AD8' + const assessmentColor = '#F683AE' + const maxY = Math.ceil(students.data?.length / 10) * 10 + return { chart: { type: 'bar', height: 350, + toolbar: { + show: false, + }, }, plotOptions: { bar: { - distributed: true, // Allows individual bar colors + distributed: true, borderRadius: 0, - horizontal: false, // Set to true for horizontal bars + horizontal: false, columnWidth: '30%', }, }, @@ -365,20 +326,35 @@ const getChartOptions = (categories) => { ), legends: { show: true, + markers: { + fillColors: [courseColor, assessmentColor], + }, }, xaxis: { - categories: Object.keys(categories), + categories: ['Courses', 'Assessments'], + overwriteCategories: Object.keys(categories), labels: { style: { fontSize: '10px', }, rotate: 0, formatter: function (value) { - console.log(value) - return value.length > 20 ? `${value.substring(0, 20)}...` : value // Trim long labels + return value.length > 25 ? `${value.substring(0, 25)}...` : value // Trim long labels }, }, }, + yaxis: { + max: maxY, + min: 0, + stepSize: 10, + tickAmount: maxY / 10, + }, } } + +watch(students, () => { + if (students.data?.length) { + assessmentCount.value = Object.keys(students.data?.[0].assessments).length + } +}) diff --git a/frontend/src/pages/Batch.vue b/frontend/src/pages/Batch.vue index 4bea2b6e..bebc9b7d 100644 --- a/frontend/src/pages/Batch.vue +++ b/frontend/src/pages/Batch.vue @@ -22,7 +22,7 @@
-
+
- +