Commit @bf2cd9666bdb34a25197e7422a45a107045605c0

정다정 2024-11-29

241129 정다정 학습현황 차트 날짜 오늘 날짜로 변경

@bf2cd9666bdb34a25197e7422a45a107045605c0

20dd90e

bf2cd96

client/views/pages/main/chDounutchart.vue

--- client/views/pages/main/chDounutchart.vue

+++ client/views/pages/main/chDounutchart.vue


 <template>
-    <div ref="Dounutchart" style="position: relative;left: 29px;top: -5px;width: 500px;height: 300px;"></div>
+    <div ref="Dounutchart" style="position: relative; left: 29px; top: -5px; width: 500px; height: 300px"></div>
 </template>
 
 <script>
-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";
+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",
+    name: 'Dounutchart',
 
     data() {
         return {
             chartData: {},
-            currentDate: "2024-08-14",
-            currentStdId: "1",
+            currentDate: '',
+            currentStdId: '2',
             root: null,
-            chart: null
+            chart: null,
         };
     },
 

     },
 
     methods: {
-
+        // 오늘 날짜로 계산하기
+        formatDate() {
+            const date = new Date();
+            const year = date.getFullYear();
+            const month = ('0' + (date.getMonth() + 1)).slice(-2);
+            const day = ('0' + date.getDate()).slice(-2);
+            this.currentDate = `${year}-${month}-${day}`;
+        },
         // 현재 날짜의 학생 학습률 데이터 가져오기
         getStdProgressData() {
             const vm = this;
-            axios.post('/dashboard/stdProgressData.json', {
-                std_id: vm.currentStdId,
-                current_date: vm.currentDate
-            })
-                .then(response => {
+            vm.formatDate();
+            axios
+                .post('/dashboard/stdProgressData.json', {
+                    std_id: vm.currentStdId,
+                    current_date: vm.currentDate,
+                })
+                .then((response) => {
                     vm.chartData = response.data;
                     vm.createChart();
                 })
-                .catch(error => {
+                .catch((error) => {
                     console.error('오늘의 학생 학습 현황 데이터를 가져오는 중 오류 발생:', error);
-                })
+                });
         },
 
         createChart() {

             const root = am5.Root.new(this.$refs.Dounutchart);
 
             // Apply themes
-            root.setThemes([
-                am5themes_Animated.new(root)
-            ]);
+            root.setThemes([am5themes_Animated.new(root)]);
 
             // Create chart
-            const chart = root.container.children.push(am5percent.PieChart.new(root, {
-                layout: root.verticalLayout,
-                radius: am5.percent(80),
-                innerRadius: am5.percent(40)  // Adjusted innerRadius for a donut chart
-            }));
+            const chart = root.container.children.push(
+                am5percent.PieChart.new(root, {
+                    layout: root.verticalLayout,
+                    radius: am5.percent(80),
+                    innerRadius: am5.percent(40), // Adjusted innerRadius for a donut chart
+                })
+            );
 
             if (chart.logo) {
                 chart.logo.disabled = true;
-            };
+            }
 
             // Create series
-            const series = chart.series.push(am5percent.PieSeries.new(root, {
-                valueField: "value",
-                categoryField: "category",
-                alignLabels: false
-            }));
+            const series = chart.series.push(
+                am5percent.PieSeries.new(root, {
+                    valueField: 'value',
+                    categoryField: 'category',
+                    alignLabels: false,
+                })
+            );
 
             // 색깔 설정
             series.slices.template.setAll({
                 fill: am5.color(0x008000), // green for completed units
                 strokeWidth: 0,
-                strokeOpacity: 0
+                strokeOpacity: 0,
             });
 
             // 카테고리 별 색깔 설정
-            series.slices.template.adapters.add("fill", (fill, target) => {
-                if (target.dataItem.get("category") === "완료한 단원") {
+            series.slices.template.adapters.add('fill', (fill, target) => {
+                if (target.dataItem.get('category') === '완료한 단원') {
                     return am5.color(0xafe589); // 초록
-                } else if (target.dataItem.get("category") === "남은 단원") {
+                } else if (target.dataItem.get('category') === '남은 단원') {
                     return am5.color(0xf7cece); // 빨강
                 }
                 return fill;
             });
 
             series.labels.template.setAll({
-                textType: "circular",
+                textType: 'circular',
                 centerX: am5.p50,
                 centerY: am5.p50,
-                fontSize: 14
+                fontSize: 14,
             });
 
             // Set data
             series.data.setAll([
-                { value: this.chartData.clearUnitNum, category: "완료한 단원" },
-                { value: this.chartData.totalScheduleUnitNum - this.chartData.clearUnitNum, category: "남은 단원" },
+                { value: this.chartData.clearUnitNum, category: '완료한 단원' },
+                { value: this.chartData.totalScheduleUnitNum - this.chartData.clearUnitNum, category: '남은 단원' },
             ]);
 
             // Create legend

 
             // Play initial series animation
             series.appear(1000, 100);
-
-        }
-    }
-
+        },
+    },
 };
 </script>
 
 <style scoped>
 /* Add necessary styles here */
-</style>
+</style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,23 +1,23 @@
1	1	<template>
2		- <div ref="Dounutchart" style="position: relative;left: 29px;top: -5px;width: 500px;height: 300px;"></div>
	2	+ <div ref="Dounutchart" style="position: relative; left: 29px; top: -5px; width: 500px; height: 300px"></div>
3	3	</template>
4	4
5	5	<script>
6		-import * as am5 from "@amcharts/amcharts5";
7		-import * as am5percent from "@amcharts/amcharts5/percent";
8		-import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
9		-import axios from "axios";
	6	+import * as am5 from '@amcharts/amcharts5';
	7	+import * as am5percent from '@amcharts/amcharts5/percent';
	8	+import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
	9	+import axios from 'axios';
10	10
11	11	export default {
12		- name: "Dounutchart",
	12	+ name: 'Dounutchart',
13	13
14	14	data() {
15	15	return {
16	16	chartData: {},
17		- currentDate: "2024-08-14",
18		- currentStdId: "1",
	17	+ currentDate: '',
	18	+ currentStdId: '2',
19	19	root: null,
20		- chart: null
	20	+ chart: null,
21	21	};
22	22	},
23	23
...	...	@@ -26,21 +26,30 @@
26	26	},
27	27
28	28	methods: {
29		-
	29	+ // 오늘 날짜로 계산하기
	30	+ formatDate() {
	31	+ const date = new Date();
	32	+ const year = date.getFullYear();
	33	+ const month = ('0' + (date.getMonth() + 1)).slice(-2);
	34	+ const day = ('0' + date.getDate()).slice(-2);
	35	+ this.currentDate = `${year}-${month}-${day}`;
	36	+ },
30	37	// 현재 날짜의 학생 학습률 데이터 가져오기
31	38	getStdProgressData() {
32	39	const vm = this;
33		- axios.post('/dashboard/stdProgressData.json', {
34		- std_id: vm.currentStdId,
35		- current_date: vm.currentDate
36		- })
37		- .then(response => {
	40	+ vm.formatDate();
	41	+ axios
	42	+ .post('/dashboard/stdProgressData.json', {
	43	+ std_id: vm.currentStdId,
	44	+ current_date: vm.currentDate,
	45	+ })
	46	+ .then((response) => {
38	47	vm.chartData = response.data;
39	48	vm.createChart();
40	49	})
41		- .catch(error => {
	50	+ .catch((error) => {
42	51	console.error('오늘의 학생 학습 현황 데이터를 가져오는 중 오류 발생:', error);
43		- })
	52	+ });
44	53	},
45	54
46	55	createChart() {
...	...	@@ -53,56 +62,58 @@
53	62	const root = am5.Root.new(this.$refs.Dounutchart);
54	63
55	64	// Apply themes
56		- root.setThemes([
57		- am5themes_Animated.new(root)
58		- ]);
	65	+ root.setThemes([am5themes_Animated.new(root)]);
59	66
60	67	// Create chart
61		- const chart = root.container.children.push(am5percent.PieChart.new(root, {
62		- layout: root.verticalLayout,
63		- radius: am5.percent(80),
64		- innerRadius: am5.percent(40) // Adjusted innerRadius for a donut chart
65		- }));
	68	+ const chart = root.container.children.push(
	69	+ am5percent.PieChart.new(root, {
	70	+ layout: root.verticalLayout,
	71	+ radius: am5.percent(80),
	72	+ innerRadius: am5.percent(40), // Adjusted innerRadius for a donut chart
	73	+ })
	74	+ );
66	75
67	76	if (chart.logo) {
68	77	chart.logo.disabled = true;
69		- };
	78	+ }
70	79
71	80	// Create series
72		- const series = chart.series.push(am5percent.PieSeries.new(root, {
73		- valueField: "value",
74		- categoryField: "category",
75		- alignLabels: false
76		- }));
	81	+ const series = chart.series.push(
	82	+ am5percent.PieSeries.new(root, {
	83	+ valueField: 'value',
	84	+ categoryField: 'category',
	85	+ alignLabels: false,
	86	+ })
	87	+ );
77	88
78	89	// 색깔 설정
79	90	series.slices.template.setAll({
80	91	fill: am5.color(0x008000), // green for completed units
81	92	strokeWidth: 0,
82		- strokeOpacity: 0
	93	+ strokeOpacity: 0,
83	94	});
84	95
85	96	// 카테고리 별 색깔 설정
86		- series.slices.template.adapters.add("fill", (fill, target) => {
87		- if (target.dataItem.get("category") === "완료한 단원") {
	97	+ series.slices.template.adapters.add('fill', (fill, target) => {
	98	+ if (target.dataItem.get('category') === '완료한 단원') {
88	99	return am5.color(0xafe589); // 초록
89		- } else if (target.dataItem.get("category") === "남은 단원") {
	100	+ } else if (target.dataItem.get('category') === '남은 단원') {
90	101	return am5.color(0xf7cece); // 빨강
91	102	}
92	103	return fill;
93	104	});
94	105
95	106	series.labels.template.setAll({
96		- textType: "circular",
	107	+ textType: 'circular',
97	108	centerX: am5.p50,
98	109	centerY: am5.p50,
99		- fontSize: 14
	110	+ fontSize: 14,
100	111	});
101	112
102	113	// Set data
103	114	series.data.setAll([
104		- { value: this.chartData.clearUnitNum, category: "완료한 단원" },
105		- { value: this.chartData.totalScheduleUnitNum - this.chartData.clearUnitNum, category: "남은 단원" },
	115	+ { value: this.chartData.clearUnitNum, category: '완료한 단원' },
	116	+ { value: this.chartData.totalScheduleUnitNum - this.chartData.clearUnitNum, category: '남은 단원' },
106	117	]);
107	118
108	119	// Create legend
...	...	@@ -116,13 +127,11 @@
116	127
117	128	// Play initial series animation
118	129	series.appear(1000, 100);
119		-
120		- }
121		- }
122		-
	130	+ },
	131	+ },
123	132	};
124	133	</script>
125	134
126	135	<style scoped>
127	136	/* Add necessary styles here */
128		-</style> (No newline at end of file)
	137	+</style>

Delete comment