jichoi / lms_front star
[jichoi] 08-13
240813 최정임 부모메인
@020334d5843e9740acff718b0ed88d51572230bf
 
client/views/pages/parents/Barchart.vue (added)
+++ client/views/pages/parents/Barchart.vue
@@ -0,0 +1,204 @@
+<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 {
+    name: "Barchart",
+    mounted() {
+      this.createChart();
+    },
+    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
+  })
+);
+
+
+// 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: "country",
+    renderer: yRenderer
+  })
+);
+
+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 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 columnTemplate = series.columns.template;
+
+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));
+});
+
+columnTemplate.adapters.add("stroke", (stroke, target) => {
+  return chart.get("colors").getIndex(series.columns.indexOf(target));
+});
+
+columnTemplate.events.on("dragstop", () => {
+  sortCategoryAxis();
+});
+
+// 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();
+  });
+
+  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"));
+
+    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 });
+      }
+    }
+  });
+
+  // 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
+}];
+
+yAxis.data.setAll(data);
+series.data.setAll(data);
+
+
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/
+series.appear(1000);
+chart.appear(1000, 100);
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  /* Add necessary styles here */
+  </style>
+  (파일 끝에 줄바꿈 문자 없음)
 
client/views/pages/parents/Bubblechart.vue (added)
+++ client/views/pages/parents/Bubblechart.vue
@@ -0,0 +1,222 @@
+<template>
+    <div ref="Bubblechart" 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 {
+    name: "Bubblechart",
+    mounted() {
+      this.createChart();
+    },
+    methods: {
+      createChart() {
+        // Initialize root
+        const root = am5.Root.new(this.$refs.Bubblechart);
+  
+        // 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: true,
+  panY: true,
+  wheelY: "zoomXY",
+  pinchZoomX:true,
+  pinchZoomY:true
+}));
+
+chart.get("colors").set("step", 2);
+
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+let xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 }),
+  tooltip: am5.Tooltip.new(root, {})
+}));
+
+let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: am5xy.AxisRendererY.new(root, {}),
+  tooltip: am5.Tooltip.new(root, {})
+}));
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+let series0 = chart.series.push(am5xy.LineSeries.new(root, {
+  calculateAggregates: true,
+  xAxis: xAxis,
+  yAxis: yAxis,
+  valueYField: "y",
+  valueXField: "x",
+  valueField: "value",
+  tooltip: am5.Tooltip.new(root, {
+    labelText: "x: {valueX}, y: {valueY}, value: {value}"
+  })
+}));
+
+
+// Add bullet
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
+let circleTemplate = am5.Template.new({});
+series0.bullets.push(function() {
+  let graphics = am5.Circle.new(root, {
+    fill: series0.get("fill"),
+  }, circleTemplate);
+  return am5.Bullet.new(root, {
+    sprite: graphics
+  });
+});
+
+// Add heat rule
+// https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
+series0.set("heatRules", [{
+  target: circleTemplate,
+  min: 3,
+  max: 35,
+  dataField: "value",
+  key: "radius"
+}]);
+
+
+// Create second series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+let series1 = chart.series.push(am5xy.LineSeries.new(root, {
+  calculateAggregates: true,
+  xAxis: xAxis,
+  yAxis: yAxis,
+  valueYField: "y2",
+  valueXField: "x2",
+  valueField: "value",
+  tooltip: am5.Tooltip.new(root, {
+    labelText: "x: {valueX}, y: {valueY}, value: {value}"
+  })
+}));
+
+// Add bullet
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
+let starTemplate = am5.Template.new({});
+series1.bullets.push(function() {
+  let graphics = am5.Star.new(root, {
+    fill: series1.get("fill"),
+    spikes: 8,
+    innerRadius: am5.percent(70),
+  }, starTemplate);
+  return am5.Bullet.new(root, {
+    sprite: graphics
+  });
+});
+
+
+// Add heat rule
+// https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
+series1.set("heatRules", [{
+  target: starTemplate,
+  min: 3,
+  max: 50,
+  dataField: "value",
+  key: "radius"
+}]);
+
+
+series0.strokes.template.set("strokeOpacity", 0);
+series1.strokes.template.set("strokeOpacity", 0);
+
+// Add cursor
+// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
+chart.set("cursor", am5xy.XYCursor.new(root, {
+  xAxis: xAxis,
+  yAxis: yAxis,
+  snapToSeries: [series0, series1]
+}));
+
+// Add scrollbars
+// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
+// chart.set("scrollbarX", am5.Scrollbar.new(root, {
+//   orientation: "horizontal"
+// }));
+
+// chart.set("scrollbarY", am5.Scrollbar.new(root, {
+//   orientation: "vertical"
+// }));
+
+
+let data = [{
+  "y": 10,
+  "x": 14,
+  "value": 59,
+  "y2": -5,
+  "x2": -3,
+  "value2": 44
+}, {
+  "y": 5,
+  "x": 3,
+  "value": 50,
+  "y2": -15,
+  "x2": -8,
+  "value2": 12
+}, {
+  "y": -10,
+  "x": 8,
+  "value": 19,
+  "y2": -4,
+  "x2": 6,
+  "value2": 35
+}, {
+  "y": -6,
+  "x": 5,
+  "value": 65,
+  "y2": -5,
+  "x2": -6,
+  "value2": 168
+}, {
+  "y": 15,
+  "x": -4,
+  "value": 92,
+  "y2": -10,
+  "x2": -8,
+  "value2": 102
+}, {
+  "y": 13,
+  "x": 1,
+  "value": 8,
+  "y2": -2,
+  "x2": 0,
+  "value2": 41
+}, {
+  "y": 1,
+  "x": 6,
+  "value": 35,
+  "y2": 0,
+  "x2": -3,
+  "value2": 16
+}]
+
+series0.data.setAll(data);
+series1.data.setAll(data);
+
+
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/
+series0.appear(1000);
+series1.appear(1000);
+
+chart.appear(1000, 100);
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  /* Add necessary styles here */
+  </style>
+  (파일 끝에 줄바꿈 문자 없음)
 
