Add performance dashboard frontend interface (#81)

* Added Professional development * Rename namespace to correspond with coding guidelines * Separate records into different files * Rename Value to Name to correspond with domain * Rename Value to Level to correspond with domain * Add professional skills to domain * Add short name to architectural layer and professional skills * Rename properties in competence profile random data filler * Rename CompetenceProfileOutcome to ProfessionalTaskOutcome * Add Professional skill outcome to competence profile * Use singular name * Use id references instead of name values * Use type keyword * Add submissions from all courses from student to competence profile transformation * Fix merge issues * Add task and skill outcomes to competence profile return type * Fetch terms from canvas * Remove redundant imports * Change default application url * Prevent browser from launching on every restart * Cleanup code * V0.1 * Defining colors for elements * Remove obsolete styling * Update pnpm lock file * Add Vue router * Resolve ESLint warnings * Add authorization view and controller * Use controller templating for route * A lot of stuff * A lot of stuff * Working * Set it all to vue 3 supported format * Fix import path * Add CORS policy * Realtime user data * Bugfixes * Add filter enrolment term function * Add terms to competence profile * Remove unused terms function * Added filter on professional outcomes and sorting * Removed unused things * Realtime user data * Add terms to competence profile * Cleanup code and improve competence profile converter * Filter on PostedAt value * Added frontend grid & colors --------- Co-authored-by: Tara <tarawillink@gmail.com> Co-authored-by: Jelle Maas <typiqally@gmail.com> Co-authored-by: Sven <svenroermond@hotmail.com> Co-authored-by: Eline <elinevooijs@outlook.com>
Typiqally · Apr 14, 2023 · cd9ed69 · cd9ed69
1 parent 7a38593
commit cd9ed69
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 42 deletions.
diff --git a/Epsilon.Host.Frontend/Colors layers.md b/Epsilon.Host.Frontend/Colors layers.md
@@ -20,7 +20,7 @@
 # Mastery Levels
 | Name | Color   |
 |------|---------|
-| 1    | #00B0F0 |
-| 2    | #00B050 |
-| 3    | #FFFC00 |
-| 4    |         |
+| 1    | #8EAADB |
+| 2    | #A8D08D |
+| 3    | #FFD965 |
+| 4    | #B15EB2 |
diff --git a/Epsilon.Host.Frontend/src/components/Competance/KpiMatrix.vue b/Epsilon.Host.Frontend/src/components/Competance/KpiMatrix.vue
@@ -80,9 +80,7 @@ for (const ac in props.domain.activities) {
 }
 
 for (const i in props.domain.architectureLayers) {
-    console.log(i)
     const ar = props.domain.architectureLayers[i]
-    console.log(ar)
     series.push({
         name: ar.name,
         color: ar.color,

diff --git a/Epsilon.Host.Frontend/src/components/Competance/KpiTable.vue b/Epsilon.Host.Frontend/src/components/Competance/KpiTable.vue
@@ -1,19 +1,28 @@
 <template>
-  <table v-if="!!props.data">
+  <table
+    v-if="!!props.data"
+    class="kpitable"
+  >
     <thead>
       <tr>
         <td />
-        <th v-for="activity of props.domain.activities">
+        <th
+          v-for="activity of props.domain.activities"
+          class="kpitable__header kpitable__header-column"
+        >
           {{ activity.name }}
         </th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="(architectureLayer , i) of props.domain.architectureLayers">
-        <th>{{ architectureLayer.name }}</th>
+        <th class="kpitable__header kpitable__header-row">
+          {{ architectureLayer.name }}
+        </th>
         <td
           v-for="(_, x) of props.domain.activities"
           :style="{backgroundColor: getCellColor(i, x)?.color}"
+          class="kpitable__data"
         >
           {{ getKpis(i, x).length }}
         </td>
@@ -45,28 +54,31 @@ function getCellColor(arId: string, acId: string): MasteryLevel | undefined {
 </script>
 
 <style>
-tbody tr th {
-    text-align: left;
-}
-
-tbody tr td {
-    padding: 8px;
-    min-width: 100px;
-}
-
-tbody tr {
-    border-bottom: 2px solid black;
-}
-
-tbody td {
-    border: 2px solid black;
-}
-
-table {
+  .kpitable {
     border-collapse: collapse;
-}
+    height: 250px;
+  }
 
-thead th {
-
-}
+  .kpitable__header {
+    padding: 0.5rem;
+    font-weight: 600;
+  }
+  
+  .kpitable__header-row {
+    text-align: left;
+    border: 2px solid #000;
+    border-left: transparent;
+  }
+  
+  .kpitable__header-column {
+    text-align: center;
+    border: 2px solid #000;
+    border-top: transparent;
+  }
+  
+  .kpitable__data {
+    padding: 0.5rem;
+    min-width: 5rem;
+    border: 2px solid #000;
+  }
 </style>
diff --git a/Epsilon.Host.Frontend/src/components/Competance/PersonalDevelopmentMatrix.vue b/Epsilon.Host.Frontend/src/components/Competance/PersonalDevelopmentMatrix.vue
@@ -1,10 +1,16 @@
 <template>
-    <apexcharts type="bar" :options="chartOptions" :series="series"></apexcharts>
+  <apexcharts
+    type="bar"
+    height="320"
+    width="300"
+    :options="chartOptions"
+    :series="series"
+  />
 </template>
 
 <script lang="ts" setup>
+import apexcharts from "vue3-apexcharts";
 import {HboIDomain, ProfessionalTaskOutcome} from "@/logic/Api";
-import {watch} from "vue";
 
 const props = defineProps<{
     domain: HboIDomain
@@ -73,11 +79,8 @@ const chartOptions = {
     }
 }
 
-watch
-(() => props.domain, () => {
-    for (const pd in props.domain.professionalSkills) {
-        chartOptions.xaxis.categories.push(props.domain.professionalSkills?.[pd].name)
-    }
+props.domain.professionalSkills.forEach(skill =>{
+    chartOptions.xaxis.categories.push(skill.shortName)
 })
 </script>
 

diff --git a/Epsilon.Host.Frontend/src/components/KpiLegend/KpiLegend.vue b/Epsilon.Host.Frontend/src/components/KpiLegend/KpiLegend.vue
@@ -0,0 +1,67 @@
+<template>
+  <table class="kpi-legend">
+    <tr class="legend__row">
+      <td class="kpi-color lvl1" />
+      <th class="kpi-text">Lvl 1</th>
+    </tr>
+    <tr class="legend__row">
+      <td class="kpi-color lvl2" />
+      <th class="kpi-text">Lvl 2</th>
+    </tr>
+    <tr class="legend__row">
+      <td class="kpi-color lvl3" />
+      <th class="kpi-text">Lvl 3</th>
+    </tr>
+    <tr class="legend__row">
+      <td class="kpi-color lvl4" />
+      <th class="kpi-text">Lvl 4</th>
+    </tr>
+  </table>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+  .kpi-legend {
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0px 0px 10px 5px #2c2c2c26;
+    width: fit-content;
+    height: fit-content;
+    margin: 4rem;
+    padding: 2rem;
+  }
+  
+  .kpi-text {
+    font-weight: 400;
+    color: #C6C6C6;
+  }
+
+  .kpi-color {
+    width: 3rem;
+  }
+
+  .lvl1 {
+    background-color: #8EAADB;
+  }
+
+  .lvl2 {
+    background-color: #A8D08D;
+  }
+
+  .lvl3 {
+    background-color: #FFD965;
+  }
+
+  .lvl4 {
+    background-color: #B15EB2;
+  }
+  
+  .legend__row {
+    display: grid;
+    grid-template-columns: repeat(2, 5rem);
+    padding: 0.5rem;
+  }
+</style>
diff --git a/Epsilon.Host.Frontend/src/views/PerformanceDashboard.vue b/Epsilon.Host.Frontend/src/views/PerformanceDashboard.vue
@@ -1,8 +1,9 @@
 <template>
-    <div v-if="data">
-        <KpiMatrix :domain="data.hboIDomain"></KpiMatrix>
-        <KpiTable :domain="data.hboIDomain" :data="data.professionalTaskOutcomes"></KpiTable>
-        <PersonalDevelopmentMatrix :domain="data.hboIDomain" :data="data"></PersonalDevelopmentMatrix>
+    <div class="performance-dashboard" v-if="data">
+      <KpiTable :domain="data.hboIDomain" :data="data.professionalTaskOutcomes"></KpiTable>
+      <KpiLegend />
+      <KpiMatrix :domain="data.hboIDomain"></KpiMatrix>
+        <PersonalDevelopmentMatrix :domain="data.hboIDomain" :data="data.professionalSkillOutcomes"></PersonalDevelopmentMatrix>
     </div>
 </template>
 
@@ -11,6 +12,7 @@ import {Api, HttpResponse, CompetenceProfile} from "@/logic/Api";
 import KpiMatrix from "@/components/Competance/KpiMatrix.vue";
 import KpiTable from "@/components/Competance/KpiTable.vue";
 import PersonalDevelopmentMatrix from "@/components/Competance/PersonalDevelopmentMatrix.vue";
+import KpiLegend from "@/components/KpiLegend/KpiLegend.vue";
 import {onMounted, ref} from "vue";
 const data= ref(undefined);
 const App = new Api();
@@ -41,5 +43,16 @@ onMounted(() => {
 </script>
 
 <style scoped>
+  .performance-dashboard {
+    grid-template-columns: 1fr;
+  }
 
+  @media screen and (min-width: 580px) {
+    .performance-dashboard {
+      display: grid;
+      grid-template-columns: 5fr 1fr;
+      gap: 0 2rem;
+      align-items: center;
+    }
+  }
 </style>