From bd7d2c2d51b5b7cbe4fb54702ece6bf5071825a7 Mon Sep 17 00:00:00 2001
From: Bartha Maxime <231026@umons.ac.be>
Date: Thu, 4 Apr 2024 15:01:10 +0200
Subject: [PATCH] adding colors to piechart

---
 frontend/src/Apps/ResearcherProfile.vue | 284 +++++++++++++-----------
 1 file changed, 150 insertions(+), 134 deletions(-)

diff --git a/frontend/src/Apps/ResearcherProfile.vue b/frontend/src/Apps/ResearcherProfile.vue
index c61ad6d..89d3f58 100644
--- a/frontend/src/Apps/ResearcherProfile.vue
+++ b/frontend/src/Apps/ResearcherProfile.vue
@@ -1,134 +1,140 @@
 <script setup>
-
-	 import {ref } from 'vue';
-	 const input = ref('')
+import { ref } from "vue";
+import {w} from "../../dist/assets/_plugin-vue_export-helper-Bvj9NrzX.js";
+const input = ref("");
+const statsOf = ref("");
+const statsBy = ref("");
 
 
-	 function inputKeyUp() {
-		 let filter,ul,li,a,txtValue
-			filter = input.value.toUpperCase();
-		 if(document.getElementById("myUL")!=null){
-			ul = document.getElementById("myUL");
-			li = ul.getElementsByTagName('li');
+function inputKeyUp() {
+  let filter, ul, li, a, txtValue;
+  filter = input.value.toUpperCase();
+  if (document.getElementById("myUL") != null) {
+    ul = document.getElementById("myUL");
+    li = ul.getElementsByTagName("li");
 
-			// Loop through all list items, and hide those who don't match the search query
-			for (let i = 0; i < li.length; i++) {
-				a = li[i].getElementsByTagName("a")[0];
-				txtValue = a.textContent || a.innerText;
-				if (txtValue.toUpperCase().indexOf(filter) > -1) {
-					li[i].style.display = "";
-				} else {
-					li[i].style.display = "none";
-				}
-			}
-		 }
-	 }
-
-  const mydata = {
-          options: {
-          theme: "light2",
-          animationEnabled: true,
-          title:{
-            text: "Visitors By Channel"
-          },
-          data: [{
-            type: "pie",
-            indexLabel: "{label} (#percent%)",
-            yValueFormatString: "#,##0",
-            toolTipContent: "<span style='\"'color: {color};'\"'>{label}</span> {y}(#percent%)",
-            dataPoints: [
-              { label: "Organic Traffic", y: 130631 },
-              { label: "Direct", y: 28874 },
-              { label: "Referral", y: 15467 },
-              { label: "Social", y: 10543 },
-              { label: "Email", y: 5613 },
-              { label: "Others", y: 8492 }
-            ]
-          }]
-        },
-        styleOptions: {
-          width: "100%",
-          height: "360px",
-        }
+    // Loop through all list items, and hide those who don't match the search query
+    for (let i = 0; i < li.length; i++) {
+      a = li[i].getElementsByTagName("a")[0];
+      txtValue = a.textContent || a.innerText;
+      if (txtValue.toUpperCase().indexOf(filter) > -1) {
+        li[i].style.display = "";
+      } else {
+        li[i].style.display = "none";
       }
+    }
+  }
+}
 
+const mydata = {
+  chart:null,
+  options: {
+    backgroundColor:null,
+    theme: "light2",
+    animationEnabled: true,
+    title: {
+      fontColor: "white",
+      text: statsOf.value + " By "+ statsBy.value,
+    },
+    data: [
+      {
+        type: "pie",
+        indexLabel: "{label} (#percent%)",
+        yValueFormatString: "#,##0",
+        indexLabelFontColor: "white",
+        toolTipContent:
+          "<span style='\"'color: {color};'\"'>{label}</span> {y}(#percent%)",
+        dataPoints: [
+          { label: "Organic Traffic", y: 130631 },
+          { label: "Direct", y: 28874 },
+          { label: "Referral", y: 15467 },
+          { label: "Social", y: 10543 },
+          { label: "Email", y: 5613 },
+          { label: "Others", y: 8492 },
+        ],
+      },
+    ],
+  },
+  styleOptions: {
+    width: "100%",
+    height: "100%",
+  },
+  methods : {
+    chartInstance(chart){
+      console.log(chart)
+      this.chart = chart;
+    },
+    update(){
+      this.chart.render();
+      setTimeout(this.update, 1000);
+    }
+  }
+};
 </script>
 
 <template>
-<div id="main">
-  <div id="profilePicture">
-    <img src="/Clyde.png">
-  </div>
-  <div id="researcherInfos">
-    <div class="surrounded" >
-      John Doe
-
+  <div id="main">
+    <div id="profilePicture">
+      <img src="/Clyde.png" />
     </div>
-    <div class="surrounded" >
-      Orcid :
-      12144-2144-12336-B
+    <div id="researcherInfos">
+      <div class="surrounded">John Doe</div>
+      <div class="surrounded">Orcid : 12144-2144-12336-B</div>
+      <div class="surrounded">Email : John.Doe@umons.ac.be</div>
 
+      <div class="surrounded">
+        site :
+        <a href="http://localhost:5173" style="color: #007aff">here</a>
+      </div>
+      <div class="surrounded">Domain : physics, IT</div>
+      <div id="coAuthorList" class="surrounded">Co-authors list : D</div>
     </div>
-    <div class="surrounded" >
-      Email : John.Doe@umons.ac.be
-
-    </div>
-
-    <div class="surrounded" >
-      site :
-      <a href="http://localhost:5173" style="color: #007aff">here</a>
-
-    </div>
-    <div class="surrounded" >
-      Domain : physics, IT
-    </div>
-    <div id="coAuthorList" class="surrounded">
-     Co-authors list : D
-    </div>
-
-  </div>
-  <div id="stats">
-    <div class="surrounded">
-      Stat type : <select name="stats" id="stats-select">
-      <option value="views">Views</option>
-      <option value="co-authors">Co-authors</option>
-      <option value="articles">Articles</option>
-      <option value="language">Languages</option>
-    </select>
-    </div>
-    <div class="surrounded">
-      Class by: <select name="classedBy" id="classed-select">
-      <option value="years">Years</option>
-      <option value="months">Months</option>
-      <option value="topics">Topics</option>
-    </select>
-    </div>
-    <div id="statsPie">
-			  <CanvasJSChart :options="mydata.options" @chart-ref="chartRef"/> 
+    <div id="stats">
+      <div class="surrounded">
+        Stat type :
+        <select @change="mydata.methods.update()" name="stats" id="stats-select" v-model="statsOf">
+          <option value="views">Views</option>
+          <option value="co-authors">Co-authors</option>
+          <option value="articles">Articles</option>
+          <option value="language">Languages</option>
+        </select>
+      </div>
+      <div class="surrounded">
+        Class by:
+        <select @change="mydata.methods.update()"  name="classedBy" id="classed-select" v-model="statsBy">
+          <option selected="selected" value="years">Years</option>
+          <option value="months">Months</option>
+          <option value="topics">Topics</option>
+        </select>
+      </div>
+      <div id="statsPie">
+        <CanvasJSChart :options="mydata.options" :style="mydata.styleOptions" @chart-ref="mydata.methods.chartInstance(this)"/>
+      </div>
+    </div>
+    <div id="articles">
+      <input
+        type="text"
+        id="search-input"
+        :onkeyup="inputKeyUp()"
+        placeholder="search articles"
+        v-model="input"
+      />
+      <ul id="myUL">
+        <li><a href="#">Adele</a></li>
+        <li><a href="#">Agnes</a></li>
 
+        <li><a href="#">Billy</a></li>
+        <li><a href="#">Bob</a></li>
 
+        <li><a href="#">Calvin</a></li>
+        <li><a href="#">Christina</a></li>
+        <li><a href="#">Cindy</a></li>
+      </ul>
     </div>
   </div>
-  <div id="articles">
-    <input type="text" id="search-input" :onkeyup="inputKeyUp()" placeholder="search articles" v-model="input">
-    <ul id="myUL">
-      <li><a href="#">Adele</a></li>
-      <li><a href="#">Agnes</a></li>
-
-      <li><a href="#">Billy</a></li>
-      <li><a href="#">Bob</a></li>
-
-      <li><a href="#">Calvin</a></li>
-      <li><a href="#">Christina</a></li>
-      <li><a href="#">Cindy</a></li>
-    </ul>
-
-  </div>
-</div>
 </template>
 
 <style scoped>
-
 #main {
   display: grid;
   grid-template-columns: 22% auto;
@@ -137,31 +143,33 @@
   width: 100%;
 }
 
