eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: statistics page numbers

Browse Source
This commit is contained in:
Jannat Patel
2024-01-17 10:35:34 +05:30
parent 041bae16e0
commit 0845a6e2a3
3 changed files with 69 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/package.json
View File

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

89
frontend/src/pages/Statistics.vue
View File

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

5
frontend/yarn.lock
View File

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