Add decaying average logic to the frontend (#86)

* Add multi threading

* Restyle KPI Table and cleanup code

* Rename to correspond to definitions

* Reformat code

* Add loading icon

* Decrease personal development graph width

* Add decaying average to front-end

* Rename styling entries to conform with coding conventions and reformat code

* Use colors from domain

* Small cleanup changes

* Eslint enforcements updates

* CI testing

* CI testing

* Bugfixes

* Hardcoded preliminary version of the dashboard with functional term buttons. Ready for demo skrr skrr

* Fix competence profile being empty and cleanup code

* Make personal development height the same as competence graph

* Use different order for terms

* Remove centering

* Show toolbar

* changes of commands to pnpm

* Set version and package manager

* Add a readme

* First POC for moving DecayingAverage logic to frontend

* Moved the DecayingAverage.ts to the frontend

* Removal backed code of decayingAverage

* Fronted changes

* Merge

* Trying

* POC decaying average

* Cleanup

* Add abstraction for competence outcome results

* Removal of backend Decaying average calculations

* Calculating decaying average in the frontend

* Frontend implementation of decaying average

* Import change

* code cleanup

* code cleanup

* Graph changes on term selection

* Implementation PersonalDevelopmentGraph.vue

* Warning fixes

* Mastery level indication in PersonalDevelopmentGraph.vue

* Fixed the mess

* Change AssessedAt to SubmittedAt

* Added comments

* Cleanup code

* MOved functions inside mount function

* Changed function names

* Changes and removed unused file

* Project setting changes

---------

Co-authored-by: Jelle Maas <typiqally@gmail.com>
Co-authored-by: jan.fojtik <jan.fojtik@indicia.nl>

Epsilon.Abstractions/Epsilon.Abstractions.csproj

@@ -23,5 +23,4 @@
     <ItemGroup>
       <PackageReference Include="DocumentFormat.OpenXml" Version="2.18.0" />
     </ItemGroup>
-
 </Project>

Epsilon.Abstractions/Model/CompetenceOutcomeResult.cs

@@ -0,0 +1,7 @@
+namespace Epsilon.Abstractions.Model;
+
+public record CompetenceOutcomeResult(
+    int OutcomeId,
+    double Grade,
+    DateTime SubmittedAt
+);

Epsilon.Abstractions/Model/DecayingAverage.cs

@@ -0,0 +1,7 @@
+namespace Epsilon.Abstractions.Model;
+
+public record DecayingAverage(
+    double Score,
+    int ArchitectureLayer,
+    int Activity
+);

Epsilon.Abstractions/Model/ProfessionalSkillResult.cs

@@ -1,8 +1,9 @@
 namespace Epsilon.Abstractions.Model;
 
 public record ProfessionalSkillResult(
+    int OutcomeId,
     int Skill,
     int MasteryLevel,
     double Grade,
     DateTime AssessedAt
-);
+)  : CompetenceOutcomeResult(OutcomeId, Grade, AssessedAt);

Epsilon.Abstractions/Model/ProfessionalTaskResult.cs

@@ -1,9 +1,10 @@
 namespace Epsilon.Abstractions.Model;
 
 public record ProfessionalTaskResult(
+    int OutcomeId,
     int ArchitectureLayer,
     int Activity,
     int MasteryLevel,
     double Grade,
     DateTime AssessedAt
-);
+) : CompetenceOutcomeResult(OutcomeId, Grade, AssessedAt);

Epsilon.Host.Frontend/src/components/CompetenceGraph.vue

@@ -1,18 +1,22 @@
 <template>
     <ApexChart
-        type="bar"
-        height="350"
-        width="750"
         :options="chartOptions"
-        :series="series" />
+        :series="series"
+        height="350"
+        type="bar"
+        width="750" />
 </template>
 
 <script lang="ts" setup>
 import ApexChart from "vue3-apexcharts"
-import { DecayingAveragePerLayer, IHboIDomain } from "../logic/Api"
-import { onMounted } from "vue"
+import { IHboIDomain, ProfessionalTaskResult } from "../logic/Api"
+import { onMounted, watch } from "vue"
+import {
+    DecayingAverageLogic,
+    DecayingAveragePerLayer,
+} from "../logic/DecayingAverageLogic"
 
