Bugfix/fix horizontal overflow in table of benchmark component (#4668)
* Fix horizontal overflow * Update changelog
This commit is contained in:
Thomas Kaul
GitHub
parent
67db1b0de4
commit
19eff6e814
@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
### Fixed
|
||||
|
||||
- Fixed an issue in the performance calculation on the date of an activity when the unit price differs from the market price
|
||||
- Fixed the horizontal overflow in the table of the benchmark component
|
||||
|
||||
## 2.160.0 - 2025-05-04
|
||||
|
||||
|
||||
@ -1,164 +1,178 @@
|
||||
<table class="gf-table w-100" mat-table [dataSource]="benchmarks">
|
||||
<ng-container matColumnDef="name">
|
||||
<th *matHeaderCellDef class="px-2" i18n mat-header-cell>Name</th>
|
||||
<td *matCellDef="let element" class="px-2" mat-cell>
|
||||
{{ element?.name }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="gf-table w-100" mat-table [dataSource]="benchmarks">
|
||||
<ng-container matColumnDef="name">
|
||||
<th *matHeaderCellDef class="px-2" i18n mat-header-cell>Name</th>
|
||||
<td *matCellDef="let element" class="px-2 text-nowrap" 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">
|
||||
@if (element?.performances?.allTimeHigh?.date) {
|
||||
<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
|
||||
<ng-container matColumnDef="trend50d">
|
||||
<th
|
||||
*matHeaderCellDef
|
||||
class="d-none d-lg-table-cell px-2 text-right"
|
||||
mat-header-cell
|
||||
>
|
||||
<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>
|
||||
@if (isNumber(element?.performances?.allTimeHigh?.performancePercent)) {
|
||||
<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 }}
|
||||
<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>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions" stickyEnd>
|
||||
<th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
|
||||
<td *matCellDef="let element" class="px-1 text-center" mat-cell>
|
||||
@if (hasPermissionToDeleteItem) {
|
||||
<button
|
||||
class="mx-1 no-min-width px-2"
|
||||
mat-button
|
||||
[matMenuTriggerFor]="benchmarkMenu"
|
||||
(click)="$event.stopPropagation()"
|
||||
>
|
||||
<ion-icon name="ellipsis-horizontal" />
|
||||
</button>
|
||||
}
|
||||
<mat-menu #benchmarkMenu="matMenu" xPosition="before">
|
||||
<button
|
||||
mat-menu-item
|
||||
[disabled]="!hasPermissionToDeleteItem"
|
||||
(click)="
|
||||
onDeleteItem({
|
||||
dataSource: element.dataSource,
|
||||
symbol: element.symbol
|
||||
})
|
||||
"
|
||||
>
|
||||
<span class="align-items-center d-flex">
|
||||
<ion-icon class="mr-2" name="trash-outline" />
|
||||
<span i18n>Delete</span>
|
||||
</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</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>
|
||||
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
class="cursor-pointer"
|
||||
mat-row
|
||||
(click)="
|
||||
onOpenBenchmarkDialog({
|
||||
dataSource: row.dataSource,
|
||||
symbol: row.symbol
|
||||
})
|
||||
"
|
||||
></tr>
|
||||
</table>
|
||||
<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">
|
||||
@if (element?.performances?.allTimeHigh?.date) {
|
||||
<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>
|
||||
@if (isNumber(element?.performances?.allTimeHigh?.performancePercent)) {
|
||||
<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>
|
||||
|
||||
<ng-container matColumnDef="actions" stickyEnd>
|
||||
<th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
|
||||
<td *matCellDef="let element" class="px-1 text-center" mat-cell>
|
||||
@if (hasPermissionToDeleteItem) {
|
||||
<button
|
||||
class="mx-1 no-min-width px-2"
|
||||
mat-button
|
||||
[matMenuTriggerFor]="benchmarkMenu"
|
||||
(click)="$event.stopPropagation()"
|
||||
>
|
||||
<ion-icon name="ellipsis-horizontal" />
|
||||
</button>
|
||||
}
|
||||
<mat-menu #benchmarkMenu="matMenu" xPosition="before">
|
||||
<button
|
||||
mat-menu-item
|
||||
[disabled]="!hasPermissionToDeleteItem"
|
||||
(click)="
|
||||
onDeleteItem({
|
||||
dataSource: element.dataSource,
|
||||
symbol: element.symbol
|
||||
})
|
||||
"
|
||||
>
|
||||
<span class="align-items-center d-flex">
|
||||
<ion-icon class="mr-2" name="trash-outline" />
|
||||
<span i18n>Delete</span>
|
||||
</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
class="cursor-pointer"
|
||||
mat-row
|
||||
(click)="
|
||||
onOpenBenchmarkDialog({
|
||||
dataSource: row.dataSource,
|
||||
symbol: row.symbol
|
||||
})
|
||||
"
|
||||
></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@if (isLoading) {
|
||||
<ngx-skeleton-loader
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user