Feature/add global heat map to landing page (#1584)

* Add global heat map

* Update changelog

apps/client/src/app/components/world-map-chart/world-map-chart.component.ts

@@ -16,8 +16,8 @@ import svgMap from 'svgmap';
   styleUrls: ['./world-map-chart.component.scss']
 })
 export class WorldMapChartComponent implements OnChanges, OnDestroy, OnInit {
-  @Input() baseCurrency: string;
-  @Input() countries: { [code: string]: { name: string; value: number } };
+  @Input() countries: { [code: string]: { name?: string; value: number } };
+  @Input() format: string;
   @Input() isInPercent = false;
 
   public isLoading = true;
@@ -71,7 +71,7 @@ export class WorldMapChartComponent implements OnChanges, OnDestroy, OnInit {
         applyData: 'value',
         data: {
           value: {
-            format: this.isInPercent ? `{0}%` : `{0} ${this.baseCurrency}`
+            format: this.format
           }
         },
         values: this.countries

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

@@ -13,10 +13,14 @@ import { Subject } from 'rxjs';
   templateUrl: './landing-page.html'
 })
 export class LandingPageComponent implements OnDestroy, OnInit {
+  public countriesOfSubscribersMap: {
+    [code: string]: { value: number };
+  } = {};
   public currentYear = format(new Date(), 'yyyy');
   public demoAuthToken: string;
   public deviceType: string;
   public hasPermissionForStatistics: boolean;
+  public hasPermissionForSubscription: boolean;
   public hasPermissionToCreateUser: boolean;
   public statistics: Statistics;
   public testimonials = [
@@ -48,13 +52,25 @@ export class LandingPageComponent implements OnDestroy, OnInit {
     private dataService: DataService,
     private deviceService: DeviceDetectorService
   ) {
-    const { globalPermissions, statistics } = this.dataService.fetchInfo();
+    const { countriesOfSubscribers, globalPermissions, statistics } =
+      this.dataService.fetchInfo();
+
+    for (const country of countriesOfSubscribers) {
+      this.countriesOfSubscribersMap[country] = {
+        value: 1
+      };
+    }
 
     this.hasPermissionForStatistics = hasPermission(
       globalPermissions,
       permissions.enableStatistics
     );
 
+    this.hasPermissionForSubscription = hasPermission(
+      globalPermissions,
+      permissions.enableSubscription
+    );
+
     this.hasPermissionToCreateUser = hasPermission(
       globalPermissions,
       permissions.createUserAccount

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

@@ -269,6 +269,21 @@
     </div>
   </div>
 
+  <div *ngIf="hasPermissionForSubscription" class="row my-5">
+    <div class="col-12">
+      <h2 class="h4 text-center">
+        Members from around the globe are using
+        <a href="pricing"><strong>Ghostfolio Premium</strong></a>
+      </h2>
+    </div>
+    <div class="col-md-8 customer-map-container offset-md-2">
+      <gf-world-map-chart
+        format="👻"
+        [countries]="countriesOfSubscribersMap"
+      ></gf-world-map-chart>
+    </div>
+  </div>
+
   <div class="row my-3">
     <div class="col-12">
       <h2 class="h4 mb-1 text-center">

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

@@ -3,7 +3,9 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
+import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
 import { GfLogoModule } from '@ghostfolio/ui/logo';
+import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { LandingPageRoutingModule } from './landing-page-routing.module';
@@ -14,7 +16,9 @@ import { LandingPageComponent } from './landing-page.component';
   imports: [
     CommonModule,
     GfLogoModule,
+    GfPremiumIndicatorModule,
     GfValueModule,
+    GfWorldMapChartModule,
     LandingPageRoutingModule,
     MatButtonModule,
     MatCardModule,

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

@@ -9,6 +9,10 @@
     }
   }
 
+  .customer-map-container {
+    aspect-ratio: 16 / 9;
+  }
+
   .downloads {
     img {
       height: 2.5rem;

apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts

@@ -84,6 +84,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
   };
 
   public user: User;
+  public worldMapChartFormat: string;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -193,6 +194,11 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
             ...tagFilters
           ];
 
+          this.worldMapChartFormat =
+            this.hasImpersonationId || this.user.settings.isRestrictedView
+              ? `{0}%`
+              : `{0} ${this.user?.settings?.baseCurrency}`;
+
           this.changeDetectorRef.markForCheck();
         }
       });

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

@@ -257,8 +257,8 @@
         </mat-card-header>
         <mat-card-content>
           <gf-world-map-chart
-            [baseCurrency]="user?.settings?.baseCurrency"
             [countries]="countries"
+            [format]="worldMapChartFormat"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
           ></gf-world-map-chart>
           <div class="row">