69 lines
2.0 KiB
HTML
69 lines
2.0 KiB
HTML
<div class="container p-0">
|
|
<div class="flex-nowrap no-gutters row">
|
|
<a
|
|
class="d-flex p-3 w-100"
|
|
[routerLink]="[]"
|
|
[queryParams]="{ positionDetailDialog: true, symbol: position?.symbol }"
|
|
>
|
|
<div class="d-flex mr-2">
|
|
<gf-trend-indicator
|
|
class="d-flex"
|
|
[isLoading]="isLoading"
|
|
[marketState]="position?.marketState"
|
|
[range]="range"
|
|
[value]="position?.grossPerformancePercent"
|
|
></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">
|
|
<span>{{ position?.symbol | gfSymbol }}</span>
|
|
<span *ngIf="position?.exchange" class="ml-2 text-muted"
|
|
>({{ position.exchange }})</span
|
|
>
|
|
</div>
|
|
<div class="d-flex mt-1">
|
|
<gf-value
|
|
class="mr-3"
|
|
[colorizeSign]="true"
|
|
[currency]="position?.currency"
|
|
[locale]="locale"
|
|
[value]="position?.grossPerformance"
|
|
></gf-value>
|
|
<gf-value
|
|
[colorizeSign]="true"
|
|
[isPercent]="true"
|
|
[locale]="locale"
|
|
[value]="position?.grossPerformancePercent"
|
|
></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>
|