Commit @b647a092a0b0ef413c3fee4c4f118487bf34fa2c

PsHooN7979 2024-08-19

240819 박세훈 학부모 대시보드 교재별 진행률 및 오답률 데이터 시각화 적용

@b647a092a0b0ef413c3fee4c4f118487bf34fa2c

336fc0b

b647a09

client/views/layout/Footer.vue

--- client/views/layout/Footer.vue

+++ client/views/layout/Footer.vue


             stdId: 1,
         };
     },
+    created() {
+        this.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
+    },
     methods: {
         selectDetailPreviewNote() {
             const vm = this;
-            vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
+            this.istrue = JSON.parse(sessionStorage.getItem("previewNote"));
+
             axios({
                 url: "problemLog/selectDetailPreviewNote.json",
                 method: "post",

                 .then(function (res) {
                     console.log("problemList - response : ", res.data);
                     vm.dataList = res.data[0];
-                    if (vm.dataList) {
-                        vm.istrue = true;
-                    } else {
-                        vm.istrue = false;
-                    }
                     console.log(vm.istrue);
                 })
                 .catch(function (error) {

336fc0b

b647a09

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

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

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


             prblmExpln: null,
             accessTime: null,
             answer: null,
+            prblmLogAnsCnt: 0,
         };
     },
     methods: {

                 },
                 data: {
                     prblmAns: vm.answer,
-                    prblmLogAnsCnt: 0,
+                    prblmLogAnsCnt: vm.prblmLogAnsCnt + 1,
                     stdId: "2",
                     // prblmStrtTm: formattedTime,
                     prblmId: vm.prblmId,

         this.problemSearch();
         this.created();
     },
+    beforeUnmount() {
+        sessionStorage.removeItem("previewNote");
+    },
 };
 </script>
 <style scoped>

336fc0b

b647a09

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

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

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


     <div id="Chapter1_1" class="content-wrap">
         <div style="margin: 30px 0px 50px; width: 20%">
             <router-link to="/MyPlan.page">
-                <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
+                <div class="logo mb25">
+                    <img src="../../../../resources/img/logo2.png" alt="" />
+                </div>
             </router-link>
         </div>
         <div class="title-box mb25 flex align-center mt40">

                  </button>
                 </div> -->
 
-                <div class="text-ct flex justify-center" style="gap: 150px; margin: 0 auto">
+                <div
+                    class="text-ct flex justify-center"
+                    style="gap: 150px; margin: 0 auto"
+                >
                     <div class="wrap-bg">
                         <div class="title-box flex mb10 justify-between">
                             <p class="title mb20">최종 점수</p>
-                            <button type="button" class="popup-close-btn" @click="closeBtn">
-                                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
+                            <button
+                                type="button"
+                                class="popup-close-btn"
+                                @click="closeBtn"
+                            >
+                                <svg-icon
+                                    type="mdi"
+                                    :path="mdiWindowClose"
+                                    class="close-btn"
+                                ></svg-icon>
                             </button>
                         </div>
                         <div style="width: 100%" class="flex mt30">

                     <div class="bg-gray" style="width: 980px">
                         <div class="title-box flex mb10 justify-between">
                             <p class="title mb20">오답 문제 리스트</p>
-                            <button type="button" class="popup-close-btn" @click="closeBtn">
-                                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
+                            <button
+                                type="button"
+                                class="popup-close-btn"
+                                @click="closeBtn"
+                            >
+                                <svg-icon
+                                    type="mdi"
+                                    :path="mdiWindowClose"
+                                    class="close-btn"
+                                ></svg-icon>
                             </button>
                         </div>
-                        <article class="mb20 flex-column result-box" style="gap: 20px">
-                            <div class="flex justify-between wrap" v-for="(item, index) in dataList" :key="item.id">
+                        <article
+                            class="mb20 flex-column result-box"
+                            style="gap: 20px"
+                        >
+                            <div
+                                class="flex justify-between wrap"
+                                v-for="(item, index) in dataList"
+                                :key="item.id"
+                            >
                                 <div class="flex align-center">
                                     <div>
                                         <p class="title1 mr20">

                                     </div>
                                 </div>
                                 <div>
-                                    <div class="flex align-center" style="gap: 10px">
-                                        <button type="button" title="정답 확인" class="yellow-btn" @click="
-                                            [
-                                                handleProblemDetail(item),
-                                                goToPage(problemType),
-                                            ]
-                                            ">
+                                    <div
+                                        class="flex align-center"
+                                        style="gap: 10px"
+                                    >
+                                        <button
+                                            type="button"
+                                            title="정답 확인"
+                                            class="yellow-btn"
+                                            @click="
+                                                [
+                                                    handleProblemDetail(item),
+                                                    goToProblemPage(
+                                                        problemType
+                                                    ),
+                                                ]
+                                            "
+                                        >
                                             정답 확인
                                         </button>
                                     </div>

             showButton4: false,
 
             // 단원 평가 아이디, 추후 세션으로 받게 변경
-            evalId: "EVAL_000000000000003",
+            evalId: "EVAL_000000000000004",
 
             dataList: [],
 

         goToPage(page) {
             this.$router.push({ name: page });
         },
+        goToProblemPage(page) {
+            sessionStorage.setItem("previewNote", "true");
+            this.$router.push({ name: page });
+        },
         handleDrag(dragNumber) {
             // Drag 버튼 숨기기
             // 여기서는 상태 관리를 통해 버튼을 제어합니다.

336fc0b

b647a09

client/views/pages/parents/Barchart.vue

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

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


 <template>
-    <div ref="Barchart" style="width: 500px; height: 500px;"></div>
-  </template>
-  
-  <script>
-  import * as am5 from "@amcharts/amcharts5";
-  import * as am5xy from "@amcharts/amcharts5/xy";
-  import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
-  
-  export default {
+    <div ref="Barchart" style="width: 500px; height: 500px"></div>
+</template>
+
+<script>
+import * as am5 from "@amcharts/amcharts5";
+import * as am5xy from "@amcharts/amcharts5/xy";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+import axios from "axios";
+
+export default {
     name: "Barchart",
+    data() {
+        return {
+            chartData: [],
+        };
+    },
     mounted() {
-      this.createChart();
+        this.getIncorrectRate();
     },
     methods: {
-      createChart() {
-        // Initialize root
-        const root = am5.Root.new(this.$refs.Barchart);
-  
-        // Apply themes
-        const myTheme = am5.Theme.new(root);
-        myTheme.rule("Grid", ["base"]).setAll({
-          strokeOpacity: 0.1,
-        });
-        root.setThemes([
-          am5themes_Animated.new(root),
-          myTheme,
-        ]);
-  
-        // Create chart
-        let chart = root.container.children.push(
-  am5xy.XYChart.new(root, {
-    panX: false,
-    panY: false,
-    wheelX: "none",
-    wheelY: "none",
-    paddingLeft: 0
-  })
-);
+        getIncorrectRate() {
+            const vm = this;
+            axios({
+                url: "dashboard/incorrectRateData.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    std_id: "1",
+                },
+            })
+                .then(function (res) {
+                    console.log("Inccorect Rate - response : ", res.data);
+                    vm.chartData = res.data;
+                    // console.log(vm.chartData);
+                    vm.createChart();
+                })
+                .catch(function (error) {
+                    console.log("Incorrect Rate - error : ", error);
+                });
+        },
 
+        createChart() {
+            // Initialize root
+            const root = am5.Root.new(this.$refs.Barchart);
 
-// Create axes
-// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
-let yRenderer = am5xy.AxisRendererY.new(root, {
-  minGridDistance: 30,
-  minorGridEnabled: true
-});
-yRenderer.grid.template.set("location", 1);
+            // Apply themes
+            const myTheme = am5.Theme.new(root);
+            myTheme.rule("Grid", ["base"]).setAll({
+                strokeOpacity: 0.1,
+            });
+            root.setThemes([am5themes_Animated.new(root), myTheme]);
 
-let yAxis = chart.yAxes.push(
-  am5xy.CategoryAxis.new(root, {
-    maxDeviation: 0,
-    categoryField: "country",
-    renderer: yRenderer
-  })
-);
+            // Create chart
+            let chart = root.container.children.push(
+                am5xy.XYChart.new(root, {
+                    panX: false,
+                    panY: false,
+                    wheelX: "none",
+                    wheelY: "none",
+                    paddingLeft: 0,
+                })
+            );
 
-let xAxis = chart.xAxes.push(
-  am5xy.ValueAxis.new(root, {
-    maxDeviation: 0,
-    min: 0,
-    renderer: am5xy.AxisRendererX.new(root, {
-      visible: true,
-      strokeOpacity: 0.1,
-      minGridDistance: 80
-    })
-  })
-);
+            // Create axes
+            // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+            let yRenderer = am5xy.AxisRendererY.new(root, {
+                minGridDistance: 30,
+                minorGridEnabled: true,
+            });
+            yRenderer.grid.template.set("location", 1);
 
+            let yAxis = chart.yAxes.push(
+                am5xy.CategoryAxis.new(root, {
+                    maxDeviation: 0,
+                    categoryField: "bookNm",
+                    renderer: yRenderer,
+                })
+            );
 
-// Create series
-// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
-let series = chart.series.push(
-  am5xy.ColumnSeries.new(root, {
-    name: "Series 1",
-    xAxis: xAxis,
-    yAxis: yAxis,
-    valueXField: "value",
-    sequencedInterpolation: true,
-    categoryYField: "country"
-  })
-);
+            let xAxis = chart.xAxes.push(
+                am5xy.ValueAxis.new(root, {
+                    maxDeviation: 0,
+                    min: 0,
+                    renderer: am5xy.AxisRendererX.new(root, {
+                        visible: true,
+                        strokeOpacity: 0.1,
+                        minGridDistance: 80,
+                    }),
+                })
+            );
 
-let columnTemplate = series.columns.template;
+            // Create series
+            // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+            let series = chart.series.push(
+                am5xy.ColumnSeries.new(root, {
+                    name: "Incorrect Rate",
+                    xAxis: xAxis,
+                    yAxis: yAxis,
+                    valueXField: "incorrectRate",
+                    sequencedInterpolation: true,
+                    categoryYField: "bookNm",
+                })
+            );
 
-columnTemplate.setAll({
-  draggable: true,
-  cursorOverStyle: "pointer",
-  tooltipText: "drag to rearrange",
-  cornerRadiusBR: 10,
-  cornerRadiusTR: 10,
-  strokeOpacity: 0
-});
-columnTemplate.adapters.add("fill", (fill, target) => {
-  return chart.get("colors").getIndex(series.columns.indexOf(target));
-});
+            let columnTemplate = series.columns.template;
 
-columnTemplate.adapters.add("stroke", (stroke, target) => {
-  return chart.get("colors").getIndex(series.columns.indexOf(target));
-});
+            columnTemplate.setAll({
+                draggable: true,
+                cursorOverStyle: "pointer",
+                tooltipText: "{categoryY}: {valueX}",
+                cornerRadiusBR: 10,
+                cornerRadiusTR: 10,
+                strokeOpacity: 0,
+            });
+            columnTemplate.adapters.add("fill", (fill, target) => {
+                return chart
+                    .get("colors")
+                    .getIndex(series.columns.indexOf(target));
+            });
 
-columnTemplate.events.on("dragstop", () => {
-  sortCategoryAxis();
-});
+            columnTemplate.adapters.add("stroke", (stroke, target) => {
+                return chart
+                    .get("colors")
+                    .getIndex(series.columns.indexOf(target));
+            });
 
-// Get series item by category
-function getSeriesItem(category) {
-  for (var i = 0; i < series.dataItems.length; i++) {
-    let dataItem = series.dataItems[i];
-    if (dataItem.get("categoryY") == category) {
-      return dataItem;
-    }
-  }
-}
+            columnTemplate.events.on("dragstop", () => {
+                this.sortCategoryAxis(series, yAxis, yRenderer);
+            });
 
+            // Get series item by category
+            // function getSeriesItem(category) {
+            //     for (var i = 0; i < series.dataItems.length; i++) {
+            //         let dataItem = series.dataItems[i];
+            //         if (dataItem.get("categoryY") == category) {
+            //             return dataItem;
+            //         }
+            //     }
+            // }
 
-// Axis sorting
-function sortCategoryAxis() {
-  // Sort by value
-  series.dataItems.sort(function (x, y) {
-    return y.get("graphics").y() - x.get("graphics").y();
-  });
+            // Axis sorting
+            // function sortCategoryAxis() {
+            //     // Sort by value
+            //     series.dataItems.sort(function (x, y) {
+            //         return y.get("graphics").y() - x.get("graphics").y();
+            //     });
 
-  let easing = am5.ease.out(am5.ease.cubic);
+            //     let easing = am5.ease.out(am5.ease.cubic);
 
-  // Go through each axis item
-  am5.array.each(yAxis.dataItems, function (dataItem) {
-    // get corresponding series item
-    let seriesDataItem = getSeriesItem(dataItem.get("category"));
+            //     // Go through each axis item
+            //     am5.array.each(yAxis.dataItems, function (dataItem) {
+            //         // get corresponding series item
+            //         let seriesDataItem = getSeriesItem(
+            //             dataItem.get("category")
+            //         );
 
-    if (seriesDataItem) {
-      // get index of series data item
-      let index = series.dataItems.indexOf(seriesDataItem);
+            //         if (seriesDataItem) {
+            //             // get index of series data item
+            //             let index = series.dataItems.indexOf(seriesDataItem);
 
-      let column = seriesDataItem.get("graphics");
+            //             let column = seriesDataItem.get("graphics");
 
-      // position after sorting
-      let fy =
-        yRenderer.positionToCoordinate(yAxis.indexToPosition(index)) -
-        column.height() / 2;
+            //             // position after sorting
+            //             let fy =
+            //                 yRenderer.positionToCoordinate(
+            //                     yAxis.indexToPosition(index)
+            //                 ) -
+            //                 column.height() / 2;
 
-      // set index to be the same as series data item index
-      if (index != dataItem.get("index")) {
-        dataItem.set("index", index);
+            //             // set index to be the same as series data item index
+            //             if (index != dataItem.get("index")) {
+            //                 dataItem.set("index", index);
 
-        // current position
-        let x = column.x();
-        let y = column.y();
+            //                 // current position
+            //                 let x = column.x();
+            //                 let y = column.y();
 
-        column.set("dy", -(fy - y));
-        column.set("dx", x);
+            //                 column.set("dy", -(fy - y));
+            //                 column.set("dx", x);
 
-        column.animate({ key: "dy", to: 0, duration: 600, easing: easing });
-        column.animate({ key: "dx", to: 0, duration: 600, easing: easing });
-      } else {
-        column.animate({ key: "y", to: fy, duration: 600, easing: easing });
-        column.animate({ key: "x", to: 0, duration: 600, easing: easing });
-      }
-    }
-  });
+            //                 column.animate({
+            //                     key: "dy",
+            //                     to: 0,
+            //                     duration: 600,
+            //                     easing: easing,
+            //                 });
+            //                 column.animate({
+            //                     key: "dx",
+            //                     to: 0,
+            //                     duration: 600,
+            //                     easing: easing,
+            //                 });
+            //             } else {
+            //                 column.animate({
+            //                     key: "y",
+            //                     to: fy,
+            //                     duration: 600,
+            //                     easing: easing,
+            //                 });
+            //                 column.animate({
+            //                     key: "x",
+            //                     to: 0,
+            //                     duration: 600,
+            //                     easing: easing,
+            //                 });
+            //             }
+            //         }
+            //     });
 
-  // Sort axis items by index.
-  // This changes the order instantly, but as dx and dy is set and animated,
-  // they keep in the same places and then animate to true positions.
-  yAxis.dataItems.sort(function (x, y) {
-    return x.get("index") - y.get("index");
-  });
-}
+            // Sort axis items by index.
+            // This changes the order instantly, but as dx and dy is set and animated,
+            // they keep in the same places and then animate to true positions.
+            //     yAxis.dataItems.sort(function (x, y) {
+            //         return x.get("index") - y.get("index");
+            //     });
+            // }
 
-// Set data
-let data = [{
-  country: "USA",
-  value: 2025
-}, {
-  country: "China",
-  value: 1882
-}, {
-  country: "Japan",
-  value: 1809
-}, {
-  country: "Germany",
-  value: 1322
-}, {
-  country: "UK",
-  value: 1122
-}];
+            // Set data
+            // let data = [
+            //     {
+            //         country: "USA",
+            //         value: 2025,
+            //     },
+            //     {
+            //         country: "China",
+            //         value: 1882,
+            //     },
+            //     {
+            //         country: "Japan",
+            //         value: 1809,
+            //     },
+            //     {
+            //         country: "Germany",
+            //         value: 1322,
+            //     },
+            //     {
+            //         country: "UK",
+            //         value: 1122,
+            //     },
+            // ];
 
-yAxis.data.setAll(data);
-series.data.setAll(data);
+            // yAxis.data.setAll(data);
+            // series.data.setAll(data);
 
+            yAxis.data.setAll(this.chartData);
+            series.data.setAll(this.chartData);
 
-// Make stuff animate on load
-// https://www.amcharts.com/docs/v5/concepts/animations/
-series.appear(1000);
-chart.appear(1000, 100);
-      },
+            // Make stuff animate on load
+            // https://www.amcharts.com/docs/v5/concepts/animations/
+            series.appear(1000);
+            chart.appear(1000, 100);
+        },
+        sortCategoryAxis(series, yAxis, yRenderer) {
+            // Sort by value
+            series.dataItems.sort((x, y) => {
+                return y.get("graphics").y() - x.get("graphics").y();
+            });
+
+            let easing = am5.ease.out(am5.ease.cubic);
+
+            // Go through each axis item
+            am5.array.each(yAxis.dataItems, function (dataItem) {
+                // get corresponding series item
+                let seriesDataItem = series.dataItems.find(
+                    (dataItem) =>
+                        dataItem.get("categoryY") == dataItem.get("category")
+                );
+
+                if (seriesDataItem) {
+                    // get index of series data item
+                    let index = series.dataItems.indexOf(seriesDataItem);
+
+                    let column = seriesDataItem.get("graphics");
+
+                    // position after sorting
+                    let fy =
+                        yRenderer.positionToCoordinate(
+                            yAxis.indexToPosition(index)
+                        ) -
+                        column.height() / 2;
+
+                    // set index to be the same as series data item index
+                    if (index != dataItem.get("index")) {
+                        dataItem.set("index", index);
+
+                        // current position
+                        let x = column.x();
+                        let y = column.y();
+
+                        column.set("dy", -(fy - y));
+                        column.set("dx", x);
+
+                        column.animate({
+                            key: "dy",
+                            to: 0,
+                            duration: 600,
+                            easing: easing,
+                        });
+                        column.animate({
+                            key: "dx",
+                            to: 0,
+                            duration: 600,
+                            easing: easing,
+                        });
+                    } else {
+                        column.animate({
+                            key: "y",
+                            to: fy,
+                            duration: 600,
+                            easing: easing,
+                        });
+                        column.animate({
+                            key: "x",
+                            to: 0,
+                            duration: 600,
+                            easing: easing,
+                        });
+                    }
+                }
+            });
+            yAxis.dataItems.sort((x, y) => {
+                return x.get("index") - y.get("index");
+            });
+        },
     },
-  };
-  </script>
-  
-  <style scoped>
-  /* Add necessary styles here */
-  </style>
-  
+};
+</script>
+
+<style scoped>
+/* Add necessary styles here */
+</style>

