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

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

Browse Source
This commit is contained in:
Jannat Patel
2025-05-21 13:13:42 +05:30
parent 7ccbe74bbe
commit b8714f4abe
1 changed files with 39 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
frontend/src/components/BatchStudents.vue
View File

@@ -31,110 +31,29 @@
</div>
<AxisChart
v-if="showProgressChart"
:config="{
data: [
{
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,
},
],
data: chartData,
title: __('Batch Summary'),
subtitle: __('Progress of students in courses and assessments'),
xAxis: {
key: 'product',
title: 'Product',
key: 'task',
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 = {}
if (!students.data?.length) return []
console.log(students.data)
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
}
tasks.forEach((task) => {
data.push({
task: task.label,
value: task.value,
})
})
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),
},
] */
return data
}
const getChartOptions = (categories) => {
const courseColor = theme.colors.green[700]
const assessmentColor = theme.colors.blue[700]
const maxY =
students.data?.length % 5
? students.data?.length + (5 - (students.data?.length % 5))
: students.data?.length
const countAssessments = (row, tasks) => {
Object.keys(row.assessments).forEach((assessment) => {
if (row.assessments[assessment].result === 'Pass') {
tasks.filter((task) => task.label === assessment).length
? tasks.filter((task) => task.label === assessment)[0].value++
: tasks.push({
value: 1,
label: assessment,
})
}
})
return tasks
}
return {
chart: {
type: 'bar',
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
distributed: true,
borderRadius: 3,
borderRadiusApplication: 'end',
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 */
},
}
const countCourses = (row, tasks) => {
Object.keys(row.courses).forEach((course) => {
if (row.courses[course] === 100) {
tasks.filter((task) => task.label === course).length
? tasks.filter((task) => task.label === course)[0].value++
: tasks.push({
value: 1,
label: course,
})
}
})
return tasks
}
watch(students, () => {
@@ -484,8 +347,3 @@ const certificationCount = createResource({
auto: true,
})
</script>
<style>
.apexcharts-legend {
display: none !important;
}
</style>