Release 1.58.0 (#404)

* Improve tooltips

* Update changelog

CHANGELOG.md

@@ -5,6 +5,24 @@ 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.58.0 - 02.10.2021
+
+### Changed
+
+- Improved the symbol conversion for _Yahoo Finance_: Support for _Solana USD_ (`SOL1-USD`)
+- Improved the tooltips of the allocations page
+- Upgraded `envalid` from version `7.1.0` to `7.2.1`
+
+## 1.57.0 - 29.09.2021
+
+### Added
+
+- Added a protection for endpoints (subscriptions)
+
+### Changed
+
+- Reformatted the exchange rates table in the admin control panel
+
 ## 1.56.0 - 25.09.2021
 
 ### Added

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

@@ -3,6 +3,7 @@ import {
   hasNotDefinedValuesInObject,
   nullifyValuesInObject
 } from '@ghostfolio/api/helper/object.helper';
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import {
   PortfolioDetails,
@@ -38,6 +39,7 @@ import { PortfolioService } from './portfolio.service';
 @Controller('portfolio')
 export class PortfolioController {
   public constructor(
+    private readonly configurationService: ConfigurationService,
     private readonly exchangeRateDataService: ExchangeRateDataService,
     private readonly portfolioService: PortfolioService,
     @Inject(REQUEST) private readonly request: RequestWithUser,
@@ -47,8 +49,17 @@ export class PortfolioController {
   @Get('investments')
   @UseGuards(AuthGuard('jwt'))
   public async findAll(
-    @Headers('impersonation-id') impersonationId
+    @Headers('impersonation-id') impersonationId,
+    @Res() res: Response
   ): Promise<InvestmentItem[]> {
+    if (
+      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
+      this.request.user.subscription.type === 'Basic'
+    ) {
+      res.status(StatusCodes.FORBIDDEN);
+      return <any>res.json([]);
+    }
+
     let investments = await this.portfolioService.getInvestments(
       impersonationId
     );
@@ -68,7 +79,7 @@ export class PortfolioController {
       }));
     }
 
-    return investments;
+    return <any>res.json(investments);
   }
 
   @Get('chart')
@@ -125,6 +136,14 @@ export class PortfolioController {
     @Query('range') range,
     @Res() res: Response
   ): Promise<PortfolioDetails> {
+    if (
+      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
+      this.request.user.subscription.type === 'Basic'
+    ) {
+      res.status(StatusCodes.FORBIDDEN);
+      return <any>res.json({ accounts: {}, holdings: {} });
+    }
+
     const { accounts, holdings, hasErrors } =
       await this.portfolioService.getDetails(impersonationId, range);
 
@@ -295,8 +314,19 @@ export class PortfolioController {
   @Get('report')
   @UseGuards(AuthGuard('jwt'))
   public async getReport(
-    @Headers('impersonation-id') impersonationId
+    @Headers('impersonation-id') impersonationId,
+    @Res() res: Response
   ): Promise<PortfolioReport> {
-    return await this.portfolioService.getReport(impersonationId);
+    if (
+      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
+      this.request.user.subscription.type === 'Basic'
+    ) {
+      res.status(StatusCodes.FORBIDDEN);
+      return <any>res.json({ rules: [] });
+    }
+
+    return <any>(
+      res.json(await this.portfolioService.getReport(impersonationId))
+    );
   }
 }

apps/api/src/services/data-provider/yahoo-finance/yahoo-finance.service.ts

@@ -256,18 +256,19 @@ export const convertFromYahooFinanceSymbol = (aYahooFinanceSymbol: string) => {
 /**
  * Converts a symbol to a Yahoo Finance symbol
  *
- * Currency:        USDCHF=X
- * Cryptocurrency:  BTC-USD
+ * Currency:        USDCHF  -> USDCHF=X
+ * Cryptocurrency:  BTCUSD  -> BTC-USD
+ *                  DOGEUSD -> DOGE-USD
+ *                  SOL1USD -> SOL1-USD
  */
 export const convertToYahooFinanceSymbol = (aSymbol: string) => {
   if (isCurrency(aSymbol)) {
-    if (isCrypto(aSymbol)) {
+    if (isCrypto(aSymbol) || isCrypto(aSymbol.replace('1', ''))) {
       // Add a dash before the last three characters
       // BTCUSD  -> BTC-USD
       // DOGEUSD -> DOGE-USD
-      return `${aSymbol.substring(0, aSymbol.length - 3)}-${aSymbol.substring(
-        aSymbol.length - 3
-      )}`;
+      // SOL1USD -> SOL1-USD
+      return aSymbol.replace('USD', '-USD');
     }
 
     return `${aSymbol}=X`;

apps/client/src/app/components/positions-table/positions-table.component.html

@@ -83,10 +83,10 @@
     *matRowDef="let row; columns: displayedColumns"
     mat-row
     [ngClass]="{
-      'cursor-pointer': !this.ignoreAssetClasses.includes(row.assetClass)
+      'cursor-pointer': !ignoreAssetClasses.includes(row.assetClass)
     }"
     (click)="
-      !this.ignoreAssetClasses.includes(row.assetClass) &&
+      !ignoreAssetClasses.includes(row.assetClass) &&
         onOpenPositionDialog({ symbol: row.symbol })
     "
   ></tr>

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

@@ -18,6 +18,7 @@ import svgMap from 'svgmap';
 export class WorldMapChartComponent implements OnChanges, OnDestroy, OnInit {
   @Input() baseCurrency: string;
   @Input() countries: { [code: string]: { name: string; value: number } };
+  @Input() isInPercent = false;
 
   public isLoading = true;
   public svgMapElement;
@@ -41,6 +42,20 @@ export class WorldMapChartComponent implements OnChanges, OnDestroy, OnInit {
   }
 
   private initialize() {
+    if (this.isInPercent) {
+      // Convert value of countries to percentage
+      let sum = 0;
+      Object.keys(this.countries).map((country) => {
+        sum += this.countries[country].value;
+      });
+
+      Object.keys(this.countries).map((country) => {
+        this.countries[country].value = Number(
+          ((this.countries[country].value * 100) / sum).toFixed(2)
+        );
+      });
+    }
+
     this.svgMapElement = new svgMap({
       colorMax: '#22bdb9',
       colorMin: '#c3f1f0',
@@ -49,7 +64,7 @@ export class WorldMapChartComponent implements OnChanges, OnDestroy, OnInit {
         applyData: 'value',
         data: {
           value: {
-            format: `{0} ${this.baseCurrency}`
+            format: this.isInPercent ? `{0}%` : `{0} ${this.baseCurrency}`
           }
         },
         values: this.countries

apps/client/src/app/core/http-response.interceptor.ts

@@ -61,7 +61,23 @@ export class HttpResponseInterceptor implements HttpInterceptor {
         return event;
       }),
       catchError((error: HttpErrorResponse) => {
-        if (error.status === StatusCodes.INTERNAL_SERVER_ERROR) {
+        if (error.status === StatusCodes.FORBIDDEN) {
+          if (!this.snackBarRef) {
+            this.snackBarRef = this.snackBar.open(
+              'This feature requires a subscription.',
+              'Upgrade Plan',
+              { duration: 6000 }
+            );
+
+            this.snackBarRef.afterDismissed().subscribe(() => {
+              this.snackBarRef = undefined;
+            });
+
+            this.snackBarRef.onAction().subscribe(() => {
+              this.router.navigate(['/pricing']);
+            });
+          }
+        } else if (error.status === StatusCodes.INTERNAL_SERVER_ERROR) {
           if (!this.snackBarRef) {
             this.snackBarRef = this.snackBar.open(
               'Oops! Something went wrong. Please try again later.',

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

@@ -1,4 +1,6 @@
 :host {
+  display: block;
+
   .fab-container {
     position: fixed;
     right: 2rem;

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

@@ -6,13 +6,32 @@
       </h3>
       <mat-card class="mb-3">
         <mat-card-content>
-          <div *ngIf="exchangeRates?.length > 0" class="d-flex my-3">
+          <div
+            *ngIf="exchangeRates?.length > 0"
+            class="align-items-start d-flex my-3"
+          >
             <div class="w-50" i18n>Exchange Rates</div>
             <div class="w-50">
-              <div *ngFor="let exchangeRate of exchangeRates" class="mb-1">
-                1 {{ exchangeRate.label1 }} = {{ exchangeRate.value | number :
-                '1.5-5' }} {{ exchangeRate.label2 }}
-              </div>
+              <table>
+                <tr *ngFor="let exchangeRate of exchangeRates">
+                  <td class="d-flex">
+                    <gf-value
+                      [locale]="user?.settings?.locale"
+                      [value]="1"
+                    ></gf-value>
+                  </td>
+                  <td class="pl-1">{{ exchangeRate.label1 }}</td>
+                  <td class="px-1">=</td>
+                  <td class="d-flex justify-content-end">
+                    <gf-value
+                      [locale]="user?.settings?.locale"
+                      [precision]="4"
+                      [value]="exchangeRate.value"
+                    ></gf-value>
+                  </td>
+                  <td class="pl-1">{{ exchangeRate.label2 }}</td>
+                </tr>
+              </table>
             </div>
           </div>
           <div class="d-flex my-3">

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatMenuModule } from '@angular/material/menu';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
+import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { AdminPageRoutingModule } from './admin-page-routing.module';
 import { AdminPageComponent } from './admin-page.component';
@@ -14,6 +15,7 @@ import { AdminPageComponent } from './admin-page.component';
   imports: [
     AdminPageRoutingModule,
     CommonModule,
+    GfValueModule,
     MatButtonModule,
     MatCardModule,
     MatMenuModule

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

@@ -37,13 +37,23 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
     { label: 'Current', value: 'current' }
   ];
   public portfolioDetails: PortfolioDetails;
-  public positions: { [symbol: string]: any };
+  public positions: {
+    [symbol: string]: Pick<
+      PortfolioPosition,
+      | 'assetClass'
+      | 'assetSubClass'
+      | 'currency'
+      | 'exchange'
+      | 'name'
+      | 'value'
+    >;
+  };
   public positionsArray: PortfolioPosition[];
   public sectors: {
     [name: string]: { name: string; value: number };
   };
   public symbols: {
-    [name: string]: { name: string; value: number };
+    [name: string]: { name: string; symbol: string; value: number };
   };
 
   public user: User;
@@ -121,6 +131,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
     this.symbols = {
       [UNKNOWN_KEY]: {
         name: UNKNOWN_KEY,
+        symbol: UNKNOWN_KEY,
         value: 0
       }
     };
@@ -137,15 +148,29 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
     for (const [symbol, position] of Object.entries(
       this.portfolioDetails.holdings
     )) {
+      let value = 0;
+
+      if (aPeriod === 'original') {
+        if (this.hasImpersonationId) {
+          value = position.allocationInvestment;
+        } else {
+          value = position.investment;
+        }
+      } else {
+        if (this.hasImpersonationId) {
+          value = position.allocationCurrent;
+        } else {
+          value = position.value;
+        }
+      }
+
       this.positions[symbol] = {
+        value,
         assetClass: position.assetClass,
         assetSubClass: position.assetSubClass,
         currency: position.currency,
         exchange: position.exchange,
-        value:
-          aPeriod === 'original'
-            ? position.allocationInvestment
-            : position.allocationCurrent
+        name: position.name
       };
       this.positionsArray.push(position);
 
@@ -221,7 +246,8 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
 
       if (position.assetClass === AssetClass.EQUITY) {
         this.symbols[symbol] = {
-          name: symbol,
+          symbol,
+          name: position.name,
           value: aPeriod === 'original' ? position.investment : position.value
         };
       }

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

@@ -19,7 +19,7 @@
         <mat-card-content>
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
-            [isInPercent]="hasImpersonationId"
+            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['name']"
             [locale]="user?.settings?.locale"
             [positions]="accounts"
@@ -43,7 +43,7 @@
         <mat-card-content>
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
-            [isInPercent]="true"
+            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['assetClass', 'assetSubClass']"
             [locale]="user?.settings?.locale"
             [positions]="positions"
@@ -67,7 +67,7 @@
         <mat-card-content>
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
-            [isInPercent]="true"
+            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['currency']"
             [locale]="user?.settings?.locale"
             [positions]="positions"
@@ -90,8 +90,8 @@
           <gf-portfolio-proportion-chart
             class="mx-auto"
             [baseCurrency]="user?.settings?.baseCurrency"
-            [isInPercent]="false"
-            [keys]="['name']"
+            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+            [keys]="['symbol']"
             [locale]="user?.settings?.locale"
             [positions]="symbols"
             [showLabels]="deviceType !== 'mobile'"
@@ -113,7 +113,7 @@
         <mat-card-content>
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
-            [isInPercent]="false"
+            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['name']"
             [locale]="user?.settings?.locale"
             [maxItems]="10"
@@ -138,7 +138,7 @@
         <mat-card-content>
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
-            [isInPercent]="false"
+            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['name']"
             [locale]="user?.settings?.locale"
             [positions]="continents"
@@ -161,7 +161,7 @@
           <gf-portfolio-proportion-chart
             [keys]="['name']"
             [baseCurrency]="user?.settings?.baseCurrency"
-            [isInPercent]="false"
+            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [locale]="user?.settings?.locale"
             [maxItems]="10"
             [positions]="countries"
@@ -186,6 +186,7 @@
           <gf-world-map-chart
             [baseCurrency]="user?.settings?.baseCurrency"
             [countries]="countries"
+            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
           ></gf-world-map-chart>
         </mat-card-content>
       </mat-card>

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

@@ -1,4 +1,6 @@
 :host {
+  display: block;
+
   .allocations-by-symbol {
     gf-portfolio-proportion-chart {
       max-width: 80vh;

apps/client/src/app/pages/portfolio/analysis/analysis-page.scss

@@ -1,4 +1,6 @@
 :host {
+  display: block;
+
   .investment-chart {
     .mat-card {
       .mat-card-content {

apps/client/src/app/pages/portfolio/transactions/transactions-page.scss

@@ -1,4 +1,6 @@
 :host {
+  display: block;
+
   .fab-container {
     position: fixed;
     right: 2rem;

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

@@ -35,7 +35,10 @@ export class PortfolioProportionChartComponent
   @Input() maxItems?: number;
   @Input() showLabels = false;
   @Input() positions: {
-    [symbol: string]: Pick<PortfolioPosition, 'type'> & { value: number };
+    [symbol: string]: Pick<PortfolioPosition, 'type'> & {
+      name: string;
+      value: number;
+    };
   } = {};
 
   @ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>;
@@ -80,6 +83,7 @@ export class PortfolioProportionChartComponent
     const chartData: {
       [symbol: string]: {
         color?: string;
+        name: string;
         subCategory: { [symbol: string]: { value: number } };
         value: number;
       };
@@ -106,6 +110,7 @@ export class PortfolioProportionChartComponent
           }
         } else {
           chartData[this.positions[symbol][this.keys[0]]] = {
+            name: this.positions[symbol].name,
             subCategory: {},
             value: this.positions[symbol].value
           };
@@ -123,6 +128,7 @@ export class PortfolioProportionChartComponent
           chartData[UNKNOWN_KEY].value += this.positions[symbol].value;
         } else {
           chartData[UNKNOWN_KEY] = {
+            name: this.positions[symbol].name,
             subCategory: this.keys[1]
               ? { [this.keys[1]]: { value: 0 } }
               : undefined,
@@ -152,7 +158,7 @@ export class PortfolioProportionChartComponent
       if (!unknownItem) {
         const index = chartDataSorted.push([
           UNKNOWN_KEY,
-          { subCategory: {}, value: 0 }
+          { name: UNKNOWN_KEY, subCategory: {}, value: 0 }
         ]);
         unknownItem = chartDataSorted[index];
       }
@@ -160,6 +166,7 @@ export class PortfolioProportionChartComponent
       rest.forEach((restItem) => {
         if (unknownItem?.[1]) {
           unknownItem[1] = {
+            name: UNKNOWN_KEY,
             subCategory: {},
             value: unknownItem[1].value + restItem[1].value
           };
@@ -278,17 +285,29 @@ export class PortfolioProportionChartComponent
                     const labelIndex =
                       (data.datasets[context.datasetIndex - 1]?.data?.length ??
                         0) + context.dataIndex;
-                    const label = context.chart.data.labels?.[labelIndex] ?? '';
+                    const symbol =
+                      context.chart.data.labels?.[labelIndex] ?? '';
+
+                    const name = this.positions[<string>symbol]?.name;
+
+                    let sum = 0;
+                    context.dataset.data.map((item) => {
+                      sum += item;
+                    });
+
+                    const percentage = (context.parsed * 100) / sum;
 
                     if (this.isInPercent) {
-                      const value = 100 * <number>context.raw;
-                      return `${label} (${value.toFixed(2)}%)`;
+                      return `${name ?? symbol} (${percentage.toFixed(2)}%)`;
                     } else {
                       const value = <number>context.raw;
-                      return `${label} (${value.toLocaleString(this.locale, {
-                        maximumFractionDigits: 2,
-                        minimumFractionDigits: 2
-                      })} ${this.baseCurrency})`;
+                      return `${name ?? symbol}: ${value.toLocaleString(
+                        this.locale,
+                        {
+                          maximumFractionDigits: 2,
+                          minimumFractionDigits: 2
+                        }
+                      )} ${this.baseCurrency} (${percentage.toFixed(2)}%)`;
                     }
                   }
                 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostfolio",
-  "version": "1.56.0",
+  "version": "1.58.0",
   "homepage": "https://ghostfol.io",
   "license": "AGPL-3.0",
   "scripts": {
@@ -90,7 +90,7 @@
     "countup.js": "2.0.7",
     "cryptocurrencies": "7.0.0",
     "date-fns": "2.22.1",
-    "envalid": "7.1.0",
+    "envalid": "7.2.1",
     "http-status-codes": "2.1.4",
     "ionicons": "5.5.1",
     "lodash": "4.17.21",

yarn.lock

@@ -7852,10 +7852,12 @@ env-paths@^2.2.0:
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
   integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
 
-envalid@7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/envalid/-/envalid-7.1.0.tgz#fccc499abb257e3992d73b02d014c867a85e2a69"
-  integrity sha512-C5rtCxfj+ozW5q79fBYKcBEf0KSNklKwZudjCzXy9ANT8Pz1MKxPBn6unZnYXXy6e+cqVgnEURQeXmdueG9/kA==
+envalid@7.2.1:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/envalid/-/envalid-7.2.1.tgz#7e9e62f3bc1ed209517f65b563e24c7b79c9793b"
+  integrity sha512-NU0ty82LSvHF+Uio9cLNKhrDyivFv7GSvhOu91WbtOOyNKRzXWeDZaopldXJkGBAZ5UuquqXp6VBUXuTfXrUrw==
+  dependencies:
+    tslib "2.3.1"
 
 err-code@^2.0.2:
   version "2.0.3"
@@ -16721,16 +16723,16 @@ tslib@2.3.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
   integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
 
+tslib@2.3.1, tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+
 tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
-  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
-
 tslib@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"