Task/consolidate markets pages (#7471)

* Consolidate markets pages

* Update changelog

CHANGELOG.md

@@ -7,10 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added an empty state to the _Fear & Greed Index_ component
+- Added a _Storybook_ story for the _Fear & Greed Index_ component
+
 ### Changed
 
 - Moved the tags to the overview tab of the account detail dialog (experimental)
 - Moved the tags to the overview tab of the holding detail dialog
+- Consolidated the markets pages into a single route where the _Fear & Greed Index_ is controlled by permission
 - Refactored the line chart components to share the common chart configuration
 - Improved the language localization for Spanish (`es`)
 - Improved the language localization for Ukrainian (`uk`)

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

@@ -555,7 +555,10 @@ export class UserService {
       }
     } else {
       if (
-        await this.propertyService.getByKey<string>(PROPERTY_API_KEY_GHOSTFOLIO)
+        this.configurationService.get('ENABLE_FEATURE_FEAR_AND_GREED_INDEX') ||
+        (await this.propertyService.getByKey<string>(
+          PROPERTY_API_KEY_GHOSTFOLIO
+        ))
       ) {
         currentPermissions.push(permissions.readMarketDataOfMarkets);
       }

apps/client/src/app/components/fear-and-greed-index/fear-and-greed-index.component.html

@@ -1,24 +0,0 @@
-<div class="position-relative">
-  <div class="align-items-center d-flex flex-row" [hidden]="!fearAndGreedIndex">
-    <div class="h2 mb-0 mr-2">{{ fearAndGreedIndexEmoji }}</div>
-    <div>
-      <div class="h4 mb-0">
-        <span class="mr-2">{{ fearAndGreedIndexText }}</span>
-        <small class="text-muted"
-          ><strong>{{ fearAndGreedIndex | number: '1.0-0' }}</strong
-          >/100</small
-        >
-      </div>
-      <small class="d-block" i18n>Current Market Mood</small>
-    </div>
-  </div>
-  @if (!fearAndGreedIndex) {
-    <ngx-skeleton-loader
-      animation="pulse"
-      class="position-absolute w-100"
-      [theme]="{
-        height: '100%'
-      }"
-    />
-  }
-</div>

apps/client/src/app/components/fear-and-greed-index/fear-and-greed-index.component.scss

@@ -1,8 +0,0 @@
-:host {
-  display: block;
-
-  ngx-skeleton-loader {
-    bottom: 0;
-    top: 0;
-  }
-}

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

