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

Feature/restructure allocations page including allocations by symbol (#333)

Browse Source 
* Restructure allocations page

* Update changelog
This commit is contained in:
Thomas Kaul 2021-09-03 23:20:30 +02:00 committed by GitHub
parent b1187cf880
commit 747e5b63fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 62 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Added a link below the holdings to manage the transactions
- Added the allocation chart by symbol
### Changed
- Restructured the allocations page
### Fixed
- Fixed the value formatting for integers (transactions count)

6
apps/client/src/app/components/toggle/toggle.component.html
View File

@ -1,4 +1,8 @@
<mat-radio-group [formControl]="option" (change)="onValueChange()">
<mat-radio-group
class="text-nowrap"
[formControl]="option"
(change)="onValueChange()"
>
<mat-radio-button
*ngFor="let option of options"
[disabled]="isLoading"

4
apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
View File

@ -219,9 +219,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
}
}
if (position.assetSubClass !== AssetClass.CASH) {
// Prepare analysis data by symbols except for cash
if (position.assetClass === AssetClass.EQUITY) {
this.symbols[symbol] = {
name: symbol,
value: aPeriod === 'original' ? position.investment : position.value

92
apps/client/src/app/pages/portfolio/allocations/allocations-page.html
View File

@ -5,33 +5,10 @@
</div>
</div>
<div class="proportion-charts row">
<div class="col-md-6">
<div class="col-md-4">
<mat-card class="mb-3">
<mat-card-header class="w-100">
<mat-card-title i18n>By Symbol</mat-card-title>
<gf-toggle
[defaultValue]="period"
[isLoading]="false"
[options]="periodOptions"
(change)="onChangePeriod($event.value)"
></gf-toggle>
</mat-card-header>
<mat-card-content>
<gf-portfolio-proportion-chart
[baseCurrency]="user?.settings?.baseCurrency"
[isInPercent]="false"
[keys]="['name']"
[locale]="user?.settings?.locale"
[positions]="symbols"
></gf-portfolio-proportion-chart>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-6">
<mat-card class="mb-3">
<mat-card-header class="w-100">
<mat-card-title i18n>By Account</mat-card-title>
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n>By Account</mat-card-title>
<gf-toggle
[defaultValue]="period"
[isLoading]="false"
@ -50,10 +27,12 @@
</mat-card-content>
</mat-card>
</div>
<div class="col-md-6">
<div class="col-md-4">
<mat-card class="mb-3">
<mat-card-header class="w-100">
<mat-card-title i18n>By Asset Class</mat-card-title>
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n
>By Asset Class</mat-card-title
>
<gf-toggle
[defaultValue]="period"
[isLoading]="false"
@ -72,10 +51,12 @@
</mat-card-content>
</mat-card>
</div>
<div class="col-md-6">
<div class="col-md-4">
<mat-card class="mb-3">
<mat-card-header class="w-100">
<mat-card-title i18n>By Currency</mat-card-title>
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n
>By Currency</mat-card-title
>
<gf-toggle
[defaultValue]="period"
[isLoading]="false"
@ -94,10 +75,33 @@
</mat-card-content>
</mat-card>
</div>
<div class="col-md-6">
<div class="col-md-12 allocations-by-symbol">
<mat-card class="mb-3">
<mat-card-header class="w-100">
<mat-card-title i18n>By Sector</mat-card-title>
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n>By Symbol</mat-card-title>
<gf-toggle
[defaultValue]="period"
[isLoading]="false"
[options]="periodOptions"
(change)="onChangePeriod($event.value)"
></gf-toggle>
</mat-card-header>
<mat-card-content>
<gf-portfolio-proportion-chart
class="mx-auto"
[baseCurrency]="user?.settings?.baseCurrency"
[isInPercent]="false"
[keys]="['name']"
[locale]="user?.settings?.locale"
[positions]="symbols"
></gf-portfolio-proportion-chart>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-4">
<mat-card class="mb-3">
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n>By Sector</mat-card-title>
<gf-toggle
[defaultValue]="period"
[isLoading]="false"
@ -117,10 +121,12 @@
</mat-card-content>
</mat-card>
</div>
<div class="col-md-6">
<div class="col-md-4">
<mat-card class="mb-3">
<mat-card-header class="w-100">
<mat-card-title i18n>By Continent</mat-card-title>
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n
>By Continent</mat-card-title
>
<gf-toggle
[defaultValue]="period"
[isLoading]="false"
@ -139,10 +145,10 @@
</mat-card-content>
</mat-card>
</div>
<div class="col-md-6">
<div class="col-md-4">
<mat-card class="mb-3">
<mat-card-header class="w-100">
<mat-card-title i18n>By Country</mat-card-title>
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n>By Country</mat-card-title>
<gf-toggle
[defaultValue]="period"
[isLoading]="false"
@ -166,8 +172,8 @@
<div class="row world-map-chart">
<div class="col-lg">
<mat-card class="mb-3">
<mat-card-header class="w-100">
<mat-card-title i18n>Regions</mat-card-title>
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n>Regions</mat-card-title>
<gf-toggle
[defaultValue]="period"
[isLoading]="false"

8
apps/client/src/app/pages/portfolio/allocations/allocations-page.scss
View File

@ -1,9 +1,7 @@
:host {
.proportion-charts {
.mat-card {
.mat-card-content {
padding: 1rem 2rem;
}
.allocations-by-symbol {
gf-portfolio-proportion-chart {
max-width: 67vh;
}
}