Release 1.68.0 (#450)

* Extend statistics

* Update changelog

CHANGELOG.md

@@ -5,6 +5,28 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 1.68.0 - 01.11.2021
+
+### Changed
+
+- Prettified the generic scraper symbols in the portfolio proportion chart component
+- Extended the statistics section on the about page by the active users count (7d)
+- Extended the statistics section on the about page by the new users count
+
+## 1.67.0 - 31.10.2021
+
+### Added
+
+- Added more details to the public page (currencies, sectors, continents and regions)
+- Added a `Dockerfile` and documentation to build a _Docker_ image
+
+## 1.66.0 - 30.10.2021
+
+### Changed
+
+- Improved the landing page
+- Ordered the granted accesses by type
+
 ## 1.65.0 - 25.10.2021
 
 ### Added
@@ -20,7 +42,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Added support for more cryptocurrency symbols like _Avalanche_, _Polygon_, _SHIBA INU_ etc.
+- Added support for more cryptocurrency symbols like _Avalanche_, _Polygon_, _Shiba Inu_ etc.
 
 ### Changed
 

Dockerfile

@@ -0,0 +1,51 @@
+FROM node:14-alpine as builder
+
+# Build application and add additional files
+
+WORKDIR /ghostfolio
+
+# Only add basic files without the application itself to avoid rebuilding
+# layers when files (package.json etc.) have not changed
+COPY ./CHANGELOG.md CHANGELOG.md
+COPY ./LICENSE LICENSE
+COPY ./package.json package.json
+COPY ./yarn.lock yarn.lock
+COPY ./prisma/schema.prisma prisma/schema.prisma
+
+RUN yarn
+
+# See https://github.com/nrwl/nx/issues/6586 for further details
+COPY ./decorate-angular-cli.js decorate-angular-cli.js
+RUN node decorate-angular-cli.js
+
+COPY ./angular.json angular.json
+COPY ./nx.json nx.json
+COPY ./replace.build.js replace.build.js
+COPY ./jest.preset.js jest.preset.js
+COPY ./jest.config.js jest.config.js
+COPY ./tsconfig.base.json tsconfig.base.json
+COPY ./libs libs
+COPY ./apps apps
+
+RUN yarn build:all
+
+# Prepare the dist image with additional node_modules
+WORKDIR /ghostfolio/dist/apps/api
+# package.json was generated by the build process, however the original
+# yarn.lock needs to be used to ensure the same versions
+COPY ./yarn.lock /ghostfolio/dist/apps/api/yarn.lock
+
+RUN yarn
+COPY prisma /ghostfolio/dist/apps/api/prisma
+
+# Overwrite the generated package.json with the original one to ensure having
+# all the scripts
+COPY package.json /ghostfolio/dist/apps/api
+RUN yarn database:generate-typings
+
+# Image to run, copy everything needed from builder
+FROM node:14-alpine
+COPY --from=builder /ghostfolio/dist/apps /ghostfolio/apps
+WORKDIR /ghostfolio/apps/api
+EXPOSE 3333
+CMD [ "node", "main" ]

README.md

@@ -34,7 +34,7 @@
 
 Our official **[Ghostfolio Premium](https://ghostfol.io/pricing)** cloud offering is the easiest way to get started. Due to the time it saves, this will be the best option for most people. The revenue is used for covering the hosting costs.
 
-If you prefer to run Ghostfolio on your own infrastructure, please find the source code and further instructions here on _GitHub_ or use the [setup](https://github.com/psychowood/ghostfolio-docker) by [psychowood](https://github.com/psychowood).
+If you prefer to run Ghostfolio on your own infrastructure, please find further instructions in the section [Run with Docker](#run-with-docker).
 
 ## Why Ghostfolio?
 
@@ -81,13 +81,44 @@ The backend is based on [NestJS](https://nestjs.com) using [PostgreSQL](https://
 
 The frontend is built with [Angular](https://angular.io) and uses [Angular Material](https://material.angular.io) with utility classes from [Bootstrap](https://getbootstrap.com).
 
-## Getting Started
+## Run with Docker
 
 ### Prerequisites
 
+- [Docker](https://www.docker.com/products/docker-desktop)
+
+### Setup Docker Image
+
+Run the following commands to build and start the Docker image:
+
+```bash
+docker-compose -f docker/docker-compose-build-local.yml build
+docker-compose -f docker/docker-compose-build-local.yml up
+```
+
+### Setup Database
+
+Run the following command to setup the database once Ghostfolio is running:
+
+```bash
+docker-compose -f docker/docker-compose-build-local.yml exec ghostfolio yarn setup:database
+```
+
+### Fetch Historical Data
+
+Open http://localhost:3333 in your browser and accomplish these steps:
+
+1. Login as _Admin_ with the following _Security Token_: `ae76872ae8f3419c6d6f64bf51888ecbcc703927a342d815fafe486acdb938da07d0cf44fca211a0be74a423238f535362d390a41e81e633a9ce668a6e31cdf9`
+1. Go to the _Admin Control Panel_ and click _Gather All Data_ to fetch historical data
+1. Click _Sign out_ and check out the _Live Demo_
+
+## Development
+
+### Prerequisites
+
+- [Docker](https://www.docker.com/products/docker-desktop)
 - [Node.js](https://nodejs.org/en/download) (version 14+)
 - [Yarn](https://yarnpkg.com/en/docs/install)
-- [Docker](https://www.docker.com/products/docker-desktop)
 
 ### Setup
 
@@ -101,18 +132,14 @@ The frontend is built with [Angular](https://angular.io) and uses [Angular Mater
 1. Go to the _Admin Control Panel_ and click _Gather All Data_ to fetch historical data
 1. Click _Sign out_ and check out the _Live Demo_
 
-## Development
-
-Please make sure you have completed the instructions from [_Setup_](#Setup).
-
-### Start server
+### Start Server
 
 <ol type="a">
   <li>Debug: Run <code>yarn watch:server</code> and click "Launch Program" in <a href="https://code.visualstudio.com">Visual Studio Code</a></li>
   <li>Serve: Run <code>yarn start:server</code></li>
 </ol>
 
-### Start client
+### Start Client
 
 Run `yarn start:client`
 

angular.json

@@ -35,6 +35,7 @@
           },
           "configurations": {
             "production": {
+              "generatePackageJson": true,
               "optimization": true,
               "extractLicenses": true,
               "inspect": false,
@@ -99,12 +100,12 @@
               {
                 "glob": "CHANGELOG.md",
                 "input": "",
-                "output": "./"
+                "output": "./assets"
               },
               {
                 "glob": "LICENSE",
                 "input": "",
-                "output": "./"
+                "output": "./assets"
               },
               {
                 "glob": "robots.txt",

apps/api/src/app/access/access.controller.ts

@@ -39,6 +39,7 @@ export class AccessController {
       include: {
         GranteeUser: true
       },
+      orderBy: { granteeUserId: 'asc' },
       where: { userId: this.request.user.id }
     });
 

apps/api/src/app/info/info.service.ts

@@ -136,6 +136,28 @@ export class InfoService {
     }
   }
 
+  private async countNewUsers(aDays: number) {
+    return await this.prismaService.user.count({
+      orderBy: {
+        createdAt: 'desc'
+      },
+      where: {
+        AND: [
+          {
+            NOT: {
+              Analytics: null
+            }
+          },
+          {
+            createdAt: {
+              gt: subDays(new Date(), aDays)
+            }
+          }
+        ]
+      }
+    });
+  }
+
   private getDemoAuthToken() {
     return this.jwtService.sign({
       id: InfoService.DEMO_USER_ID
@@ -155,15 +177,19 @@ export class InfoService {
     }
 
     const activeUsers1d = await this.countActiveUsers(1);
+    const activeUsers7d = await this.countActiveUsers(7);
     const activeUsers30d = await this.countActiveUsers(30);
+    const newUsers30d = await this.countNewUsers(30);
     const gitHubContributors = await this.countGitHubContributors();
     const gitHubStargazers = await this.countGitHubStargazers();
 
     return {
       activeUsers1d,
+      activeUsers7d,
       activeUsers30d,
       gitHubContributors,
-      gitHubStargazers
+      gitHubStargazers,
+      newUsers30d
     };
   }
 

apps/api/src/app/portfolio/portfolio.controller.ts

@@ -266,18 +266,27 @@ export class PortfolioController {
     @Res() res: Response
   ): Promise<PortfolioPublicDetails> {
     const access = await this.accessService.access({ id: accessId });
+    const user = await this.userService.user({
+      id: access.userId
+    });
 
     if (!access) {
       res.status(StatusCodes.NOT_FOUND);
       return <any>res.json({ accounts: {}, holdings: {} });
     }
 
+    let hasDetails = true;
+    if (this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
+      hasDetails = user.subscription.type === 'Premium';
+    }
+
     const { holdings } = await this.portfolioService.getDetails(
       access.userId,
       access.userId
     );
 
     const portfolioPublicDetails: PortfolioPublicDetails = {
+      hasDetails,
       holdings: {}
     };
 
@@ -298,9 +307,10 @@ export class PortfolioController {
       if (portfolioPosition.assetClass === 'EQUITY') {
         portfolioPublicDetails.holdings[symbol] = {
           allocationCurrent: portfolioPosition.allocationCurrent,
-          countries: [],
+          countries: hasDetails ? portfolioPosition.countries : [],
+          currency: portfolioPosition.currency,
           name: portfolioPosition.name,
-          sectors: [],
+          sectors: hasDetails ? portfolioPosition.sectors : [],
           value: portfolioPosition.value / totalValue
         };
       }

apps/client/src/app/app.component.html

@@ -1,6 +1,6 @@
 <header>
   <gf-header
-    class="position-fixed px-2 w-100"
+    class="position-fixed w-100"
     [currentRoute]="currentRoute"
     [info]="info"
     [user]="user"

apps/client/src/app/components/header/header.component.html

@@ -1,6 +1,10 @@
-<mat-toolbar class="p-0">
+<mat-toolbar class="px-2">
   <ng-container *ngIf="user">
-    <a [routerLink]="['/']" class="no-min-width px-2" mat-button>
+    <a
+      [routerLink]="['/']"
+      class="align-items-center d-flex h-100 mx-2 no-min-width px-2 rounded-0"
+      mat-button
+    >
       <gf-logo></gf-logo>
     </a>
     <span class="spacer"></span>
@@ -221,12 +225,11 @@
   </ng-container>
   <ng-container *ngIf="user === null">
     <a
-      *ngIf="currentRoute && currentRoute !== 'start'"
-      class="mx-2 no-min-width px-2"
+      class="align-items-center d-flex h-100 mx-2 no-min-width px-2 rounded-0"
       mat-button
       [routerLink]="['/']"
     >
-      <gf-logo></gf-logo>
+      <gf-logo [hideName]="!currentRoute || currentRoute === 'start'"></gf-logo>
     </a>
     <span class="spacer"></span>
     <a

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

@@ -107,7 +107,7 @@
       <mat-card>
         <mat-card-content>
           <div class="row">
-            <div class="col-xs-12 col-md-3 my-2">
+            <div class="col-xs-12 col-md-4 my-2">
               <h3 class="mb-0" [hidden]="!statistics?.activeUsers1d">
                 {{ statistics?.activeUsers1d ?? '-' }}
               </h3>
@@ -117,7 +117,17 @@
                 >
               </div>
             </div>
-            <div class="col-xs-12 col-md-3 my-2">
+            <div class="col-xs-12 col-md-4 my-2">
+              <h3 class="mb-0" [hidden]="!statistics?.activeUsers7d">
+                {{ statistics?.activeUsers7d ?? '-' }}
+              </h3>
+              <div class="h6 mb-0">
+                <span i18n>Active Users</span>&nbsp;<small class="text-muted"
+                  >(Last 7 days)</small
+                >
+              </div>
+            </div>
+            <div class="col-xs-12 col-md-4 my-2">
               <h3 class="mb-0" [hidden]="!statistics?.activeUsers30d">
                 {{ statistics?.activeUsers30d ?? '-' }}
               </h3>
@@ -127,13 +137,23 @@
                 >
               </div>
             </div>
-            <div class="col-xs-12 col-md-3 my-2">
+            <div class="col-xs-12 col-md-4 my-2">
+              <h3 class="mb-0" [hidden]="!statistics?.newUsers30d">
+                {{ statistics?.newUsers30d ?? '-' }}
+              </h3>
+              <div class="h6 mb-0">
+                <span i18n>New Users</span>&nbsp;<small class="text-muted"
+                  >(Last 30 days)</small
+                >
+              </div>
+            </div>
+            <div class="col-xs-12 col-md-4 my-2">
               <h3 class="mb-0" [hidden]="!statistics?.gitHubContributors">
                 {{ statistics?.gitHubContributors ?? '-' }}
               </h3>
               <div class="h6 mb-0" i18n>Contributors on GitHub</div>
             </div>
-            <div class="col-xs-12 col-md-3 my-2">
+            <div class="col-xs-12 col-md-4 my-2">
               <h3 class="mb-0" [hidden]="!statistics?.gitHubStargazers">
                 {{ statistics?.gitHubStargazers ?? '-' }}
               </h3>
@@ -198,7 +218,7 @@
       <h3 class="mb-3 text-center" i18n>Changelog</h3>
       <mat-card class="changelog">
         <mat-card-content>
-          <markdown [src]="'CHANGELOG.md'"></markdown>
+          <markdown [src]="'assets/CHANGELOG.md'"></markdown>
         </mat-card-content>
       </mat-card>
     </div>
@@ -209,7 +229,7 @@
       <h3 class="mb-3 text-center" i18n>License</h3>
       <mat-card>
         <mat-card-content>
-          <markdown [src]="'LICENSE'"></markdown>
+          <markdown [src]="'assets/LICENSE'"></markdown>
         </mat-card-content>
       </mat-card>
     </div>

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

@@ -1,8 +1,7 @@
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
-import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
 import { format } from 'date-fns';
 import { Subject } from 'rxjs';
 
@@ -15,7 +14,6 @@ import { Subject } from 'rxjs';
 export class LandingPageComponent implements OnDestroy, OnInit {
   public currentYear = format(new Date(), 'yyyy');
   public demoAuthToken: string;
-  public historicalDataItems: LineChartItem[];
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -23,7 +21,6 @@ export class LandingPageComponent implements OnDestroy, OnInit {
    * @constructor
    */
   public constructor(
-    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private router: Router,
     private tokenStorageService: TokenStorageService
@@ -36,221 +33,6 @@ export class LandingPageComponent implements OnDestroy, OnInit {
     const { demoAuthToken } = this.dataService.fetchInfo();
 
     this.demoAuthToken = demoAuthToken;
-
-    this.initializeLineChart();
-  }
-
-  public initializeLineChart() {
-    this.historicalDataItems = [
-      {
-        date: '2017-01-01',
-        value: 2561.60376
-      },
-      {
-        date: '2017-02-01',
-        value: 2261.60376
-      },
-      {
-        date: '2017-03-01',
-        value: 2268.68157074
-      },
-      {
-        date: '2017-04-01',
-        value: 2525.2942
-      },
-      {
-        date: '2017-05-01',
-        value: 2929.3595107399997
-      },
-      {
-        date: '2017-06-01',
-        value: 3088.5172438900004
-      },
-      {
-        date: '2017-07-01',
-        value: 3281.2490946300004
-      },
-      {
-        date: '2017-08-01',
-        value: 4714.57822537
-      },
-      {
-        date: '2017-09-01',
-        value: 5717.262455259565
-      },
-      {
-        date: '2017-10-01',
-        value: 5338.742482334544
-      },
-      {
-        date: '2017-11-01',
-        value: 6361.263771554509
-      },
-      {
-        date: '2017-12-01',
-        value: 8373.260491904595
-      },
-      {
-        date: '2018-01-01',
-        value: 9783.208968191562
-      },
-      {
-        date: '2018-02-01',
-        value: 7841.2667100173
-      },
-      {
-        date: '2018-03-01',
-        value: 8582.133039380678
-      },
-      {
-        date: '2018-04-01',
-        value: 5901.8362986766715
-      },
-      {
-        date: '2018-05-01',
-        value: 7367.392976151925
-      },
-      {
-        date: '2018-06-01',
-        value: 6490.164314049853
-      },
-      {
-        date: '2018-07-01',
-        value: 6365.351621654618
-      },
-      {
-        date: '2018-08-01',
-        value: 6614.532706931272
-      },
-      {
-        date: '2018-09-01',
-        value: 6402.052882414409
-      },
-      {
-        date: '2018-10-01',
-        value: 15270.327917651943
-      },
-      {
-        date: '2018-11-01',
-        value: 13929.833891940816
-      },
-      {
-        date: '2018-12-01',
-        value: 12995.832254431414
-      },
-      {
-        date: '2019-01-01',
-        value: 11792.447013828998
-      },
-      {
-        date: '2019-02-01',
-        value: 11988.224284346446
-      },
-      {
-        date: '2019-03-01',
-        value: 13536.39667099519
-      },
-      {
-        date: '2019-04-01',
-        value: 14301.83740090022
-      },
-      {
-        date: '2019-05-01',
-        value: 14902.994910520581
-      },
-      {
-        date: '2019-06-01',
-        value: 15373.418326284132
-      },
-      {
-        date: '2019-07-01',
-        value: 17545.70705465703
-      },
-      {
-        date: '2019-08-01',
-        value: 17206.28500223782
-      },
-      {
-        date: '2019-09-01',
-        value: 17782.445200108898
-      },
-      {
-        date: '2019-10-01',
-        value: 17050.25875252655
-      },
-      {
-        date: '2019-11-01',
-        value: 18517.053521416237
-      },
-      {
-        date: '2019-12-01',
-        value: 17850.649021651363
-      },
-      {
-        date: '2020-01-01',
-        value: 18817.269786559067
-      },
-      {
-        date: '2020-02-01',
-        value: 22769.842312027653
-      },
-      {
-        date: '2020-03-01',
-        value: 23065.56002316582
-      },
-      {
-        date: '2020-04-01',
-        value: 19738.122641884733
-      },
-      {
-        date: '2020-05-01',
-        value: 25112.281463810643
-      },
-      {
-        date: '2020-06-01',
-        value: 28753.054132147452
-      },
-      {
-        date: '2020-07-01',
-        value: 32207.62827031543
-      },
-      {
-        date: '2020-08-01',
-        value: 37837.88816828611
-      },
-      {
-        date: '2020-09-01',
-        value: 50018.740185519295
-      },
-      {
-        date: '2020-10-01',
-        value: 46593.322295801525
-      },
-      {
-        date: '2020-11-01',
-        value: 44440.18743231742
-      },
-      {
-        date: '2020-12-01',
-        value: 57582.23077536893
-      },
-      {
-        date: '2021-01-01',
-        value: 68823.02446077733
-      },
-      {
-        date: '2021-02-01',
-        value: 64516.42092139593
-      },
-      {
-        date: '2021-03-01',
-        value: 82465.97581106682
-      },
-      {
-        date: '2021-03-18',
-        value: 86666.03082624623
-      }
-    ];
   }
 
   public setToken(aToken: string) {

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

@@ -1,14 +1,13 @@
+<div class="intro-container mb-5">
+  <div class="intro-inner-container mx-auto">
+    <div class="h-100 intro w-100"></div>
+  </div>
+</div>
+
 <div class="container">
   <div class="row">
     <div
-      class="
-        align-items-center
-        d-flex
-        flex-column
-        justify-content-center
-        mb-4
-        w-100
-      "
+      class="align-items-center d-flex flex-column justify-content-center w-100"
     >
       <gf-logo size="large"></gf-logo>
       <p class="lead m-0">Wealth Management Software</p>
@@ -16,15 +15,7 @@
   </div>
 
   <div class="button-container row">
-    <div
-      class="
-        align-items-center
-        col
-        d-flex
-        justify-content-center
-        position-relative
-      "
-    >
+    <div class="align-items-center col d-flex justify-content-center">
       <div class="py-5 text-center">
         <a
           class="d-inline-block"
@@ -46,15 +37,6 @@
           <span i18n>Live Demo</span>
         </button>
       </div>
-      <gf-line-chart
-        class="position-absolute"
-        symbol="Performance"
-        [historicalDataItems]="historicalDataItems"
-        [showGradient]="true"
-        [showLoader]="false"
-        [showXAxis]="false"
-        [showYAxis]="false"
-      ></gf-line-chart>
     </div>
   </div>
 

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

@@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
-import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
 import { GfLogoModule } from '@ghostfolio/ui/logo';
 
 import { LandingPageRoutingModule } from './landing-page-routing.module';
@@ -13,7 +12,6 @@ import { LandingPageComponent } from './landing-page.component';
   exports: [],
   imports: [
     CommonModule,
-    GfLineChartModule,
     GfLogoModule,
     LandingPageRoutingModule,
     MatButtonModule,

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

@@ -2,17 +2,6 @@
   display: block;
 
   .button-container {
-    aspect-ratio: 16 / 9;
-
-    gf-line-chart {
-      bottom: 0;
-      left: 0;
-      opacity: 0.67;
-      right: 0;
-      top: 0;
-      z-index: -1;
-    }
-
     .mat-stroked-button {
       background-color: var(--light-background);
     }
@@ -23,6 +12,23 @@
       height: 2.5rem;
     }
   }
+
+  .intro-container {
+    background-color: #ffffff;
+    margin-top: -5rem;
+
+    .intro-inner-container {
+      aspect-ratio: 16 / 9;
+      max-height: 66vh;
+
+      .intro {
+        background-image: url('/assets/intro.jpg');
+        background-position: top left;
+        background-repeat: no-repeat;
+        background-size: contain;
+      }
+    }
+  }
 }
 
 :host-context(.is-dark-theme) {

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

@@ -4,6 +4,7 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { UNKNOWN_KEY } from '@ghostfolio/common/config';
+import { prettifySymbol } from '@ghostfolio/common/helper';
 import {
   PortfolioDetails,
   PortfolioPosition,
@@ -246,9 +247,9 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       }
 
       if (position.assetClass === AssetClass.EQUITY) {
-        this.symbols[symbol] = {
-          symbol,
+        this.symbols[prettifySymbol(symbol)] = {
           name: position.name,
+          symbol: prettifySymbol(symbol),
           value: aPeriod === 'original' ? position.investment : position.value
         };
       }

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

@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UNKNOWN_KEY } from '@ghostfolio/common/config';
+import { prettifySymbol } from '@ghostfolio/common/helper';
 import {
   PortfolioPosition,
   PortfolioPublicDetails
@@ -27,7 +28,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 +118,7 @@ export class PublicPageComponent implements OnInit {
 
       this.positions[symbol] = {
         value,
+        currency: position.currency,
         name: position.name
       };
 
@@ -168,9 +170,9 @@ export class PublicPageComponent implements OnInit {
           this.portfolioPublicDetails.holdings[symbol].value;
       }
 
-      this.symbols[symbol] = {
-        symbol,
+      this.symbols[prettifySymbol(symbol)] = {
         name: position.name,
+        symbol: prettifySymbol(symbol),
         value: position.value
       };
     }

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;
+      }
+    }
   }
 }
 

apps/client/src/app/pipes/symbol/symbol.pipe.ts

@@ -1,11 +1,11 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import { ghostfolioScraperApiSymbolPrefix } from '@ghostfolio/common/config';
+import { prettifySymbol } from '@ghostfolio/common/helper';
 
 @Pipe({ name: 'gfSymbol' })
 export class SymbolPipe implements PipeTransform {
   public constructor() {}
 
-  public transform(aSymbol: string): string {
-    return aSymbol?.replace(ghostfolioScraperApiSymbolPrefix, '');
+  public transform(aSymbol: string) {
+    return prettifySymbol(aSymbol);
   }
 }

docker/docker-compose-build-local.yml

@@ -0,0 +1,24 @@
+version: '3.7'
+services:
+  postgres:
+    image: postgres:12
+    env_file:
+      - ../.env
+    volumes:
+      - postgres:/var/lib/postgresql/data
+
+  redis:
+    image: 'redis:alpine'
+
+  ghostfolio:
+    build: ../
+    env_file:
+      - ../.env
+    environment:
+      REDIS_HOST: 'redis'
+      DATABASE_URL: postgresql://user:password@postgres:5432/ghostfolio-db?sslmode=prefer
+    ports:
+      - 3333:3333
+
+volumes:
+  postgres:

libs/common/src/lib/helper.ts

@@ -116,3 +116,7 @@ export const DATE_FORMAT = 'yyyy-MM-dd';
 export function parseDate(date: string) {
   return parse(date, DATE_FORMAT, new Date());
 }
+
+export function prettifySymbol(aSymbol: string): string {
+  return aSymbol?.replace(ghostfolioScraperApiSymbolPrefix, '');
+}

libs/common/src/lib/interfaces/portfolio-public-details.interface.ts

@@ -1,10 +1,16 @@
 import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 
 export interface PortfolioPublicDetails {
+  hasDetails: boolean;
   holdings: {
     [symbol: string]: Pick<
       PortfolioPosition,
-      'allocationCurrent' | 'countries' | 'name' | 'sectors' | 'value'
+      | 'allocationCurrent'
+      | 'countries'
+      | 'currency'
+      | 'name'
+      | 'sectors'
+      | 'value'
     >;
   };
 }

libs/common/src/lib/interfaces/statistics.interface.ts

@@ -1,6 +1,8 @@
 export interface Statistics {
   activeUsers1d: number;
+  activeUsers7d: number;
   activeUsers30d: number;
   gitHubContributors: number;
   gitHubStargazers: number;
+  newUsers30d: number;
 }

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

@@ -5,7 +5,7 @@
   }
 
   .name {
-    font-weight: 500;
+    font-weight: 600;
   }
 }
 

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -318,9 +318,9 @@ export class PortfolioProportionChartComponent
           type: 'doughnut'
         });
       }
-
-      this.isLoading = false;
     }
+
+    this.isLoading = false;
   }
 
   /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostfolio",
-  "version": "1.65.0",
+  "version": "1.68.0",
   "homepage": "https://ghostfol.io",
   "license": "AGPL-3.0",
   "scripts": {
@@ -175,5 +175,8 @@
       "parser": "typescript",
       "style": "module"
     }
+  },
+  "prisma": {
+    "seed": "node prisma/seed.js"
   }
 }

prisma/seed.js

@@ -1,10 +1,10 @@
-import {
+const {
   AccountType,
   DataSource,
   PrismaClient,
   Role,
   Type
-} from '@prisma/client';
+} = require('@prisma/client');
 const prisma = new PrismaClient();
 
 async function main() {