-const series: Array<{
+let series: Array<{
     name: string
     color: string
     data: Array<string | number> | undefined
@@ -21,7 +25,7 @@ const chartOptions = {
     annotations: {
         yaxis: [
             {
-                y: 9,
+                y: 3,
                 borderColor: "red",
                 strokeDashArray: 0,
                 label: {
@@ -77,41 +81,35 @@ const chartOptions = {
 
 const props = defineProps<{
     domain: IHboIDomain
-    data: DecayingAveragePerLayer[]
+    data: ProfessionalTaskResult[]
 }>()
 
-onMounted(() => {
-    // Setup categories
-    const activities = props.domain.activities
-
-    if (activities != null) {
-        activities.forEach((s) => {
+function loadChartData(): void {
+    series = []
+    chartOptions.xaxis.categories = []
+    if (props.domain.activities != null) {
+        props.domain.activities.forEach((s) => {
             chartOptions.xaxis.categories.push(s.name as never)
         })
     }
 
-    // Add data
-    const layers = props.domain.architectureLayers
-
-    if (layers != null) {
-        props.data.forEach((layerDecayingAverage) => {
-            const layer = layers.find(
-                (layer) => layer.id == layerDecayingAverage.architectureLayer
-            )
-
-            if (layer != undefined) {
-                series.push({
-                    name: layer.name as string,
-                    color: layer.color as string,
-                    data: layerDecayingAverage.layerActivities?.map(
-                        (decayingAverage) =>
-                            decayingAverage.decayingAverage?.toFixed(
-                                2
-                            ) as string
-                    ),
-                })
-            }
+    DecayingAverageLogic.getAverageTaskOutcomeScores(
+        props.data,
+        props.domain
+    ).map((layer: DecayingAveragePerLayer) => {
+        const ar = props.domain.architectureLayers?.at(layer.architectureLayer)
+        series.push({
+            name: ar?.name,
+            color: ar?.color,
+            data: layer.layerActivities.map((ac) =>
+                ac.decayingAverage.toFixed(3)
+            ),
         })
-    }
+    })
+}
+
+onMounted(() => {
+    loadChartData()
 })
+watch(() => loadChartData())
 </script>

Epsilon.Host.Frontend/src/components/PersonalDevelopmentGraph.vue

@@ -1,23 +1,28 @@
 <template>
     <ApexChart
-        type="bar"
-        height="350"
-        width="200"
         :options="chartOptions"
-        :series="series" />
+        :series="series"
+        height="350"
+        type="bar"
+        width="200" />
 </template>
 
 <script lang="ts" setup>
 import ApexChart from "vue3-apexcharts"
-import { DecayingAveragePerSkill, IHboIDomain } from "../logic/Api"
-import { onMounted } from "vue"
+import {
+    IHboIDomain,
+    MasteryLevel,
+    ProfessionalSkillResult,
+} from "../logic/Api"
+import { onMounted, watch } from "vue"
+import { DecayingAverageLogic } from "../logic/DecayingAverageLogic"
 
 const props = defineProps<{
     domain: IHboIDomain
-    data: DecayingAveragePerSkill[]
+    data: ProfessionalSkillResult[]
 }>()
 
-const series: Array<{ name: string; data: Array<number | string> }> = []
+let series: Array<{ name: string; data: Array<number | string> }> = []
 const chartOptions = {
     annotations: {
         yaxis: [
@@ -36,7 +41,7 @@ const chartOptions = {
             },
         ],
     },
-    colors: ["#A8D08D"],
+    colors: ["#FFFFFF"],
     chart: {
         type: "bar",
         stacked: true,
@@ -76,22 +81,42 @@ const chartOptions = {
 }
 
 onMounted(() => {
-    // Setup categories
-    const professionalSkills = props.domain.professionalSkills
+    loadChartData()
+})
+watch(() => loadChartData())
 
-    if (professionalSkills != null) {
-        professionalSkills.forEach((s) => {
-            chartOptions.xaxis.categories.push(s.shortName as never)
+function loadChartData(): void {
+    series = []
+    chartOptions.xaxis.categories = []
+    if (props.domain.professionalSkills != null) {
+        props.domain.professionalSkills.forEach((s) => {
+            chartOptions.xaxis.categories.push(s.name as never)
         })
     }
 
     // Add data
     series.push({
-        name: "Decaying Average",
-        data: props.data.map(
-            (decayingAverage) =>
-                decayingAverage.decayingAverage?.toFixed(2) as string
-        ),
+        name: "Score",
+        data: DecayingAverageLogic.getAverageSkillOutcomeScores(
+            props.data,
+            props.domain
+        )?.map((d) => {
+            return {
+                y: d.decayingAverage.toFixed(3),
+                x: props.domain.professionalSkills?.at(d.skill)?.name,
+                fillColor: getMastery(d.masteryLevel)?.color,
+            }
+        }),
     })
-})
+}
+
+function getMastery(masteryId: number): MasteryLevel | undefined {
+    if (props.domain.masteryLevels == null) {
+        return undefined
+    }
+
+    return props.domain.masteryLevels.find(
+        (masteryLevel) => masteryLevel.id == masteryId
+    )
+}
 </script>