feat(frontend): Add subtitle for statistic card component to clarify the counting #1645

Author: ManuelMoeri

frontend/src/app/statistics/statistics-card/statistics-card.component.html

@@ -1,5 +1,6 @@
-<div class="statistic-card  flex-column d-flex align-items-center gap-4">
+<div class="statistic-card flex-column d-flex align-items-center gap-4">
   <h2 class="mt-4">{{ title }}</h2>
+  <h3 class="mt-0">{{ subtitle }}</h3>
   <div class="d-flex justify-content-center gap-2 row row-cols-auto">
     <ng-content></ng-content>
   </div>
@@ -11,4 +12,4 @@ <h2 class="mt-4">{{ title }}</h2>
     [colorPreset]="barColorPreset"
     [progress]="barProgress *100 || 0"
   ></app-statistics-bar>
-</div>
+</div>

frontend/src/app/statistics/statistics-card/statistics-card.component.scss

@@ -5,3 +5,13 @@
   border: #5d6974 1px solid;
   border-radius: 4px;
 }
+
+.statistic-card h3 {
+  margin: 0;
+  padding: 0;
+  line-height: 0 !important;
+}
+
+.statistic-card h3:empty {
+  display: none;
+}

frontend/src/app/statistics/statistics-card/statistics-card.component.ts

@@ -9,6 +9,8 @@ import { Component, Input } from '@angular/core';
 export class StatisticsCardComponent {
   @Input() title = '';
 
+  @Input() subtitle = '';
+
   @Input() barProgress?: number;
 
   @Input() barColorPreset?: string;

frontend/src/app/statistics/statistics.component.html

@@ -66,6 +66,7 @@ <h1> Auswertung </h1>
         <app-statistics-card
           [attr.data-testId]="'kr-min-target'"
           [title]="'Key Results mit min. Target Zone erreicht'"
+          [subtitle]="'Alle Key Results berücksichtigt'"
           [barProgress]="statistics.keyResultsInTargetOrStretchAmount / statistics.keyResultAmount"
         >
           <app-statistics-information [bottomContent]="statistics.keyResultsInTargetOrStretchAmount+'/'+statistics.keyResultAmount">
@@ -91,6 +92,7 @@ <h1> Auswertung </h1>
         <app-statistics-card
           [attr.data-testId]="'kr-progress-relation'"
           [title]="'Verteilung der Key Results'"
+          [subtitle]="'Nur eingecheckte Key Results berücksichtigt'"
           *ngIf="krProgressRelation(statistics) as relation"
         >
           <app-statistics-information