From 12dc4077e4ecc548f9a2fb3df9a3294b7a2cfa00 Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Fri, 12 Jul 2024 20:44:06 +0200 Subject: [PATCH] Refactoring --- .../home-holdings/home-holdings.component.ts | 32 ++++--- .../home-holdings/home-holdings.html | 83 ++++++++++++------- .../home-holdings/home-holdings.module.ts | 5 ++ .../src/lib/types/holding-view-mode.type.ts | 1 + libs/common/src/lib/types/index.ts | 2 + .../treemap-chart/treemap-chart.component.ts | 21 +++-- 6 files changed, 99 insertions(+), 45 deletions(-) create mode 100644 libs/common/src/lib/types/holding-view-mode.type.ts diff --git a/apps/client/src/app/components/home-holdings/home-holdings.component.ts b/apps/client/src/app/components/home-holdings/home-holdings.component.ts index fad1f9a03..ac5386c77 100644 --- a/apps/client/src/app/components/home-holdings/home-holdings.component.ts +++ b/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('TABLE'); private unsubscribeSubject = new Subject(); @@ -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([], { - // queryParams: { dataSource, symbol, holdingDetailDialog: true } - // }); - // } - - console.log({ dataSource, symbol }); + if (dataSource && symbol) { + this.router.navigate([], { + queryParams: { dataSource, symbol, holdingDetailDialog: true } + }); + } } public ngOnDestroy() { diff --git a/apps/client/src/app/components/home-holdings/home-holdings.html b/apps/client/src/app/components/home-holdings/home-holdings.html index b2d9d1077..be053415f 100644 --- a/apps/client/src/app/components/home-holdings/home-holdings.html +++ b/apps/client/src/app/components/home-holdings/home-holdings.html @@ -6,37 +6,60 @@
-
- -
- - - @if (hasPermissionToCreateOrder && holdings?.length > 0) { -
- Manage Activities +
+ @if (user?.settings?.isExperimentalFeatures) { +
+
+ + + + + + + + +
+
+ } +
+
+
+ @if (viewModeFormControl.value === 'CHART') { + + } @else if (viewModeFormControl.value === 'TABLE') { + + @if (hasPermissionToCreateOrder && holdings?.length > 0) { +
+ Manage Activities +
+ } }
diff --git a/apps/client/src/app/components/home-holdings/home-holdings.module.ts b/apps/client/src/app/components/home-holdings/home-holdings.module.ts index efaf1dfc2..df951c1a8 100644 --- a/apps/client/src/app/components/home-holdings/home-holdings.module.ts +++ b/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] diff --git a/libs/common/src/lib/types/holding-view-mode.type.ts b/libs/common/src/lib/types/holding-view-mode.type.ts new file mode 100644 index 000000000..50a4e2b29 --- /dev/null +++ b/libs/common/src/lib/types/holding-view-mode.type.ts @@ -0,0 +1 @@ +export type HoldingViewMode = 'CHART' | 'TABLE'; diff --git a/libs/common/src/lib/types/index.ts b/libs/common/src/lib/types/index.ts index fc4ddc4bf..65fdfe5f0 100644 --- a/libs/common/src/lib/types/index.ts +++ b/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, diff --git a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts b/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts index d94967c44..6ee54a5b1 100644 --- a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts +++ b/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 = - event.chart.data.datasets[0].tree[dataIndex].dataSource; - const symbol: string = - event.chart.data.datasets[0].tree[dataIndex].symbol; + const dataset = orderBy( + event.chart.data.datasets[datasetIndex].tree, + ['allocationInPercentage'], + ['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'