:construction: WIP dynamic spider chart

frontend/src/components/SummaryBar.vue

@@ -30,9 +30,9 @@ section.w-flex.column.pb5
                     p {{ tabContent[item].tab }}
                     SpiderChart(
                         :labels='aspects.map(label => label.name)'
-                        :profile-data='aspects.map(data => data.percentage)'
-                        :target-data='targetScore'
+                        :profile-data='aspects.map(data => data.percentage * 10)'
                         :profile-name='name'
+                        :target-data='targetScore'
                         v-if='isTab'
                     )
 
@@ -88,9 +88,9 @@ export default {
             required: true,
             type: Object,
         },
-        name:{
-            required:true,
-            type: String
+        name: {
+            required: true,
+            type: String,
         },
         isTab: {
             required: false,
@@ -136,16 +136,17 @@ export default {
         },
     }),
     computed: {
-        targetScore(){
-            try{
-                let aspectResponses = currentProfile._profile.responses.filter(r => [1,2,3,4,5,6].indexOf(r.response_key_id) !== -1)
-                return aspectResponses.map(r => Number(r.val)) 
-            }
-            catch(e){
+        targetScore() {
+            try {
+                let aspectResponses = currentProfile._profile.responses.filter(
+                    r => [1, 2, 3, 4, 5, 6].indexOf(r.response_key_id) !== -1,
+                )
+                return aspectResponses.map(r => Number(r.val))
+            } catch (e) {
                 console.warn('error: No aspect responses for current profile.')
-                return [1,1,1,1,1,1]
+                return [1, 1, 1, 1, 1, 1]
             }
-        }
+        },
     },
     methods: {
         onTabChanged(tabs) {

frontend/src/entities/card/card.js

@@ -1,5 +1,5 @@
 /** @module card/card */
-import { aspectsArr } from "../../utils/lang.js"
+import { aspectsArr } from '../../utils/lang.js'
 
 const DEFAULT_ABOUT =
     'Hello! My name is L.L. and I am a nurse from New York. I have been in the healthcare industry for over 6 years.'
@@ -134,14 +134,20 @@ const makeCardFromProfile = profile => {
     c.locale = `${profile.city}, ${profile.state}`
     c.email = profile.user_email
 
-    let aspectResponses = profile?.responses.filter(r => aspectsArr.indexOf(r.response_key_id) !== -1)
-    if(aspectResponses.length){ // if user has responses for aspects we overwrite default percentages
+    let aspectResponses = profile?.responses.filter(
+        r => aspectsArr.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 = Number(aspectResponses.find(r => responseKeyIdToAspectName[r.response_key_id] == a.name).val )
-            return a 
+            a.percentage = Number(
+                aspectResponses.find(
+                    r => responseKeyIdToAspectName[r.response_key_id] == a.name,
+                ).val,
+            )
+            return a
         })
     }
-
     // TODO: delete me later
     if (profile.profile_description) {
         c.summary.updateTab('about', profile.profile_description)

frontend/src/views/HomeView.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
 main.view--home
-    article.w-flex.sm-column.md-row.align-center
+    p {{cP._profile.user_name}}
+    article.w-flex.column.align-center
         template(v-if='isLoading')
             w-spinner(bounce)
 
@@ -70,6 +71,7 @@ export default {
         }
     },
     computed: {
+        cP() {return currentProfile},
         cards() {
             let initialCards = currentProfile.queue.map(qProfile =>
                 convertToCard(qProfile),