:construction: Dynamic chart data pending a new backend route

frontend/src/components/SummaryBar.vue

                     p {{ tabContent[item].tab }}
                     SpiderChart(
                         :labels='aspects.map(label => label.name)'
-                        :profile-data='aspects.map(data => data.percentage * 10)'
+                        :profile-data='profileScore'
                         :target-data='targetScore'
                         profile-name='lucy'
                         v-if='isTab'
 
 <script>
 import SpiderChart from './SpiderChart.vue'
+import { currentProfile } from '../services'
 
 export default {
     components: { SpiderChart },
         },
     },
     emits: ['tab-change'],
-    data: () => ({
-        // profileScore: [5.7, 5.2, 4.8, 5.2, 4.9, 4.9], // lucy 
-        targetScore: [5.3, 4.8, 5.7, 4.8, 5.6, 4.8], // Role
-    }),
+    // data: () => ({
+    //     profileScore: [5.7, 5.2, 4.8, 5.2, 4.9, 4.9], // lucy 
+    //     targetScore: [5.3, 4.8, 5.7, 4.8, 5.6, 4.8], // Role
+    // }),
+    computed: {
+        profileScore(){ // take from built up aspects object
+            return this.aspects.map(data => data.percentage * .1) 
+        },
+        targetScore(){ // take directly from currentUser profile
+            let aspectResponses = currentProfile.responses.filter(r => [1,2,3,4,5,6].indexOf(r.response_key_id) !== -1)
+            return aspectResponses.map(r => r.val * .1)
+        }
+    },
     methods: {
         onTabChanged(tabs) {
             this.$emit('tab-change', tabs)

frontend/src/entities/card/card.js

         this.percentage = percentage
     }
 }
-const cardAspects = [
+const cardAspects = [ // TODO these aspects don't align with response_keys DB table
     new Aspect({
         name: 'creativity',
         labels: ['creative', 'methodical'],
     }),
 ]
 
+const responseKeyIdToAspectName = {
+    1: 'vision',
+    2: 'creativity',
+    3: 'dynamism',
+    4: 'precision',
+    5: 'focus',
+    6: 'attention',
+}
+
 /**
  * Class representing a profile card
  * NOT to be confused with a profile
 
 
     console.log(`RESP: ${profile?.responses}`)
-    let aspectResponses = profile?.responses.filter(r => r.response_id == 'aspect')
+    let aspectResponses = profile?.responses.filter(r => [1,2,3,4,5,6].indexOf(r.response_key_id) !== -1)
     if(aspectResponses.length){ // if user has responses for aspects we overwrite default percentages
         c.aspects.map(a => {
-            a.percentage = aspectResponses.find(r => r.response_key_id == a.name).val // depends on DB structure
+            a.percentage = aspectResponses.find(r => responseKeyIdToAspectName[r.response_key_id] == a.name).val 
             return a 
         })
     }

frontend/src/services/survey.service.js

 }
 
 const fetchResponsesByProfileId = async profileId => {
-    return await db.get(`/profile/${profileId}/responses`)
+    return await db.get(`/profile/${profileId}/responses`) // TODO write on backend, does not exist
 }
 
 export {

frontend/src/views/HomeView.vue

 <template lang="pug">
 main.view--home
-    p {{cP._profile.user_name}}
     article.w-flex.column.align-center
         template(v-if='isLoading')
             w-spinner(bounce)
     },
     mixins: [mixins.profileMixin],
     computed: {
-        cP() {return currentProfile},
         cards() {
             return currentProfile.queue.map(qProfile => convertToCard(qProfile))
         },