Bladeren bron

:construction: WIP dynamic spider chart

tags/0.0.3^2
juancarbajal98 3 jaren geleden
bovenliggende
commit
333896c5c9
3 gewijzigde bestanden met toevoegingen van 29 en 20 verwijderingen
  1. 14
    13
      frontend/src/components/SummaryBar.vue
  2. 12
    6
      frontend/src/entities/card/card.js
  3. 3
    1
      frontend/src/views/HomeView.vue

+ 14
- 13
frontend/src/components/SummaryBar.vue Bestand weergeven

30
                     p {{ tabContent[item].tab }}
30
                     p {{ tabContent[item].tab }}
31
                     SpiderChart(
31
                     SpiderChart(
32
                         :labels='aspects.map(label => label.name)'
32
                         :labels='aspects.map(label => label.name)'
33
-                        :profile-data='aspects.map(data => data.percentage)'
34
-                        :target-data='targetScore'
33
+                        :profile-data='aspects.map(data => data.percentage * 10)'
35
                         :profile-name='name'
34
                         :profile-name='name'
35
+                        :target-data='targetScore'
36
                         v-if='isTab'
36
                         v-if='isTab'
37
                     )
37
                     )
38
 
38
 
75
             required: true,
75
             required: true,
76
             type: Object,
76
             type: Object,
77
         },
77
         },
78
-        name:{
79
-            required:true,
80
-            type: String
78
+        name: {
79
+            required: true,
80
+            type: String,
81
         },
81
         },
82
         isTab: {
82
         isTab: {
83
             required: false,
83
             required: false,
92
     },
92
     },
93
     emits: ['tab-change'],
93
     emits: ['tab-change'],
94
     computed: {
94
     computed: {
95
-        targetScore(){
96
-            try{
97
-                let aspectResponses = currentProfile._profile.responses.filter(r => [1,2,3,4,5,6].indexOf(r.response_key_id) !== -1)
98
-                return aspectResponses.map(r => Number(r.val)) 
99
-            }
100
-            catch(e){
95
+        targetScore() {
96
+            try {
97
+                let aspectResponses = currentProfile._profile.responses.filter(
98
+                    r => [1, 2, 3, 4, 5, 6].indexOf(r.response_key_id) !== -1,
99
+                )
100
+                return aspectResponses.map(r => Number(r.val))
101
+            } catch (e) {
101
                 console.warn('error: No aspect responses for current profile.')
102
                 console.warn('error: No aspect responses for current profile.')
102
-                return [1,1,1,1,1,1]
103
+                return [1, 1, 1, 1, 1, 1]
103
             }
104
             }
104
-        }
105
+        },
105
     },
106
     },
106
     methods: {
107
     methods: {
107
         onTabChanged(tabs) {
108
         onTabChanged(tabs) {

+ 12
- 6
frontend/src/entities/card/card.js Bestand weergeven

1
 /** @module card/card */
1
 /** @module card/card */
2
-import { aspectsArr } from "../../utils/lang.js"
2
+import { aspectsArr } from '../../utils/lang.js'
3
 
3
 
4
 const DEFAULT_ABOUT =
4
 const DEFAULT_ABOUT =
5
     '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.'
5
     '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
     c.locale = `${profile.city}, ${profile.state}`
134
     c.locale = `${profile.city}, ${profile.state}`
135
     c.email = profile.user_email
135
     c.email = profile.user_email
136
 
136
 
137
-    let aspectResponses = profile?.responses.filter(r => aspectsArr.indexOf(r.response_key_id) !== -1)
138
-    if(aspectResponses.length){ // if user has responses for aspects we overwrite default percentages
137
+    let aspectResponses = profile?.responses.filter(
138
+        r => aspectsArr.indexOf(r.response_key_id) !== -1,
139
+    )
140
+    if (aspectResponses.length) {
141
+        // if user has responses for aspects we overwrite default percentages
139
         c.aspects.map(a => {
142
         c.aspects.map(a => {
140
-            a.percentage = Number(aspectResponses.find(r => responseKeyIdToAspectName[r.response_key_id] == a.name).val )
141
-            return a 
143
+            a.percentage = Number(
144
+                aspectResponses.find(
145
+                    r => responseKeyIdToAspectName[r.response_key_id] == a.name,
146
+                ).val,
147
+            )
148
+            return a
142
         })
149
         })
143
     }
150
     }
144
-
145
     // TODO: delete me later
151
     // TODO: delete me later
146
     if (profile.profile_description) {
152
     if (profile.profile_description) {
147
         c.summary.updateTab('about', profile.profile_description)
153
         c.summary.updateTab('about', profile.profile_description)

+ 3
- 1
frontend/src/views/HomeView.vue Bestand weergeven

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

Laden…
Annuleren
Opslaan