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.
ghostfolio/apps/client/src/app/components/portfolio-performance/portfolio-performance.compo...

62 lines
1.5 KiB

<div class="container p-0">
<div class="no-gutters row">
<div class="status-container text-muted text-right">
@if (errors?.length > 0 && !isLoading) {
<ion-icon
i18n-title
name="time-outline"
title="Oops! A data provider is experiencing the hiccups."
(click)="onShowErrors()"
/>
}
</div>
<div *ngIf="isLoading" class="align-items-center d-flex">
<ngx-skeleton-loader
animation="pulse"
class="mb-2"
[theme]="{
height: '4rem',
width: '15rem'
}"
/>
</div>
<div
class="display-4 font-weight-bold m-0 text-center value-container"
[hidden]="isLoading"
[ngClass]="{
'text-danger': isAllTimeLow,
'text-success': isAllTimeHigh
}"
>
<span #value id="value"></span>
</div>
<div class="currency-container flex-grow-1 px-1">
{{ unit }}
</div>
</div>
<div *ngIf="showDetails" class="row">
<div class="d-flex col justify-content-end">
<gf-value
[colorizeSign]="true"
[isCurrency]="true"
[locale]="locale"
[value]="
isLoading ? undefined : performance?.netPerformanceWithCurrencyEffect
"
/>
</div>
<div class="col">
<gf-value
[colorizeSign]="true"
[isPercent]="true"
[locale]="locale"
[value]="
isLoading
? undefined
: performance?.netPerformancePercentageWithCurrencyEffect
"
/>
</div>
</div>
</div>