refactor: use frappe-ui for batch progress charts

frontend/package.json

@@ -2,6 +2,7 @@
   "name": "frappe-ui-frontend",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "serve": "vite preview",
@@ -26,7 +27,7 @@
     "codemirror-editor-vue3": "^2.8.0",
     "dayjs": "^1.11.6",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.134",
+    "frappe-ui": "^0.1.141",
     "highlight.js": "^11.11.1",
     "lucide-vue-next": "^0.383.0",
     "markdown-it": "^14.0.0",

frontend/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	plugins: {
 		tailwindcss: {},
 		autoprefixer: {},

frontend/src/components/BatchStudents.vue

@@ -6,70 +6,100 @@
 			</div>
 		</div>
 		<div class="grid grid-cols-4 gap-5 mb-8">
-			<div
+
-				class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
+			<NumberChart
-			>
+				class="border rounded-md"
-				<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
+				:config="{ title: __('Students'), value: students.data?.length || 0 }"
-					<User class="w-5 h-5 stroke-1.5" />
+			/>
-				</div>
+
-				<div class="flex items-center space-x-2">
+			<NumberChart
-					<span class="font-semibold">
+				class="border rounded-md"
-						{{ students.data?.length }}
+				:config="{ title: __('Certified'), value: certificationCount.data || 0 }"
-					</span>
+			/>
-					<span class="">
+
-						{{ __('Students') }}
+			<NumberChart
-					</span>
+				class="border rounded-md"
-				</div>
+				:config="{ title: __('Courses'), value: batch.courses?.length || 0 }"
+			/>
+
+			<NumberChart
+				class="border rounded-md"
+				:config="{ title: __('Assessments'), value: assessmentCount || 0 }"
+			/>
 		</div>
 
-			<div
+		<AxisChart
-				class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
+			:config="{
-			>
+				data: [
-				<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
+					{
-					<GraduationCap class="w-5 h-5 stroke-1.5" />
+						product: 'Apple Watch',
-				</div>
+						sales: 400,
-				<div class="flex items-center space-x-2">
+					},
-					<span class="font-semibold">
+					{
-						{{ certificationCount.data }}
+						product: 'Services',
-					</span>
+						sales: 400,
-					<span class="">
+					},
-						{{ __('Certified') }}
+					{
-					</span>
+						product: 'iMac',
-				</div>
+						sales: 350,
-			</div>
+					},
+					{
+						product: 'Accessories',
+						sales: 350,
+					},
+					{
+						product: 'iPad',
+						sales: 300,
+					},
+					{
+						product: 'AirPods',
+						sales: 300,
+					},
+					{
+						product: 'Apple TV',
+						sales: 300,
+					},
+					{
+						product: 'Others',
+						sales: 300,
+					},
+					{
+						product: 'Macbook',
+						sales: 250,
+					},
+					{
+						product: 'Beats',
+						sales: 250,
+					},
+					{
+						product: 'iPhone',
+						sales: 200,
+					},
+					{
+						product: 'HomePod',
+						sales: 200,
+					},
+					],
+					title: __('Batch Summary'),
+					subtitle: __('Progress of students in courses and assessments'),
+					xAxis: {
+						key: 'product',
+						title: 'Product',
+						type: 'category',
+					},
+					yAxis: {
+						title: __('Number of Students'),
+					},
+					swapXY: true,
+					series: [
+						{
+							name: 'sales',
+							type: 'bar',
+						},
+					],
+				}"
+			/>
 
-			<div
-				class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
-			>
-				<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
-					<BookOpen class="w-5 h-5 stroke-1.5" />
-				</div>
-				<div class="flex items-center space-x-2">
-					<span class="font-semibold">
-						{{ batch.courses?.length }}
-					</span>
-					<span>
-						{{ __('Courses') }}
-					</span>
-				</div>
-			</div>
-
-			<div
-				class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
-			>
-				<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
-					<ShieldCheck class="w-5 h-5 stroke-1.5" />
-				</div>
-				<div class="flex items-center space-x-2">
-					<span class="font-semibold">
-						{{ assessmentCount }}
-					</span>
-					<span>
-						{{ __('Assessments') }}
-					</span>
-				</div>
-			</div>
-		</div>
 		<div v-if="showProgressChart" class="mb-8">
 			<div class="text-ink-gray-7 font-medium">
 				{{ __('Progress') }}
@@ -213,6 +243,7 @@
 <script setup>
 import {
 	Avatar,
+	AxisChart,
 	Button,
 	createResource,
 	FeatherIcon,
@@ -223,6 +254,7 @@ import {
 	ListRows,
 	ListView,
 	ListRowItem,
+	NumberChart,
 } from 'frappe-ui'
 import {
 	BookOpen,
@@ -331,10 +363,19 @@ const removeStudents = (selections, unselectAll) => {
 }
 
 const getChartData = () => {
-	let categories = {}
+	let data = []
+	console.log(students.data)
+
+	students.data.forEach(row => {
+		row.assessments.forEach(assessment => {
+			
+		})
+	})
+
+	/* let categories = {}
 
 	if (!students.data?.length) return []
-
+	console.log(students.data)
 	Object.keys(students.data[0].courses).forEach((course) => {
 		categories[course] = {
 			value: 0,
@@ -366,12 +407,13 @@ const getChartData = () => {
 	})
 
 	chartOptions.value = getChartOptions(categories)
+	console.log(Object.values(categories).map((item) => item.value))
 	return [
 		{
 			name: __('Completed by Students'),
 			data: Object.values(categories).map((item) => item.value),
 		},
-	]
+	] */
 }
 
 const getChartOptions = (categories) => {

frontend/tailwind.config.js

@@ -1,5 +1,7 @@
-module.exports = {
+import frappeUIPreset from 'frappe-ui/src/tailwind/preset'
-	presets: [require('frappe-ui/src/tailwind/preset')],
+
+export default {
+	presets: [frappeUIPreset],
 	content: [
 		'./index.html',
 		'./src/**/*.{vue,js,ts,jsx,tsx}',

package.json

@@ -2,7 +2,8 @@
   "name": "frappe_lms",
   "version": "1.0.0",
   "description": "Easy to use, open-source, Learning Management System",
-  "workspaces1": [
+  "type": "module",
+  "workspaces": [
     "frappe-ui",
     "frontend"
   ],