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

Feature/improve tooltips (#403)

Browse Source 
* Improve tooltips

* Update changelog
This commit is contained in:
Thomas Kaul
2021-10-02 20:38:41 +02:00
committed by GitHub
parent 1050bfa098
commit 3ec4a73b35
5 changed files with 87 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
apps/client/src/app/components/world-map-chart/world-map-chart.component.ts
View File

@@ -18,6 +18,7 @@ import svgMap from 'svgmap';
export class WorldMapChartComponent implements OnChanges, OnDestroy, OnInit {
@Input() baseCurrency: string;
@Input() countries: { [code: string]: { name: string; value: number } };
@Input() isInPercent = false;
public isLoading = true;
public svgMapElement;
@@ -41,6 +42,20 @@ export class WorldMapChartComponent implements OnChanges, OnDestroy, OnInit {
}
private initialize() {
if (this.isInPercent) {
// Convert value of countries to percentage
let sum = 0;
Object.keys(this.countries).map((country) => {
sum += this.countries[country].value;
});
Object.keys(this.countries).map((country) => {
this.countries[country].value = Number(
((this.countries[country].value * 100) / sum).toFixed(2)
);
});
}
this.svgMapElement = new svgMap({
colorMax: '#22bdb9',
colorMin: '#c3f1f0',
@@ -49,7 +64,7 @@ export class WorldMapChartComponent implements OnChanges, OnDestroy, OnInit {
applyData: 'value',
data: {
value: {
format: `{0} ${this.baseCurrency}`
format: this.isInPercent ? `{0}%` : `{0} ${this.baseCurrency}`
}
},
values: this.countries

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

@@ -37,13 +37,23 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
{ label: 'Current', value: 'current' }
];
public portfolioDetails: PortfolioDetails;
public positions: { [symbol: string]: any };
public positions: {
[symbol: string]: Pick<
PortfolioPosition,
| 'assetClass'
| 'assetSubClass'
| 'currency'
| 'exchange'
| 'name'
| 'value'
>;
};
public positionsArray: PortfolioPosition[];
public sectors: {
[name: string]: { name: string; value: number };
};
public symbols: {
[name: string]: { name: string; value: number };
[name: string]: { name: string; symbol: string; value: number };
};
public user: User;
@@ -121,6 +131,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
this.symbols = {
[UNKNOWN_KEY]: {
name: UNKNOWN_KEY,
symbol: UNKNOWN_KEY,
value: 0
}
};
@@ -137,15 +148,29 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
for (const [symbol, position] of Object.entries(
this.portfolioDetails.holdings
)) {
let value = 0;
if (aPeriod === 'original') {
if (this.hasImpersonationId) {
value = position.allocationInvestment;
} else {
value = position.investment;
}
} else {
if (this.hasImpersonationId) {
value = position.allocationCurrent;
} else {
value = position.value;
}
}
this.positions[symbol] = {
value,
assetClass: position.assetClass,
assetSubClass: position.assetSubClass,
currency: position.currency,
exchange: position.exchange,
value:
aPeriod === 'original'
? position.allocationInvestment
: position.allocationCurrent
name: position.name
};
this.positionsArray.push(position);
@@ -221,7 +246,8 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
if (position.assetClass === AssetClass.EQUITY) {
this.symbols[symbol] = {
name: symbol,
symbol,
name: position.name,
value: aPeriod === 'original' ? position.investment : position.value
};
}

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

@@ -19,7 +19,7 @@
<mat-card-content>
<gf-portfolio-proportion-chart
[baseCurrency]="user?.settings?.baseCurrency"
[isInPercent]="hasImpersonationId"
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
[keys]="['name']"
[locale]="user?.settings?.locale"
[positions]="accounts"
@@ -43,7 +43,7 @@
<mat-card-content>
<gf-portfolio-proportion-chart
[baseCurrency]="user?.settings?.baseCurrency"
[isInPercent]="true"
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
[keys]="['assetClass', 'assetSubClass']"
[locale]="user?.settings?.locale"
[positions]="positions"
@@ -67,7 +67,7 @@
<mat-card-content>
<gf-portfolio-proportion-chart
[baseCurrency]="user?.settings?.baseCurrency"
[isInPercent]="true"
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
[keys]="['currency']"
[locale]="user?.settings?.locale"
[positions]="positions"
@@ -90,8 +90,8 @@
<gf-portfolio-proportion-chart
class="mx-auto"
[baseCurrency]="user?.settings?.baseCurrency"
[isInPercent]="false"
[keys]="['name']"
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
[keys]="['symbol']"
[locale]="user?.settings?.locale"
[positions]="symbols"
[showLabels]="deviceType !== 'mobile'"
@@ -113,7 +113,7 @@
<mat-card-content>
<gf-portfolio-proportion-chart
[baseCurrency]="user?.settings?.baseCurrency"
[isInPercent]="false"
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
[keys]="['name']"
[locale]="user?.settings?.locale"
[maxItems]="10"
@@ -138,7 +138,7 @@
<mat-card-content>
<gf-portfolio-proportion-chart
[baseCurrency]="user?.settings?.baseCurrency"
[isInPercent]="false"
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
[keys]="['name']"
[locale]="user?.settings?.locale"
[positions]="continents"
@@ -161,7 +161,7 @@
<gf-portfolio-proportion-chart
[keys]="['name']"
[baseCurrency]="user?.settings?.baseCurrency"
[isInPercent]="false"
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
[locale]="user?.settings?.locale"
[maxItems]="10"
[positions]="countries"
@@ -186,6 +186,7 @@
<gf-world-map-chart
[baseCurrency]="user?.settings?.baseCurrency"
[countries]="countries"
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
></gf-world-map-chart>
</mat-card-content>
</mat-card>