adding colors to piechart

frontend/src/Apps/ResearcherProfile.vue

@@ -1,15 +1,17 @@
 <script setup>
-
+import { ref } from "vue";
-	 import {ref } from 'vue';
+import {w} from "../../dist/assets/_plugin-vue_export-helper-Bvj9NrzX.js";
-	 const input = ref('')
+const input = ref("");
+const statsOf = ref("");
+const statsBy = ref("");
 
 
-	 function inputKeyUp() {
+function inputKeyUp() {
-		 let filter,ul,li,a,txtValue
+  let filter, ul, li, a, txtValue;
   filter = input.value.toUpperCase();
-		 if(document.getElementById("myUL")!=null){
+  if (document.getElementById("myUL") != null) {
     ul = document.getElementById("myUL");
-			li = ul.getElementsByTagName('li');
+    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++) {
@@ -22,74 +24,75 @@
       }
     }
   }
-	 }
+}
 
-  const mydata = {
+const mydata = {
+  chart:null,
   options: {
+    backgroundColor:null,
     theme: "light2",
     animationEnabled: true,
-          title:{
+    title: {
-            text: "Visitors By Channel"
+      fontColor: "white",
+      text: statsOf.value + " By "+ statsBy.value,
     },
-          data: [{
+    data: [
+      {
         type: "pie",
         indexLabel: "{label} (#percent%)",
         yValueFormatString: "#,##0",
-            toolTipContent: "<span style='\"'color: {color};'\"'>{label}</span> {y}(#percent%)",
+        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 }
+          { label: "Others", y: 8492 },
-            ]
+        ],
-          }]
+      },
+    ],
   },
   styleOptions: {
     width: "100%",
-          height: "360px",
+    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="main">
     <div id="profilePicture">
-    <img src="/Clyde.png">
+      <img src="/Clyde.png" />
     </div>
     <div id="researcherInfos">
-    <div class="surrounded" >
+      <div class="surrounded">John Doe</div>
-      John Doe
+      <div class="surrounded">Orcid : 12144-2144-12336-B</div>
+      <div class="surrounded">Email : John.Doe@umons.ac.be</div>
 
-    </div>
+      <div class="surrounded">
-    <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" >
+      <div class="surrounded">Domain : physics, IT</div>
-      Domain : physics, IT
+      <div id="coAuthorList" class="surrounded">Co-authors list : D</div>
-    </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">
+        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>
@@ -97,20 +100,25 @@
         </select>
       </div>
       <div class="surrounded">
-      Class by: <select name="classedBy" id="classed-select">
+        Class by:
-      <option value="years">Years</option>
+        <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" @chart-ref="chartRef"/> 
+        <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">
+      <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>
@@ -122,13 +130,11 @@
         <li><a href="#">Christina</a></li>
         <li><a href="#">Cindy</a></li>
       </ul>
-
     </div>
-</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;
+  border: 2px solid black;
-  color:white;
+  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 */
+  border: 1px solid #ddd;
-  margin-top: -1px; /* Prevent double borders */
+  /* Add a border to all links */
-  background-color: #f6f6f6; /* Grey background color */
+  margin-top: -1px;
-  padding: 12px; /* Add some padding */
+  /* Prevent double borders */
-  text-decoration: none; /* Remove default text underline */
+  background-color: #f6f6f6;
-  font-size: 18px; /* Increase the font-size */
+  /* Grey background color */
-  color: black; /* Add a black text color */
+  padding: 12px;
-  display: block; /* Make it into a block element to fill the whole list */
+  /* 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>