336fc0b

b647a09

client/views/pages/parents/StackedBarChart.vue

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

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


 <template>
-    <div ref="StackedBarChart" style=" height: 500px;"></div>
-  </template>
-  
-  <script>
-  import * as am5 from "@amcharts/amcharts5";
-  import * as am5xy from "@amcharts/amcharts5/xy";
-  import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
-  
-  export default {
+    <div ref="StackedBarChart" style="height: 500px"></div>
+</template>
+
+<script>
+import * as am5 from "@amcharts/amcharts5";
+import * as am5xy from "@amcharts/amcharts5/xy";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+import axios from "axios";
+
+export default {
     name: "StackedBarChart",
+    data() {
+        return {
+            chartData: [],
+        };
+    },
     mounted() {
-      this.createChart();
+        this.getProgressRate();
     },
     methods: {
-      createChart() {
-        // Initialize root
-        const root = am5.Root.new(this.$refs.StackedBarChart);
-  
-        // Apply themes
-        const myTheme = am5.Theme.new(root);
-        myTheme.rule("Grid", ["base"]).setAll({
-          strokeOpacity: 0.1,
-        });
-        root.setThemes([
-          am5themes_Animated.new(root),
-          myTheme,
-        ]);
-  
-        // Create chart
-        const chart = root.container.children.push(
-          am5xy.XYChart.new(root, {
-            panX: false,
-            panY: false,
-            wheelX: "panY",
-            wheelY: "zoomY",
-            paddingLeft: 0,
-            layout: root.verticalLayout,
-          })
-        );
-  
-        // Define data
-        const data = [
-          { year: "2021", europe: 2.5, namerica: 2.5, asia: 2.1, lamerica: 1, meast: 0.8, africa: 0.4 },
-        ];
-  
-        // Create Y Axis
-        const yRenderer = am5xy.AxisRendererY.new(root, {});
-        const yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
-          categoryField: "year",
-          renderer: yRenderer,
-          tooltip: am5.Tooltip.new(root, {}),
-        }));
-        yRenderer.grid.template.setAll({
-          location: 1,
-        });
-        yAxis.data.setAll(data);
-  
-        // Create X Axis
-        const xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
-          min: 0,
-          maxPrecision: 0,
-          renderer: am5xy.AxisRendererX.new(root, {
-            minGridDistance: 40,
-            strokeOpacity: 0.1,
-          }),
-        }));
-  
-        // Create legend
-        const legend = chart.children.push(am5.Legend.new(root, {
-          centerX: am5.p50,
-          x: am5.p50,
-        }));
-  
-        // Function to create series
-        const createSeries = (name, fieldName) => {
-          const series = chart.series.push(am5xy.ColumnSeries.new(root, {
-            name,
-            stacked: true,
-            xAxis,
-            yAxis,
-            baseAxis: yAxis,
-            valueXField: fieldName,
-            categoryYField: "year",
-          }));
-  
-          series.columns.template.setAll({
-            tooltipText: "{name}, {categoryY}: {valueX}",
-            tooltipY: am5.percent(90),
-          });
-          series.data.setAll(data);
-  
-          series.appear();
-  
-          series.bullets.push(() =>
-            am5.Bullet.new(root, {
-              sprite: am5.Label.new(root, {
-                text: "{valueX}",
-                fill: root.interfaceColors.get("alternativeText"),
-                centerY: am5.p50,
-                centerX: am5.p50,
-                populateText: true,
-              }),
+        getProgressRate() {
+            const vm = this;
+            axios({
+                url: "dashboard/progressRate.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    stdId: "1",
+                },
             })
-          );
-          
-  
-          legend.data.push(series);
-        };
-   
-        // Create series
-        createSeries("Europe", "europe");
-        createSeries("North America", "namerica");
-        createSeries("Asia", "asia");
-        createSeries("Latin America", "lamerica");
-        createSeries("Middle East", "meast");
-        createSeries("Africa", "africa");
-  
-        // Chart animation
-        chart.appear(1000, 100);
-      },
+                .then(function (res) {
+                    // console.log("Progress Rate - response : ", res.data);
+                    vm.chartData = res.data;
+                    // console.log(vm.chartData);
+                    vm.createChart();
+                })
+                .catch(function (error) {
+                    console.log("Progress Rate - error : ", error);
+                });
+        },
+
+        createChart() {
+            // Initialize root
+            const root = am5.Root.new(this.$refs.StackedBarChart);
+
+            // Apply themes
+            const myTheme = am5.Theme.new(root);
+            myTheme.rule("Grid", ["base"]).setAll({
+                strokeOpacity: 0.1,
+            });
+            root.setThemes([am5themes_Animated.new(root), myTheme]);
+
+            // Create chart
+            const chart = root.container.children.push(
+                am5xy.XYChart.new(root, {
+                    panX: false,
+                    panY: false,
+                    wheelX: "panY",
+                    wheelY: "zoomY",
+                    paddingLeft: 0,
+                    layout: root.verticalLayout,
+                })
+            );
+
+            // Define data
+            // const data = [
+            //     {
+            //         year: "2021",
+            //         europe: 2.5,
+            //         namerica: 2.5,
+            //         asia: 2.1,
+            //         lamerica: 1,
+            //         meast: 0.8,
+            //         africa: 0.4,
+            //     },
+            // ];
+
+            // Create Y Axis
+            const yRenderer = am5xy.AxisRendererY.new(root, {});
+            const yAxis = chart.yAxes.push(
+                am5xy.CategoryAxis.new(root, {
+                    categoryField: "bookNm",
+                    renderer: yRenderer,
+                    tooltip: am5.Tooltip.new(root, {}),
+                })
+            );
+            yRenderer.grid.template.setAll({
+                location: 1,
+            });
+            yAxis.data.setAll(this.chartData);
+
+            // Create X Axis
+            const xAxis = chart.xAxes.push(
+                am5xy.ValueAxis.new(root, {
+                    min: 0,
+                    maxPrecision: 0,
+                    renderer: am5xy.AxisRendererX.new(root, {
+                        minGridDistance: 40,
+                        strokeOpacity: 0.1,
+                    }),
+                })
+            );
+
+            // Create legend
+            // const legend = chart.children.push(
+            //     am5.Legend.new(root, {
+            //         centerX: am5.p50,
+            //         x: am5.p50,
+            //     })
+            // );
+
+            // Function to create series
+            // const createSeries = (name, fieldName) => {
+            //     const series = chart.series.push(
+            //         am5xy.ColumnSeries.new(root, {
+            //             name,
+            //             stacked: true,
+            //             xAxis,
+            //             yAxis,
+            //             baseAxis: yAxis,
+            //             valueXField: fieldName,
+            //             categoryYField: "year",
+            //         })
+            //     );
+
+            //     series.columns.template.setAll({
+            //         // tooltipText: "{name}, {categoryY}: {valueX}",
+            //         tooltipY: am5.percent(90),
+            //     });
+            //     series.data.setAll(this.chartData);
+
+            //     series.appear();
+
+            //     series.bullets.push(() =>
+            //         am5.Bullet.new(root, {
+            //             sprite: am5.Label.new(root, {
+            //                 text: "{valueX}",
+            //                 fill: root.interfaceColors.get("alternativeText"),
+            //                 centerY: am5.p50,
+            //                 centerX: am5.p50,
+            //                 populateText: true,
+            //             }),
+            //         })
+            //     );
+
+            //     legend.data.push(series);
+            // };
+
+            // Create series
+            // createSeries("Europe", "europe");
+            // createSeries("North America", "namerica");
+            // createSeries("Asia", "asia");
+            // createSeries("Latin America", "lamerica");
+            // createSeries("Middle East", "meast");
+            // createSeries("Africa", "africa");
+
+            const series = chart.series.push(
+                am5xy.ColumnSeries.new(root, {
+                    name: "progressRate",
+                    xAxis: xAxis,
+                    yAxis: yAxis,
+                    baseAxis: yAxis,
+                    valueXField: "progressRate",
+                    categoryYField: "bookNm",
+                    // tooltipText: "{categoryY}: {valueX}",
+                })
+            );
+            series.columns.template.setAll({
+                tooltipY: am5.percent(90),
+            });
+
+            series.data.setAll(this.chartData);
+
+            series.bullets.push(() =>
+                am5.Bullet.new(root, {
+                    sprite: am5.Label.new(root, {
+                        text: "{valueX}",
+                        fill: root.interfaceColors.get("alternativeText"),
+                        centerY: am5.p50,
+                        centerX: am5.p50,
+                        populateText: true,
+                    }),
+                })
+            );
+            // Chart animation
+            chart.appear(1000, 100);
+        },
     },
