Merge branch 'main' of gitea.suda.codes:giteauser/ghostfolio-mirror

CHANGELOG.md

@@ -9,11 +9,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Extended the content of the _Self-Hosting_ section by the benchmarks concept on the Frequently Asked Questions (FAQ) page
+- Extended the content of the _Self-Hosting_ section by the benchmarks concept for _Compare with..._ on the Frequently Asked Questions (FAQ) page
+- Extended the content of the _Self-Hosting_ section by the benchmarks concept for _Markets_ on the Frequently Asked Questions (FAQ) page
 - Set the permissions (`chmod 0700`) on `entrypoint.sh` in the `Dockerfile`
 
 ### Changed
 
+- Improved the empty state in the benchmarks of the markets overview
 - Disabled the text hover effect in the chart of the holdings tab on the home page (experimental)
 - Improved the usability to customize the rule thresholds in the _X-ray_ section by introducing units (experimental)
 - Switched to adjusted market prices (splits and dividends) in the get historical functionality of the _EOD Historical Data_ service

apps/client/src/app/components/home-market/home-market.component.ts

@@ -29,7 +29,6 @@ export class HomeMarketComponent implements OnDestroy, OnInit {
   public hasPermissionToAccessFearAndGreedIndex: boolean;
   public historicalDataItems: HistoricalDataItem[];
   public info: InfoItem;
-  public isLoading = true;
   public readonly numberOfDays = 365;
   public user: User;
 
@@ -43,7 +42,6 @@ export class HomeMarketComponent implements OnDestroy, OnInit {
   ) {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
     this.info = this.dataService.fetchInfo();
-    this.isLoading = true;
 
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -89,7 +87,6 @@ export class HomeMarketComponent implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ benchmarks }) => {
         this.benchmarks = benchmarks;
-        this.isLoading = false;
 
         this.changeDetectorRef.markForCheck();
       });

apps/client/src/app/components/home-market/home-market.html

@@ -36,16 +36,6 @@
         [locale]="user?.settings?.locale || undefined"
         [user]="user"
       />
-      @if (isLoading) {
-        <ngx-skeleton-loader
-          animation="pulse"
-          class="px-2 py-3"
-          [theme]="{
-            height: '1.5rem',
-            width: '100%'
-          }"
-        />
-      }
     </div>
   </div>
 </div>

apps/client/src/app/components/home-market/home-market.module.ts

@@ -4,7 +4,6 @@ import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { HomeMarketComponent } from './home-market.component';
 
@@ -15,8 +14,7 @@ import { HomeMarketComponent } from './home-market.component';
     CommonModule,
     GfBenchmarkComponent,
     GfFearAndGreedIndexModule,
-    GfLineChartComponent,
-    NgxSkeletonLoaderModule
+    GfLineChartComponent
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

apps/client/src/app/pages/faq/self-hosting/self-hosting-page.html

@@ -139,9 +139,9 @@
         </mat-card-header>
         <mat-card-content>
           <p>
-            To compare your performance with benchmarks like
-            <i>Bitcoin</i>, <i>Gold</i>, or the <i>S&P 500</i>, follow these
-            steps.
+            To compare your performance with benchmarks (see
+            <i>Compare with...</i>) like <i>Bitcoin</i>, <i>Gold</i>, or the
+            <i>S&P 500</i>, follow these steps.
           </p>
           <ol>
             <li>Open the <i>Admin Control</i> panel</li>
@@ -170,6 +170,24 @@
           </ol>
         </mat-card-content>
       </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title>How do I set up <i>Markets</i>?</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <p>The <i>Markets</i> list is derived from your <i>Benchmarks</i>.</p>
+          <ol>
+            <li>Open the <i>Admin Control</i> panel</li>
+            <li>Navigate to the <i>Market Data</i> section</li>
+            <li>Choose an asset profile</li>
+            <li>In the dialog, check the <i>Benchmark</i> box</li>
+          </ol>
+          <p>
+            Please note: Data is cached, meaning changes may take a few minutes
+            to appear.
+          </p>
+        </mat-card-content>
+      </mat-card>
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-header>
           <mat-card-title>Which devices are supported?</mat-card-title>

libs/ui/src/lib/benchmark/benchmark.component.html

@@ -122,3 +122,18 @@
     "
   ></tr>
 </table>
+
+@if (isLoading) {
+  <ngx-skeleton-loader
+    animation="pulse"
+    class="px-4 py-3"
+    [theme]="{
+      height: '1.5rem',
+      width: '100%'
+    }"
+  />
+} @else if (benchmarks?.length === 0) {
+  <div class="p-3 text-center text-muted">
+    <small i18n>No data available</small>
+  </div>
+}

libs/ui/src/lib/benchmark/benchmark.component.ts

@@ -49,6 +49,7 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
   @Input() user: User;
 
   public displayedColumns = ['name', 'date', 'change', 'marketCondition'];
+  public isLoading = true;
   public resolveMarketCondition = resolveMarketCondition;
   public translate = translate;
 
@@ -76,6 +77,10 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
   }
 
   public ngOnChanges() {
+    if (this.benchmarks) {
+      this.isLoading = false;
+    }
+
     if (this.user?.settings?.isExperimentalFeatures) {
       this.displayedColumns = [
         'name',