client/views/pages/parents/ColumnLineChart.vue (added)
+++ client/views/pages/parents/ColumnLineChart.vue
@@ -0,0 +1,206 @@
+<template>
+    <div ref="ColumnLineChart" 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 {
+    name: "ColumnLineChart",
+    mounted() {
+      this.createChart();
+    },
+    methods: {
+      createChart() {
+        // Initialize root
+        const root = am5.Root.new(this.$refs.ColumnLineChart);
+  
+        // 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: "panX",
+    wheelY: "zoomX",
+    paddingLeft: 0,
+    layout: root.verticalLayout
+  })
+);
+
+// Add scrollbar
+// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
+// chart.set(
+//   "scrollbarX",
+//   am5.Scrollbar.new(root, {
+//     orientation: "horizontal"
+//   })
+// );
+
+let data = [
+  {
+    year: "2016",
+    income: 23.5,
+    expenses: 21.1
+  },
+  {
+    year: "2017",
+    income: 26.2,
+    expenses: 30.5
+  },
+  {
+    year: "2018",
+    income: 30.1,
+    expenses: 34.9
+  },
+  {
+    year: "2019",
+    income: 29.5,
+    expenses: 31.1
+  },
+  {
+    year: "2020",
+    income: 30.6,
+    expenses: 28.2,
+    strokeSettings: {
+      stroke: chart.get("colors").getIndex(1),
+      strokeWidth: 3,
+      strokeDasharray: [5, 5]
+    }
+  },
+  {
+    year: "2021",
+    income: 34.1,
+    expenses: 32.9,
+    columnSettings: {
+      strokeWidth: 1,
+      strokeDasharray: [5],
+      fillOpacity: 0.2
+    },
+    info: "(projection)"
+  }
+];
+
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+let xRenderer = am5xy.AxisRendererX.new(root, {
+  minorGridEnabled: true,
+  minGridDistance: 60
+});
+let xAxis = chart.xAxes.push(
+  am5xy.CategoryAxis.new(root, {
+    categoryField: "year",
+    renderer: xRenderer,
+    tooltip: am5.Tooltip.new(root, {})
+  })
+);
+xRenderer.grid.template.setAll({
+  location: 1
+})
+
+xAxis.data.setAll(data);
+
+let yAxis = chart.yAxes.push(
+  am5xy.ValueAxis.new(root, {
+    min: 0,
+    extraMax: 0.1,
+    renderer: am5xy.AxisRendererY.new(root, {
+      strokeOpacity: 0.1
+    })
+  })
+);
+
+
+// Add series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+
+let series1 = chart.series.push(
+  am5xy.ColumnSeries.new(root, {
+    name: "Income",
+    xAxis: xAxis,
+    yAxis: yAxis,
+    valueYField: "income",
+    categoryXField: "year",
+    tooltip: am5.Tooltip.new(root, {
+      pointerOrientation: "horizontal",
+      labelText: "{name} in {categoryX}: {valueY} {info}"
+    })
+  })
+);
+
+series1.columns.template.setAll({
+  tooltipY: am5.percent(10),
+  templateField: "columnSettings"
+});
+
+series1.data.setAll(data);
+
+let series2 = chart.series.push(
+  am5xy.LineSeries.new(root, {
+    name: "Expenses",
+    xAxis: xAxis,
+    yAxis: yAxis,
+    valueYField: "expenses",
+    categoryXField: "year",
+    tooltip: am5.Tooltip.new(root, {
+      pointerOrientation: "horizontal",
+      labelText: "{name} in {categoryX}: {valueY} {info}"
+    })
+  })
+);
+
+series2.strokes.template.setAll({
+  strokeWidth: 3,
+  templateField: "strokeSettings"
+});
+
+
+series2.data.setAll(data);
+
+series2.bullets.push(function () {
+  return am5.Bullet.new(root, {
+    sprite: am5.Circle.new(root, {
+      strokeWidth: 3,
+      stroke: series2.get("stroke"),
+      radius: 5,
+      fill: root.interfaceColors.get("background")
+    })
+  });
+});
+
+chart.set("cursor", am5xy.XYCursor.new(root, {}));
+
+// Add legend
+// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
+let legend = chart.children.push(
+  am5.Legend.new(root, {
+    centerX: am5.p50,
+    x: am5.p50
+  })
+);
+legend.data.setAll(chart.series.values);
+
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/
+chart.appear(1000, 100);
+series1.appear();
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  /* Add necessary styles here */
+  </style>
+  (파일 끝에 줄바꿈 문자 없음)
 
