Add decaying average logic to the frontend

Epsilon.Abstractions/Epsilon.Abstractions.csproj

@@ -9,5 +9,4 @@
     <ItemGroup>
       <ProjectReference Include="..\Epsilon.Canvas.Abstractions\Epsilon.Canvas.Abstractions.csproj" />
     </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/CompetenceProfile.cs

@@ -6,7 +6,5 @@ public record CompetenceProfile(
     IHboIDomain HboIDomain,
     IEnumerable<ProfessionalTaskResult> ProfessionalTaskOutcomes,
     IEnumerable<ProfessionalSkillResult> ProfessionalSkillOutcomes,
-    IEnumerable<EnrollmentTerm> Terms,
-    IEnumerable<DecayingAveragePerLayer> DecayingAveragesPerTask,
-    IEnumerable<DecayingAveragePerSkill> DecayingAveragesPerSkill
+    IEnumerable<EnrollmentTerm> Terms
 );

Epsilon.Abstractions/Model/CourseModule.cs

@@ -4,7 +4,5 @@ public class CourseModule
     {
         public string Name { get; set; } = string.Empty;
         public IEnumerable<CourseOutcome> Kpis { get; set; } = Enumerable.Empty<CourseOutcome>();
-
-        public string DecayingAverage { get; set; }
     }
 }

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.Canvas.Abstractions/Model/GraphQl/SubmissionsHistoriesConnectionNode.cs

@@ -4,5 +4,6 @@ namespace Epsilon.Canvas.Abstractions.Model.GraphQl;
 
 public record SubmissionsHistoriesConnectionNode(
     [property: JsonPropertyName("attempt")] int? Attempt,
+    [property: JsonPropertyName("submittedAt")] DateTime? SubmittedAt,
     [property: JsonPropertyName("rubricAssessmentsConnection")] RubricAssessmentsConnection? RubricAssessments
 );

Epsilon.Canvas.Abstractions/Model/OutcomeResultCollection.cs

@@ -6,20 +6,4 @@ public record OutcomeResultCollection(
     [property: JsonPropertyName("outcome_results")]
     IEnumerable<OutcomeResult> OutcomeResults,
     [property: JsonPropertyName("linked")] OutcomeResultCollectionLink? Links
-)
-{
-    public double GetDecayingAverage()
-    {
-        var decayingAverage = 0.0;
-
-        foreach(var grade in OutcomeResults)
-        {
-            if (grade.Score != null)
-            {
-                decayingAverage = decayingAverage * 0.35 + grade.Score.Value * 0.65;
-            }
-        }
-
-        return decayingAverage;
-    }
-}
+);

Epsilon.Canvas/QueryConstants.cs

@@ -54,6 +54,7 @@ query MyQuery {
                       }
                     }
                     attempt
+                    submittedAt
                   }
                 }
                 postedAt

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>