Refactoring

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

@@ -7,9 +7,15 @@ import {
   User
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
-import { HoldingType, ToggleOption } from '@ghostfolio/common/types';
+import {
+  HoldingType,
+  HoldingViewMode,
+  ToggleOption
+} from '@ghostfolio/common/types';
 
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Router } from '@angular/router';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -30,6 +36,7 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
     { label: $localize`Closed`, value: 'CLOSED' }
   ];
   public user: User;
+  public viewModeFormControl = new FormControl<HoldingViewMode>('TABLE');
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -38,6 +45,7 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
     private impersonationStorageService: ImpersonationStorageService,
+    private router: Router,
     private userService: UserService
   ) {}
 
@@ -80,6 +88,14 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
   public onChangeHoldingType(aHoldingType: HoldingType) {
     this.holdingType = aHoldingType;
 
+    if (this.holdingType === 'ACTIVE') {
+      this.viewModeFormControl.enable();
+    } else if (this.holdingType === 'CLOSED') {
+      this.viewModeFormControl.disable();
+
+      this.viewModeFormControl.setValue('TABLE');
+    }
+
     this.holdings = undefined;
 
     this.fetchHoldings()
@@ -92,15 +108,11 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
   }
 
   public onSymbolClicked({ dataSource, symbol }: UniqueAsset) {
-    // TODO
+    if (dataSource && symbol) {
-
+      this.router.navigate([], {
-    // if (dataSource && symbol) {
+        queryParams: { dataSource, symbol, holdingDetailDialog: true }
-    //   this.router.navigate([], {
+      });
-    //     queryParams: { dataSource, symbol, holdingDetailDialog: true }
+    }
-    //   });
-    // }
-
-    console.log({ dataSource, symbol });
   }
 
   public ngOnDestroy() {

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

@@ -6,37 +6,60 @@
   </div>
   <div class="row">
     <div class="col-lg">
-      <div class="d-flex justify-content-end mb-3">
+      <div class="d-flex">
-        <gf-toggle
+        @if (user?.settings?.isExperimentalFeatures) {
-          class="d-none d-lg-block"
+          <div class="d-flex">
-          [defaultValue]="holdingType"
+            <div class="d-none d-lg-block">
-          [isLoading]="false"
+              <mat-button-toggle-group
-          [options]="holdingTypeOptions"
+                [formControl]="viewModeFormControl"
-          (change)="onChangeHoldingType($event.value)"
+                [hideSingleSelectionIndicator]="true"
-        />
+              >
-      </div>
+                <mat-button-toggle value="TABLE">
-      <gf-treemap-chart
+                  <ion-icon name="reorder-four-outline" />
-        cursor="pointer"
+                </mat-button-toggle>
-        [holdings]="holdings"
+                <mat-button-toggle value="CHART">
-        (treemapChartClicked)="onSymbolClicked($event)"
+                  <ion-icon name="grid-outline" />
-      />
+                </mat-button-toggle>
-      <gf-holdings-table
+              </mat-button-toggle-group>
-        [baseCurrency]="user?.settings?.baseCurrency"
+            </div>
-        [deviceType]="deviceType"
+          </div>
-        [hasPermissionToCreateActivity]="hasPermissionToCreateOrder"
+        }
-        [holdings]="holdings"
+        <div class="align-items-center d-flex flex-grow-1 justify-content-end">
-        [locale]="user?.settings?.locale"
+          <gf-toggle
-      />
+            class="d-none d-lg-block"
-      @if (hasPermissionToCreateOrder && holdings?.length > 0) {
+            [defaultValue]="holdingType"
-        <div class="text-center">
+            [isLoading]="false"
-          <a
+            [options]="holdingTypeOptions"
-            class="mt-3"
+            (change)="onChangeHoldingType($event.value)"
-            i18n
+          />
-            mat-stroked-button
-            [routerLink]="['/portfolio', 'activities']"
-            >Manage Activities</a
-          >
         </div>
+      </div>
+      @if (viewModeFormControl.value === 'CHART') {
+        <gf-treemap-chart
+          class="mt-3"
+          cursor="pointer"
+          [holdings]="holdings"
+          (treemapChartClicked)="onSymbolClicked($event)"
+        />
+      } @else if (viewModeFormControl.value === 'TABLE') {
+        <gf-holdings-table
+          [baseCurrency]="user?.settings?.baseCurrency"
+          [deviceType]="deviceType"
+          [hasPermissionToCreateActivity]="hasPermissionToCreateOrder"
+          [holdings]="holdings"
+          [locale]="user?.settings?.locale"
+        />
+        @if (hasPermissionToCreateOrder && holdings?.length > 0) {
+          <div class="text-center">
+            <a
+              class="mt-3"
+              i18n
+              mat-stroked-button
+              [routerLink]="['/portfolio', 'activities']"
+              >Manage Activities</a
+            >
+          </div>
+        }
       }
     </div>
   </div>

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

@@ -4,7 +4,9 @@ import { GfTreemapChartComponent } from '@ghostfolio/ui/treemap-chart';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { RouterModule } from '@angular/router';
 
 import { HomeHoldingsComponent } from './home-holdings.component';
@@ -13,10 +15,13 @@ import { HomeHoldingsComponent } from './home-holdings.component';
   declarations: [HomeHoldingsComponent],
   imports: [
     CommonModule,
+    FormsModule,
     GfHoldingsTableComponent,
     GfToggleModule,
     GfTreemapChartComponent,
     MatButtonModule,
+    MatButtonToggleModule,
+    ReactiveFormsModule,
     RouterModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

libs/common/src/lib/types/holding-view-mode.type.ts

@@ -0,0 +1 @@
+export type HoldingViewMode = 'CHART' | 'TABLE';

libs/common/src/lib/types/index.ts

@@ -8,6 +8,7 @@ import type { DateRange } from './date-range.type';
 import type { Granularity } from './granularity.type';
 import type { GroupBy } from './group-by.type';
 import type { HoldingType } from './holding-type.type';
+import type { HoldingViewMode } from './holding-view-mode.type';
 import type { MarketAdvanced } from './market-advanced.type';
 import type { MarketDataPreset } from './market-data-preset.type';
 import type { MarketState } from './market-state.type';
@@ -30,6 +31,7 @@ export type {
   Granularity,
   GroupBy,
   HoldingType,
+  HoldingViewMode,
   Market,
   MarketAdvanced,
   MarketDataPreset,

libs/ui/src/lib/treemap-chart/treemap-chart.component.ts

@@ -19,6 +19,7 @@ import { ChartConfiguration } from 'chart.js';
 import { LinearScale } from 'chart.js';
 import { Chart } from 'chart.js';
 import { TreemapController, TreemapElement } from 'chartjs-chart-treemap';
+import { orderBy } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 const { gray, green, red } = require('open-color');
@@ -102,7 +103,7 @@ export class GfTreemapChartComponent
             align: 'left',
             color: ['white'],
             display: true,
-            font: [{ size: 16, weight: 'bold' }, { size: 12 }],
+            font: [{ size: 14 }, { size: 11 }, { lineHeight: 2, size: 14 }],
             formatter(ctx) {
               const netPerformancePercentWithCurrencyEffect =
                 ctx.raw._data.netPerformancePercentWithCurrencyEffect;
@@ -133,11 +134,16 @@ export class GfTreemapChartComponent
             onClick: (event, activeElements) => {
               try {
                 const dataIndex = activeElements[0].index;
+                const datasetIndex = activeElements[0].datasetIndex;
 
-                const dataSource: DataSource =
+                const dataset = orderBy(
-                  event.chart.data.datasets[0].tree[dataIndex].dataSource;
+                  event.chart.data.datasets[datasetIndex].tree,
-                const symbol: string =
+                  ['allocationInPercentage'],
-                  event.chart.data.datasets[0].tree[dataIndex].symbol;
+                  ['desc']
+                );
+
+                const dataSource: DataSource = dataset[dataIndex].dataSource;
+                const symbol: string = dataset[dataIndex].symbol;
 
                 this.treemapChartClicked.emit({ dataSource, symbol });
               } catch {}
@@ -148,6 +154,11 @@ export class GfTreemapChartComponent
                   ? this.cursor
                   : 'default';
               }
+            },
+            plugins: {
+              tooltip: {
+                enabled: false
+              }
             }
           },
           type: 'treemap'