feat: statistics graphs

frontend/package.json

@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "chart.js": "^4.4.1",
     "dayjs": "^1.11.6",
     "feather-icons": "^4.28.0",
     "frappe-ui": "^0.1.22",
@@ -17,7 +18,7 @@
     "socket.io-client": "^4.7.2",
     "tailwindcss": "^3.3.3",
     "vue": "^3.2.25",
-    "vue-chartjs": "^5.0.0",
+    "vue-chartjs": "^5.3.0",
     "vue-router": "^4.0.12"
   },
   "devDependencies": {

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 v-if="chartDetails.data" class="p-5">
-			<div class="grid grid-cols-5 gap-5">
+			<div class="grid grid-cols-5 gap-4">
-				<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">
 						<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({
+const chartDetails = createResource({
-	url: 'frappe.client.get_count',
+	url: 'lms.lms.api.get_chart_details',
-	params: {
+	cache: ['statistics'],
-		doctype: 'LMS Enrollment',
-	},
 	auto: true,
-	cache: ['enrollment_count'],
 })
 
-const courseCount = createResource({
+const signupsChart = createResource({
-	url: 'frappe.client.get_count',
+	url: 'lms.lms.utils.get_chart_data',
+	cache: ['signups'],
 	params: {
-		doctype: 'LMS Course',
+		chart_name: 'New Signups',
-		filters: {
-			published: 1,
-			upcoming: 0,
-		},
 	},
 	auto: true,
-	cache: ['course_count'],
 })
 
-const userCount = createResource({
+const enrollmentChart = createResource({
-	url: 'frappe.client.get_count',
+	url: 'lms.lms.utils.get_chart_data',
+	cache: ['enrollments'],
 	params: {
-		doctype: 'User',
+		chart_name: 'Course Enrollments',
-		filters: {
-			enabled: 1,
-		},
 	},
 	auto: true,
-	cache: ['user_count'],
 })
 
-const coursesCompleted = createResource({
+const lessonCompletion = createResource({
-	url: 'frappe.client.get_count',
+	url: 'lms.lms.utils.get_chart_data',
+	cache: ['lessonCompletion'],
 	params: {
-		doctype: 'LMS Enrollment',
+		chart_name: 'Lesson Completion',
-		filters: {
-			progress: ['like', '%100%'],
-		},
 	},
 	auto: true,
-	cache: ['courses_completed'],
 })
 
-const lessonsCompleted = createResource({
+const courseCompletion = createResource({
-	url: 'frappe.client.get_count',
+	url: 'lms.lms.utils.get_course_completion_data',
-	params: {
-		doctype: 'LMS Course Progress',
-	},
 	auto: true,
-	cache: ['lessons_completed'],
+	cache: ['courseCompletion'],
 })
 
-const generateGraph = () => {
+const signupChartOptions = () => {
-	createResource({
+	let options = chartOptions(false)
-		url: 'lms.lms.utils.get_chart_data',
+	options.plugins.title.text = 'New Signups'
-		params: {
+	options.borderColor = '#278F5E'
-			chart_name: chartName,
+	options.backgroundColor = (ctx) => {
-			timespan: 'Select Date Range',
+		const canvas = ctx.chart.ctx
-			timegrain: 'Daily',
+		const gradient = canvas.createLinearGradient(0, 0, 0, 160)
-			from_date: dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
+		gradient.addColorStop(0, '#B6DEC5')
-			to_date: dayjs().format('YYYY-MM-DD'),
+		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) {
+		plugins: {
-			renderChart(data.message, chartName, chartElement, chartType)
+			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',
-		},
 	]
 }

lms/lms/api.py

@@ -239,3 +239,22 @@ def get_job_opportunities():
 		order_by="creation desc",
 	)
 	return jobs
+
+
+@frappe.whitelist(allow_guest=True)
+def get_chart_details():
+	details = frappe._dict()
+	details.enrollments = frappe.db.count("LMS Enrollment")
+	details.courses = frappe.db.count(
+		"LMS Course",
+		{
+			"published": 1,
+			"upcoming": 0,
+		},
+	)
+	details.users = frappe.db.count("User", {"enabled": 1})
+	details.completions = frappe.db.count(
+		"LMS Enrollment", {"progress": ["like", "%100%"]}
+	)
+	details.lesson_completions = frappe.db.count("LMS Course Progress")
+	return details

lms/lms/utils.py

@@ -764,7 +764,17 @@ def has_lessons(course):
 
 
 @frappe.whitelist(allow_guest=True)
-def get_chart_data(chart_name, timespan, timegrain, from_date, to_date):
+def get_chart_data(
+	chart_name,
+	timespan="Select Date Range",
+	timegrain="Daily",
+	from_date=None,
+	to_date=None,
+):
+	if not from_date:
+		from_date = add_months(getdate(), -1)
+	if not to_date:
+		to_date = getdate()
 	chart = frappe.get_doc("Dashboard Chart", chart_name)
 	filters = [([chart.document_type, "docstatus", "<", 2, False])]
 	doctype = chart.document_type
@@ -794,7 +804,7 @@ def get_chart_data(chart_name, timespan, timegrain, from_date, to_date):
 			else get_period(r[0], timegrain)
 			for r in result
 		],
-		"datasets": [{"name": chart.name, "values": [r[1] for r in result]}],
+		"datasets": [{"name": chart.name, "data": [r[1] for r in result]}],
 	}
 
 
@@ -808,7 +818,7 @@ def get_course_completion_data():
 		"datasets": [
 			{
 				"name": "Course Completion",
-				"values": [completed, all_membership - completed],
+				"data": [completed, all_membership - completed],
 			}
 		],
 	}

yarn.lock

@@ -567,6 +567,11 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@kurkle/color@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
 "@lezer/common@^1.0.0", "@lezer/common@^1.1.0", "@lezer/common@^1.2.0":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.1.tgz#198b278b7869668e1bebbe687586e12a42731049"
@@ -1477,6 +1482,13 @@ charenc@0.0.2:
   resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
   integrity sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==
 
+chart.js@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.1.tgz#ac5dc0e69a7758909158a96fe80ce43b3bb96a9f"
+  integrity sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
 chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
@@ -3712,7 +3724,7 @@ vitepress@^1.0.0-alpha.29:
     vite "^5.0.12"
     vue "^3.4.15"
 
-vue-chartjs@^5.0.0:
+vue-chartjs@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-5.3.0.tgz#59920a07d72f37a2375d495256e486b92813bf6e"
   integrity sha512-8XqX0JU8vFZ+WA2/knz4z3ThClduni2Nm0BMe2u0mXgTfd9pXrmJ07QBI+WAij5P/aPmPMX54HCE1seWL37ZdQ==