From f127e7c61a64f9d6807bd8afb8e8db1c4cc68436 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 9 Aug 2022 19:28:13 +0200
Subject: [PATCH] Feature/improve styling of benchmarks (#1131)
* Harmonize benchmark table styling
* Update changelog
---
CHANGELOG.md | 1 +
.../components/home-market/home-market.html | 1 +
.../lib/benchmark/benchmark.component.html | 98 +++++++++----------
.../src/lib/benchmark/benchmark.component.ts | 1 +
libs/ui/src/lib/benchmark/benchmark.module.ts | 8 +-
5 files changed, 59 insertions(+), 50 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1bd17aea..32bce249 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed
- Simplified the initialization of the exchange rate service
+- Improved the styling of the benchmarks in the markets overview
## 1.177.0 - 04.08.2022
diff --git a/apps/client/src/app/components/home-market/home-market.html b/apps/client/src/app/components/home-market/home-market.html
index e8cf52be..b0a01a43 100644
--- a/apps/client/src/app/components/home-market/home-market.html
+++ b/apps/client/src/app/components/home-market/home-market.html
@@ -34,6 +34,7 @@
<ngx-skeleton-loader
*ngIf="isLoading"
animation="pulse"
+ class="px-2 py-3"
[theme]="{
height: '1.5rem',
width: '100%'
diff --git a/libs/ui/src/lib/benchmark/benchmark.component.html b/libs/ui/src/lib/benchmark/benchmark.component.html
index a0fa4c1c..c6ec23f6 100644
--- a/libs/ui/src/lib/benchmark/benchmark.component.html
+++ b/libs/ui/src/lib/benchmark/benchmark.component.html
@@ -1,50 +1,50 @@
-<table class="gf-table w-100">
- <thead>
- <tr class="mat-header-row">
- <th class="mat-header-cell px-1 py-2" i18n>Index</th>
- <th class="mat-header-cell px-1 py-2 text-right">
- <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>
- <th class="mat-header-cell px-1 py-2 text-right" i18n></th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let benchmark of benchmarks" class="mat-row">
- <td class="mat-cell px-1 py-2">
- <div class="d-flex align-items-center">
- {{ benchmark.name }}
- </div>
- </td>
- <td class="mat-cell px-1 py-2 text-right">
- <gf-value
- class="d-inline-block justify-content-end"
- size="medium"
- [isPercent]="true"
- [locale]="locale"
- [ngClass]="{
- 'text-danger':
- benchmark?.performances?.allTimeHigh?.performancePercent < 0,
- 'text-success':
- benchmark?.performances?.allTimeHigh?.performancePercent > 0
- }"
- [value]="
- benchmark?.performances?.allTimeHigh?.performancePercent ??
- undefined
- "
- ></gf-value>
- </td>
- <td class="mat-cell px-1 py-2">
- <div
- *ngIf="benchmark?.marketCondition"
- class="text-center"
- [title]="benchmark?.marketCondition"
- >
- {{ resolveMarketCondition(benchmark.marketCondition).emoji }}
- </div>
- </td>
- </tr>
- </tbody>
+<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="change">
+ <th *matHeaderCellDef class="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="text-right" mat-cell>
+ <gf-value
+ class="d-inline-block justify-content-end"
+ size="medium"
+ [isPercent]="true"
+ [locale]="locale"
+ [ngClass]="{
+ 'text-danger':
+ element?.performances?.allTimeHigh?.performancePercent < 0,
+ 'text-success':
+ element?.performances?.allTimeHigh?.performancePercent > 0
+ }"
+ [value]="
+ element?.performances?.allTimeHigh?.performancePercent ?? undefined
+ "
+ ></gf-value>
+ </td>
+ </ng-container>
+
+ <ng-container matColumnDef="marketCondition">
+ <th *matHeaderCellDef mat-header-cell></th>
+ <td *matCellDef="let element" class="px-0" mat-cell>
+ <div
+ *ngIf="element?.marketCondition"
+ class="text-center"
+ [title]="element?.marketCondition"
+ >
+ {{ resolveMarketCondition(element.marketCondition).emoji }}
+ </div>
+ </td>
+ </ng-container>
+
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
diff --git a/libs/ui/src/lib/benchmark/benchmark.component.ts b/libs/ui/src/lib/benchmark/benchmark.component.ts
index c1e35f43..a5c117c2 100644
--- a/libs/ui/src/lib/benchmark/benchmark.component.ts
+++ b/libs/ui/src/lib/benchmark/benchmark.component.ts
@@ -18,6 +18,7 @@ export class BenchmarkComponent implements OnChanges {
@Input() benchmarks: Benchmark[];
@Input() locale: string;
+ public displayedColumns = ['name', 'change', 'marketCondition'];
public resolveMarketCondition = resolveMarketCondition;
public constructor() {}
diff --git a/libs/ui/src/lib/benchmark/benchmark.module.ts b/libs/ui/src/lib/benchmark/benchmark.module.ts
index 3a0eeb5d..1768aa39 100644
--- a/libs/ui/src/lib/benchmark/benchmark.module.ts
+++ b/libs/ui/src/lib/benchmark/benchmark.module.ts
@@ -1,5 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatTableModule } from '@angular/material/table';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { GfValueModule } from '../value';
@@ -8,7 +9,12 @@ import { BenchmarkComponent } from './benchmark.component';
@NgModule({
declarations: [BenchmarkComponent],
exports: [BenchmarkComponent],
- imports: [CommonModule, GfValueModule, NgxSkeletonLoaderModule],
+ imports: [
+ CommonModule,
+ GfValueModule,
+ MatTableModule,
+ NgxSkeletonLoaderModule
+ ],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class GfBenchmarkModule {}