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",
"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",

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

@@ -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">
<BookOpen class="w-18 h-18 stroke-1.5" />
<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>
{{ courseCount.data }}
<div class="text-xl font-semibold mb-1">
{{ courseCount.data?.toLocaleString() }}
</div>
<div>
<div class="text-gray-700">
{{ __('Published Courses') }}
</div>
</div>
</div>
<div class="border py-2 px-3 rounded-md">
<BookOpenCheck class="w-4 h-4 stroke-1.5" />
<div>
{{ enrollmentCount.data }}
<div class="flex items-center border 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>
{{ __('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">
<LogIn class="w-4 h-4 stroke-1.5" />
<div>
{{ userCount.data }}
<div class="flex items-center border 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>
{{ __('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">
<FileCheck class="w-4 h-4 stroke-1.5" />
<div>
{{ coursesCompleted.data }}
<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>
{{ __('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">
<FileCheck2 class="w-4 h-4 stroke-1.5" />
<div>
{{ lessonsCompleted.data }}
<div class="flex items-center border 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>
{{ __('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>

5
frontend/yarn.lock
View File

@@ -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"