You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
342 lines
10 KiB
342 lines
10 KiB
<div class="container p-0">
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 text-truncate" i18n>Time in Market</div>
|
|
<div class="justify-content-end">
|
|
<gf-value class="justify-content-end" [value]="timeInMarket" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex-nowrap px-3 py-1 row"
|
|
[hidden]="summary?.ordersCount === null"
|
|
>
|
|
<div class="d-flex flex-grow-1 ml-3 text-truncate">
|
|
{{ summary?.ordersCount }}
|
|
<ng-container i18n>{summary?.ordersCount, plural,
|
|
=1 {activity}
|
|
other {activities}
|
|
}</ng-container>
|
|
<span
|
|
class="align-items-center d-flex ml-1"
|
|
matTooltipPosition="above"
|
|
[matTooltip]="buyAndSellActivitiesTooltip"
|
|
>
|
|
<ion-icon name="information-circle-outline" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col"><hr /></div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 text-truncate" i18n>Buy</div>
|
|
<div class="justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
[isCurrency]="true"
|
|
[locale]="locale"
|
|
[unit]="baseCurrency"
|
|
[value]="isLoading ? undefined : summary?.totalBuy"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 text-truncate" i18n>Sell</div>
|
|
<div class="justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
[isCurrency]="true"
|
|
[locale]="locale"
|
|
[unit]="baseCurrency"
|
|
[value]="isLoading ? undefined : summary?.totalSell"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col"><hr /></div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 text-truncate" i18n>Investment</div>
|
|
<div class="justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
[isCurrency]="true"
|
|
[locale]="locale"
|
|
[unit]="baseCurrency"
|
|
[value]="isLoading ? undefined : summary?.committedFunds"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 text-truncate" i18n>Absolute Gross Performance</div>
|
|
<div class="justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
[isCurrency]="true"
|
|
[locale]="locale"
|
|
[unit]="baseCurrency"
|
|
[value]="
|
|
isLoading ? undefined : summary?.grossPerformanceWithCurrencyEffect
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="align-items-center d-flex flex-grow-1 ml-3 text-truncate">
|
|
<ng-container i18n>Gross Performance</ng-container>
|
|
<abbr
|
|
class="initialism ml-2 text-muted"
|
|
title="Time-Weighted Rate of Return"
|
|
>(TWR)</abbr
|
|
>
|
|
</div>
|
|
<div class="flex-column flex-wrap justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
position="end"
|
|
[colorizeSign]="true"
|
|
[isPercent]="true"
|
|
[locale]="locale"
|
|
[value]="
|
|
isLoading
|
|
? undefined
|
|
: summary?.grossPerformancePercentageWithCurrencyEffect
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 text-truncate" i18n>Fees</div>
|
|
<div class="d-flex justify-content-end">
|
|
<span *ngIf="summary?.fees || summary?.fees === 0" class="mr-1">-</span>
|
|
<gf-value
|
|
class="justify-content-end"
|
|
[isCurrency]="true"
|
|
[locale]="locale"
|
|
[unit]="baseCurrency"
|
|
[value]="isLoading ? undefined : summary?.fees"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col"><hr /></div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 text-truncate" i18n>Absolute Net Performance</div>
|
|
<div class="justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
[isCurrency]="true"
|
|
[locale]="locale"
|
|
[unit]="baseCurrency"
|
|
[value]="
|
|
isLoading ? undefined : summary?.netPerformanceWithCurrencyEffect
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 text-truncate ml-3">
|
|
<ng-container i18n>Net Performance</ng-container>
|
|
<abbr
|
|
class="initialism ml-2 text-muted"
|
|
title="Time-Weighted Rate of Return"
|
|
>(TWR)</abbr
|
|
>
|
|
</div>
|
|
<div class="flex-column flex-wrap justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
position="end"
|
|
[colorizeSign]="true"
|
|
[isPercent]="true"
|
|
[locale]="locale"
|
|
[value]="
|
|
isLoading
|
|
? undefined
|
|
: summary?.netPerformancePercentageWithCurrencyEffect
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col"><hr /></div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 text-truncate" i18n>Total Assets</div>
|
|
<div class="flex-column flex-wrap justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
position="end"
|
|
[isCurrency]="true"
|
|
[locale]="locale"
|
|
[unit]="baseCurrency"
|
|
[value]="isLoading ? undefined : summary?.currentValueInBaseCurrency"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 text-truncate" i18n>Valuables</div>
|
|
<div class="justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
[isCurrency]="true"
|
|
[locale]="locale"
|
|
[unit]="baseCurrency"
|
|
[value]="isLoading ? undefined : summary?.items"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 text-truncate" i18n>Emergency Fund</div>
|
|
<div
|
|
class="align-items-center d-flex justify-content-end"
|
|
[ngClass]="{ 'cursor-pointer': hasPermissionToUpdateUserSettings }"
|
|
(click)="hasPermissionToUpdateUserSettings && onEditEmergencyFund()"
|
|
>
|
|
<ion-icon
|
|
*ngIf="hasPermissionToUpdateUserSettings && !isLoading"
|
|
class="mr-1 text-muted"
|
|
name="ellipsis-horizontal-circle-outline"
|
|
/>
|
|
<gf-value
|
|
class="justify-content-end"
|
|
[isCurrency]="true"
|
|
[locale]="locale"
|
|
[unit]="baseCurrency"
|
|
[value]="isLoading ? undefined : summary?.emergencyFund?.total"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 ml-3 text-truncate" i18n>Cash</div>
|
|
<div class="flex-column flex-wrap justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
position="end"
|
|
[isCurrency]="true"
|
|
[locale]="locale"
|
|
[unit]="baseCurrency"
|
|
[value]="isLoading ? undefined : summary?.emergencyFund?.cash"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 ml-3 text-truncate" i18n>Assets</div>
|
|
<div class="flex-column flex-wrap justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
position="end"
|
|
[isCurrency]="true"
|
|
[locale]="locale"
|
|
[unit]="baseCurrency"
|
|
[value]="isLoading ? undefined : summary?.emergencyFund?.assets"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 text-truncate" i18n>Buying Power</div>
|
|
<div class="justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
[isCurrency]="true"
|
|
[locale]="locale"
|
|
[unit]="baseCurrency"
|
|
[value]="isLoading ? undefined : summary?.cash"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 text-truncate" i18n>Excluded from Analysis</div>
|
|
<div class="justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
[isCurrency]="true"
|
|
[locale]="locale"
|
|
[unit]="baseCurrency"
|
|
[value]="isLoading ? undefined : summary?.excludedAccountsAndActivities"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col"><hr /></div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 text-truncate" i18n>Liabilities</div>
|
|
<div class="d-flex justify-content-end">
|
|
<span
|
|
*ngIf="summary?.liabilities || summary?.liabilities === 0"
|
|
class="mr-1"
|
|
>-</span
|
|
>
|
|
<gf-value
|
|
class="justify-content-end"
|
|
[isCurrency]="true"
|
|
[locale]="locale"
|
|
[unit]="baseCurrency"
|
|
[value]="isLoading ? undefined : summary?.liabilities"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col"><hr /></div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 font-weight-bold text-truncate" i18n>Net Worth</div>
|
|
<div class="justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
[isCurrency]="true"
|
|
[locale]="locale"
|
|
[unit]="baseCurrency"
|
|
[value]="isLoading ? undefined : summary?.totalValueInBaseCurrency"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 ml-3 text-truncate" i18n>
|
|
Annualized Performance
|
|
</div>
|
|
<div class="flex-column flex-wrap justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
position="end"
|
|
[colorizeSign]="true"
|
|
[isPercent]="true"
|
|
[locale]="locale"
|
|
[value]="
|
|
isLoading
|
|
? undefined
|
|
: summary?.annualizedPerformancePercentWithCurrencyEffect
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col"><hr /></div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 text-truncate" i18n>Interest</div>
|
|
<div class="justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
[isCurrency]="true"
|
|
[locale]="locale"
|
|
[unit]="baseCurrency"
|
|
[value]="isLoading ? undefined : summary?.interest"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex-nowrap px-3 py-1 row">
|
|
<div class="flex-grow-1 text-truncate" i18n>Dividend</div>
|
|
<div class="justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
[isCurrency]="true"
|
|
[locale]="locale"
|
|
[unit]="baseCurrency"
|
|
[value]="isLoading ? undefined : summary?.dividendInBaseCurrency"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|