Commit @667252fc5a11b2f6a0bc2d993538d660730412aa

woals 2024-08-19

240819 권민수 학부모 대시보드 학습현황 시각화 적용

@667252fc5a11b2f6a0bc2d993538d660730412aa

b647a09

667252f

client/views/pages/main/Chapter/Chapter3_3.vue

--- client/views/pages/main/Chapter/Chapter3_3.vue

+++ client/views/pages/main/Chapter/Chapter3_3.vue


 
     // 단원 정보를 불러오는 API 호출
     fetchUnitDetail(unitId) {
-        console.log("테스트", this.dataList);
         axios.post('/unit/unitDetail.json', {
             unitId: unitId
         })

b647a09

667252f

client/views/pages/parents/Dounutchart.vue

--- client/views/pages/parents/Dounutchart.vue

+++ client/views/pages/parents/Dounutchart.vue


 import * as am5 from "@amcharts/amcharts5";
 import * as am5percent from "@amcharts/amcharts5/percent";
 import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+import axios from "axios";
 
 export default {
   name: "Dounutchart",
-  mounted() {
-    this.createChart();
+
+  data() {
+    return {
+      chartData: {},
+      currentDate: "2024-08-14",
+      currentStdId: "1"
+    };
   },
+
+  mounted() {
+    this.getStdProgressData();
+  },
+
   methods: {
+
+    // 현재 날짜의 학생 학습률 데이터 가져오기
+    getStdProgressData() {
+      const vm = this;
+      axios.post('/dashboard/stdProgressData.json', {
+          std_id: vm.currentStdId,
+          current_date: vm.currentDate
+      })
+      .then(response => {
+        vm.chartData = response.data;
+        vm.createChart();
+      })
+      .catch(error => {
+          console.error('오늘의 학생 학습 현황 데이터를 가져오는 중 오류 발생:', error);
+      })
+    },
+
     createChart() {
       // Initialize root
       const root = am5.Root.new(this.$refs.Dounutchart);

       //   fontWeight: "bold"
       // }));
 
+      // 색깔 설정
+      series.slices.template.setAll({
+        fill: am5.color(0x008000), // green for completed units
+        strokeWidth: 0,
+        strokeOpacity: 0
+      });
+
+      // 카테고리 별 색깔 설정
+      series.slices.template.adapters.add("fill", (fill, target) => {
+        if (target.dataItem.get("category") === "완료한 단원") {
+          return am5.color(0xafe589); // 초록
+        } else if (target.dataItem.get("category") === "남은 단원") {
+          return am5.color(0xf7cece); // 빨강
+        }
+        return fill;
+      });
+
       series.labels.template.setAll({
         textType: "circular",
         centerX: am5.p50,

 
       // Set data
       series.data.setAll([
-        { value: 10, category: "One" },
-        { value: 9, category: "Two" },
+        { value: this.chartData.clearUnitNum, category: "완료한 단원" },
+        { value: this.chartData.totalScheduleUnitNum - this.chartData.clearUnitNum, category: "남은 단원" },
       ]);
 
       // Create legend

       series.appear(1000, 100);
     }
   }
+  
 };
 </script>
 

b647a09

667252f

client/views/pages/parents/Main_p.vue

--- client/views/pages/parents/Main_p.vue

+++ client/views/pages/parents/Main_p.vue


                             <div><Dounutchart/></div>
                             <div class="textbox">
                                 <p class="title2">오늘의 학습현황</p>
-                                <p class="name">40%</p>
+                                <!-- 안전하게 진도율을 소수점 한자리 수까지 표시 -->
+                                <p class="name"> 
+                                    {{ donutChartData.clearUnitNum && donutChartData.totalScheduleUnitNum 
+                                        ? (donutChartData.clearUnitNum / donutChartData.totalScheduleUnitNum * 100).toFixed(1) 
+                                        : 0 }} %
+                                </p>
                             </div>
                             <p class="title2">학습시간</p>
-                            <p class="name">학습시간 0시간</p>
+                            <p class="name">학습시간 n시간</p>
                         </div>
                         <div class="wrap">
                             <p class="name">이해/표현 점수</p>

 import Bubblechart from './Bubblechart.vue';
 import Dounutchart from './Dounutchart.vue';
 import ColumnLineChart from './ColumnLineChart.vue';
+import axios from "axios";
 
 export default {
+
     data() {
         return {
-            progress: 20
+            progress: 20,
+            donutChartData: {},
+            currentDate: "2024-08-14",
+            currentStdId: "1"
         }
     },
+
     methods: {
+
         increaseProgress() {
             if (this.progress < 100) {
                 this.progress += 10;
             }
         },
        
+        // 현재 날짜의 학생 학습률 데이터 가져오기
+        getStdProgressData() {
+            const vm = this;
+            axios.post('/dashboard/stdProgressData.json', {
+                std_id: vm.currentStdId,
+                current_date: vm.currentDate
+            })
+            .then(response => {
+                vm.donutChartData = response.data;
+                console.log(vm.donutChartData);
+            })
+            .catch(error => {
+                console.error('오늘의 학생 학습 현황 데이터를 가져오는 중 오류 발생:', error);
+            })
+        },
 
     },
+
     watch: {
 
     },
+
     computed: {
 
     },
+
     components: {
         Header: Header,
         Menu: Menu,

         ColumnLineChart: ColumnLineChart,
 
     },
+
     mounted() {
+        this.getStdProgressData();
     }
+
 }
 </script>
+
 <style scoped>
 .main-wrap {
     margin-top: 20px;

Add a comment

Open 0
Closed 0

List

...	...	@@ -84,7 +84,6 @@
84	84
85	85	// 단원 정보를 불러오는 API 호출
86	86	fetchUnitDetail(unitId) {
87		- console.log("테스트", this.dataList);
88	87	axios.post('/unit/unitDetail.json', {
89	88	unitId: unitId
90	89	})

...	...	@@ -100,10 +100,15 @@
100	100	<div><Dounutchart/></div>
101	101	<div class="textbox">
102	102	<p class="title2">오늘의 학습현황</p>
103		- <p class="name">40%</p>
	103	+ <!-- 안전하게 진도율을 소수점 한자리 수까지 표시 -->
	104	+ <p class="name">
	105	+ {{ donutChartData.clearUnitNum && donutChartData.totalScheduleUnitNum
	106	+ ? (donutChartData.clearUnitNum / donutChartData.totalScheduleUnitNum * 100).toFixed(1)
	107	+ : 0 }} %
	108	+ </p>
104	109	</div>
105	110	<p class="title2">학습시간</p>
106		- <p class="name">학습시간 0시간</p>
	111	+ <p class="name">학습시간 n시간</p>
107	112	</div>
108	113	<div class="wrap">
109	114	<p class="name">이해/표현 점수</p>
...	...	@@ -176,28 +181,53 @@
176	181	import Bubblechart from './Bubblechart.vue';
177	182	import Dounutchart from './Dounutchart.vue';
178	183	import ColumnLineChart from './ColumnLineChart.vue';
	184	+import axios from "axios";
179	185
180	186	export default {
	187	+
181	188	data() {
182	189	return {
183		- progress: 20
	190	+ progress: 20,
	191	+ donutChartData: {},
	192	+ currentDate: "2024-08-14",
	193	+ currentStdId: "1"
184	194	}
185	195	},
	196	+
186	197	methods: {
	198	+
187	199	increaseProgress() {
188	200	if (this.progress < 100) {
189	201	this.progress += 10;
190	202	}
191	203	},
192	204
	205	+ // 현재 날짜의 학생 학습률 데이터 가져오기
	206	+ getStdProgressData() {
	207	+ const vm = this;
	208	+ axios.post('/dashboard/stdProgressData.json', {
	209	+ std_id: vm.currentStdId,
	210	+ current_date: vm.currentDate
	211	+ })
	212	+ .then(response => {
	213	+ vm.donutChartData = response.data;
	214	+ console.log(vm.donutChartData);
	215	+ })
	216	+ .catch(error => {
	217	+ console.error('오늘의 학생 학습 현황 데이터를 가져오는 중 오류 발생:', error);
	218	+ })
	219	+ },
193	220
194	221	},
	222	+
195	223	watch: {
196	224
197	225	},
	226	+
198	227	computed: {
199	228
200	229	},
	230	+
201	231	components: {
202	232	Header: Header,
203	233	Menu: Menu,
...	...	@@ -211,10 +241,14 @@
211	241	ColumnLineChart: ColumnLineChart,
212	242
213	243	},
	244	+
214	245	mounted() {
	246	+ this.getStdProgressData();
215	247	}
	248	+
216	249	}
217	250	</script>
	251	+
218	252	<style scoped>
219	253	.main-wrap {
220	254	margin-top: 20px;

...	...	@@ -6,13 +6,41 @@
6	6	import * as am5 from "@amcharts/amcharts5";
7	7	import * as am5percent from "@amcharts/amcharts5/percent";
8	8	import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	9	+import axios from "axios";
9	10
10	11	export default {
11	12	name: "Dounutchart",
12		- mounted() {
13		- this.createChart();
	13	+
	14	+ data() {
	15	+ return {
	16	+ chartData: {},
	17	+ currentDate: "2024-08-14",
	18	+ currentStdId: "1"
	19	+ };
14	20	},
	21	+
	22	+ mounted() {
	23	+ this.getStdProgressData();
	24	+ },
	25	+
15	26	methods: {
	27	+
	28	+ // 현재 날짜의 학생 학습률 데이터 가져오기
	29	+ getStdProgressData() {
	30	+ const vm = this;
	31	+ axios.post('/dashboard/stdProgressData.json', {
	32	+ std_id: vm.currentStdId,
	33	+ current_date: vm.currentDate
	34	+ })
	35	+ .then(response => {
	36	+ vm.chartData = response.data;
	37	+ vm.createChart();
	38	+ })
	39	+ .catch(error => {
	40	+ console.error('오늘의 학생 학습 현황 데이터를 가져오는 중 오류 발생:', error);
	41	+ })
	42	+ },
	43	+
16	44	createChart() {
17	45	// Initialize root
18	46	const root = am5.Root.new(this.$refs.Dounutchart);
...	...	@@ -47,6 +75,23 @@
47	75	// fontWeight: "bold"
48	76	// }));
49	77
	78	+ // 색깔 설정
	79	+ series.slices.template.setAll({
	80	+ fill: am5.color(0x008000), // green for completed units
	81	+ strokeWidth: 0,
	82	+ strokeOpacity: 0
	83	+ });
	84	+
	85	+ // 카테고리 별 색깔 설정
	86	+ series.slices.template.adapters.add("fill", (fill, target) => {
	87	+ if (target.dataItem.get("category") === "완료한 단원") {
	88	+ return am5.color(0xafe589); // 초록
	89	+ } else if (target.dataItem.get("category") === "남은 단원") {
	90	+ return am5.color(0xf7cece); // 빨강
	91	+ }
	92	+ return fill;
	93	+ });
	94	+
50	95	series.labels.template.setAll({
51	96	textType: "circular",
52	97	centerX: am5.p50,
...	...	@@ -55,8 +100,8 @@
55	100
56	101	// Set data
57	102	series.data.setAll([
58		- { value: 10, category: "One" },
59		- { value: 9, category: "Two" },
	103	+ { value: this.chartData.clearUnitNum, category: "완료한 단원" },
	104	+ { value: this.chartData.totalScheduleUnitNum - this.chartData.clearUnitNum, category: "남은 단원" },
60	105	]);
61	106
62	107	// Create legend
...	...	@@ -73,6 +118,7 @@
73	118	series.appear(1000, 100);
74	119	}
75	120	}
	121	+
76	122	};
77	123	</script>
78	124

Delete comment