Reuse value component

apps/client/src/app/pages/about/about-page.html

@@ -109,38 +109,39 @@
         <mat-card-content>
           <div class="row">
             <div class="col-xs-12 col-md-4 my-2">
-              <h3 class="mb-0">{{ statistics?.activeUsers1d || '-' }}</h3>
-              <div class="h6 mb-0">
-                <span i18n>Active Users</span>&nbsp;<small class="text-muted"
-                  >(Last 24 hours)</small
-                >
-              </div>
+              <gf-value
+                label="Active Users"
+                size="large"
+                subLabel="(Last 24 hours)"
+                [value]="statistics?.activeUsers1d ?? '-'"
+              ></gf-value>
             </div>
             <div class="col-xs-12 col-md-4 my-2">
-              <h3 class="mb-0">{{ statistics?.newUsers30d ?? '-' }}</h3>
-              <div class="h6 mb-0">
-                <span i18n>New Users</span>&nbsp;<small class="text-muted"
-                  >(Last 30 days)</small
-                >
-              </div>
+              <gf-value
+                label="New Users"
+                size="large"
+                subLabel="(Last 30 days)"
+                [value]="statistics?.newUsers30d ?? '-'"
+              ></gf-value>
             </div>
             <div class="col-xs-12 col-md-4 my-2">
-              <h3 class="mb-0">{{ statistics?.activeUsers30d ?? '-' }}</h3>
-              <div class="h6 mb-0">
-                <span i18n>Active Users</span>&nbsp;<small class="text-muted"
-                  >(Last 30 days)</small
-                >
-              </div>
+              <gf-value
+                label="Active Users"
+                size="large"
+                subLabel="(Last 30 days)"
+                [value]="statistics?.activeUsers30d ?? '-'"
+              ></gf-value>
             </div>
             <div class="col-xs-12 col-md-4 my-2">
               <a
                 class="d-block"
                 href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
               >
-                <h3 class="mb-0">
-                  {{ statistics?.slackCommunityUsers ?? '-' }}
-                </h3>
-                <div class="h6 mb-0" i18n>Users in Slack community</div>
+                <gf-value
+                  label="Users in Slack community"
+                  size="large"
+                  [value]="statistics?.slackCommunityUsers ?? '-'"
+                ></gf-value>
               </a>
             </div>
             <div class="col-xs-12 col-md-4 my-2">
@@ -148,10 +149,11 @@
                 class="d-block"
                 href="https://github.com/ghostfolio/ghostfolio/graphs/contributors"
               >
-                <h3 class="mb-0">
-                  {{ statistics?.gitHubContributors ?? '-' }}
-                </h3>
-                <div class="h6 mb-0" i18n>Contributors on GitHub</div>
+                <gf-value
+                  label="Contributors on GitHub"
+                  size="large"
+                  [value]="statistics?.gitHubContributors ?? '-'"
+                ></gf-value>
               </a>
             </div>
             <div class="col-xs-12 col-md-4 my-2">
@@ -159,8 +161,11 @@
                 class="d-block"
                 href="https://github.com/ghostfolio/ghostfolio/stargazers"
               >
-                <h3 class="mb-0">{{ statistics?.gitHubStargazers ?? '-' }}</h3>
-                <div class="h6 mb-0" i18n>Stars on GitHub</div>
+                <gf-value
+                  label="Stars on GitHub"
+                  size="large"
+                  [value]="statistics?.gitHubStargazers ?? '-'"
+                ></gf-value>
               </a>
             </div>
           </div>

apps/client/src/app/pages/about/about-page.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { AboutPageRoutingModule } from './about-page-routing.module';
 import { AboutPageComponent } from './about-page.component';
@@ -12,6 +13,7 @@ import { AboutPageComponent } from './about-page.component';
   imports: [
     AboutPageRoutingModule,
     CommonModule,
+    GfValueModule,
     MatButtonModule,
     MatCardModule
   ],

libs/ui/src/lib/value/value.component.html

@@ -10,14 +10,14 @@
       </ng-container>
       <div
         *ngIf="isPercent"
-        class="mb-0"
+        class="mb-0 value"
         [ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
       >
         {{ formattedValue }}%
       </div>
       <div
         *ngIf="!isPercent"
-        class="mb-0"
+        class="mb-0 value"
         [ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
       >
         <ng-container *ngIf="value === null">
@@ -36,7 +36,7 @@
     </ng-container>
     <ng-container *ngIf="isString">
       <div
-        class="mb-0 text-truncate"
+        class="mb-0 text-truncate value"
         [ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
       >
         {{ formattedValue | titlecase }}
@@ -45,7 +45,8 @@
   </div>
   <ng-container *ngIf="label">
     <div *ngIf="size === 'large'">
-      {{ label }}
+      <span class="h6">{{ label }}</span>
+      <span *ngIf="subLabel" class="text-muted"> {{ subLabel }}</span>
     </div>
     <small *ngIf="size !== 'large'">
       {{ label }}

libs/ui/src/lib/value/value.component.scss

@@ -2,4 +2,8 @@
   display: flex;
   flex-direction: column;
   font-variant-numeric: tabular-nums;
+
+  .h2 {
+    line-height: 1;
+  }
 }

libs/ui/src/lib/value/value.component.ts

@@ -25,6 +25,7 @@ export class ValueComponent implements OnChanges {
   @Input() position = '';
   @Input() precision: number | undefined;
   @Input() size: 'large' | 'medium' | 'small' = 'small';
+  @Input() subLabel = '';
   @Input() value: number | string = '';
 
   public absoluteValue = 0;