:recycle: moving spidergraph to passions card | better chat button integration

frontend/src/components/ProfileCard.vue

 <template lang="pug">
-w-card.profile-card-list--card.xs12.pa12
+w-card.profile-card-list--card.xs12
     header.xs12.w-flex.column.center
         NamePlate(
             :is-list='isList'
             :role='card.role'
         )
 
-        w-button.text-upper.xs12.pa6(v-if='isPaired && !isList')
-            w-icon.mr1(xl) mdi mdi-chat
-            | start chat
-
         template(v-if='!isList')
-            SummaryBar(:is-tab='isPaired' :tab-content='card.summary')
+            w-button.text-upper.xs12.pa6(v-if='currentTab == 0 && isPaired')
+                w-icon.mr1(xl) mdi mdi-chat
+                | start chat
+
+            SummaryBar(
+                :aspects='aspects'
+                :is-tab='isPaired'
+                :tab-content='card.summary'
+                @tab-change='onTab'
+            )
             TagList(v-if='!isPaired || isList')
 
     article.xs12.w-flex.column.justify-space-between
             v-if='!isPaired || isList'
         )
 
-    SpiderChart
-
-    footer(v-if='!isList && !isPaired')
-        .pa12
+    footer
+        .pa12(v-if='!isPaired && !isList')
             p {{ card.summary.about.tab }}
         PairingButton(@pair='onPair' @pass='onPass' v-if='!isPaired')
+        w-button.text-upper.xs12.pa6(v-else-if='currentTab != 0')
+            w-icon.mr1(xl) mdi mdi-chat
+            | start chat
 </template>
 
 <script setup>
 import AspectBar from './AspectBar.vue'
 import SummaryBar from './SummaryBar.vue'
 import TagList from './TagList.vue'
-import SpiderChart from './SpiderChart.vue'
 import PairingButton from './PairingButton.vue'
 
 const router = useRouter()
     },
 })
 
