feat: statistics page numbers

frontend/package.json

@@ -17,7 +17,8 @@
     "tailwindcss": "^3.2.7",
     "socket.io-client": "^4.7.2",
     "vue": "^3.2.25",
-    "vue-router": "^4.0.12"
+    "vue-router": "^4.0.12",
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.0.0",

frontend/src/pages/Statistics.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="h-screen">
+	<div class="h-screen text-base">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
@@ -8,52 +8,68 @@
 		<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 class="p-15 bg-gray-100">
+					<div class="p-2 rounded-md bg-gray-100 mr-3">
-						<BookOpen class="w-18 h-18 stroke-1.5" />
+						<BookOpen class="w-18 h-18 stroke-1.5 text-gray-700" />
 					</div>
 					<div>
-						<div>
+						<div class="text-xl font-semibold mb-1">
-							{{ courseCount.data }}
+							{{ courseCount.data?.toLocaleString() }}
 						</div>
-						<div>
+						<div class="text-gray-700">
 							{{ __('Published Courses') }}
 						</div>
 					</div>
 				</div>
-				<div class="border py-2 px-3 rounded-md">
+				<div class="flex items-center border py-2 px-3 rounded-md">
-					<BookOpenCheck class="w-4 h-4 stroke-1.5" />
+					<div class="p-2 rounded-md bg-gray-100 mr-3">
-					<div>
+						<LogIn class="w-18 h-18 stroke-1.5 text-gray-700" />
-						{{ enrollmentCount.data }}
 					</div>
 					<div>
-						{{ __('Course Enrollments') }}
+						<div class="text-xl font-semibold mb-1">
+							{{ userCount.data?.toLocaleString() }}
+						</div>
+						<div class="text-gray-700">
+							{{ __('Total Signups') }}
+						</div>
 					</div>
 				</div>
-				<div class="border py-2 px-3 rounded-md">
+				<div class="flex items-center border py-2 px-3 rounded-md">
-					<LogIn class="w-4 h-4 stroke-1.5" />
+					<div class="p-2 rounded-md bg-gray-100 mr-3">
-					<div>
+						<BookOpenCheck class="w-18 h-18 stroke-1.5 text-gray-700" />
-						{{ userCount.data }}
 					</div>
 					<div>
-						{{ __('Total Signups') }}
+						<div class="text-xl font-semibold mb-1">
+							{{ enrollmentCount.data?.toLocaleString() }}
+						</div>
+						<div class="text-gray-700">
+							{{ __('Enrolled Users') }}
+						</div>
 					</div>
 				</div>
-				<div class="border py-2 px-3 rounded-md">
+				<div class="flex items-center border py-2 px-3 rounded-md">
-					<FileCheck class="w-4 h-4 stroke-1.5" />
+					<div class="p-2 rounded-md bg-gray-100 mr-3">
-					<div>
+						<FileCheck class="w-18 h-18 stroke-1.5 text-gray-700" />
-						{{ coursesCompleted.data }}
 					</div>
 					<div>
-						{{ __('Courses Completed') }}
+						<div class="text-xl font-semibold mb-1">
+							{{ coursesCompleted.data?.toLocaleString() }}
+						</div>
+						<div class="text-gray-700">
+							{{ __('Courses Completed') }}
+						</div>
 					</div>
 				</div>
-				<div class="border py-2 px-3 rounded-md">
+				<div class="flex items-center border py-2 px-3 rounded-md">
-					<FileCheck2 class="w-4 h-4 stroke-1.5" />
+					<div class="p-2 rounded-md bg-gray-100 mr-3">
-					<div>
+						<FileCheck2 class="w-18 h-18 stroke-1.5 text-gray-700" />
-						{{ lessonsCompleted.data }}
 					</div>
 					<div>
-						{{ __('Lessons Completed') }}
+						<div class="text-xl font-semibold mb-1">
+							{{ lessonsCompleted.data?.toLocaleString() }}
+						</div>
+						<div class="text-gray-700">
+							{{ __('Lessons Completed') }}
+						</div>
 					</div>
 				</div>
 			</div>
@@ -62,7 +78,8 @@
 </template>
 <script setup>
 import { createResource, Breadcrumbs } from 'frappe-ui'
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
+import { Line } from 'vue-chartjs'
 import {
 	BookOpen,
 	LogIn,
@@ -71,6 +88,8 @@ import {
 	BookOpenCheck,
 } from 'lucide-vue-next'
 
+const dayjs = inject('dayjs')
+
 const breadcrumbs = computed(() => {
 	return [
 		{
@@ -136,4 +155,20 @@ const lessonsCompleted = createResource({
 	auto: true,
 	cache: ['lessons_completed'],
 })
+
+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'),
+		},
+		onSuccess(data) {
+			renderChart(data.message, chartName, chartElement, chartType)
+		},
+	})
+}
 </script>

frontend/yarn.lock

@@ -1918,6 +1918,11 @@ vite@^5.0.11:
   optionalDependencies:
     fsevents "~2.3.3"
 
+vue-chartjs@^5.0.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==
+
 vue-demi@>=0.14.5, vue-demi@>=0.14.6:
   version "0.14.6"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.6.tgz#dc706582851dc1cdc17a0054f4fec2eb6df74c92"