Add a new symbol allocation chart (#326)

* Add a new symbol allocation chart

* Update changelog

Co-authored-by: Thomas <4159106+dtslvr@users.noreply.github.com>
pull/333/head
Ivo Valchev 3 years ago committed by GitHub
parent ba9e6eab58
commit b1187cf880
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added ### Added
- 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
### Fixed ### Fixed

@ -167,7 +167,8 @@ export class PortfolioProportionChartComponent
// Reuse color // Reuse color
item.color = this.colorMap[symbol]; item.color = this.colorMap[symbol];
} else { } else {
const color = this.getColorPalette()[index]; const color =
this.getColorPalette()[index % this.getColorPalette().length];
// Store color for reuse // Store color for reuse
this.colorMap[symbol] = color; this.colorMap[symbol] = color;

@ -42,6 +42,10 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
public sectors: { public sectors: {
[name: string]: { name: string; value: number }; [name: string]: { name: string; value: number };
}; };
public symbols: {
[name: string]: { name: string; value: number };
};
public user: User; public user: User;
private unsubscribeSubject = new Subject<void>(); private unsubscribeSubject = new Subject<void>();
@ -114,6 +118,12 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
value: 0 value: 0
} }
}; };
this.symbols = {
[UNKNOWN_KEY]: {
name: UNKNOWN_KEY,
value: 0
}
};
for (const [name, { current, original }] of Object.entries( for (const [name, { current, original }] of Object.entries(
this.portfolioDetails.accounts this.portfolioDetails.accounts
@ -208,6 +218,15 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
: this.portfolioDetails.holdings[symbol].value; : this.portfolioDetails.holdings[symbol].value;
} }
} }
if (position.assetSubClass !== AssetClass.CASH) {
// Prepare analysis data by symbols except for cash
this.symbols[symbol] = {
name: symbol,
value: aPeriod === 'original' ? position.investment : position.value
};
}
} }
} }

@ -5,6 +5,29 @@
</div> </div>
</div> </div>
<div class="proportion-charts row"> <div class="proportion-charts row">
<div class="col-md-6">
<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"> <div class="col-md-6">
<mat-card class="mb-3"> <mat-card class="mb-3">
<mat-card-header class="w-100"> <mat-card-header class="w-100">

Loading…
Cancel
Save