add:fullscreen 페이지 수정중 #24

210-reverof · May 25, 2023 · a0f16ac · a0f16ac
1 parent 5aa96d6
commit a0f16ac
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 29 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -3,14 +3,38 @@
     <div v-if="isOnBoard" class="scroll-snap-wrapper">
       <confirm-header :isOnBoard="true" class="header1"></confirm-header>
       <vue-scroll-snap :fullscreen="true">
-        <div class="item" style="background-color: #42b983">
-        </div>
+        <div class="item" style="background-color: #42b983">xxxxxxxxxxxxxx</div>
         <div class="item" style="background-color: coral">
           <word-cloud class="word-cloud"></word-cloud>
         </div>
-        <div class="item" style="background-color: #FAEBCD">
-
-        <real-radar-chart-graph class="radar-chart"></real-radar-chart-graph>
+        <div class="item" style="background-color: #faebcd">
+          <div>
+            <b-carousel
+              id="carousel-fade"
+              style="text-shadow: 0px 0px 2px #000"
+              fade
+              indicators
+              img-width="1024"
+              img-height="600"
+            >
+              <b-carousel-slide
+                caption="First Slide"
+                img-src="https://picsum.photos/1024/480/?image=10"
+              >
+                <real-radar-chart-graph
+                  class="radar-chart"
+                ></real-radar-chart-graph
+              ></b-carousel-slide>
+              <b-carousel-slide
+                caption="Second Slide"
+                img-src="https://picsum.photos/1024/480/?image=12"
+              ></b-carousel-slide>
+              <b-carousel-slide
+                caption="Third Slide"
+                img-src="https://picsum.photos/1024/480/?image=22"
+              ></b-carousel-slide>
+            </b-carousel>
+          </div>
         </div>
       </vue-scroll-snap>
     </div>
@@ -26,7 +50,7 @@
 import VueScrollSnap from "vue-scroll-snap";
 import CommonFooter from "./components/common/CommonFooter.vue";
 import ConfirmHeader from "./components/common/ConfirmHeader.vue";
-import WordCloud from '@/components/common/WordCloud.vue'
+import WordCloud from "@/components/common/WordCloud.vue";
 import RealRadarChartGraph from "@/components/common/RealRadarChartGraph.vue";
 import { mapState, mapActions } from "vuex";
 const routerStore = "routerStore";
@@ -39,15 +63,16 @@ export default {
     RealRadarChartGraph,
     VueScrollSnap,
   },
+  created() {
+    this.setOnBoard(true);
+    console.log("fullscreen");
+  },
   computed: {
     ...mapState(routerStore, ["isOnBoard"]),
   },
   methods: {
     ...mapActions(routerStore, ["setOnBoard"]),
   },
-  created() {
-    this.setOnBoard(true);
-  },
 };
 </script>
 
@@ -93,12 +118,12 @@ nav a.router-link-exact-active {
   color: #42b983;
 }
 
-.word-cloud{
+.word-cloud {
   width: 100%;
   height: 100%;
 }
 
-.radar-chart{
+.radar-chart {
   width: 100%;
   height: 100%;
 }

diff --git a/frontend/src/components/common/RealRadarChartGraph.vue b/frontend/src/components/common/RealRadarChartGraph.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="analysis-chart-box">
-    <canvas id="chart2" width="500px" height="500px"></canvas>
+  <div class="realRadalChart">
+    <canvas id="realRadalChart" width="500px" height="500px"></canvas>
   </div>
 </template>
 
@@ -13,24 +13,33 @@ export default {
   components: {},
   methods: {
     fillData(chartId, labels, dataset) {
-      console.log(labels +" "+dataset)
+      console.log(labels + " " + dataset);
       const ctx = document.getElementById(chartId).getContext("2d");
       this.myChart = new Chart(ctx, {
         type: "radar",
         data: {
           labels: [
-            "Eating",
-            "Drinking",
-            "Sleeping",
-            "Designing",
-            "Coding",
-            "Cycling",
-            "Running",
+            "관광지",
+            "문화시설",
+            "축제공연행사",
+            "여행코스",
+            "레포츠",
+            "숙박",
+            "쇼핑",
+            "음식점",
+            // 12:관광지 "#FF0000", // 빨강
+// 14:문화시설 "#FFA500", // 주황
+// 15:축제공연행사 "#FFFF00", // 노랑
+// 25:여행코스, "#00FF00", // 초록
+// 28:레포츠, "#0000FF", // 파랑
+// 32:숙박, "#800080", // 보라
+// 38:쇼핑, "#FF00FF",  // 분홍
+// 39:음식점 "#888888"  // 회색
           ],
           datasets: [
             {
-              label: "My First Dataset",
-              data: [65, 59, 90, 81, 56, 55, 40],
+              label: "여성",
+              data: [165, 459, 190, 281, 656, 355, 540, 431],
               fill: true,
               backgroundColor: "rgba(255, 99, 132, 0.2)",
               borderColor: "rgb(255, 99, 132)",
@@ -40,8 +49,8 @@ export default {
               pointHoverBorderColor: "rgb(255, 99, 132)",
             },
             {
-              label: "My Second Dataset",
-              data: [28, 48, 40, 19, 96, 27, 100],
+              label: "남성",
+              data: [228, 248, 540, 219, 456, 247, 640, 221],
               fill: true,
               backgroundColor: "rgba(54, 162, 235, 0.2)",
               borderColor: "rgb(54, 162, 235)",
@@ -53,10 +62,20 @@ export default {
           ],
         },
         options: {
+          scales: {
+            r: {
+              // display: false,
+              color: "#55EBCD",
+              ticks: {
+                backdropColor: "#FAEBCD",
+              },
+            },
+          },
           plugins: {
             legend: {
               display: true,
               position: "bottom",
+              color: "#FAEBCD",
               labels: {
                 boxWidth: 7,
                 padding: 10,
@@ -72,6 +91,7 @@ export default {
             tooltip: {
               boxWidth: 10,
               bodyFont: { size: 10 },
+              backgroundColor: "#55EBCD",
             },
           },
           responsive: true,
@@ -95,12 +115,25 @@ export default {
     },
   },
   mounted() {
-    this.fillData("chart2", ["중립", "중립 아님", "모름"], [50, 20, 30]);
+    //chartname, labels, dataset
+    this.fillData(
+      "realRadalChart",
+      ["중립", "중립 아님", "모름"],
+      [50, 20, 30]
+    );
   },
   data() {
     return {
       myChart: null,
     };
   },
 };
-</script>
+</script>
+
+<style scoped>
+.realRadalChart{
+  margin: 3% auto;
+  width: 90%;
+  height: 90%;
+}
+</style>
diff --git a/frontend/src/components/common/WordCloud.vue b/frontend/src/components/common/WordCloud.vue
@@ -58,8 +58,8 @@ export default {
       ]
     }
   },
-  created:{
-
+  created(){
+    console.log("wordcloud")
   },
   methods: {
     wordClickHandler(name, value, vm) {