-  };
-  </script>
-  
-  <style scoped>
-  /* Add necessary styles here */
-  </style>
-  
+};
+</script>
+
+<style scoped>
+/* Add necessary styles here */
+</style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -112,6 +112,7 @@
112	112	prblmExpln: null,
113	113	accessTime: null,
114	114	answer: null,
	115	+ prblmLogAnsCnt: 0,
115	116	};
116	117	},
117	118	methods: {
...	...	@@ -169,7 +170,7 @@
169	170	},
170	171	data: {
171	172	prblmAns: vm.answer,
172		- prblmLogAnsCnt: 0,
	173	+ prblmLogAnsCnt: vm.prblmLogAnsCnt + 1,
173	174	stdId: "2",
174	175	// prblmStrtTm: formattedTime,
175	176	prblmId: vm.prblmId,
...	...	@@ -212,6 +213,9 @@
212	213	this.problemSearch();
213	214	this.created();
214	215	},
	216	+ beforeUnmount() {
	217	+ sessionStorage.removeItem("previewNote");
	218	+ },
215	219	};
216	220	</script>
217	221	<style scoped>

...	...	@@ -2,7 +2,9 @@
2	2	<div id="Chapter1_1" class="content-wrap">
3	3	<div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
	7	+ </div>
6	8	</router-link>
7	9	</div>
8	10	<div class="title-box mb25 flex align-center mt40">
...	...	@@ -21,12 +23,23 @@
21	23	</button>
22	24	</div> -->
23	25
24		- <div class="text-ct flex justify-center" style="gap: 150px; margin: 0 auto">
	26	+ <div
	27	+ class="text-ct flex justify-center"
	28	+ style="gap: 150px; margin: 0 auto"
	29	+ >
