Display chips for absence reasons and extramarks

aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForGroupTab.vue

@@ -15,6 +15,14 @@
       {{ header }}
     </template>
 
+    <template v-for="(extraMark, index) in extraMarks" #[`extraMarks.${index}.count`]="{ item }">
+      <extra-mark-chip :extra-mark="extraMark" only-show-count :count="item.extraMarks.find(m => extraMark.id === m.extraMark.id).count" />
+    </template>
+
+    <template v-for="(absenceReason, index) in absenceReasons" #[`absenceReasons.${index}.count`]="{ item }">
+      <absence-reason-chip :absence-reason="absenceReason" onlyShowCount :count="item.absenceReasons.find(m => absenceReason.id === m.absenceReason.id).count" />
+    </template>
+
     <template #person="{ item }">
       <v-avatar class="my-1 me-2">
         <avatar-content :id="item.person.id" />
@@ -29,16 +37,21 @@ import groupOverviewTabMixin from "aleksis.core/mixins/groupOverviewTabMixin.js"
 import CRUDList from "aleksis.core/components/generic/CRUDList.vue";
 import AvatarContent from "aleksis.core/components/person/AvatarContent.vue";
 
+import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.vue";
+import ExtraMarkChip from "aleksis.apps.alsijil/components/extra_marks/ExtraMarkChip.vue";
+
 import { statisticsByGroup } from "./statistics.graphql";
-import { absenceReasons } from "../absences/absenceReasons.graphql";
+import { absenceReasons } from "aleksis.apps.kolego/components/absenceReasons.graphql";
 import { extraMarks } from "../../extra_marks/extra_marks.graphql";
 
 export default {
   name: "StatisticsForGroupTab",
   mixins: [groupOverviewTabMixin],
   components: {
+    AbsenceReasonChip,
     AvatarContent,
     CRUDList,
+    ExtraMarkChip,
   },
   data() {
     return {
@@ -73,6 +86,12 @@ export default {
         },
       ];
     },
+    absenceReasonsFirstHeader() {
+      return this.absenceReasons.length > 0 ? this.absenceReasons[0].shortName + ".header" : null;
+    },
+    extraMarksFirstHeader() {
+      return this.extraMarks.length > 0 ? this.extraMarks[0].shortName + ".header" : null;
+    },
     gqlQueryArgs() {
       const term = this.schoolTerm
             ? { term: this.schoolTerm.id }