Feature/extend public page (#445)

* Extend public page

* Update changelog

apps/client/src/app/pages/portfolio/allocations/allocations-page.html

@@ -159,9 +159,9 @@
         </mat-card-header>
         <mat-card-content>
           <gf-portfolio-proportion-chart
-            [keys]="['name']"
             [baseCurrency]="user?.settings?.baseCurrency"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+            [keys]="['name']"
             [locale]="user?.settings?.locale"
             [maxItems]="10"
             [positions]="countries"

apps/client/src/app/pages/public/public-page.component.ts

@@ -27,7 +27,7 @@ export class PublicPageComponent implements OnInit {
   public deviceType: string;
   public portfolioPublicDetails: PortfolioPublicDetails;
   public positions: {
-    [symbol: string]: Pick<PortfolioPosition, 'name' | 'value'>;
+    [symbol: string]: Pick<PortfolioPosition, 'currency' | 'name' | 'value'>;
   };
   public sectors: {
     [name: string]: { name: string; value: number };
@@ -117,6 +117,7 @@ export class PublicPageComponent implements OnInit {
 
       this.positions[symbol] = {
         value,
+        currency: position.currency,
         name: position.name
       };
 

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

@@ -9,6 +9,9 @@
   <div class="proportion-charts row">
     <div class="col-md-12 allocations-by-symbol">
       <mat-card class="mb-3">
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="text-truncate" i18n>Symbols</mat-card-title>
+        </mat-card-header>
         <mat-card-content>
           <gf-portfolio-proportion-chart
             class="mx-auto"
@@ -20,6 +23,65 @@
         </mat-card-content>
       </mat-card>
     </div>
+    <div *ngIf="portfolioPublicDetails?.hasDetails" class="col-md-4">
+      <mat-card class="mb-3">
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="text-truncate" i18n>Currencies</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <gf-portfolio-proportion-chart
+            [isInPercent]="true"
+            [keys]="['currency']"
+            [maxItems]="10"
+            [positions]="positions"
+          ></gf-portfolio-proportion-chart>
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div *ngIf="portfolioPublicDetails?.hasDetails" class="col-md-4">
+      <mat-card class="mb-3">
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="text-truncate" i18n>Sectors</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <gf-portfolio-proportion-chart
+            [isInPercent]="true"
+            [keys]="['name']"
+            [maxItems]="10"
+            [positions]="sectors"
+          ></gf-portfolio-proportion-chart>
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div *ngIf="portfolioPublicDetails?.hasDetails" class="col-md-4">
+      <mat-card class="mb-3">
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="text-truncate" i18n>Continents</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <gf-portfolio-proportion-chart
+            [isInPercent]="true"
+            [keys]="['name']"
+            [positions]="continents"
+          ></gf-portfolio-proportion-chart>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+  <div *ngIf="portfolioPublicDetails?.hasDetails" class="row world-map-chart">
+    <div class="col-lg">
+      <mat-card class="mb-3">
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="text-truncate" i18n>Regions</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <gf-world-map-chart
+            [countries]="countries"
+            [isInPercent]="true"
+          ></gf-world-map-chart>
+        </mat-card-content>
+      </mat-card>
+    </div>
   </div>
   <div class="row my-5">
     <div class="col-md-8 offset-md-2">

apps/client/src/app/pages/public/public-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 { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
 
 import { PublicPageRoutingModule } from './public-page-routing.module';
@@ -13,6 +14,7 @@ import { PublicPageComponent } from './public-page.component';
   imports: [
     CommonModule,
     GfPortfolioProportionChartModule,
+    GfWorldMapChartModule,
     MatButtonModule,
     MatCardModule,
     PublicPageRoutingModule

apps/client/src/app/pages/public/public-page.scss

@@ -2,8 +2,18 @@
   color: rgb(var(--dark-primary-text));
   display: block;
 
-  gf-portfolio-proportion-chart {
-    max-width: 80vh;
+  .allocations-by-symbol {
+    gf-portfolio-proportion-chart {
+      max-width: 80vh;
+    }
+  }
+
+  .world-map-chart {
+    .mat-card {
+      .mat-card-content {
+        aspect-ratio: 16 / 9;
+      }
+    }
   }
 }