client/views/pages/parents/Dounutchart.vue (added)
+++ client/views/pages/parents/Dounutchart.vue
@@ -0,0 +1,81 @@
+<template>
+  <div ref="Dounutchart" style="width: 500px; height: 500px;"></div>
+</template>
+
+<script>
+import * as am5 from "@amcharts/amcharts5";
+import * as am5percent from "@amcharts/amcharts5/percent";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+
+export default {
+  name: "Dounutchart",
+  mounted() {
+    this.createChart();
+  },
+  methods: {
+    createChart() {
+      // Initialize root
+      const root = am5.Root.new(this.$refs.Dounutchart);
+
+      // Apply themes
+      root.setThemes([
+        am5themes_Animated.new(root)
+      ]);
+
+      // Create chart
+      const chart = root.container.children.push(am5percent.PieChart.new(root, {
+        layout: root.verticalLayout,
+        innerRadius: am5.percent(50)  // Adjusted innerRadius for a donut chart
+      }));
+
+      // Create series
+      const series = chart.series.push(am5percent.PieSeries.new(root, {
+        valueField: "value",
+        categoryField: "category",
+        alignLabels: false
+      }));
+
+      // Add static label
+      // const label = chart.plotContainer.children.push(am5.Label.new(root, {
+      //   text: "Total",
+      //   x: am5.p50,
+      //   y: am5.p50,
+      //   centerX: am5.p50,
+      //   centerY: am5.p50,
+      //   fill: am5.color(0x000000),
+      //   fontSize: 20,
+      //   fontWeight: "bold"
+      // }));
+
+      series.labels.template.setAll({
+        textType: "circular",
+        centerX: am5.p50,
+        centerY: am5.p50
+      });
+
+      // Set data
+      series.data.setAll([
+        { value: 10, category: "One" },
+        { value: 9, category: "Two" },
+      ]);
+
+      // Create legend
+      const legend = chart.children.push(am5.Legend.new(root, {
+        centerX: am5.p50,
+        x: am5.p50,
+        marginTop: 15,
+        marginBottom: 15
+      }));
+
+      legend.data.setAll(series.dataItems);
+
+      // Play initial series animation
+      series.appear(1000, 100);
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* Add necessary styles here */
+</style>
client/views/pages/parents/Main_p.vue
--- client/views/pages/parents/Main_p.vue
+++ client/views/pages/parents/Main_p.vue
@@ -1,15 +1,195 @@
 <template>
-    <div>Main.vue</div>
+    <div>
+        <!-- <Side_t></Side_t> -->
+        <div style="padding: 15px 60px 120px 60px ">
+            <div class="flex justify-between align-center">
+                <div class="logo mb25"><img src="../../../resources/img/logo2.png" alt=""></div>
+                <Header></Header>
+            </div>
+            <div class="main-wrap flex justify-between">
+                <div class="gd-2">
+                    <div class=" mb30">
+                        <div>
+                            <img src="../../../resources/img/img16_s.png" alt="">
+                            <div class="mt10" style="width: 100%;">
+                                <p class="name mb10">학생이름</p>
+                                <p class="mb5">xx중학교 3학년 x반</p>
+                                <progress-bar :progress="progress"></progress-bar>
+                                <span @click="increaseProgress">오늘의 공부</span>
+                                <span class="brown ml10">{{ progress }}%</span>
+                            </div>
+                        </div>
+                        <hr>
+                        <p class="title2 mb25">최근 학습 히스토리</p>
+                        <ul class="flex justify-between ml30">
+                            <li>자학사 3학년 2학기</li>
+                            <li>자학사 3학년 2학기</li>
+                        </ul>
+
+                        <hr>
+                        <div class="title-box flex justify-between mb20">
+                            <p class="name">가나다학생 랭킹</p>
+                        </div>
+                        <div class="mypage mb30">
+                            <div class=" flex-column " style="gap: 20px;">
+                                <div class="textbook book-red">
+                                    <div class="text ">
+                                        <p class="title1" style="color: #fff;">포토북 랭킹</p>
+                                    </div>
+                                    <div class="box">
+                                        <P class="title2 mt10">현재 30명 중 <em class="red">2등</em>입니다.</P>
+                                    </div>
+                                </div>
+                                <div class="textbook ">
+                                    <div class="text ">
+                                        <p class="title1" style="color: #fff;">포토북 랭킹</p>
+                                    </div>
+                                    <div class="box">
+                                        <P class="title2 mt10">현재 30명 중 <em class="yellow">2등</em>입니다.</P>
+                                    </div>
+                                </div>
+                                <div class="textbook book-blue">
+                                    <div class="text ">
+                                        <p class="title1" style="color: #fff;">포토북 랭킹</p>
+                                    </div>
+                                    <div class="box">
+                                        <P class="title2 mt10">현재 30명 중 <em class="blue">2등</em>입니다.</P>
+                                    </div>
+                                </div>
+                                <div class="textbook book-navy">
+                                    <div class="text ">
+                                        <p class="title1" style="color: #fff;">포토북 랭킹</p>
+                                    </div>
+                                    <div class="box">
+                                        <P class="title2 mt10">현재 30명 중 <em class="navy">2등</em>입니다.</P>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div>
+                            <div class="title-box flex justify-between mb20">
+                                <p class="title">사진첩</p>
+                            </div>
+                            <div class="photobook">
+                                <div class="flex justify-between">
+                                    <div class="box" style="gap: 5px;">
+                                        <div><img src="../../../resources/img/img198_12p.png" alt=""></div>
+                                    </div>
+                                    <div class="text mt10">
+                                        <p class="title1 mb10">나의 사진첩</p>
+                                        <button @click="selectedTab = 'tab4'; goToPage('PhotoBook')" type="button"
+                                            title="글쓰기" class="new-btn">
+                                            바로가기
+                                        </button>
+
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="gd-9">
+                    <div class="title-box flex justify-between mb40">
+                        <p class="title">전체 진행률</p>
+                    </div>
+                    <div class="flex">
+                        <div class="wrap">
+                            <p class="name">학습 현황</p>
+                            <div><Dounutchart/></div>
+                            <div class="textbox">
+                                <p class="title2">오늘의 학습현황</p>
+                                <p class="name">40%</p>
+                            </div>
+                            <p class="title2">학습시간</p>
+                            <p class="name">학습시간 0시간</p>
+                        </div>
+                        <div class="wrap">
+                            <p class="name">이해/표현 점수</p>
+                            <div>
+                                <ColumnLineChart/>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="wrap">
+                        <p class="name">교재별 진행률</p>
+                        <div>
+                            <StackedBarChart />
+                        </div>
+                    </div>
+                    <div class="flex">
+                        <div class="wrap">
+                            <p class="name">오늘의 학습 일정</p>
+                            <div class="flex-column" style="gap: 20px;">
+                                <div class=" flex justify-between align-center " style="gap: 70px;">
+                                    <div><img src="../../../resources/img/img217_22s.png" alt=""></div>
+                                    <div class="wrap cs-pt" :class="{ 'cs-pt-clicked': isClicked }"
+                                        @click="toggleClicked" style="width: 100%;">
+                                        <div class="text-lf flex justify-between align-center ">
+                                            <div>
+                                                <div class="flex align-center mb10" style="gap: 10px;">
+                                                    <p class="title2"><em class="gray-bd">1교시</em></p>
+                                                    <p class="title1">9:00</p>
+                                                    <p class="title1">~</p>
+                                                    <p class="title1">10:00</p>
+                                                </div>
+                                                <div class="title-box  mb10"> <span class="title">the best</span></div>
+                                                <p class="title2">wirte a</p>
+                                            </div>
+                                            <div class=""> <img src="../../../resources/img/img214_19s.png" alt="">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                        <div class="flex-column">
+                            <div class="wrap">
+                                <p class="name">교재별 오답률</p>
+                                <Barchart />
+                            </div>
+
+                            <div class="wrap">
+                                <p class="name">LC/RC 세부 점수</p>
+                                <Bubblechart />
+                            </div>
+
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
 </template>
 
 <script>
+import Header from '../../layout/Header.vue';
+import Menu from '../../layout/Menu.vue';
+import Side_t from '../../layout/Side_t.vue';
+import ProgressBar from '../../component/ProgressBar.vue';
+import StackedBarChart from './StackedBarChart.vue';
+import Barchart from './Barchart.vue';
+import Bubblechart from './Bubblechart.vue';
+import Dounutchart from './Dounutchart.vue';
+import ColumnLineChart from './ColumnLineChart.vue';
 
 export default {
-    data () {
+    data() {
         return {
+            progress: 20
         }
     },
     methods: {
+        increaseProgress() {
+            if (this.progress < 100) {
+                this.progress += 10;
+            }
+        },
+       
 
     },
     watch: {
@@ -19,9 +199,27 @@
 
     },
     components: {
+        Header: Header,
+        Menu: Menu,
+        // Footer:Footer,
+        Side_t: Side_t,
+        ProgressBar,
+        StackedBarChart: StackedBarChart,
+        Barchart: Barchart,
+        Bubblechart: Bubblechart,
+        Dounutchart: Dounutchart,
+        ColumnLineChart: ColumnLineChart,
+
     },
     mounted() {
-        console.log('main mounted');
     }
 }
-</script>
(파일 끝에 줄바꿈 문자 없음)
+</script>
+<style scoped>
+.main-wrap {
+    margin-top: 20px;
+    position: static;
+    width: 100%;
+    height: 100%;
+}
+</style>
(파일 끝에 줄바꿈 문자 없음)
 
client/views/pages/parents/StackedBarChart.vue (added)
+++ client/views/pages/parents/StackedBarChart.vue
@@ -0,0 +1,129 @@
+<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 {
+    name: "StackedBarChart",
+    mounted() {
+      this.createChart();
+    },
+    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,
+              }),
+            })
+          );
+          
+  
+          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);
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  /* Add necessary styles here */
+  </style>
+  (파일 끝에 줄바꿈 문자 없음)
package-lock.json
--- package-lock.json
+++ package-lock.json
@@ -5,7 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
-        "@amcharts/amcharts4": "^4.10.39",
+        "@amcharts/amcharts5": "^5.10.1",
         "@babel/cli": "7.19.3",
         "@babel/core": "7.19.3",
         "@jamescoyle/vue-icon": "^0.1.2",
