mirror of https://github.com/ghostfolio/ghostfolio
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.
70 lines
2.0 KiB
70 lines
2.0 KiB
<div class="container p-0">
|
|
<div class="flex-nowrap no-gutters row">
|
|
<a
|
|
class="d-flex p-3 w-100"
|
|
[ngClass]="{ 'cursor-default': isLoading }"
|
|
[queryParams]="{
|
|
dataSource: position?.dataSource,
|
|
positionDetailDialog: true,
|
|
symbol: position?.symbol
|
|
}"
|
|
[routerLink]="[]"
|
|
>
|
|
<div class="d-flex mr-2">
|
|
<gf-trend-indicator
|
|
class="d-flex"
|
|
[isLoading]="isLoading"
|
|
[marketState]="position?.marketState"
|
|
[range]="range"
|
|
[value]="position?.netPerformancePercentage"
|
|
></gf-trend-indicator>
|
|
</div>
|
|
<div *ngIf="isLoading" class="flex-grow-1">
|
|
<ngx-skeleton-loader
|
|
animation="pulse"
|
|
class="mb-1"
|
|
[theme]="{
|
|
height: '1.2rem',
|
|
width: '12rem'
|
|
}"
|
|
></ngx-skeleton-loader>
|
|
<ngx-skeleton-loader
|
|
animation="pulse"
|
|
[theme]="{
|
|
height: '1rem',
|
|
width: '8rem'
|
|
}"
|
|
></ngx-skeleton-loader>
|
|
</div>
|
|
<div *ngIf="!isLoading" class="flex-grow-1 text-truncate">
|
|
<div class="h6 m-0 text-truncate">{{ position?.name }}</div>
|
|
<div class="d-flex">
|
|
<small class="text-muted">{{ position?.symbol | gfSymbol }}</small>
|
|
</div>
|
|
<div class="d-flex mt-1">
|
|
<gf-value
|
|
class="mr-3"
|
|
[colorizeSign]="true"
|
|
[currency]="baseCurrency"
|
|
[locale]="locale"
|
|
[value]="position?.netPerformance"
|
|
></gf-value>
|
|
<gf-value
|
|
[colorizeSign]="true"
|
|
[isPercent]="true"
|
|
[locale]="locale"
|
|
[value]="position?.netPerformancePercentage"
|
|
></gf-value>
|
|
</div>
|
|
</div>
|
|
<div class="align-items-center d-flex">
|
|
<ion-icon
|
|
*ngIf="!isLoading"
|
|
class="chevron text-muted"
|
|
name="chevron-forward-outline"
|
|
size="small"
|
|
></ion-icon>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|