Implement StatisticsExtraMarksCard

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

 <template>
   <v-card>
+    <counter-chip
+      v-for="extraMark in extraMarks"
+      :value="extraMark.extraMark.id"
+      :color="extraMark.extraMark.colourBg"
+      :text-color="extraMark.extraMark.colourFg"
+      :count="extraMark.count"
+    >
+      {{ extraMark.extraMark.name }}
+    </counter-chip>
   </v-card>
 </template>
 
 <script>
+import CounterChip from "aleksis.core/components/generic/chips/CounterChip.vue";
+
 export default {
   name: "StatisticsExtraMarksCard",
+  components: {
+    CounterChip,
+  },
+  props: {
+    extraMarks: {
+      type: Array,
+      required: true,
+    },
+  },
 };
 </script>

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

@@ -15,7 +15,9 @@
       :tardiness-sum="statistics.tardinessSum"
       :tardiness-count="statistics.tardinessCount"
     />
-    <statistics-extra-marks-card />
+    <statistics-extra-marks-card
+      :extra-marks="statistics.extraMarks"
+    />
     <statistics-personal-notes-list
       v-if="compact"
     />