sudacode/ghostfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Feature/improve treemap chart for holdings (#3563)

Browse Source 
* Various improvements

* Introduce permission: accessHoldingsChart
* Improve style of toggle
* Add border radius

* Update changelog
This commit is contained in:
Thomas Kaul 2024-07-13 10:45:10 +02:00 committed by GitHub
parent 96434c5a54
commit 9ecc3176a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 55 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@ -5,6 +5,12 @@ 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).
## Unreleased
### Changed
- Improved the chart of the holdings tab on the home page (experimental)
## 2.95.0 - 2024-07-12
### Added

1
apps/api/src/app/user/user.service.ts
View File

@ -237,6 +237,7 @@ export class UserService {
currentPermissions = without(
currentPermissions,
permissions.accessHoldingsChart,
permissions.createAccess
);

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

@ -28,6 +28,7 @@ import { takeUntil } from 'rxjs/operators';
export class HomeHoldingsComponent implements OnDestroy, OnInit {
public deviceType: string;
public hasImpersonationId: boolean;
public hasPermissionToAccessHoldingsChart: boolean;
public hasPermissionToCreateOrder: boolean;
public holdings: PortfolioPosition[];
public holdingType: HoldingType = 'ACTIVE';
@ -65,20 +66,17 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
if (state?.user) {
this.user = state.user;
this.hasPermissionToAccessHoldingsChart = hasPermission(
this.user.permissions,
permissions.accessHoldingsChart
);
this.hasPermissionToCreateOrder = hasPermission(
this.user.permissions,
permissions.createOrder
);
this.holdings = undefined;
this.fetchHoldings()
.pipe(takeUntil(this.unsubscribeSubject))
.subscribe(({ holdings }) => {
this.holdings = holdings;
this.changeDetectorRef.markForCheck();
});
this.initialize();
this.changeDetectorRef.markForCheck();
}
@ -88,22 +86,7 @@ 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()
.pipe(takeUntil(this.unsubscribeSubject))
.subscribe(({ holdings }) => {
this.holdings = holdings;
this.changeDetectorRef.markForCheck();
});
this.initialize();
}
public onSymbolClicked({ dataSource, symbol }: UniqueAsset) {
@ -131,4 +114,27 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
range: this.user?.settings?.dateRange
});
}
private initialize() {
this.viewModeFormControl.disable();
if (
this.hasPermissionToAccessHoldingsChart &&
this.holdingType === 'ACTIVE'
) {
this.viewModeFormControl.enable();
} else if (this.holdingType === 'CLOSED') {
this.viewModeFormControl.setValue('TABLE');
}
this.holdings = undefined;
this.fetchHoldings()
.pipe(takeUntil(this.unsubscribeSubject))
.subscribe(({ holdings }) => {
this.holdings = holdings;
this.changeDetectorRef.markForCheck();
});
}
}

4
apps/client/src/app/components/home-holdings/home-holdings.html
View File

@ -14,10 +14,10 @@
[formControl]="viewModeFormControl"
[hideSingleSelectionIndicator]="true"
>
<mat-button-toggle value="TABLE">
<mat-button-toggle i18n-title title="Table" value="TABLE">
<ion-icon name="reorder-four-outline" />
</mat-button-toggle>
<mat-button-toggle value="CHART">
<mat-button-toggle i18n-title title="Chart" value="CHART">
<ion-icon name="grid-outline" />
</mat-button-toggle>
</mat-button-toggle-group>

6
apps/client/src/app/components/home-holdings/home-holdings.scss
View File

@ -1,3 +1,9 @@
:host {
display: block;
.mat-button-toggle-group {
.mat-button-toggle-appearance-standard {
--mat-standard-button-toggle-height: 1.5rem;
}
}
}

9
libs/common/src/lib/permissions.ts
View File

@ -5,6 +5,7 @@ import { Role } from '@prisma/client';
export const permissions = {
accessAdminControl: 'accessAdminControl',
accessAssistant: 'accessAssistant',
accessHoldingsChart: 'accessHoldingsChart',
createAccess: 'createAccess',
createAccount: 'createAccount',
createAccountBalance: 'createAccountBalance',
@ -47,6 +48,7 @@ export function getPermissions(aRole: Role): string[] {
return [
permissions.accessAdminControl,
permissions.accessAssistant,
permissions.accessHoldingsChart,
permissions.createAccess,
permissions.createAccount,
permissions.createAccountBalance,
@ -72,11 +74,16 @@ export function getPermissions(aRole: Role): string[] {
];
case 'DEMO':
return [permissions.accessAssistant, permissions.createUserAccount];
return [
permissions.accessAssistant,
permissions.accessHoldingsChart,
permissions.createUserAccount
];
case 'USER':
return [
permissions.accessAssistant,
permissions.accessHoldingsChart,
permissions.createAccess,
permissions.createAccount,
permissions.createAccountBalance,

2
libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
View File

@ -1,4 +1,3 @@
import { getLocale } from '@ghostfolio/common/helper';
import { PortfolioPosition, UniqueAsset } from '@ghostfolio/common/interfaces';
import { CommonModule } from '@angular/common';
@ -95,6 +94,7 @@ export class GfTreemapChartComponent
return red[9];
}
},
borderRadius: 4,
key: 'allocationInPercentage',
labels: {
align: 'left',