@@ -34,26 +34,37 @@
         "webpack-cli": "^5.1.4"
       }
     },
-    "node_modules/@amcharts/amcharts4": {
-      "version": "4.10.39",
-      "resolved": "https://registry.npmjs.org/@amcharts/amcharts4/-/amcharts4-4.10.39.tgz",
-      "integrity": "sha512-5WbpZgI0m0Mf8Ydwlm1XWB8hIzkk6fJifzYmJqo5HLdA8jCQa+4I+8uOlGlvSMxbBTkvxanEgA2WX27+99X44w==",
+    "node_modules/@amcharts/amcharts5": {
+      "version": "5.10.1",
+      "resolved": "https://registry.npmjs.org/@amcharts/amcharts5/-/amcharts5-5.10.1.tgz",
+      "integrity": "sha512-oGTZ7QJ/AEiMgJ6W3xzX7dSTK47Zl4j44ZsHiWbdAU0BKSQPmzw/jGgj806/ki2Ym4wuxWvE8dCg6josmNnVDg==",
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
-        "@babel/runtime": "^7.6.3",
-        "core-js": "^3.0.0",
+        "@types/d3": "^7.0.0",
+        "@types/d3-chord": "^3.0.0",
+        "@types/d3-hierarchy": "3.1.1",
+        "@types/d3-sankey": "^0.11.1",
+        "@types/d3-shape": "^3.0.0",
+        "@types/geojson": "^7946.0.8",
+        "@types/polylabel": "^1.0.5",
+        "@types/svg-arc-to-cubic-bezier": "^3.2.0",
+        "d3": "^7.0.0",
+        "d3-chord": "^3.0.0",
         "d3-force": "^3.0.0",
-        "d3-geo": "^3.0.1",
-        "d3-geo-projection": "^4.0.0",
+        "d3-geo": "^3.0.0",
+        "d3-hierarchy": "^3.0.0",
+        "d3-sankey": "^0.12.3",
         "d3-selection": "^3.0.0",
-        "d3-transition": "^3.0.1",
+        "d3-shape": "^3.0.0",
+        "d3-transition": "^3.0.0",
+        "d3-voronoi-treemap": "^1.1.2",
+        "flatpickr": "^4.6.9",
+        "markerjs2": "^2.29.4",
         "pdfmake": "^0.2.2",
-        "polylabel": "^1.0.2",
-        "raf": "^3.4.1",
-        "regression": "^2.0.1",
-        "rgbcolor": "^1.0.1",
-        "stackblur-canvas": "^2.0.0",
-        "tslib": "^2.0.1"
+        "polylabel": "^1.1.0",
+        "seedrandom": "^3.0.5",
+        "svg-arc-to-cubic-bezier": "^3.2.0",
+        "tslib": "^2.2.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -292,18 +303,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/runtime": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz",
-      "integrity": "sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==",
-      "license": "MIT",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/template": {
       "version": "7.25.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz",
@@ -487,6 +486,283 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/@types/d3": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-axis": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-brush": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-chord": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-contour": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.6.tgz",
+      "integrity": "sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.1.tgz",
+      "integrity": "sha512-QwjxA3+YCKH3N1Rs3uSiSy1bdxlLB1uUiENXeJudBoAFvtDuswUxLcanoOaR2JYn1melDTuIXR8VhnVyI3yG/A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-polygon": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-sankey": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-sankey/-/d3-sankey-0.11.2.tgz",
+      "integrity": "sha512-U6SrTWUERSlOhnpSrgvMX64WblX1AxX6nEjI2t3mLK2USpQrnbwYYK+AS9SwiE7wgYmOsSSKoSdr8aoKBH0HgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-shape": "^1"
+      }
+    },
+    "node_modules/@types/d3-sankey/node_modules/@types/d3-path": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.11.tgz",
+      "integrity": "sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-sankey/node_modules/@types/d3-shape": {
+      "version": "1.3.12",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.12.tgz",
+      "integrity": "sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "^1"
+      }
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
+      "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz",
+      "integrity": "sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.10.tgz",
+      "integrity": "sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
+      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz",
+      "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-time-format": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.8.tgz",
+      "integrity": "sha512-ew63aJfQ/ms7QQ4X7pk5NxQ9fZH/z+i24ZfJ6tJSfqxJMrYLiK01EAs2/Rtw/JreGUsS3pLPNV644qXFGnoZNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "9.6.0",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.0.tgz",
@@ -512,6 +788,12 @@
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.14",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
+      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -526,6 +808,18 @@
       "dependencies": {
         "undici-types": "~6.11.1"
       }
