frontend/src/Apps/ResearcherProfile.vue

@@ -1,34 +1,54 @@
 <script setup>
-  import CanvasJSChart from "@canvasjs/vue-charts";
+ function inputKeyUp() {
+    let input, filter, ul, li, a, i, txtValue;
+    input = document.getElementById('search-input');
+    filter = input.value.toUpperCase();
+    ul = document.getElementById("myUL");
+    li = ul.getElementsByTagName('li');
 
-  const chartData ={
-      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 (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 = {
+    data() {
+        return {
+          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"
+        }
+      }
+    }
+  }
 
 </script>
 
@@ -82,14 +102,24 @@
     </select>
     </div>
     <div id="statsPie">
-      <CanvasJSChart :data="chartData"/>
-
+			  <!--  <CanvasJSChart :options="mydata" @chart-ref="chartRef"/> !-->
 
 
     </div>
-
   </div>
   <div id="articles">
+    <input type="text" id="search-input" @onkeyup="inputKeyUp" placeholder="search articles">
+    <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>
@@ -152,5 +182,31 @@
 #articles {
   background-color: orange;
 }
+#search-input{
+  width: 60%;
+  font-size: 16px;
+  padding: 12px 20px 12px 40px;
+  border: 1px solid #ddd;
+  margin-bottom: 12px;
+}
+#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 */
+}
+#myUL li a:hover:not(.header) {
+  background-color: #eee;
+}
 
 </style>