25	30	<div class="wrap-bg">
26	31	<div class="title-box flex mb10 justify-between">
27	32	<p class="title mb20">최종 점수</p>
28		- <button type="button" class="popup-close-btn" @click="closeBtn">
29		- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	33	+ <button
	34	+ type="button"
	35	+ class="popup-close-btn"
	36	+ @click="closeBtn"
	37	+ >
	38	+ <svg-icon
	39	+ type="mdi"
	40	+ :path="mdiWindowClose"
	41	+ class="close-btn"
	42	+ ></svg-icon>
30	43	</button>
31	44	</div>
32	45	<div style="width: 100%" class="flex mt30">
...	...	@@ -38,12 +51,27 @@
38	51	<div class="bg-gray" style="width: 980px">
39	52	<div class="title-box flex mb10 justify-between">
40	53	<p class="title mb20">오답 문제 리스트</p>
41		- <button type="button" class="popup-close-btn" @click="closeBtn">
42		- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	54	+ <button
	55	+ type="button"
	56	+ class="popup-close-btn"
	57	+ @click="closeBtn"
	58	+ >
	59	+ <svg-icon
	60	+ type="mdi"
	61	+ :path="mdiWindowClose"
	62	+ class="close-btn"
	63	+ ></svg-icon>
43	64	</button>
44	65	</div>
45		- <article class="mb20 flex-column result-box" style="gap: 20px">
46		- <div class="flex justify-between wrap" v-for="(item, index) in dataList" :key="item.id">
	66	+ <article
	67	+ class="mb20 flex-column result-box"
	68	+ style="gap: 20px"
	69	+ >
	70	+ <div
	71	+ class="flex justify-between wrap"
	72	+ v-for="(item, index) in dataList"
	73	+ :key="item.id"
	74	+ >