+    },
+    "node_modules/@types/polylabel": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@types/polylabel/-/polylabel-1.1.3.tgz",
+      "integrity": "sha512-9Zw2KoDpi+T4PZz2G6pO2xArE0m/GSMTW1MIxF2s8ZY8x9XDO6fv9um0ydRGvcbkFLlaq8yNK6eZxnmMZtDgWQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/svg-arc-to-cubic-bezier": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.2.tgz",
+      "integrity": "sha512-XQtKy9lmkKlV+c3Jelo7kxNPw7qOqIq3GcnOhywGZHF7zw5D5m+Ssigbmf3Turbe/A8Ur+lRh8TYjuxXKvyivw==",
+      "license": "MIT"
     },
     "node_modules/@vue/compiler-core": {
       "version": "3.2.40",
@@ -1342,17 +1636,6 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "license": "MIT"
     },
-    "node_modules/core-js": {
-      "version": "3.38.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.0.tgz",
-      "integrity": "sha512-XPpwqEodRljce9KswjZShh95qJ1URisBeKCjUdq27YdenkslVe7OO0ZJhlYXAChW7OhXaRLl8AAba7IBfoIHug==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/core-js"
-      }
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1430,6 +1713,47 @@
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==",
       "license": "MIT"
     },
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-array": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
@@ -1437,6 +1761,43 @@
       "license": "ISC",
       "dependencies": {
         "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "1 - 3"
       },
       "engines": {
         "node": ">=12"
@@ -1451,6 +1812,30 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-dispatch": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
@@ -1460,11 +1845,82 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/d3-ease": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
       "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
       "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
       "engines": {
         "node": ">=12"
       }
@@ -1483,6 +1939,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-geo": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
@@ -1495,34 +1960,13 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-geo-projection": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/d3-geo-projection/-/d3-geo-projection-4.0.0.tgz",
-      "integrity": "sha512-p0bK60CEzph1iqmnxut7d/1kyTmm3UWtPlwdkM31AU+LW+BXazd5zJdoCn7VFxNCHXRngPHRnsNn5uGjLRGndg==",
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
       "license": "ISC",
-      "dependencies": {
-        "commander": "7",
-        "d3-array": "1 - 3",
-        "d3-geo": "1.12.0 - 3"
-      },
-      "bin": {
-        "geo2svg": "bin/geo2svg.js",
-        "geograticule": "bin/geograticule.js",
-        "geoproject": "bin/geoproject.js",
-        "geoquantize": "bin/geoquantize.js",
-        "geostitch": "bin/geostitch.js"
-      },
       "engines": {
         "node": ">=12"
-      }
-    },
-    "node_modules/d3-geo-projection/node_modules/commander": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10"
       }
     },
     "node_modules/d3-interpolate": {
@@ -1537,6 +1981,24 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-quadtree": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
@@ -1546,11 +2008,125 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-sankey": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1 - 2",
+        "d3-shape": "^1.2.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-sankey/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-selection": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
       "engines": {
         "node": ">=12"
       }
@@ -1581,6 +2157,92 @@
       },
       "peerDependencies": {
         "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-voronoi-map": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-voronoi-map/-/d3-voronoi-map-2.1.1.tgz",
+      "integrity": "sha512-mCXfz/kD9IQxjHaU2IMjkO8fSo4J6oysPR2iL+omDsCy1i1Qn6BQ/e4hEAW8C6ms2kfuHwqtbNom80Hih94YsA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dispatch": "2.*",
+        "d3-polygon": "2.*",
+        "d3-timer": "2.*",
+        "d3-weighted-voronoi": "1.*"
+      }
+    },
+    "node_modules/d3-voronoi-map/node_modules/d3-dispatch": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
+      "integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-voronoi-map/node_modules/d3-polygon": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-2.0.0.tgz",
+      "integrity": "sha512-MsexrCK38cTGermELs0cO1d79DcTsQRN7IWMJKczD/2kBjzNXxLUWP33qRF6VDpiLV/4EI4r6Gs0DAWQkE8pSQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-voronoi-map/node_modules/d3-timer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
+      "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-voronoi-treemap": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/d3-voronoi-treemap/-/d3-voronoi-treemap-1.1.2.tgz",
+      "integrity": "sha512-7odu9HdG/yLPWwzDteJq4yd9Q/NwgQV7IE/u36VQtcCK7k1sZwDqbkHCeMKNTBsq5mQjDwolTsrXcU0j8ZEMCA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-voronoi-map": "2.*"
+      }
+    },
+    "node_modules/d3-weighted-voronoi": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/d3-weighted-voronoi/-/d3-weighted-voronoi-1.1.3.tgz",
+      "integrity": "sha512-C3WdvSKl9aqhAy+f3QT3PPsQG6V+ajDfYO3BSclQDSD+araW2xDBFIH67aKzsSuuuKaX8K2y2dGq1fq/dWTVig==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "2",
+        "d3-polygon": "2"
+      }
+    },
+    "node_modules/d3-weighted-voronoi/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-weighted-voronoi/node_modules/d3-polygon": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-2.0.0.tgz",
+      "integrity": "sha512-MsexrCK38cTGermELs0cO1d79DcTsQRN7IWMJKczD/2kBjzNXxLUWP33qRF6VDpiLV/4EI4r6Gs0DAWQkE8pSQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-weighted-voronoi/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/debug": {
@@ -1652,6 +2314,15 @@
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "license": "ISC",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
       }
     },
     "node_modules/delayed-stream": {
@@ -2105,6 +2776,12 @@
       "bin": {
         "flat": "cli.js"
       }
+    },
+    "node_modules/flatpickr": {
+      "version": "4.6.13",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
+      "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==",
+      "license": "MIT"
     },
     "node_modules/follow-redirects": {
       "version": "1.15.6",
@@ -2786,6 +3463,12 @@
         "semver": "bin/semver"
       }
     },
