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.
114 lines
3.5 KiB
114 lines
3.5 KiB
<table class="gf-table w-100" mat-table [dataSource]="benchmarks">
|
|
<ng-container matColumnDef="name">
|
|
<th *matHeaderCellDef class="px-2" i18n mat-header-cell>Index</th>
|
|
<td *matCellDef="let element" class="px-2" mat-cell>
|
|
{{ element?.name }}
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="trend50d">
|
|
<th
|
|
*matHeaderCellDef
|
|
class="d-none d-lg-table-cell px-2 text-right"
|
|
mat-header-cell
|
|
>
|
|
<ng-container i18n>50-Day Trend</ng-container>
|
|
</th>
|
|
<td *matCellDef="let element" class="d-none d-lg-table-cell px-2" mat-cell>
|
|
<div class="d-flex justify-content-end">
|
|
@if (element?.trend50d !== 'UNKNOWN') {
|
|
<gf-trend-indicator
|
|
[value]="
|
|
element?.trend50d === 'UP'
|
|
? 0.001
|
|
: element?.trend50d === 'DOWN'
|
|
? -0.001
|
|
: 0
|
|
"
|
|
/>
|
|
}
|
|
</div>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="trend200d">
|
|
<th
|
|
*matHeaderCellDef
|
|
class="d-none d-lg-table-cell px-2 text-right"
|
|
mat-header-cell
|
|
>
|
|
<ng-container i18n>200-Day Trend</ng-container>
|
|
</th>
|
|
<td *matCellDef="let element" class="d-none d-lg-table-cell px-2" mat-cell>
|
|
<div class="d-flex justify-content-end">
|
|
@if (element?.trend200d !== 'UNKNOWN') {
|
|
<gf-trend-indicator
|
|
[value]="
|
|
element?.trend200d === 'UP'
|
|
? 0.001
|
|
: element?.trend200d === 'DOWN'
|
|
? -0.001
|
|
: 0
|
|
"
|
|
/>
|
|
}
|
|
</div>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="date">
|
|
<th
|
|
*matHeaderCellDef
|
|
class="d-none d-lg-table-cell px-2 text-right"
|
|
mat-header-cell
|
|
>
|
|
<ng-container i18n>Last All Time High</ng-container>
|
|
</th>
|
|
<td *matCellDef="let element" class="d-none d-lg-table-cell px-2" mat-cell>
|
|
<div class="d-flex justify-content-end">
|
|
<gf-value
|
|
[isDate]="true"
|
|
[locale]="locale"
|
|
[value]="element?.performances?.allTimeHigh?.date"
|
|
/>
|
|
</div>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="change">
|
|
<th *matHeaderCellDef class="px-2 text-right" mat-header-cell>
|
|
<span class="d-none d-sm-block text-nowrap" i18n
|
|
>Change from All Time High</span
|
|
>
|
|
<span class="d-block d-sm-none text-nowrap" i18n>from ATH</span>
|
|
</th>
|
|
<td *matCellDef="let element" class="px-2 text-right" mat-cell>
|
|
<gf-value
|
|
class="d-inline-block justify-content-end"
|
|
[isPercent]="true"
|
|
[locale]="locale"
|
|
[ngClass]="{
|
|
'text-danger':
|
|
element?.performances?.allTimeHigh?.performancePercent < 0,
|
|
'text-success':
|
|
element?.performances?.allTimeHigh?.performancePercent === 0
|
|
}"
|
|
[value]="element?.performances?.allTimeHigh?.performancePercent"
|
|
/>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="marketCondition">
|
|
<th *matHeaderCellDef mat-header-cell></th>
|
|
<td *matCellDef="let element" class="px-0" mat-cell>
|
|
@if (element?.marketCondition) {
|
|
<div class="text-center" [title]="translate(element.marketCondition)">
|
|
{{ resolveMarketCondition(element.marketCondition).emoji }}
|
|
</div>
|
|
}
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
|
<tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
|
|
</table>
|
|
|