feat: statistics graphs

frontend/src/components/AppSidebar.vue

@@ -14,6 +14,7 @@
 					:icon="link.icon"
 					:label="link.label"
 					:to="link.to"
+					:activeFor="link.activeFor"
 					:isCollapsed="isSidebarCollapsed"
 					class="mx-2 my-0.5"
 				/>

frontend/src/components/SidebarLink.vue

@@ -48,6 +48,10 @@ const props = defineProps({
 		type: String,
 		default: '',
 	},
+	activeFor: {
+		type: Array,
+		default: [],
+	},
 	isCollapsed: {
 		type: Boolean,
 		default: false,
@@ -59,6 +63,6 @@ function handleClick() {
 }
 
 let isActive = computed(() => {
-	return router.currentRoute.value.name === props.to
+	return props.activeFor.includes(router.currentRoute.value.name)
 })
 </script>

frontend/src/pages/Statistics.vue

@@ -5,67 +5,67 @@
 		>
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
 		</header>
-		<div class="p-5">
-			<div class="grid grid-cols-5 gap-5">
-				<div class="flex items-center border py-2 px-3 rounded-md">
+		<div v-if="chartDetails.data" class="p-5">
+			<div class="grid grid-cols-5 gap-4">
+				<div class="flex items-center shadow py-2 px-3 rounded-md">
 					<div class="p-2 rounded-md bg-gray-100 mr-3">
 						<BookOpen class="w-18 h-18 stroke-1.5 text-gray-700" />
 					</div>
 					<div>
 						<div class="text-xl font-semibold mb-1">
-							{{ courseCount.data?.toLocaleString() }}
+							{{ chartDetails.data.courses }}
 						</div>
 						<div class="text-gray-700">
 							{{ __('Published Courses') }}
 						</div>
 					</div>
 				</div>
-				<div class="flex items-center border py-2 px-3 rounded-md">
+				<div class="flex items-center shadow py-2 px-3 rounded-md">
 					<div class="p-2 rounded-md bg-gray-100 mr-3">
 						<LogIn class="w-18 h-18 stroke-1.5 text-gray-700" />
 					</div>
 					<div>
 						<div class="text-xl font-semibold mb-1">
-							{{ userCount.data?.toLocaleString() }}
+							{{ chartDetails.data.users }}
 						</div>
 						<div class="text-gray-700">
 							{{ __('Total Signups') }}
 						</div>
 					</div>
 				</div>
-				<div class="flex items-center border py-2 px-3 rounded-md">
+				<div class="flex items-center shadow py-2 px-3 rounded-md">
 					<div class="p-2 rounded-md bg-gray-100 mr-3">
 						<BookOpenCheck class="w-18 h-18 stroke-1.5 text-gray-700" />
 					</div>
 					<div>
 						<div class="text-xl font-semibold mb-1">
-							{{ enrollmentCount.data?.toLocaleString() }}
+							{{ chartDetails.data.enrollments }}
 						</div>
 						<div class="text-gray-700">
 							{{ __('Enrolled Users') }}
 						</div>
 					</div>
 				</div>
-				<div class="flex items-center border py-2 px-3 rounded-md">
+				<div class="flex items-center shadow py-2 px-3 rounded-md">
 					<div class="p-2 rounded-md bg-gray-100 mr-3">
 						<FileCheck class="w-18 h-18 stroke-1.5 text-gray-700" />
 					</div>
 					<div>
 						<div class="text-xl font-semibold mb-1">
-							{{ coursesCompleted.data?.toLocaleString() }}
+							{{ chartDetails.data.completions }}
 						</div>
 						<div class="text-gray-700">
 							{{ __('Courses Completed') }}
 						</div>
 					</div>
 				</div>
-				<div class="flex items-center border py-2 px-3 rounded-md">
+				<div class="flex items-center shadow py-2 px-3 rounded-md">
 					<div class="p-2 rounded-md bg-gray-100 mr-3">
 						<FileCheck2 class="w-18 h-18 stroke-1.5 text-gray-700" />
 					</div>
 					<div>
 						<div class="text-xl font-semibold mb-1">
-							{{ lessonsCompleted.data?.toLocaleString() }}
+							{{ chartDetails.data.lesson_completions }}
 						</div>
 						<div class="text-gray-700">
 							{{ __('Lessons Completed') }}
@@ -73,12 +73,67 @@
 					</div>
 				</div>
 			</div>
+			<div class="grid grid-cols-2 gap-4 mt-4">
+				<div class="shadow rounded-md p-5 min-h-72">
+					<Line
+						v-if="signupsChart.data"
+						:data="signupsChart.data"
+						:options="signupChartOptions()"
+					/>
+				</div>
+				<div class="shadow rounded-md p-5 min-h-72">
+					<Line
+						v-if="enrollmentChart.data"
+						:data="enrollmentChart.data"
+						:options="enrollmentChartOptions()"
+					/>
+				</div>
+				<div class="shadow rounded-md p-5">
+					<Line
+						v-if="lessonCompletion.data"
+						:data="lessonCompletion.data"
+						:options="lessonChartOptions()"
+					/>
+				</div>
+				<div class="shadow rounded-md p-5">
+					<Pie
+						v-if="courseCompletion.data"
+						:data="courseCompletion.data"
+						:options="courseChartOptions()"
+					/>
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
 <script setup>
 import { createResource, Breadcrumbs } from 'frappe-ui'
 import { computed, inject } from 'vue'
+import { Line, Pie } from 'vue-chartjs'
+import {
+	Chart as ChartJS,
+	Title,
+	Tooltip,
+	Legend,
+	LineElement,
+	CategoryScale,
+	LinearScale,
+	PointElement,
+	ArcElement,
+	Filler,
+} from 'chart.js'
+
+ChartJS.register(
+	Title,
+	Tooltip,
+	Legend,
+	LineElement,
+	CategoryScale,
+	LinearScale,
+	PointElement,
+	ArcElement,
+	Filler
+)
 import {
 	BookOpen,
 	LogIn,
@@ -87,7 +142,7 @@ import {
 	BookOpenCheck,
 } from 'lucide-vue-next'
 
-const dayjs = inject('dayjs')
+const dayjs = inject('$dayjs')
 
 const breadcrumbs = computed(() => {
 	return [
@@ -100,74 +155,153 @@ const breadcrumbs = computed(() => {
 	]
 })
 
-const enrollmentCount = createResource({
-	url: 'frappe.client.get_count',
-	params: {
-		doctype: 'LMS Enrollment',
-	},
+const chartDetails = createResource({
+	url: 'lms.lms.api.get_chart_details',
+	cache: ['statistics'],
 	auto: true,
-	cache: ['enrollment_count'],
 })
 
-const courseCount = createResource({
-	url: 'frappe.client.get_count',
+const signupsChart = createResource({
+	url: 'lms.lms.utils.get_chart_data',
+	cache: ['signups'],
 	params: {
-		doctype: 'LMS Course',
-		filters: {
-			published: 1,
-			upcoming: 0,
-		},
+		chart_name: 'New Signups',
 	},
 	auto: true,
-	cache: ['course_count'],
 })
 
-const userCount = createResource({
-	url: 'frappe.client.get_count',
+const enrollmentChart = createResource({
+	url: 'lms.lms.utils.get_chart_data',
+	cache: ['enrollments'],
 	params: {
-		doctype: 'User',
-		filters: {
-			enabled: 1,
-		},
+		chart_name: 'Course Enrollments',
 	},
 	auto: true,
-	cache: ['user_count'],
 })
 
-const coursesCompleted = createResource({
-	url: 'frappe.client.get_count',
+const lessonCompletion = createResource({
+	url: 'lms.lms.utils.get_chart_data',
+	cache: ['lessonCompletion'],
 	params: {
-		doctype: 'LMS Enrollment',
-		filters: {
-			progress: ['like', '%100%'],
-		},
+		chart_name: 'Lesson Completion',
 	},
 	auto: true,
-	cache: ['courses_completed'],
 })
 
-const lessonsCompleted = createResource({
-	url: 'frappe.client.get_count',
-	params: {
-		doctype: 'LMS Course Progress',
-	},
+const courseCompletion = createResource({
+	url: 'lms.lms.utils.get_course_completion_data',
 	auto: true,
-	cache: ['lessons_completed'],
+	cache: ['courseCompletion'],
 })
 
-const generateGraph = () => {
-	createResource({
-		url: 'lms.lms.utils.get_chart_data',
-		params: {
-			chart_name: chartName,
-			timespan: 'Select Date Range',
-			timegrain: 'Daily',
-			from_date: dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
-			to_date: dayjs().format('YYYY-MM-DD'),
+const signupChartOptions = () => {
+	let options = chartOptions(false)
+	options.plugins.title.text = 'New Signups'
+	options.borderColor = '#278F5E'
+	options.backgroundColor = (ctx) => {
+		const canvas = ctx.chart.ctx
+		const gradient = canvas.createLinearGradient(0, 0, 0, 160)
+		gradient.addColorStop(0, '#B6DEC5')
+		gradient.addColorStop(0.5, '#E4F5E9')
+		gradient.addColorStop(1, '#F3FCF5')
+
+		return gradient
+	}
+	return options
+}
+
+const enrollmentChartOptions = () => {
+	let options = chartOptions(false)
+	options.plugins.title.text = 'Course Enrollments'
+	options.borderColor = '#B52A2A'
+	options.backgroundColor = (ctx) => {
+		const canvas = ctx.chart.ctx
+		const gradient = canvas.createLinearGradient(0, 0, 0, 160)
+		gradient.addColorStop(0, '#FFC6A5')
+		gradient.addColorStop(0.5, '#FFD8C5')
+		gradient.addColorStop(1, '#FFE9E5')
+
+		return gradient
+	}
+	return options
+}
+
+const lessonChartOptions = () => {
+	let options = chartOptions(false)
+	options.plugins.title.text = 'Lesson Completion'
+	options.borderColor = '#0070CC'
+	options.backgroundColor = (ctx) => {
+		const canvas = ctx.chart.ctx
+		const gradient = canvas.createLinearGradient(0, 0, 0, 160)
+		gradient.addColorStop(0, '#B6DEC5')
+		gradient.addColorStop(0.5, '#E4F5E9')
+		gradient.addColorStop(1, '#F3FCF5')
+
+		return gradient
+	}
+	return options
+}
+
+const courseChartOptions = () => {
+	let options = chartOptions(true)
+	options.plugins.title.text = 'Course Completion'
+	options.backgroundColor = ['#E4521B', '#FEEB65']
+	return options
+}
+
+const chartOptions = (isPie) => {
+	return {
+		responsive: true,
+		maintainAspectRatio: false,
+		fill: true,
+		borderWidth: 2,
+		pointRadius: 2,
+		pointStyle: 'cross',
+		ticks: {
+			autoSkip: true,
+			maxTicksLimit: 5,
 		},
-		onSuccess(data) {
-			renderChart(data.message, chartName, chartElement, chartType)
+		plugins: {
+			legend: {
+				display: isPie ? true : false,
+			},
+			title: {
+				display: true,
+				align: 'start',
+				font: {
+					size: 14,
+					weight: '500',
+				},
+				color: '#171717',
+				padding: {
+					bottom: 20,
+				},
+			},
+			tooltip: {
+				backgroundColor: '#000',
+			},
 		},
-	})
+		scales: {
+			x: {
+				display: isPie ? false : true,
+				grid: {
+					display: false,
+				},
+				border: {
+					display: isPie ? false : true,
+				},
+			},
+			y: {
+				beginAtZero: true,
+				display: isPie ? false : true,
+				grid: {
+					display: false,
+				},
+				border: {
+					display: isPie ? false : true,
+				},
+			},
+		},
+	}
 }
 </script>

frontend/src/utils/index.js

@@ -187,21 +187,24 @@ export function getSidebarLinks() {
 			label: 'Courses',
 			icon: BookOpen,
 			to: 'Courses',
+			activeFor: ['Courses', 'CourseDetail', 'Lesson'],
 		},
 		{
 			label: 'Batches',
 			icon: Users,
 			to: 'Batches',
+			activeFor: ['Batches', 'BatchDetail', 'Batch'],
+		},
+		{
+			label: 'Jobs',
+			icon: Briefcase,
+			to: 'Jobs',
+			activeFor: ['Jobs', 'JobDetail'],
 		},
 		{
 			label: 'Statistics',
 			icon: TrendingUp,
 			to: 'Statistics',
 		},
-		{
-			label: 'Jobs',
-			icon: Briefcase,
-			to: 'Jobs',
-		},
 	]
 }