adding the dependance

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "clyde",
       "version": "0.0.0",
       "dependencies": {
+        "@canvasjs/vue-charts": "^1.0.4",
         "vite-plugin-top-level-await": "^1.4.1",
         "vue": "^3.4.15",
         "vue3-toastify": "^0.2.1"
@@ -29,6 +30,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@canvasjs/charts": {
+      "version": "3.7.45",
+      "resolved": "https://registry.npmjs.org/@canvasjs/charts/-/charts-3.7.45.tgz",
+      "integrity": "sha512-FPMX8wn+PEHzAa/GLBsL5lWB81AzKZLw51t7SiSUjMbtUN5/OIrmDcwUTw+53/Bbdd9gm2LLmxAdZsQ75JI31g=="
+    },
+    "node_modules/@canvasjs/vue-charts": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@canvasjs/vue-charts/-/vue-charts-1.0.4.tgz",
+      "integrity": "sha512-PzOA8xeb/f68a39uoFZNn843dGPU36bsqmbO5DWjP7k6FwkK5AeGkYa/H3RHC02Xc6mG68vg9aFNj2Fyqhu4UQ==",
+      "dependencies": {
+        "@canvasjs/charts": "^3.7.5",
+        "vue": ">=3.0.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",

frontend/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@canvasjs/vue-charts": "^1.0.4",
     "vite-plugin-top-level-await": "^1.4.1",
     "vue": "^3.4.15",
     "vue3-toastify": "^0.2.1"

frontend/src/Apps/ResearcherProfile.vue

@@ -1,5 +1,33 @@
 <script setup>
+  import CanvasJSChart from "@canvasjs/vue-charts";
 
+  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"
+  }
+  }
 
 
 </script>
@@ -52,7 +80,9 @@
       <option value="months">Months</option>
       <option value="topics">Topics</option>
     </select>
-
+    </div>
+    <div id="statsPie">
+      <CanvasJSChart :data="chartData"/>
 
 
 

frontend/src/main.js

@@ -4,5 +4,8 @@ import 'https://kit.fontawesome.com/fb3bbd0a95.js'
 
 import { createApp } from 'vue'
 import App from './App.vue'
+import CanvasJSChart from '@canvasjs/vue-charts';
 
-createApp(App).mount('#app')
+const app = createApp(App);
+app.use(CanvasJSChart);
+app.mount('#app');