frontend/src/Apps/ScientificPublications/ResearcherProfile.vue

@@ -6,10 +6,11 @@
 ----------------------------------------------------->
 
 <script setup>
-import { ref } from "vue";
+import { ref, reactive } from "vue";
 const input = ref("");
 const statsOf = ref("");
 const statsBy = ref("");
+let chart;
 
 const jsonMockViewsByYears= [
   {label: "2004", y:4},
@@ -39,9 +40,7 @@ function inputKeyUp() {
   }
 }
 
-const mydata = {
-  chart:null,
-  options: {
+const options = reactive({
     backgroundColor:null,
     theme: "light2",
     animationEnabled: true,
@@ -57,33 +56,21 @@ const mydata = {
         indexLabelFontColor: "white",
         toolTipContent:
           "<span style='\"'color: {color};'\"'>{label}</span> {y}(#percent%)",
-      },
-    ],
-  },
-  styleOptions: {
-    width: "100%",
-    height: "100%",
-  },
-  methods : {
-    chartInstance(chart){
-      mydata.chart = chart;
-    },
-    update(){
-      mydata.options.title = {
+      }]
+	});
+
+function update(){
+      options.title = {
         fontColor: "white",
         text: statsOf.value + " By "+ statsBy.value,
       }
       if (statsOf.value === "views" && statsBy.value === "years") {
-        console.log("yeasear")
-        mydata.options.data[0].dataPoints = jsonMockViewsByYears;
+        options.data[0].dataPoints = jsonMockViewsByYears;
       }
 
-      console.log(mydata.options.data)
-      mydata.options.title.text = statsOf.value + " By "+ statsBy.value;
-      mydata.chart.render()
+      options.title.text = statsOf.value + " By "+ statsBy.value;
+      chart.render()
     }
-  }
-};
 </script>
 
 <template>
@@ -106,7 +93,7 @@ const mydata = {
     <div id="stats">
       <div class="surrounded">
         Stat type :
-        <select @change="mydata.methods.update()" name="stats" id="stats-select" v-model="statsOf">
+        <select @change="update()" id="stats-select" v-model="statsOf">
           <option value="views">Views</option>
           <option value="co-authors">Co-authors</option>
           <option value="articles">Articles</option>
@@ -115,21 +102,21 @@ const mydata = {
       </div>
       <div class="surrounded">
         Class by:
-        <select @change="mydata.methods.update()"  name="classedBy" id="classed-select" v-model="statsBy">
+        <select @change="update()" 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"/>
+		  <CanvasJSChart :options="options" id=chart @chart-ref="c => chart = c "/>
       </div>
     </div>
     <div id="articles">
       <input
         type="text"
         id="search-input"
-        :onkeyup="inputKeyUp()"
+        @keyup="inputKeyUp()"
         placeholder="search articles"
         v-model="input"
       />
@@ -241,4 +228,9 @@ const mydata = {
 #myUL li a:hover:not(.header) {
   background-color: #eee;
 }
+
+#Chart{
+    width: "100%";
+    height: "100%";
+}
 </style>