From 009a9efeaea73606ec18d1af20e4d50ba0eba672 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 21 Sep 2024 11:32:54 +0200
Subject: [PATCH] Add portfolio performance metrics

---
 .../src/app/pages/public/public-page.html     | 56 +++++++++++++++++++
 libs/ui/src/lib/value/value.component.html    |  2 +-
 2 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/app/pages/public/public-page.html b/apps/client/src/app/pages/public/public-page.html
index fe213166f..369ea50f5 100644
--- a/apps/client/src/app/pages/public/public-page.html
+++ b/apps/client/src/app/pages/public/public-page.html
@@ -7,6 +7,62 @@
       </h1>
     </div>
   </div>
+  <div class="row">
+    <div class="col-md-4">
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-content>
+          <gf-value
+            i18n
+            size="large"
+            [colorizeSign]="true"
+            [isPercent]="true"
+            [precision]="2"
+            [value]="
+              publicPortfolioDetails?.performance?.['1d']?.relativeChange ??
+              undefined
+            "
+            >Today</gf-value
+          >
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div class="col-md-4">
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-content>
+          <gf-value
+            i18n
+            size="large"
+            [colorizeSign]="true"
+            [isPercent]="true"
+            [precision]="2"
+            [value]="
+              publicPortfolioDetails?.performance?.['ytd']?.relativeChange ??
+              undefined
+            "
+            >This year</gf-value
+          >
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div class="col-md-4">
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-content>
+          <gf-value
+            i18n
+            size="large"
+            [colorizeSign]="true"
+            [isPercent]="true"
+            [precision]="2"
+            [value]="
+              publicPortfolioDetails?.performance?.['max']?.relativeChange ??
+              undefined
+            "
+            >From the beginning</gf-value
+          >
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
   <div class="proportion-charts row">
     <div class="col-md-12 allocations-by-symbol">
       <mat-card appearance="outlined" class="mb-3">
diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index d1e498bcc..a691c54e8 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/libs/ui/src/lib/value/value.component.html
@@ -5,7 +5,7 @@
   <ng-template #label><ng-content></ng-content></ng-template>
   <ng-container *ngIf="value || value === 0 || value === null">
     <div
-      class="d-flex"
+      class="align-items-center d-flex"
       [ngClass]="position === 'end' ? 'justify-content-end' : ''"
     >
       <ng-container *ngIf="isNumber || value === null">