Feature/restructure allocations page including allocations by symbol (#333)
* Restructure allocations page * Update changelog
This commit is contained in:
@ -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 a link below the holdings to manage the transactions
|
||||||
- Added the allocation chart by symbol
|
- Added the allocation chart by symbol
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
|
||||||
|
- Restructured the allocations page
|
||||||
|
|
||||||
### Fixed
|
### Fixed
|
||||||
|
|
||||||
- Fixed the value formatting for integers (transactions count)
|
- Fixed the value formatting for integers (transactions count)
|
||||||
|
@ -1,4 +1,8 @@
|
|||||||
<mat-radio-group [formControl]="option" (change)="onValueChange()">
|
<mat-radio-group
|
||||||
|
class="text-nowrap"
|
||||||
|
[formControl]="option"
|
||||||
|
(change)="onValueChange()"
|
||||||
|
>
|
||||||
<mat-radio-button
|
<mat-radio-button
|
||||||
*ngFor="let option of options"
|
*ngFor="let option of options"
|
||||||
[disabled]="isLoading"
|
[disabled]="isLoading"
|
||||||
|
@ -219,9 +219,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (position.assetSubClass !== AssetClass.CASH) {
|
if (position.assetClass === AssetClass.EQUITY) {
|
||||||
// Prepare analysis data by symbols except for cash
|
|
||||||
|
|
||||||
this.symbols[symbol] = {
|
this.symbols[symbol] = {
|
||||||
name: symbol,
|
name: symbol,
|
||||||
value: aPeriod === 'original' ? position.investment : position.value
|
value: aPeriod === 'original' ? position.investment : position.value
|
||||||
|
@ -5,33 +5,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="proportion-charts row">
|
<div class="proportion-charts row">
|
||||||
<div class="col-md-6">
|
<div class="col-md-4">
|
||||||
<mat-card class="mb-3">
|
<mat-card class="mb-3">
|
||||||
<mat-card-header class="w-100">
|
<mat-card-header class="overflow-hidden w-100">
|
||||||
<mat-card-title i18n>By Symbol</mat-card-title>
|
<mat-card-title class="text-truncate" i18n>By Account</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>
|
|
||||||
<gf-toggle
|
<gf-toggle
|
||||||
[defaultValue]="period"
|
[defaultValue]="period"
|
||||||
[isLoading]="false"
|
[isLoading]="false"
|
||||||
@ -50,10 +27,12 @@
|
|||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-4">
|
||||||
<mat-card class="mb-3">
|
<mat-card class="mb-3">
|
||||||
<mat-card-header class="w-100">
|
<mat-card-header class="overflow-hidden w-100">
|
||||||
<mat-card-title i18n>By Asset Class</mat-card-title>
|
<mat-card-title class="text-truncate" i18n
|
||||||
|
>By Asset Class</mat-card-title
|
||||||
|
>
|
||||||
<gf-toggle
|
<gf-toggle
|
||||||
[defaultValue]="period"
|
[defaultValue]="period"
|
||||||
[isLoading]="false"
|
[isLoading]="false"
|
||||||
@ -72,10 +51,12 @@
|
|||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-4">
|
||||||
<mat-card class="mb-3">
|
<mat-card class="mb-3">
|
||||||
<mat-card-header class="w-100">
|
<mat-card-header class="overflow-hidden w-100">
|
||||||
<mat-card-title i18n>By Currency</mat-card-title>
|
<mat-card-title class="text-truncate" i18n
|
||||||
|
>By Currency</mat-card-title
|
||||||
|
>
|
||||||
<gf-toggle
|
<gf-toggle
|
||||||
[defaultValue]="period"
|
[defaultValue]="period"
|
||||||
[isLoading]="false"
|
[isLoading]="false"
|
||||||
@ -94,10 +75,33 @@
|
|||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-12 allocations-by-symbol">
|
||||||
<mat-card class="mb-3">
|
<mat-card class="mb-3">
|
||||||
<mat-card-header class="w-100">
|
<mat-card-header class="overflow-hidden w-100">
|
||||||
<mat-card-title i18n>By Sector</mat-card-title>
|
<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
|
<gf-toggle
|
||||||
[defaultValue]="period"
|
[defaultValue]="period"
|
||||||
[isLoading]="false"
|
[isLoading]="false"
|
||||||
@ -117,10 +121,12 @@
|
|||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-4">
|
||||||
<mat-card class="mb-3">
|
<mat-card class="mb-3">
|
||||||
<mat-card-header class="w-100">
|
<mat-card-header class="overflow-hidden w-100">
|
||||||
<mat-card-title i18n>By Continent</mat-card-title>
|
<mat-card-title class="text-truncate" i18n
|
||||||
|
>By Continent</mat-card-title
|
||||||
|
>
|
||||||
<gf-toggle
|
<gf-toggle
|
||||||
[defaultValue]="period"
|
[defaultValue]="period"
|
||||||
[isLoading]="false"
|
[isLoading]="false"
|
||||||
@ -139,10 +145,10 @@
|
|||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-4">
|
||||||
<mat-card class="mb-3">
|
<mat-card class="mb-3">
|
||||||
<mat-card-header class="w-100">
|
<mat-card-header class="overflow-hidden w-100">
|
||||||
<mat-card-title i18n>By Country</mat-card-title>
|
<mat-card-title class="text-truncate" i18n>By Country</mat-card-title>
|
||||||
<gf-toggle
|
<gf-toggle
|
||||||
[defaultValue]="period"
|
[defaultValue]="period"
|
||||||
[isLoading]="false"
|
[isLoading]="false"
|
||||||
@ -166,8 +172,8 @@
|
|||||||
<div class="row world-map-chart">
|
<div class="row world-map-chart">
|
||||||
<div class="col-lg">
|
<div class="col-lg">
|
||||||
<mat-card class="mb-3">
|
<mat-card class="mb-3">
|
||||||
<mat-card-header class="w-100">
|
<mat-card-header class="overflow-hidden w-100">
|
||||||
<mat-card-title i18n>Regions</mat-card-title>
|
<mat-card-title class="text-truncate" i18n>Regions</mat-card-title>
|
||||||
<gf-toggle
|
<gf-toggle
|
||||||
[defaultValue]="period"
|
[defaultValue]="period"
|
||||||
[isLoading]="false"
|
[isLoading]="false"
|
||||||
|
@ -1,9 +1,7 @@
|
|||||||
:host {
|
:host {
|
||||||
.proportion-charts {
|
.allocations-by-symbol {
|
||||||
.mat-card {
|
gf-portfolio-proportion-chart {
|
||||||
.mat-card-content {
|
max-width: 67vh;
|
||||||
padding: 1rem 2rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user