47	75	<div class="flex align-center">
48	76	<div>
49	77	<p class="title1 mr20">
...	...	@@ -57,13 +85,23 @@
57	85	</div>
58	86	</div>
59	87	<div>
60		- <div class="flex align-center" style="gap: 10px">
61		- <button type="button" title="정답 확인" class="yellow-btn" @click="
62		- [
63		- handleProblemDetail(item),
64		- goToPage(problemType),
65		- ]
66		- ">
	88	+ <div
	89	+ class="flex align-center"
	90	+ style="gap: 10px"
	91	+ >
	92	+ <button
	93	+ type="button"
	94	+ title="정답 확인"
	95	+ class="yellow-btn"
	96	+ @click="
	97	+ [
	98	+ handleProblemDetail(item),
	99	+ goToProblemPage(
	100	+ problemType
	101	+ ),
	102	+ ]
	103	+ "
	104	+ >
67	105	정답 확인
68	106	</button>
69	107	</div>
...	...	@@ -93,7 +131,7 @@
93	131	showButton4: false,
94	132
95	133	// 단원 평가 아이디, 추후 세션으로 받게 변경
96		- evalId: "EVAL_000000000000003",
	134	+ evalId: "EVAL_000000000000004",
97	135
98	136	dataList: [],
99	137
...	...	@@ -106,6 +144,10 @@
106	144	goToPage(page) {
107	145	this.$router.push({ name: page });
108	146	},
	147	+ goToProblemPage(page) {
	148	+ sessionStorage.setItem("previewNote", "true");
	149	+ this.$router.push({ name: page });
	150	+ },