+/**
+ * Track tab state for conditional rendering
+ */
+const currentTab = ref(0)
+const onTab = tabIndex => {
+    if (currentTab.value == tabIndex) return
+    currentTab.value = tabIndex
+}
+
 /**
  * Attempt to pair with target profile
  * Creates a grouping, and a membership

frontend/src/components/SpiderChart.vue

 <template lang="pug">
-.spider-chart
-    canvas(id='spider-chart-canvas')
+.spider-chart.w-flex.pt6.pb6
+    canvas#spider-chart-canvas
 </template>
-<script>
-import {Chart, registerables} from 'chart.js'
-Chart.register(...registerables)
 
-const data = {
-    labels: [
-        'Resourceful',
-        'Improv',
-        'Dynamic',
-        'Precise',
-        'Methodical',
-        'Ordered'
-    ],
-    datasets:[{
-        label: 'Lucy',
-        data: [5.7,5.2,4.8,5.2,4.9,4.9],
-        fill: true,
-        backgroundColor: 'rgba(242, 205, 92, 0.3)',
-        borderColor: '#F2CD5C',
-        borderWidth: '1px',
-    }, {
-        label: 'Role',
-        data: [5.3,4.8,5.7,4.8,5.6,4.8],
-        fill: true,
-        backgroundColor: 'rgba(3, 136, 166, 0.30)',
-        borderColor: '#0388A6',
-        borderWidth: '1px',
-    }]
+<script setup>
+import { Chart, registerables } from 'chart.js'
+import { onMounted } from 'vue'
+
+const props = defineProps({
+    profileName: {
+        required: true,
+        type: String,
+    },
+    profileData: {
+        required: true,
+        type: Object,
+    },
+    roleData: {
+        required: true,
+        type: Object,
+    },
+    labels: {
+        required: true,
+        type: Array,
+    },
+})
+
+const chartStyleDefaults = {
+    borderWidth: '1px',
+    fill: true,
+}
+const profile = {
+    label: props.profileName,
+    data: props.profileData,
+    backgroundColor: 'rgba(242, 205, 92, 0.3)',
+    borderColor: '#F2CD5C',
+    ...chartStyleDefaults,
+}
+const role = {
+    label: 'Role',
+    data: props.roleData,
+    backgroundColor: 'rgba(3, 136, 166, 0.30)',
+    borderColor: '#0388A6',
+    ...chartStyleDefaults,
 }
 
-const config = {
-    type: 'radar',
-    data: data,
-    options: {
-        plugins:{
-            legend: {
-                position: 'bottom',
-                labels:{
-                    color: '#FFFFFF',
-                    boxWidth: 10,
-                }
+const options = {
+    plugins: {
+        legend: {
+            position: 'bottom',
+            labels: {
+                color: '#FFFFFF',
+                boxWidth: 10,
+            },
+        },
+    },
+    scales: {
+        r: {
+            angleLines: {
+                color: '#FFFFFF',
+            },
+            grid: {
+                color: '#EAF0F4',
+                lineWidth: 1,
+            },
+            pointLabels: {
+                color: '#FFFFFF',
+            },
+            suggestedMax: 6,
+            ticks: {
+                display: false,
+                stepSize: 1.6,
             },
         },
-        scales:{
-            r:{
-                angleLines:{
-                    color: '#FFFFFF'
-                },
-                grid:{
-                    color: '#EAF0F4',
-                    lineWidth: 1,
-                },
-                pointLabels:{
-                    color: '#FFFFFF',
-                },
-                suggestedMax: 6,
-                ticks: {
-                    display: false,
-                    stepSize: 1.6,
-                },
-            }
-        }
-    }
-}
-
-export default{
-    name:'SpiderChart',
-    data(){
-        return {
-            spiderChartData:config
-        }
     },
-    mounted() {
-        const ctx = document.getElementById('spider-chart-canvas');
-        new Chart(ctx, this.spiderChartData);
-    }
 }
+
+onMounted(() => {
+    Chart.register(...registerables)
+    const ctx = document.getElementById('spider-chart-canvas')
+    new Chart(ctx, {
+        type: 'radar',
+        data: {
+            labels: props.labels,
+            datasets: [profile, role],
+        },
+        options,
+    })
+})
 </script>
-<style lang="sass">
-.spider-chart
-    display: flex
-    margin: 3vw auto
-</style>

frontend/src/components/SummaryBar.vue

 <template lang="pug">
 section.w-flex.column.pb5
     nav.fill-width.w-flex.column.justify-space-between
-
         // Tabbed Layout
-        w-tabs(v-if="isTab" :items="Object.keys(tabContent)" center fill-bar)
-            template(#item-title="{ item }")
+        w-tabs(
+            :items='Object.keys(tabContent)'
+            @input='onTabChanged'
+            center
+            fill-bar
+            v-if='isTab'
+        )
+            template(#item-title='{ item }')
                 .w-flex.column.justify-start
-                    p(v-if="tabContent[item].matchPerc") {{ tabContent[item].matchPerc }}%
+                    p(v-if='tabContent[item].matchPerc') {{ tabContent[item].matchPerc }}%
                     p(v-else) &nbsp;
                     p {{ item }}
             // About Tab
-            template(#item-content.1="{ item }")
+            template(#item-content.1='{ item }')
                 .tab--about
                     p {{ tabContent[item].tab }}
                     br
                     p {{ tabContent[item].tab }}
                     br
                     hr
-            
+
             // Passion Tab
-            template(#item-content.2="{ item }")
+            template(#item-content.2='{ item }')
                 .tab--passion
                     p {{ tabContent[item].tab }}
+                    SpiderChart(
+                        :labels='aspects.map(label => label.name)'
+                        :profile-data='[5.7, 5.2, 4.8, 5.2, 4.9, 4.9]'
+                        :role-data='[5.3, 4.8, 5.7, 4.8, 5.6, 4.8]'
+                        profile-name='lucy'
+                        v-if='isTab'
+                    )
 
             // Aspirations Tab
-            template(#item-content.3="{ item }")
+            template(#item-content.3='{ item }')
                 .tab--aspirations
                     p {{ tabContent[item].tab }}
 
             // Skills Tab
-            template(#item-content.4="{ item }")
+            template(#item-content.4='{ item }')
                 .tab--skills
                     p {{ tabContent[item].tab }}
 
         // Untabbed Layout
         ul.w-flex.row.justify-space-between(v-else)
-            template(v-for="(item, index) in Object.keys(tabContent)" :key="index")
-                li.w-flex.row(v-if="item !== 'about'")
-                    w-icon(xl).mr1 mdi mdi-heart
+            template(
+                :key='index'
+                v-for='(item, index) in Object.keys(tabContent)'
+            )
+                li.w-flex.row(v-if='item !== "about"')
+                    w-icon.mr1(xl) mdi mdi-heart
                     .w-flex.column.justify-start
                         p {{ tabContent[item].matchPerc }}%
                         p {{ item }}
 </template>
 
 <script>
+import SpiderChart from './SpiderChart.vue'
+
 export default {
+    components: { SpiderChart },
     props: {
+        aspects: {
+            required: true,
+            type: Array,
+        },
         tabContent: {
             required: true,
             type: Object,
             default: true,
         },
     },
+    emits: ['tab-change'],
+    methods: {
+        onTabChanged(tabs) {
+            this.$emit('tab-change', tabs)
+        },
+    },
 }
 </script>