refactor: batch progress chart will now use frappe-ui components

frontend/src/components/BatchStudents.vue

@@ -31,110 +31,29 @@
 		</div>
 
 		<AxisChart
+			v-if="showProgressChart"
 			:config="{
-				data: [
+				data: chartData,
-					{
-						product: 'Apple Watch',
-						sales: 400,
-					},
-					{
-						product: 'Services',
-						sales: 400,
-					},
-					{
-						product: 'iMac',
-						sales: 350,
-					},
-					{
-						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',
+					key: 'task',
-					title: 'Product',
+					title: 'Tasks',
 					type: 'category',
 				},
 				yAxis: {
 					title: __('Number of Students'),
+					minInterval: 1,
 				},
 				swapXY: true,
 				series: [
 					{
-						name: 'sales',
+						name: 'value',
 						type: 'bar',
 					},
 				],
 			}"
 		/>
-
-		<div v-if="showProgressChart" class="mb-8">
-			<div class="text-ink-gray-7 font-medium">
-				{{ __('Progress') }}
-			</div>
-			<ApexChart
-				:options="chartOptions"
-				:series="chartData"
-				type="bar"
-				:height="chartData[0].data.length * 30 + 100"
-			/>
-			<div
-				class="flex items-center justify-center text-sm text-ink-gray-7 space-x-4"
-			>
-				<div class="flex items-center space-x-2">
-					<div
-						class="w-3 h-3 rounded-sm"
-						:style="{ 'background-color': theme.colors.green[600] }"
-					></div>
-					<div>
-						{{ __('Courses') }}
-					</div>
-				</div>
-				<div class="flex items-center space-x-2">
-					<div
-						class="w-3 h-3 rounded-sm"
-						:style="{ 'background-color': theme.colors.blue[600] }"
-					></div>
-					<div>
-						{{ __('Assessments') }}
-					</div>
-				</div>
-			</div>
-		</div>
 	</div>
 
 	<div>
@@ -279,7 +198,6 @@ const showStudentModal = ref(false)
 const showStudentProgressModal = ref(false)
 const selectedStudent = ref(null)
 const chartData = ref(null)
-const chartOptions = ref(null)
 const showProgressChart = ref(false)
 const assessmentCount = ref(0)
 const readOnlyMode = window.read_only_mode
@@ -367,104 +285,49 @@ const removeStudents = (selections, unselectAll) => {
 }
 
 const getChartData = () => {
+	let tasks = []
 	let data = []
-	console.log(students.data)
 
 	students.data.forEach((row) => {
-		row.assessments.forEach((assessment) => {})
+		tasks = countAssessments(row, tasks)
+		tasks = countCourses(row, tasks)
 	})
 
-	/* let categories = {}
+	tasks.forEach((task) => {
-
+		data.push({
-	if (!students.data?.length) return []
+			task: task.label,
-	console.log(students.data)
+			value: task.value,
-	Object.keys(students.data[0].courses).forEach((course) => {
-		categories[course] = {
-			value: 0,
-			type: 'course',
-			label: course,
-		}
-	})
-
-	Object.keys(students.data?.[0].assessments).forEach((assessment) => {
-		categories[assessment] = {
-			value: 0,
-			type: 'assessment',
-			label: assessment,
-		}
-	})
-
-	students.data.forEach((student) => {
-		Object.keys(student.courses).forEach((course) => {
-			if (student.courses[course] === 100) {
-				categories[course].value += 1
-			}
-		})
-
-		Object.keys(student.assessments).forEach((assessment) => {
-			if (student.assessments[assessment].result === 'Pass') {
-				categories[assessment].value += 1
-			}
 		})
 	})
-
+	return data
-	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) => {
+const countAssessments = (row, tasks) => {
-	const courseColor = theme.colors.green[700]
+	Object.keys(row.assessments).forEach((assessment) => {
-	const assessmentColor = theme.colors.blue[700]
+		if (row.assessments[assessment].result === 'Pass') {
-	const maxY =
+			tasks.filter((task) => task.label === assessment).length
-		students.data?.length % 5
+				? tasks.filter((task) => task.label === assessment)[0].value++
-			? students.data?.length + (5 - (students.data?.length % 5))
+				: tasks.push({
-			: students.data?.length
+						value: 1,
+						label: assessment,
+				  })
+		}
+	})
+	return tasks
+}
 
-	return {
+const countCourses = (row, tasks) => {
-		chart: {
+	Object.keys(row.courses).forEach((course) => {
-			type: 'bar',
+		if (row.courses[course] === 100) {
-			toolbar: {
+			tasks.filter((task) => task.label === course).length
-				show: false,
+				? tasks.filter((task) => task.label === course)[0].value++
-			},
+				: tasks.push({
-		},
+						value: 1,
-		plotOptions: {
+						label: course,
-			bar: {
+				  })
-				distributed: true,
+		}
-				borderRadius: 3,
+	})
-				borderRadiusApplication: 'end',
+	return tasks
-				horizontal: true,
-				barHeight: '40%',
-			},
-		},
-		colors: Object.values(categories).map((item) =>
-			item.type === 'course' ? courseColor : assessmentColor
-		),
-		xaxis: {
-			categories: Object.values(categories).map((item) => item.label),
-			labels: {
-				style: {
-					fontSize: '10px',
-				},
-				rotate: 0,
-				formatter: function (value) {
-					return value.length > 30 ? `${value.substring(0, 30)}...` : value
-				},
-			},
-		},
-		yaxis: {
-			max: maxY,
-			min: 0,
-			stepSize: 10,
-			tickAmount: maxY / 5,
-			/* reversed: true */
-		},
-	}
 }
 
 watch(students, () => {
@@ -484,8 +347,3 @@ const certificationCount = createResource({
 	auto: true,
 })
 </script>
-<style>
-.apexcharts-legend {
-	display: none !important;
-}
-</style>