109	151	handleDrag(dragNumber) {
110	152	// Drag 버튼 숨기기
111	153	// 여기서는 상태 관리를 통해 버튼을 제어합니다.

...	...	@@ -1,204 +1,334 @@
1	1	<template>
2		- <div ref="Barchart" style="width: 500px; height: 500px;"></div>
3		- </template>
4		-
5		- <script>
6		- import * as am5 from "@amcharts/amcharts5";
7		- import * as am5xy from "@amcharts/amcharts5/xy";
8		- import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
9		-
10		- export default {
	2	+ <div ref="Barchart" style="width: 500px; height: 500px"></div>
	3	+</template>
	4	+
	5	+<script>
	6	+import * as am5 from "@amcharts/amcharts5";
	7	+import * as am5xy from "@amcharts/amcharts5/xy";
	8	+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	9	+import axios from "axios";
	10	+
	11	+export default {
11	12	name: "Barchart",
	13	+ data() {
	14	+ return {
	15	+ chartData: [],
	16	+ };
	17	+ },
12	18	mounted() {
13		- this.createChart();
	19	+ this.getIncorrectRate();
14	20	},
15	21	methods: {
16		- createChart() {
17		- // Initialize root
18		- const root = am5.Root.new(this.$refs.Barchart);
19		-
20		- // Apply themes
21		- const myTheme = am5.Theme.new(root);
22		- myTheme.rule("Grid", ["base"]).setAll({
23		- strokeOpacity: 0.1,
24		- });
25		- root.setThemes([
26		- am5themes_Animated.new(root),
27		- myTheme,
28		- ]);
29		-
30		- // Create chart
31		- let chart = root.container.children.push(
32		- am5xy.XYChart.new(root, {
33		- panX: false,
34		- panY: false,
35		- wheelX: "none",
36		- wheelY: "none",
37		- paddingLeft: 0
38		- })
39		-);
	22	+ getIncorrectRate() {
	23	+ const vm = this;
	24	+ axios({
	25	+ url: "dashboard/incorrectRateData.json",
	26	+ method: "post",
	27	+ headers: {
	28	+ "Content-Type": "application/json; charset=UTF-8",
	29	+ },
	30	+ data: {
	31	+ std_id: "1",
	32	+ },
	33	+ })
	34	+ .then(function (res) {
	35	+ console.log("Inccorect Rate - response : ", res.data);
	36	+ vm.chartData = res.data;
	37	+ // console.log(vm.chartData);
	38	+ vm.createChart();
	39	+ })
	40	+ .catch(function (error) {
	41	+ console.log("Incorrect Rate - error : ", error);
	42	+ });
	43	+ },
40	44
	45	+ createChart() {
	46	+ // Initialize root
	47	+ const root = am5.Root.new(this.$refs.Barchart);
41	48
42		-// Create axes
43		-// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
44		-let yRenderer = am5xy.AxisRendererY.new(root, {
45		- minGridDistance: 30,
46		- minorGridEnabled: true
47		-});
48		-yRenderer.grid.template.set("location", 1);
	49	+ // Apply themes
	50	+ const myTheme = am5.Theme.new(root);
	51	+ myTheme.rule("Grid", ["base"]).setAll({
	52	+ strokeOpacity: 0.1,
	53	+ });
	54	+ root.setThemes([am5themes_Animated.new(root), myTheme]);
49	55
50		-let yAxis = chart.yAxes.push(
51		- am5xy.CategoryAxis.new(root, {
52		- maxDeviation: 0,
53		- categoryField: "country",
54		- renderer: yRenderer
55		- })
56		-);
	56	+ // Create chart
	57	+ let chart = root.container.children.push(
	58	+ am5xy.XYChart.new(root, {
	59	+ panX: false,
	60	+ panY: false,
	61	+ wheelX: "none",
	62	+ wheelY: "none",
	63	+ paddingLeft: 0,
	64	+ })
	65	+ );
57	66
58		-let xAxis = chart.xAxes.push(
59		- am5xy.ValueAxis.new(root, {
60		- maxDeviation: 0,
61		- min: 0,
62		- renderer: am5xy.AxisRendererX.new(root, {
63		- visible: true,
64		- strokeOpacity: 0.1,
65		- minGridDistance: 80
66		- })
67		- })
68		-);
	67	+ // Create axes
	68	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	69	+ let yRenderer = am5xy.AxisRendererY.new(root, {
	70	+ minGridDistance: 30,
	71	+ minorGridEnabled: true,
	72	+ });
	73	+ yRenderer.grid.template.set("location", 1);
69	74
	75	+ let yAxis = chart.yAxes.push(
	76	+ am5xy.CategoryAxis.new(root, {
	77	+ maxDeviation: 0,
	78	+ categoryField: "bookNm",
	79	+ renderer: yRenderer,
	80	+ })
	81	+ );
70	82
71		-// Create series
72		-// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
73		-let series = chart.series.push(
74		- am5xy.ColumnSeries.new(root, {
75		- name: "Series 1",
76		- xAxis: xAxis,
77		- yAxis: yAxis,
78		- valueXField: "value",
79		- sequencedInterpolation: true,
80		- categoryYField: "country"
81		- })
82		-);
	83	+ let xAxis = chart.xAxes.push(
	84	+ am5xy.ValueAxis.new(root, {
	85	+ maxDeviation: 0,
	86	+ min: 0,
	87	+ renderer: am5xy.AxisRendererX.new(root, {
	88	+ visible: true,
	89	+ strokeOpacity: 0.1,
	90	+ minGridDistance: 80,
	91	+ }),
	92	+ })
	93	+ );
83	94
84		-let columnTemplate = series.columns.template;
	95	+ // Create series
	96	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	97	+ let series = chart.series.push(
	98	+ am5xy.ColumnSeries.new(root, {
	99	+ name: "Incorrect Rate",
	100	+ xAxis: xAxis,
	101	+ yAxis: yAxis,
	102	+ valueXField: "incorrectRate",
	103	+ sequencedInterpolation: true,
	104	+ categoryYField: "bookNm",
	105	+ })
	106	+ );
85	107
86		-columnTemplate.setAll({
87		- draggable: true,
88		- cursorOverStyle: "pointer",
89		- tooltipText: "drag to rearrange",
90		- cornerRadiusBR: 10,
91		- cornerRadiusTR: 10,
92		- strokeOpacity: 0
93		-});
94		-columnTemplate.adapters.add("fill", (fill, target) => {
95		- return chart.get("colors").getIndex(series.columns.indexOf(target));
96		-});
	108	+ let columnTemplate = series.columns.template;
97	109
98		-columnTemplate.adapters.add("stroke", (stroke, target) => {
99		- return chart.get("colors").getIndex(series.columns.indexOf(target));
100		-});
	110	+ columnTemplate.setAll({
	111	+ draggable: true,
	112	+ cursorOverStyle: "pointer",
	113	+ tooltipText: "{categoryY}: {valueX}",
	114	+ cornerRadiusBR: 10,
	115	+ cornerRadiusTR: 10,
	116	+ strokeOpacity: 0,
	117	+ });
	118	+ columnTemplate.adapters.add("fill", (fill, target) => {
	119	+ return chart
	120	+ .get("colors")
	121	+ .getIndex(series.columns.indexOf(target));
	122	+ });
101	123
102		-columnTemplate.events.on("dragstop", () => {
103		- sortCategoryAxis();
104		-});
	124	+ columnTemplate.adapters.add("stroke", (stroke, target) => {
	125	+ return chart
	126	+ .get("colors")
	127	+ .getIndex(series.columns.indexOf(target));
	128	+ });
105	129
106		-// Get series item by category
107		-function getSeriesItem(category) {
108		- for (var i = 0; i < series.dataItems.length; i++) {
109		- let dataItem = series.dataItems[i];
110		- if (dataItem.get("categoryY") == category) {
111		- return dataItem;
112		- }
113		- }
114		-}
	130	+ columnTemplate.events.on("dragstop", () => {
	131	+ this.sortCategoryAxis(series, yAxis, yRenderer);
	132	+ });
115	133
	134	+ // Get series item by category
	135	+ // function getSeriesItem(category) {
	136	+ // for (var i = 0; i < series.dataItems.length; i++) {
	137	+ // let dataItem = series.dataItems[i];
	138	+ // if (dataItem.get("categoryY") == category) {
	139	+ // return dataItem;
	140	+ // }
	141	+ // }
	142	+ // }
116	143
117		-// Axis sorting
118		-function sortCategoryAxis() {
119		- // Sort by value
120		- series.dataItems.sort(function (x, y) {
121		- return y.get("graphics").y() - x.get("graphics").y();
122		- });
	144	+ // Axis sorting
	145	+ // function sortCategoryAxis() {
	146	+ // // Sort by value
	147	+ // series.dataItems.sort(function (x, y) {
	148	+ // return y.get("graphics").y() - x.get("graphics").y();
	149	+ // });
123	150
124		- let easing = am5.ease.out(am5.ease.cubic);
	151	+ // let easing = am5.ease.out(am5.ease.cubic);
125	152
126		- // Go through each axis item
127		- am5.array.each(yAxis.dataItems, function (dataItem) {
128		- // get corresponding series item
129		- let seriesDataItem = getSeriesItem(dataItem.get("category"));
	153	+ // // Go through each axis item
	154	+ // am5.array.each(yAxis.dataItems, function (dataItem) {
	155	+ // // get corresponding series item
	156	+ // let seriesDataItem = getSeriesItem(
	157	+ // dataItem.get("category")
	158	+ // );
130	159
131		- if (seriesDataItem) {
132		- // get index of series data item
133		- let index = series.dataItems.indexOf(seriesDataItem);
	160	+ // if (seriesDataItem) {
	161	+ // // get index of series data item
	162	+ // let index = series.dataItems.indexOf(seriesDataItem);
134	163
135		- let column = seriesDataItem.get("graphics");
	164	+ // let column = seriesDataItem.get("graphics");
136	165
137		- // position after sorting
138		- let fy =
139		- yRenderer.positionToCoordinate(yAxis.indexToPosition(index)) -
140		- column.height() / 2;
	166	+ // // position after sorting
	167	+ // let fy =
	168	+ // yRenderer.positionToCoordinate(
	169	+ // yAxis.indexToPosition(index)
	170	+ // ) -
	171	+ // column.height() / 2;
141	172
142		- // set index to be the same as series data item index
143		- if (index != dataItem.get("index")) {
144		- dataItem.set("index", index);
	173	+ // // set index to be the same as series data item index
	174	+ // if (index != dataItem.get("index")) {
	175	+ // dataItem.set("index", index);
145	176
146		- // current position
147		- let x = column.x();
148		- let y = column.y();
	177	+ // // current position
	178	+ // let x = column.x();
	179	+ // let y = column.y();
149	180
150		- column.set("dy", -(fy - y));
151		- column.set("dx", x);
	181	+ // column.set("dy", -(fy - y));
	182	+ // column.set("dx", x);
152	183
153		- column.animate({ key: "dy", to: 0, duration: 600, easing: easing });
154		- column.animate({ key: "dx", to: 0, duration: 600, easing: easing });
155		- } else {
156		- column.animate({ key: "y", to: fy, duration: 600, easing: easing });
157		- column.animate({ key: "x", to: 0, duration: 600, easing: easing });
158		- }
159		- }
160		- });
	184	+ // column.animate({
	185	+ // key: "dy",
	186	+ // to: 0,
	187	+ // duration: 600,
	188	+ // easing: easing,
	189	+ // });
	190	+ // column.animate({
	191	+ // key: "dx",
	192	+ // to: 0,
	193	+ // duration: 600,
	194	+ // easing: easing,
	195	+ // });
	196	+ // } else {
	197	+ // column.animate({
	198	+ // key: "y",
	199	+ // to: fy,
	200	+ // duration: 600,
	201	+ // easing: easing,
	202	+ // });
	203	+ // column.animate({
	204	+ // key: "x",
	205	+ // to: 0,
	206	+ // duration: 600,
	207	+ // easing: easing,
	208	+ // });
	209	+ // }
	210	+ // }
	211	+ // });
161	212
162		- // Sort axis items by index.
163		- // This changes the order instantly, but as dx and dy is set and animated,
164		- // they keep in the same places and then animate to true positions.
165		- yAxis.dataItems.sort(function (x, y) {
166		- return x.get("index") - y.get("index");
167		- });
168		-}
	213	+ // Sort axis items by index.
	214	+ // This changes the order instantly, but as dx and dy is set and animated,
	215	+ // they keep in the same places and then animate to true positions.
	216	+ // yAxis.dataItems.sort(function (x, y) {
	217	+ // return x.get("index") - y.get("index");
	218	+ // });
	219	+ // }
169	220
170		-// Set data
171		-let data = [{
172		- country: "USA",
173		- value: 2025
174		-}, {
175		- country: "China",
176		- value: 1882
177		-}, {
178		- country: "Japan",
179		- value: 1809
180		-}, {
181		- country: "Germany",
182		- value: 1322
183		-}, {
184		- country: "UK",
185		- value: 1122
186		-}];
	221	+ // Set data
	222	+ // let data = [
	223	+ // {
	224	+ // country: "USA",
	225	+ // value: 2025,
	226	+ // },
	227	+ // {
	228	+ // country: "China",
	229	+ // value: 1882,
	230	+ // },
	231	+ // {
	232	+ // country: "Japan",
	233	+ // value: 1809,
	234	+ // },
	235	+ // {
	236	+ // country: "Germany",
	237	+ // value: 1322,
	238	+ // },
	239	+ // {
	240	+ // country: "UK",
	241	+ // value: 1122,
	242	+ // },
	243	+ // ];
187	244
188		-yAxis.data.setAll(data);
189		-series.data.setAll(data);
	245	+ // yAxis.data.setAll(data);
	246	+ // series.data.setAll(data);
190	247
	248	+ yAxis.data.setAll(this.chartData);
	249	+ series.data.setAll(this.chartData);
191	250
192		-// Make stuff animate on load
193		-// https://www.amcharts.com/docs/v5/concepts/animations/
194		-series.appear(1000);
195		-chart.appear(1000, 100);
196		- },
	251	+ // Make stuff animate on load
	252	+ // https://www.amcharts.com/docs/v5/concepts/animations/
	253	+ series.appear(1000);
	254	+ chart.appear(1000, 100);
	255	+ },
	256	+ sortCategoryAxis(series, yAxis, yRenderer) {
	257	+ // Sort by value
	258	+ series.dataItems.sort((x, y) => {
	259	+ return y.get("graphics").y() - x.get("graphics").y();
	260	+ });
	261	+
	262	+ let easing = am5.ease.out(am5.ease.cubic);
	263	+
	264	+ // Go through each axis item
	265	+ am5.array.each(yAxis.dataItems, function (dataItem) {
	266	+ // get corresponding series item
	267	+ let seriesDataItem = series.dataItems.find(
	268	+ (dataItem) =>
	269	+ dataItem.get("categoryY") == dataItem.get("category")
	270	+ );
	271	+
	272	+ if (seriesDataItem) {
	273	+ // get index of series data item
	274	+ let index = series.dataItems.indexOf(seriesDataItem);
	275	+
	276	+ let column = seriesDataItem.get("graphics");
	277	+
	278	+ // position after sorting
	279	+ let fy =
	280	+ yRenderer.positionToCoordinate(
	281	+ yAxis.indexToPosition(index)
	282	+ ) -
	283	+ column.height() / 2;
	284	+
	285	+ // set index to be the same as series data item index
	286	+ if (index != dataItem.get("index")) {
	287	+ dataItem.set("index", index);
	288	+
	289	+ // current position
	290	+ let x = column.x();
	291	+ let y = column.y();
	292	+
	293	+ column.set("dy", -(fy - y));
	294	+ column.set("dx", x);
	295	+
	296	+ column.animate({
	297	+ key: "dy",
	298	+ to: 0,
	299	+ duration: 600,
	300	+ easing: easing,
	301	+ });
	302	+ column.animate({
	303	+ key: "dx",
	304	+ to: 0,
	305	+ duration: 600,
	306	+ easing: easing,
	307	+ });
	308	+ } else {
	309	+ column.animate({
	310	+ key: "y",
	311	+ to: fy,
	312	+ duration: 600,
	313	+ easing: easing,
	314	+ });
	315	+ column.animate({
	316	+ key: "x",
	317	+ to: 0,
	318	+ duration: 600,
	319	+ easing: easing,
	320	+ });
	321	+ }
	322	+ }
	323	+ });
	324	+ yAxis.dataItems.sort((x, y) => {
	325	+ return x.get("index") - y.get("index");
	326	+ });
	327	+ },
197	328	},
198		- };
199		- </script>
200		-
201		- <style scoped>
202		- /* Add necessary styles here */
203		- </style>
204		- (No newline at end of file)
	329	+};
	330	+</script>
	331	+
	332	+<style scoped>
	333	+/* Add necessary styles here */
	334	+</style>

...	...	@@ -1,129 +1,197 @@
1	1	<template>
2		- <div ref="StackedBarChart" style=" height: 500px;"></div>
3		- </template>
4		-
5		- <script>
6		- import * as am5 from "@amcharts/amcharts5";
7		- import * as am5xy from "@amcharts/amcharts5/xy";
8		- import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
9		-
10		- export default {
	2	+ <div ref="StackedBarChart" style="height: 500px"></div>
	3	+</template>
	4	+
	5	+<script>
	6	+import * as am5 from "@amcharts/amcharts5";
	7	+import * as am5xy from "@amcharts/amcharts5/xy";
	8	+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	9	+import axios from "axios";
	10	+
	11	+export default {
11	12	name: "StackedBarChart",
	13	+ data() {
	14	+ return {
	15	+ chartData: [],
	16	+ };
	17	+ },
12	18	mounted() {
13		- this.createChart();
	19	+ this.getProgressRate();
14	20	},
15	21	methods: {
16		- createChart() {
17		- // Initialize root
18		- const root = am5.Root.new(this.$refs.StackedBarChart);
19		-
20		- // Apply themes
21		- const myTheme = am5.Theme.new(root);
22		- myTheme.rule("Grid", ["base"]).setAll({
23		- strokeOpacity: 0.1,
24		- });
25		- root.setThemes([
26		- am5themes_Animated.new(root),
27		- myTheme,
28		- ]);
29		-
30		- // Create chart
31		- const chart = root.container.children.push(
32		- am5xy.XYChart.new(root, {
33		- panX: false,
34		- panY: false,
35		- wheelX: "panY",
36		- wheelY: "zoomY",
37		- paddingLeft: 0,
38		- layout: root.verticalLayout,
39		- })
40		- );
41		-
42		- // Define data
43		- const data = [
44		- { year: "2021", europe: 2.5, namerica: 2.5, asia: 2.1, lamerica: 1, meast: 0.8, africa: 0.4 },
45		- ];
46		-
47		- // Create Y Axis
48		- const yRenderer = am5xy.AxisRendererY.new(root, {});
49		- const yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
50		- categoryField: "year",
51		- renderer: yRenderer,
52		- tooltip: am5.Tooltip.new(root, {}),
53		- }));
54		- yRenderer.grid.template.setAll({
55		- location: 1,
56		- });
57		- yAxis.data.setAll(data);
58		-
59		- // Create X Axis
60		- const xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
61		- min: 0,
62		- maxPrecision: 0,
63		- renderer: am5xy.AxisRendererX.new(root, {
64		- minGridDistance: 40,
65		- strokeOpacity: 0.1,
66		- }),
67		- }));
68		-
69		- // Create legend
70		- const legend = chart.children.push(am5.Legend.new(root, {
71		- centerX: am5.p50,
72		- x: am5.p50,
73		- }));
74		-
75		- // Function to create series
76		- const createSeries = (name, fieldName) => {
77		- const series = chart.series.push(am5xy.ColumnSeries.new(root, {
78		- name,
79		- stacked: true,
80		- xAxis,
81		- yAxis,
82		- baseAxis: yAxis,
83		- valueXField: fieldName,
84		- categoryYField: "year",
85		- }));
86		-
87		- series.columns.template.setAll({
88		- tooltipText: "{name}, {categoryY}: {valueX}",
89		- tooltipY: am5.percent(90),
90		- });
91		- series.data.setAll(data);
92		-
93		- series.appear();
94		-
95		- series.bullets.push(() =>
96		- am5.Bullet.new(root, {
97		- sprite: am5.Label.new(root, {
98		- text: "{valueX}",
99		- fill: root.interfaceColors.get("alternativeText"),
100		- centerY: am5.p50,
101		- centerX: am5.p50,
102		- populateText: true,
103		- }),
	22	+ getProgressRate() {
	23	+ const vm = this;
	24	+ axios({
	25	+ url: "dashboard/progressRate.json",
	26	+ method: "post",
	27	+ headers: {
	28	+ "Content-Type": "application/json; charset=UTF-8",
	29	+ },
	30	+ data: {
	31	+ stdId: "1",
	32	+ },
104	33	})
105		- );
106		-
107		-
108		- legend.data.push(series);
109		- };
110		-
111		- // Create series
112		- createSeries("Europe", "europe");
113		- createSeries("North America", "namerica");
114		- createSeries("Asia", "asia");
115		- createSeries("Latin America", "lamerica");
116		- createSeries("Middle East", "meast");
117		- createSeries("Africa", "africa");
118		-
119		- // Chart animation
120		- chart.appear(1000, 100);
121		- },
	34	+ .then(function (res) {
	35	+ // console.log("Progress Rate - response : ", res.data);
	36	+ vm.chartData = res.data;
	37	+ // console.log(vm.chartData);
	38	+ vm.createChart();
	39	+ })
	40	+ .catch(function (error) {
	41	+ console.log("Progress Rate - error : ", error);
	42	+ });
	43	+ },
	44	+
	45	+ createChart() {
	46	+ // Initialize root
	47	+ const root = am5.Root.new(this.$refs.StackedBarChart);
	48	+
	49	+ // Apply themes
	50	+ const myTheme = am5.Theme.new(root);
	51	+ myTheme.rule("Grid", ["base"]).setAll({
	52	+ strokeOpacity: 0.1,
	53	+ });
	54	+ root.setThemes([am5themes_Animated.new(root), myTheme]);
	55	+
	56	+ // Create chart
	57	+ const chart = root.container.children.push(
	58	+ am5xy.XYChart.new(root, {
	59	+ panX: false,
	60	+ panY: false,
	61	+ wheelX: "panY",
	62	+ wheelY: "zoomY",
	63	+ paddingLeft: 0,
	64	+ layout: root.verticalLayout,
	65	+ })
	66	+ );
	67	+
	68	+ // Define data
	69	+ // const data = [
	70	+ // {
	71	+ // year: "2021",
	72	+ // europe: 2.5,
	73	+ // namerica: 2.5,
	74	+ // asia: 2.1,
	75	+ // lamerica: 1,
	76	+ // meast: 0.8,
	77	+ // africa: 0.4,
	78	+ // },
	79	+ // ];
	80	+
	81	+ // Create Y Axis
	82	+ const yRenderer = am5xy.AxisRendererY.new(root, {});
	83	+ const yAxis = chart.yAxes.push(
	84	+ am5xy.CategoryAxis.new(root, {
	85	+ categoryField: "bookNm",
	86	+ renderer: yRenderer,
	87	+ tooltip: am5.Tooltip.new(root, {}),
	88	+ })
	89	+ );
	90	+ yRenderer.grid.template.setAll({
	91	+ location: 1,
	92	+ });
	93	+ yAxis.data.setAll(this.chartData);
	94	+
	95	+ // Create X Axis
	96	+ const xAxis = chart.xAxes.push(
	97	+ am5xy.ValueAxis.new(root, {
	98	+ min: 0,
	99	+ maxPrecision: 0,
	100	+ renderer: am5xy.AxisRendererX.new(root, {
	101	+ minGridDistance: 40,
	102	+ strokeOpacity: 0.1,
	103	+ }),
	104	+ })
	105	+ );
	106	+
	107	+ // Create legend
	108	+ // const legend = chart.children.push(
	109	+ // am5.Legend.new(root, {
	110	+ // centerX: am5.p50,
	111	+ // x: am5.p50,
	112	+ // })
	113	+ // );
	114	+
	115	+ // Function to create series
	116	+ // const createSeries = (name, fieldName) => {
	117	+ // const series = chart.series.push(
	118	+ // am5xy.ColumnSeries.new(root, {
	119	+ // name,
	120	+ // stacked: true,
	121	+ // xAxis,
	122	+ // yAxis,
	123	+ // baseAxis: yAxis,
	124	+ // valueXField: fieldName,
	125	+ // categoryYField: "year",
	126	+ // })
	127	+ // );
	128	+
	129	+ // series.columns.template.setAll({
	130	+ // // tooltipText: "{name}, {categoryY}: {valueX}",
	131	+ // tooltipY: am5.percent(90),
	132	+ // });
	133	+ // series.data.setAll(this.chartData);
	134	+
	135	+ // series.appear();
	136	+
	137	+ // series.bullets.push(() =>
	138	+ // am5.Bullet.new(root, {
	139	+ // sprite: am5.Label.new(root, {
	140	+ // text: "{valueX}",
	141	+ // fill: root.interfaceColors.get("alternativeText"),
	142	+ // centerY: am5.p50,
	143	+ // centerX: am5.p50,
	144	+ // populateText: true,
	145	+ // }),
	146	+ // })
	147	+ // );
	148	+
	149	+ // legend.data.push(series);
	150	+ // };
	151	+
	152	+ // Create series
	153	+ // createSeries("Europe", "europe");
	154	+ // createSeries("North America", "namerica");
	155	+ // createSeries("Asia", "asia");
	156	+ // createSeries("Latin America", "lamerica");
	157	+ // createSeries("Middle East", "meast");
	158	+ // createSeries("Africa", "africa");
	159	+
	160	+ const series = chart.series.push(
	161	+ am5xy.ColumnSeries.new(root, {
	162	+ name: "progressRate",
	163	+ xAxis: xAxis,
	164	+ yAxis: yAxis,
	165	+ baseAxis: yAxis,
	166	+ valueXField: "progressRate",
	167	+ categoryYField: "bookNm",
	168	+ // tooltipText: "{categoryY}: {valueX}",
	169	+ })
	170	+ );
	171	+ series.columns.template.setAll({
	172	+ tooltipY: am5.percent(90),
	173	+ });
	174	+
	175	+ series.data.setAll(this.chartData);
	176	+
	177	+ series.bullets.push(() =>
	178	+ am5.Bullet.new(root, {
	179	+ sprite: am5.Label.new(root, {
	180	+ text: "{valueX}",
	181	+ fill: root.interfaceColors.get("alternativeText"),
	182	+ centerY: am5.p50,
	183	+ centerX: am5.p50,
	184	+ populateText: true,
	185	+ }),
	186	+ })
	187	+ );
	188	+ // Chart animation
	189	+ chart.appear(1000, 100);
	190	+ },
122	191	},
123		- };
124		- </script>
125		-
126		- <style scoped>
127		- /* Add necessary styles here */
128		- </style>
129		- (No newline at end of file)
	192	+};
	193	+</script>
	194	+
	195	+<style scoped>
	196	+/* Add necessary styles here */
	197	+</style>

Delete comment