<script setup> import { ref } from "vue"; 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"); // 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){ mydata.chart = chart }, update(){ mydata.options.title = { fontColor: "white", text: statsOf.value + " By "+ statsBy.value, } mydata.chart.render() console.log(mydata.options.title) 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> <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 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"/> </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; grid-template-rows: 26% auto; height: 100%; width: 100%; } #profilePicture { display: flex; justify-content: center; } #profilePicture img { align-self: center; justify-self: center; width: 60%; } #researcherInfos { display: grid; grid-template-columns: auto auto auto; column-gap: 5px; grid-template-rows: auto auto; } .surrounded { 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; } .surrounded select { margin-top: 2px; margin-bottom: 2px; border: 1px solid black; color: white; background-color: rgb(255, 255, 255, 0.1); font-size: large; align-self: center; text-align: center; } #statsPie { } #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>