@@ -1,80 +0,0 @@
-import { GfFearAndGreedIndexComponent } from '@ghostfolio/client/components/fear-and-greed-index/fear-and-greed-index.component';
-import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { Benchmark, InfoItem, User } from '@ghostfolio/common/interfaces';
-import { hasPermission, permissions } from '@ghostfolio/common/permissions';
-import { GfBenchmarkComponent } from '@ghostfolio/ui/benchmark';
-import { DataService } from '@ghostfolio/ui/services';
-
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  computed,
-  CUSTOM_ELEMENTS_SCHEMA,
-  DestroyRef,
-  inject,
-  OnInit,
-  signal
-} from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { DeviceDetectorService } from 'ngx-device-detector';
-
-@Component({
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [GfBenchmarkComponent, GfFearAndGreedIndexComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  selector: 'gf-home-market',
-  styleUrls: ['./home-market.scss'],
-  templateUrl: './home-market.html'
-})
-export class GfHomeMarketComponent implements OnInit {
-  protected readonly benchmarks = signal<Benchmark[]>([]);
-
-  protected readonly deviceType = computed(
-    () => this.deviceDetectorService.deviceInfo().deviceType
-  );
-
-  protected fearAndGreedIndex: number | undefined;
-  protected hasPermissionToAccessFearAndGreedIndex: boolean;
-  protected user: User;
-
-  private readonly info: InfoItem;
-
-  private readonly changeDetectorRef = inject(ChangeDetectorRef);
-  private readonly dataService = inject(DataService);
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly deviceDetectorService = inject(DeviceDetectorService);
-  private readonly userService = inject(UserService);
-
-  public constructor() {
-    this.info = this.dataService.fetchInfo();
-
-    this.userService.stateChanged
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((state) => {
-        if (state?.user) {
-          this.user = state.user;
-
-          this.changeDetectorRef.markForCheck();
-        }
-      });
-  }
-
-  public ngOnInit() {
-    this.hasPermissionToAccessFearAndGreedIndex = hasPermission(
-      this.info?.globalPermissions,
-      permissions.enableFearAndGreedIndex
-    );
-
-    if (this.hasPermissionToAccessFearAndGreedIndex) {
-      this.fearAndGreedIndex = this.info.fearAndGreedStocksMarketPrice;
-    }
-
-    this.dataService
-      .fetchBenchmarks()
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(({ benchmarks }) => {
-        this.benchmarks.set(benchmarks);
-      });
-  }
-}

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

@@ -1,35 +0,0 @@
-<div class="container">
-  <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Markets</h1>
-  @if (hasPermissionToAccessFearAndGreedIndex) {
-    <div class="mb-4 row">
-      <div class="col-xs-12 col-md-10 offset-md-1">
-        <gf-fear-and-greed-index
-          class="d-flex justify-content-center"
-          [fearAndGreedIndex]="fearAndGreedIndex"
-        />
-      </div>
-    </div>
-  }
-
-  <div class="mb-3 row">
-    <div class="col-xs-12 col-md-10 offset-md-1">
-      <gf-benchmark
-        [benchmarks]="benchmarks()"
-        [deviceType]="deviceType()"
-        [locale]="user?.settings?.locale || undefined"
-        [showSymbol]="false"
-        [user]="user"
-      />
-      @if (benchmarks()?.length > 0) {
-        <div
-          class="gf-text-wrap-balance line-height-1 mt-3 text-center text-muted"
-        >
-          <small i18n>
-            Calculations are based on delayed market data and may not be
-            displayed in real-time.</small
-          >
-        </div>
-      }
-    </div>
-  </div>
-</div>

apps/client/src/app/components/markets/markets.component.ts

@@ -1,15 +1,17 @@
-import { GfFearAndGreedIndexComponent } from '@ghostfolio/client/components/fear-and-greed-index/fear-and-greed-index.component';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { resetHours } from '@ghostfolio/common/helper';
 import {
   Benchmark,
   HistoricalDataItem,
+  InfoItem,
   MarketDataOfMarketsResponse,
   ToggleOption,
   User
 } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { FearAndGreedIndexMode } from '@ghostfolio/common/types';
 import { GfBenchmarkComponent } from '@ghostfolio/ui/benchmark';
+import { GfFearAndGreedIndexComponent } from '@ghostfolio/ui/fear-and-greed-index';
 import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
 import { DataService } from '@ghostfolio/ui/services';
 import { GfToggleComponent } from '@ghostfolio/ui/toggle';
@@ -18,9 +20,12 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  computed,
   CUSTOM_ELEMENTS_SCHEMA,
   DestroyRef,
-  OnInit
+  inject,
+  OnInit,
+  signal
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -39,29 +44,50 @@ import { DeviceDetectorService } from 'ngx-device-detector';
   templateUrl: './markets.html'
 })
 export class GfMarketsComponent implements OnInit {
-  public benchmarks: Benchmark[];
+  protected readonly benchmarks = signal<Benchmark[]>([]);
-  public deviceType: string;
+
-  public fearAndGreedIndex: number;
+  protected readonly deviceType = computed(
-  public fearAndGreedIndexData: MarketDataOfMarketsResponse['fearAndGreedIndex'];
+    () => this.deviceDetectorService.deviceInfo().deviceType
-  public fearLabel = $localize`Fear`;
+  );
-  public greedLabel = $localize`Greed`;
+
-  public historicalDataItems: HistoricalDataItem[];
+  protected readonly fearAndGreedIndexModeOptions: ToggleOption[] = [
-  public fearAndGreedIndexMode: FearAndGreedIndexMode = 'STOCKS';
-  public fearAndGreedIndexModeOptions: ToggleOption[] = [
     { label: $localize`Stocks`, value: 'STOCKS' },
     { label: $localize`Cryptocurrencies`, value: 'CRYPTOCURRENCIES' }
   ];
-  public readonly numberOfDays = 365;
+
-  public user: User;
+  protected readonly fearLabel = $localize`Fear`;
-
+  protected readonly greedLabel = $localize`Greed`;
-  public constructor(
+  protected readonly numberOfDays = 365;
-    private changeDetectorRef: ChangeDetectorRef,
+
-    private dataService: DataService,
+  protected fearAndGreedIndex: number | undefined;
-    private destroyRef: DestroyRef,
+  protected fearAndGreedIndexMode: FearAndGreedIndexMode = 'STOCKS';
-    private deviceDetectorService: DeviceDetectorService,
+  protected hasPermissionToAccessFearAndGreedIndex: boolean;
-    private userService: UserService
+  protected hasPermissionToReadMarketDataOfMarkets: boolean;
-  ) {
+  protected historicalDataItems: HistoricalDataItem[];
-    this.deviceType = this.deviceDetectorService.getDeviceInfo().deviceType;
+  protected isLoadingFearAndGreedIndex = true;
+  protected user: User;
+
+  private fearAndGreedIndexData: MarketDataOfMarketsResponse['fearAndGreedIndex'];
+
+  private readonly info: InfoItem;
+
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
+  private readonly dataService = inject(DataService);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly deviceDetectorService = inject(DeviceDetectorService);
+  private readonly userService = inject(UserService);
+
+  public constructor() {
+    this.info = this.dataService.fetchInfo();
+
+    this.hasPermissionToAccessFearAndGreedIndex = hasPermission(
+      this.info?.globalPermissions,
+      permissions.enableFearAndGreedIndex
+    );
+
+    if (this.hasPermissionToAccessFearAndGreedIndex) {
+      this.fearAndGreedIndex = this.info.fearAndGreedStocksMarketPrice;
+    }
 
     this.userService.stateChanged
       .pipe(takeUntilDestroyed(this.destroyRef))
@@ -69,6 +95,20 @@ export class GfMarketsComponent implements OnInit {
         if (state?.user) {
           this.user = state.user;
 
+          this.hasPermissionToReadMarketDataOfMarkets = hasPermission(
+            this.user.permissions,
+            permissions.readMarketDataOfMarkets
+          );
+
+          if (
+            this.hasPermissionToReadMarketDataOfMarkets &&
+            !this.fearAndGreedIndexData
+          ) {
+            this.fetchMarketDataOfMarkets();
+          } else {
+            this.isLoadingFearAndGreedIndex = false;
+          }
+
           this.changeDetectorRef.markForCheck();
         }
       });
@@ -76,27 +116,37 @@ export class GfMarketsComponent implements OnInit {
 
   public ngOnInit() {
     this.dataService
-      .fetchMarketDataOfMarkets({ includeHistoricalData: this.numberOfDays })
+      .fetchBenchmarks()
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(({ fearAndGreedIndex }) => {
+      .subscribe(({ benchmarks }) => {
-        this.fearAndGreedIndexData = fearAndGreedIndex;
+        this.benchmarks.set(benchmarks);
+      });
+  }
 
-        this.initialize();
+  protected onChangeFearAndGreedIndexMode(
+    aFearAndGreedIndexMode: FearAndGreedIndexMode
+  ) {
+    this.fearAndGreedIndexMode = aFearAndGreedIndexMode;
 
-        this.changeDetectorRef.markForCheck();
+    this.initializeFearAndGreedIndex();
-      });
+  }
 
+  private fetchMarketDataOfMarkets() {
     this.dataService
-      .fetchBenchmarks()
+      .fetchMarketDataOfMarkets({ includeHistoricalData: this.numberOfDays })
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(({ benchmarks }) => {
+      .subscribe(({ fearAndGreedIndex }) => {
-        this.benchmarks = benchmarks;
+        this.fearAndGreedIndexData = fearAndGreedIndex;
+
+        this.initializeFearAndGreedIndex();
+
+        this.isLoadingFearAndGreedIndex = false;
 
         this.changeDetectorRef.markForCheck();
       });
   }
 
-  public initialize() {
+  private initializeFearAndGreedIndex() {
     this.fearAndGreedIndex =
       this.fearAndGreedIndexData[this.fearAndGreedIndexMode]?.marketPrice;
 
@@ -109,12 +159,4 @@ export class GfMarketsComponent implements OnInit {
       }
     ];
   }
-
-  public onChangeFearAndGreedIndexMode(
-    aFearAndGreedIndexMode: FearAndGreedIndexMode
-  ) {
-    this.fearAndGreedIndexMode = aFearAndGreedIndexMode;
-
-    this.initialize();
-  }
 }

apps/client/src/app/components/markets/markets.html

@@ -1,52 +1,62 @@
 <div class="container">
   <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Markets</h1>
-  <div class="mb-5 row">
+  @if (
-    <div class="col-xs-12 col-md-10 offset-md-1">
+    hasPermissionToAccessFearAndGreedIndex ||
-      @if (user?.settings?.isExperimentalFeatures) {
+    hasPermissionToReadMarketDataOfMarkets
-        <div class="align-items-center d-flex flex-grow-1 justify-content-end">
+  ) {
-          <gf-toggle
+    <div class="mb-4 row">
-            class="d-none d-lg-block"
+      <div class="col-xs-12 col-md-10 offset-md-1">
-            [defaultValue]="fearAndGreedIndexMode"
+        @if (hasPermissionToReadMarketDataOfMarkets) {
-            [isLoading]="false"
+          @if (user?.settings?.isExperimentalFeatures) {
-            [options]="fearAndGreedIndexModeOptions"
+            <div
-            (valueChange)="onChangeFearAndGreedIndexMode($event.value)"
+              class="align-items-center d-flex flex-grow-1 justify-content-end"
+            >
+              <gf-toggle
+                class="d-none d-lg-block"
+                [defaultValue]="fearAndGreedIndexMode"
+                [isLoading]="false"
+                [options]="fearAndGreedIndexModeOptions"
+                (valueChange)="onChangeFearAndGreedIndexMode($event.value)"
+              />
+            </div>
+          }
+          <div class="mb-2 text-center text-muted">
+            <small i18n>Last {{ numberOfDays }} Days</small>
+          </div>
+          <gf-line-chart
+            class="mb-3"
+            label="Fear & Greed Index"
+            [colorScheme]="user?.settings?.colorScheme"
+            [historicalDataItems]="historicalDataItems"
+            [isAnimated]="true"
+            [locale]="user?.settings?.locale || undefined"
+            [showXAxis]="true"
+            [showYAxis]="true"
+            [yMax]="100"
+            [yMaxLabel]="greedLabel"
+            [yMin]="0"
+            [yMinLabel]="fearLabel"
           />
-        </div>
+        }
-      }
+        <gf-fear-and-greed-index
-      <div class="mb-2 text-center text-muted">
+          class="d-flex justify-content-center"
-        <small i18n>Last {{ numberOfDays }} Days</small>
+          [fearAndGreedIndex]="fearAndGreedIndex"
+          [isLoading]="isLoadingFearAndGreedIndex"
+        />
       </div>
-      <gf-line-chart
-        class="mb-3"
-        label="Fear & Greed Index"
-        [colorScheme]="user?.settings?.colorScheme"
-        [historicalDataItems]="historicalDataItems"
-        [isAnimated]="true"
-        [locale]="user?.settings?.locale || undefined"
-        [showXAxis]="true"
-        [showYAxis]="true"
-        [yMax]="100"
-        [yMaxLabel]="greedLabel"
-        [yMin]="0"
-        [yMinLabel]="fearLabel"
-      />
-      <gf-fear-and-greed-index
-        class="d-flex justify-content-center"
-        [fearAndGreedIndex]="fearAndGreedIndex"
-      />
     </div>
-  </div>
+  }
 
   <div class="mb-3 row">
     <div class="col-xs-12 col-md-10 offset-md-1">
       <gf-benchmark
-        [benchmarks]="benchmarks"
+        [benchmarks]="benchmarks()"
-        [deviceType]="deviceType"
+        [deviceType]="deviceType()"
         [locale]="user?.settings?.locale || undefined"
         [showSymbol]="false"
         [user]="user"
       />
-      @if (benchmarks?.length > 0) {
+      @if (benchmarks()?.length > 0) {
         <div
           class="gf-text-wrap-balance line-height-1 mt-3 text-center text-muted"
         >

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

@@ -1,4 +1,3 @@
-import { GfFearAndGreedIndexComponent } from '@ghostfolio/client/components/fear-and-greed-index/fear-and-greed-index.component';
 import {
   HEADER_KEY_SKIP_INTERCEPTOR,
   HEADER_KEY_TOKEN
@@ -14,6 +13,7 @@ import {
   MarketDataOfMarketsResponse,
   QuotesResponse
 } from '@ghostfolio/common/interfaces';
+import { GfFearAndGreedIndexComponent } from '@ghostfolio/ui/fear-and-greed-index';
 
 import { CommonModule } from '@angular/common';
 import {

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

@@ -179,16 +179,12 @@
             <mat-card-content class="pt-3">
               @if (isFetchFailure(marketDataOfMarkets)) {
                 🔴 {{ marketDataOfMarkets.fetchError }}
-              } @else if (marketDataOfMarkets) {
+              } @else {
                 <gf-fear-and-greed-index
                   [fearAndGreedIndex]="
-                    marketDataOfMarkets.fearAndGreedIndex.STOCKS.marketPrice
+                    marketDataOfMarkets?.fearAndGreedIndex?.STOCKS?.marketPrice
                   "
-                />
+                  [isLoading]="!marketDataOfMarkets"
-              } @else {
-                <ngx-skeleton-loader
-                  animation="pulse"
-                  [theme]="{ height: '2.5rem', width: '100%' }"
                 />
               }
             </mat-card-content>
@@ -203,17 +199,13 @@
             <mat-card-content class="pt-3">
               @if (isFetchFailure(marketDataOfMarkets)) {
                 🔴 {{ marketDataOfMarkets.fetchError }}
-              } @else if (marketDataOfMarkets) {
+              } @else {
                 <gf-fear-and-greed-index
                   [fearAndGreedIndex]="
-                    marketDataOfMarkets.fearAndGreedIndex.CRYPTOCURRENCIES
+                    marketDataOfMarkets?.fearAndGreedIndex?.CRYPTOCURRENCIES
-                      .marketPrice
+                      ?.marketPrice
                   "
-                />
+                  [isLoading]="!marketDataOfMarkets"
-              } @else {
-                <ngx-skeleton-loader
-                  animation="pulse"
-                  [theme]="{ height: '2.5rem', width: '100%' }"
                 />
               }
             </mat-card-content>

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

@@ -1,7 +1,6 @@
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { User } from '@ghostfolio/common/interfaces';
-import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 import {
   GfPageTabsComponent,
@@ -73,18 +72,8 @@ export class GfHomePageComponent implements OnInit {
             },
             {
               iconName: 'newspaper-outline',
-              label: hasPermission(
+              label: internalRoutes.home.subRoutes.markets.title,
-                this.user?.permissions,
+              routerLink: internalRoutes.home.subRoutes.markets.routerLink
-                permissions.readMarketDataOfMarkets
-              )
-                ? internalRoutes.home.subRoutes.marketsPremium.title
-                : internalRoutes.home.subRoutes.markets.title,
-              routerLink: hasPermission(
-                this.user?.permissions,
-                permissions.readMarketDataOfMarkets
-              )
-                ? internalRoutes.home.subRoutes.marketsPremium.routerLink
-                : internalRoutes.home.subRoutes.markets.routerLink
             }
           ];
         }

apps/client/src/app/pages/home/home-page.routes.ts

@@ -1,5 +1,4 @@
 import { GfHomeHoldingsComponent } from '@ghostfolio/client/components/home-holdings/home-holdings.component';
-import { GfHomeMarketComponent } from '@ghostfolio/client/components/home-market/home-market.component';
 import { GfHomeOverviewComponent } from '@ghostfolio/client/components/home-overview/home-overview.component';
 import { GfHomeSummaryComponent } from '@ghostfolio/client/components/home-summary/home-summary.component';
 import { GfHomeWatchlistComponent } from '@ghostfolio/client/components/home-watchlist/home-watchlist.component';
@@ -31,13 +30,8 @@ export const routes: Routes = [
       },
       {
         path: internalRoutes.home.subRoutes.markets.path,
-        component: GfHomeMarketComponent,
-        title: internalRoutes.home.subRoutes.markets.title
-      },
-      {
-        path: internalRoutes.home.subRoutes.marketsPremium.path,
         component: GfMarketsComponent,
-        title: internalRoutes.home.subRoutes.marketsPremium.title
+        title: internalRoutes.home.subRoutes.markets.title
       },
       {
         path: internalRoutes.home.subRoutes.watchlist.path,

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

@@ -1,11 +1,11 @@
-import { GfHomeMarketComponent } from '@ghostfolio/client/components/home-market/home-market.component';
+import { GfMarketsComponent } from '@ghostfolio/client/components/markets/markets.component';
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
-  imports: [GfHomeMarketComponent],
+  imports: [GfMarketsComponent],
   selector: 'gf-markets-page',
   styleUrls: ['./markets-page.scss'],
   templateUrl: './markets-page.html'

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

@@ -1,7 +1,7 @@
 <div class="container">
   <div class="row">
     <div class="col">
-      <gf-home-market />
+      <gf-markets />
     </div>
   </div>
 </div>

libs/common/src/lib/helper.ts

@@ -560,8 +560,10 @@ export function resetHours(aDate: Date) {
   return new Date(Date.UTC(year, month, day));
 }
 
-export function resolveFearAndGreedIndex(aValue: number) {
+export function resolveFearAndGreedIndex(aValue?: number) {
-  if (aValue <= 25) {
+  if (isNil(aValue)) {
+    return { emoji: '⚪', key: 'UNKNOWN', text: 'Unknown' };
+  } else if (aValue <= 25) {
     return { emoji: '🥵', key: 'EXTREME_FEAR', text: 'Extreme Fear' };
   } else if (aValue <= 45) {
     return { emoji: '😨', key: 'FEAR', text: 'Fear' };

libs/common/src/lib/routes/routes.ts

@@ -94,11 +94,6 @@ export const internalRoutes = {
         routerLink: ['/home', 'markets'],
         title: $localize`Markets`
       },
-      marketsPremium: {
-        path: 'markets-premium',
-        routerLink: ['/home', 'markets-premium'],
-        title: $localize`Markets`
-      },
       summary: {
         path: 'summary',
         routerLink: ['/home', 'summary'],

libs/ui/src/lib/fear-and-greed-index/fear-and-greed-index.component.html

@@ -0,0 +1,25 @@
+@if (isLoading() && !fearAndGreedIndex()) {
+  <ngx-skeleton-loader
+    animation="pulse"
+    class="w-100"
+    [theme]="{
+      height: '2.5rem'
+    }"
+  />
+} @else {
+  <div class="align-items-center d-flex flex-row">
+    <div class="h2 mb-0 mr-2">{{ fearAndGreedIndexEmoji() }}</div>
+    <div>
+      <div class="h4 mb-0">
+        <span class="mr-2">{{ fearAndGreedIndexText() }}</span>
+        <small class="text-muted"
+          ><strong>{{
+            (fearAndGreedIndex() | number: '1.0-0') ?? placeholder
+          }}</strong
+          >/100</small
+        >
+      </div>
+      <small class="d-block" i18n>Current Market Mood</small>
+    </div>
+  </div>
+}

libs/ui/src/lib/fear-and-greed-index/fear-and-greed-index.component.stories.ts

@@ -0,0 +1,39 @@
+import '@angular/localize/init';
+import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { GfFearAndGreedIndexComponent } from './fear-and-greed-index.component';
+
+export default {
+  title: 'Fear & Greed Index',
+  component: GfFearAndGreedIndexComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [NgxSkeletonLoaderModule]
+    })
+  ]
+} as Meta<GfFearAndGreedIndexComponent>;
+
+type Story = StoryObj<GfFearAndGreedIndexComponent>;
+
+export const Loading: Story = {
+  args: {
+    fearAndGreedIndex: undefined,
+    isLoading: true
+  }
+};
+
+export const Default: Story = {
+  args: {
+    fearAndGreedIndex: 50,
+    isLoading: false
+  }
+};
+
+export const Unknown: Story = {
+  args: {
+    fearAndGreedIndex: undefined,
+    isLoading: false
+  }
+};

apps/client/src/app/components/fear-and-greed-index/fear-and-greed-index.component.ts → libs/ui/src/lib/fear-and-greed-index/fear-and-greed-index.component.ts

@@ -5,8 +5,8 @@ import { DecimalPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
-  Input,
+  computed,
-  OnChanges
+  input
 } from '@angular/core';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
@@ -17,16 +17,17 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
   styleUrls: ['./fear-and-greed-index.component.scss'],
   templateUrl: './fear-and-greed-index.component.html'
 })
-export class GfFearAndGreedIndexComponent implements OnChanges {
+export class GfFearAndGreedIndexComponent {
-  @Input() fearAndGreedIndex: number;
+  public readonly fearAndGreedIndex = input<number>();
+  public readonly isLoading = input<boolean>(false);
 
-  public fearAndGreedIndexEmoji: string;
+  protected readonly placeholder = '—';
-  public fearAndGreedIndexText: string;
 
-  public ngOnChanges() {
+  protected readonly fearAndGreedIndexEmoji = computed(() => {
-    const { emoji, key } = resolveFearAndGreedIndex(this.fearAndGreedIndex);
+    return resolveFearAndGreedIndex(this.fearAndGreedIndex()).emoji;
+  });
 
-    this.fearAndGreedIndexEmoji = emoji;
+  protected readonly fearAndGreedIndexText = computed(() => {
-    this.fearAndGreedIndexText = translate(key);
+    return translate(resolveFearAndGreedIndex(this.fearAndGreedIndex()).key);
-  }
+  });
 }

libs/ui/src/lib/fear-and-greed-index/index.ts

@@ -0,0 +1 @@
+export * from './fear-and-greed-index.component';

libs/ui/src/lib/i18n.ts

@@ -85,6 +85,7 @@ const locales = {
   FEAR: $localize`Fear`,
   GREED: $localize`Greed`,
   NEUTRAL: $localize`Neutral`,
+  UNKNOWN: $localize`Unknown`,
 
   // Sectors
   'Basic Materials': $localize`Basic Materials`,