+    "node_modules/markerjs2": {
+      "version": "2.32.1",
+      "resolved": "https://registry.npmjs.org/markerjs2/-/markerjs2-2.32.1.tgz",
+      "integrity": "sha512-OGBINMGhXwTXZF/k0ky9vciPm8C3/bsDZUJroZrIvoX0xv3OWYBEDiUSmgRpiLkCv5Z4Q7RaYxhza/iafc25zw==",
+      "license": "SEE LICENSE IN LICENSE"
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -3113,12 +3796,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/performance-now": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
-      "license": "MIT"
-    },
     "node_modules/pg": {
       "version": "8.8.0",
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.8.0.tgz",
@@ -3441,15 +4118,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/raf": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
-      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
-      "license": "MIT",
-      "dependencies": {
-        "performance-now": "^2.1.0"
-      }
-    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -3508,12 +4176,6 @@
         "node": ">= 10.13.0"
       }
     },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "license": "MIT"
-    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
@@ -3531,12 +4193,6 @@
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
-    },
-    "node_modules/regression": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/regression/-/regression-2.0.1.tgz",
-      "integrity": "sha512-A4XYsc37dsBaNOgEjkJKzfJlE394IMmUPlI/p3TTI9u3T+2a+eox5Pr/CPUqF0eszeWZJPAc6QkroAhuUpWDJQ==",
-      "license": "MIT"
     },
     "node_modules/resolve": {
       "version": "1.22.8",
@@ -3578,14 +4234,17 @@
         "node": ">=8"
       }
     },