-
 #profilePicture {
   display: flex;
   justify-content: center;
 }
-#profilePicture img{
+
+#profilePicture img {
   align-self: center;
   justify-self: center;
-  width:60%;
+  width: 60%;
 }
 
 #researcherInfos {
   display: grid;
   grid-template-columns: auto auto auto;
   column-gap: 5px;
-  grid-template-rows: auto auto ;
+  grid-template-rows: auto auto;
 }
+
 .surrounded {
-  border:2px solid black;
-  color:white;
+  border: 2px solid black;
+  color: white;
   font-size: x-large;
   align-self: center;
   text-align: center;
   background-color: rgba(255, 255, 255, 0.09);
-  border-radius:20px;margin-bottom:10px;
+  border-radius: 20px;
+  margin-bottom: 10px;
 }
 
 .surrounded select {
@@ -169,46 +177,54 @@
   margin-bottom: 2px;
   border: 1px solid black;
   color: white;
-  background-color: rgb(255,255,255,0.1);
+  background-color: rgb(255, 255, 255, 0.1);
   font-size: large;
   align-self: center;
   text-align: center;
-
 }
 
-#stats {
+#statsPie {
 
 }
 
-
 #articles {
   background-color: orange;
 }
-#search-input{
+
+#search-input {
   width: 60%;
   font-size: 16px;
   padding: 12px 20px 12px 40px;
   border: 1px solid #ddd;
   margin-bottom: 12px;
 }
-#myUL{
+
+#myUL {
   list-style-type: none;
   padding: 0;
   margin: 0;
 }
 
 #myUL li a {
-  border: 1px solid #ddd; /* Add a border to all links */
-  margin-top: -1px; /* Prevent double borders */
-  background-color: #f6f6f6; /* Grey background color */
-  padding: 12px; /* Add some padding */
-  text-decoration: none; /* Remove default text underline */
-  font-size: 18px; /* Increase the font-size */
-  color: black; /* Add a black text color */
-  display: block; /* Make it into a block element to fill the whole list */
+  border: 1px solid #ddd;
+  /* Add a border to all links */
+  margin-top: -1px;
+  /* Prevent double borders */
+  background-color: #f6f6f6;
+  /* Grey background color */
+  padding: 12px;
+  /* Add some padding */
+  text-decoration: none;
+  /* Remove default text underline */
+  font-size: 18px;
+  /* Increase the font-size */
+  color: black;
+  /* Add a black text color */
+  display: block;
+  /* Make it into a block element to fill the whole list */
 }
+
 #myUL li a:hover:not(.header) {
   background-color: #eee;
 }
-
 </style>