frontend/src/Apps/ScientificPublications/ResearcherProfile.vue

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