feat: statistics page numbers

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

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>