-    "node_modules/rgbcolor": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
-      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
-      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
-      "engines": {
-        "node": ">= 0.8.15"
-      }
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+      "license": "Unlicense"
+    },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "license": "BSD-3-Clause"
     },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
@@ -3636,6 +4295,12 @@
         "type": "opencollective",
         "url": "https://opencollective.com/webpack"
       }
+    },
+    "node_modules/seedrandom": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
+      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==",
+      "license": "MIT"
     },
     "node_modules/semver": {
       "version": "6.3.1",
@@ -3860,15 +4525,6 @@
         "node": ">= 10.x"
       }
     },
-    "node_modules/stackblur-canvas": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
-      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.1.14"
-      }
-    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -3902,6 +4558,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-arc-to-cubic-bezier": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz",
+      "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==",
+      "license": "ISC"
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
package.json
--- package.json
+++ package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@amcharts/amcharts4": "^4.10.39",
+    "@amcharts/amcharts5": "^5.10.1",
     "@babel/cli": "7.19.3",
     "@babel/core": "7.19.3",
     "@jamescoyle/vue-icon": "^0.1.2",
webpack.config.js
--- webpack.config.js
+++ webpack.config.js
@@ -3,6 +3,7 @@
 const {PROJECT_NAME, BASE_DIR, SERVICE_STATUS} = require('./Global');
 
 module.exports = {
+  
   name: PROJECT_NAME,
   mode: SERVICE_STATUS,
   devtool: 'eval',
@@ -12,6 +13,7 @@
   },
 
   module: {
+    
     rules: [{
       test: /\.vue?$/,
       loader: 'vue-loader',
@@ -39,4 +41,11 @@
     path: `${BASE_DIR}/client/build`,	// __dirname: webpack.config.js 파일이 위치한 경로
     filename: 'bundle.js'
   },
+  configureWebpack: {
+    resolve: {
+      alias: {
+        "@amcharts/amcharts5": "@amcharts/amcharts5/dist/amcharts5.esm.js"
+      }
+    }
+  },
 }
(파일 끝에 줄바꿈 문자 없음)
Add a comment
List