spider graph with chart.js

frontend/package-lock.json

@@ -8,6 +8,7 @@
             "name": "vite-project",
             "version": "0.0.0",
             "dependencies": {
+                "chart.js": "^3.9.1",
                 "joi": "^17.6.0",
                 "pubnub": "^5.0.0",
                 "vue": "^3.2.31",
@@ -1288,6 +1289,11 @@
                 "is-regex": "^1.0.3"
             }
         },
+        "node_modules/chart.js": {
+            "version": "3.9.1",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
+            "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
+        },
         "node_modules/chokidar": {
             "version": "3.5.3",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -6918,6 +6924,11 @@
                 "is-regex": "^1.0.3"
             }
         },
+        "chart.js": {
+            "version": "3.9.1",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
+            "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
+        },
         "chokidar": {
             "version": "3.5.3",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",

frontend/package.json

@@ -12,6 +12,7 @@
         "test": "ava"
     },
     "dependencies": {
+        "chart.js": "^3.9.1",
         "joi": "^17.6.0",
         "pubnub": "^5.0.0",
         "vue": "^3.2.31",

frontend/src/components/SpiderChart.vue

@@ -0,0 +1,65 @@
+<template lang="pug">
+div
+    canvas(id='spiderChart')
+</template>
+<script>
+import {Chart, registerables} from 'chart.js'
+Chart.register(...registerables)
+
+const data = {
+    labels: [
+        'Resourceful',
+        'Improv',
+        'Dynamic',
+        'Precise',
+        'Methodical',
+        'Ordered'
+    ],
+    datasets:[{
+        label: 'First dataset',
+        fill: true,
+        backgroundColor: 'rgb(255, 33, 33)',
+        borderColor: 'rgb(255, 99, 132)',
+        data: [1,2,3,4,5,6],
+        pointBackgroundColor: 'rgb(255, 99, 132)',
+        pointBorderColor: '#fff',
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderColor: 'rgb(255, 99, 132)'
+    }, {
+        label: 'My Second Dataset',
+        data: [6,5,4,3,2,1],
+        fill: true,
+        backgroundColor: 'rgba(54, 162, 235, 0.2)',
+        borderColor: 'rgb(54, 162, 235)',
+        pointBackgroundColor: 'rgb(54, 162, 235)',
+        pointBorderColor: '#fff',
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderColor: 'rgb(54, 162, 235)'
+    }]
+}
+
+const config = {
+    type: 'radar',
+    data: data,
+    options: {
+        elements:{
+            line:{
+                borderWidth: 3
+            }
+        }
+    }
+}
+
+export default{
+    name:'SpiderChart',
+    data(){
+        return {
+            spiderChartData:config
+        }
+    },
+    mounted() {
+        const ctx = document.getElementById('spiderChart');
+        new Chart(ctx, this.spiderChartData);
+    }
+}
+</script>

frontend/src/views/HomeView.vue

@@ -1,35 +1,35 @@
 <template lang="pug">
-main.view--home
-    
-    article(v-if='cards.length && !loading')
-        ProfileCardList(:pid='pid' :cards='cards' @reload='getCards')
+SpiderChart
+//- main.view--home
+    //- article(v-if='cards.length && !loading')
+    //-     ProfileCardList(:pid='pid' :cards='cards' @reload='getCards')
 
-    p(v-else-if='cards.length === 0') No profiles in match_queue.
-    w-spinner(v-else bounce)
+    //- p(v-else-if='cards.length === 0') No profiles in match_queue.
+    //- w-spinner(v-else bounce)
 
-    footer
-        w-form
-            w-input.mb2(
-                inner-icon-left='mdi mdi-account'
-                label='Full Name'
-                label-position='inside'
-                outline
-            )
-            w-input.mb2(
-                inner-icon-left='mdi mdi-mail'
-                label='E-mail'
-                label-position='inside'
-                outline
-            )
-            w-input.mb2(
-                inner-icon-left='mdi mdi-lock'
-                label='Password'
-                label-position='inside'
-                outline
-                type='password'
-            )
+    //- footer
+    //-     w-form
+    //-         w-input.mb2(
+    //-             inner-icon-left='mdi mdi-account'
+    //-             label='Full Name'
+    //-             label-position='inside'
+    //-             outline
+    //-         )
+    //-         w-input.mb2(
+    //-             inner-icon-left='mdi mdi-mail'
+    //-             label='E-mail'
+    //-             label-position='inside'
+    //-             outline
+    //-         )
+    //-         w-input.mb2(
+    //-             inner-icon-left='mdi mdi-lock'
+    //-             label='Password'
+    //-             label-position='inside'
+    //-             outline
+    //-             type='password'
+    //-         )
 
-    MainNav
+    //- MainNav
 </template>
 
 <script>
@@ -39,6 +39,7 @@ import TagList from '../components/TagList.vue'
 import AspectBar from '../components/AspectBar.vue'
 import SummaryBar from '../components/SummaryBar.vue'
 import PairingButton from '../components/PairingButton.vue'
+import SpiderChart from '../components/SpiderChart.vue'
 
 import { Card } from '../entities'
 
@@ -86,6 +87,7 @@ export default {
         TagList,
         SummaryBar,
         PairingButton,
+        SpiderChart,
     },
     mixins: [mixins.pidMixin, mixins.cardMixin],
     methods: {