Skip to content

Commit

Permalink
refactored performance dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@manuelsc
manuelsc committed Nov 6, 2023
1 parent 9051e19 commit 3cbee94
Show file tree
Hide file tree
Showing 7 changed files with 270 additions and 232 deletions.
258 changes: 45 additions & 213 deletions src/app/components/dashboard/dashboard.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,219 +222,51 @@
</ion-segment>
<ion-list class="performances">
<ion-item lines="none">
<div *ngIf="rewardTab == 'combined'" class="grid">
<div class="grid-cell left" (click)="unit.switchCurrencyPipe()">
<div class="grid">
<ion-label class="value left" [class]="data.combinedPerformance.performance1d | valuestyle : 0">
{{ data.combinedPerformance.performance1d | mcurrency : 'GWEI' : unit.pref.Cons }}
</ion-label>
</div>
<div class="grid">
<ion-label class="income-title">
<span
tooltip="Today's consensus and execution reward income. Note that this is counted in beaconchain days, a beaconchain day might start mid day depending on the network. "
trigger="click"
hideDelayAfterClick="5000"
>Today</span
>
</ion-label>
</div>
</div>

<div class="grid-cell" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value" [class]="data.combinedPerformance.performance7d | valuestyle : 0">
{{ data.combinedPerformance.performance7d | mcurrency : 'GWEI' : unit.pref.Cons }}
</ion-label>
</div>
<div>
<ion-label class="income-title right"> Last 7d </ion-label>
</div>
</div>

<div class="grid-cell left" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value left" [class]="data.combinedPerformance.performance31d | valuestyle : 0">
{{ data.combinedPerformance.performance31d | mcurrency : 'GWEI' : unit.pref.Cons }}
</ion-label>
</div>
<div>
<ion-label class="income-title"> Last 31d </ion-label>
</div>
</div>

<div class="grid-cell" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value" [class]="data.combinedPerformance.total | valuestyle : 0">
{{ data.combinedPerformance.total | mcurrency : 'GWEI' : unit.pref.Cons }}
</ion-label>
</div>
<div>
<ion-label class="income-title right"> Total </ion-label>
</div>
</div>

<div class="grid-cell left">
<div>
<ion-label class="value left" [class]="data.combinedPerformance.apr | valuestyle : 0"> {{ data.combinedPerformance.apr }} % </ion-label>
</div>
<div>
<ion-label class="income-title">
<span
tooltip="Estimated yearly returns on both consensus layer (staking) and execution layer (transaction fees), based on the last 31 days"
placement="right"
trigger="click"
hideDelayAfterClick="5000"
>APR</span
>
</ion-label>
</div>
</div>
</div>
<div *ngIf="rewardTab == 'cons'" class="grid">
<div class="grid-cell left" (click)="unit.switchCurrencyPipe()">
<div class="grid">
<ion-label class="value left" [class]="data.consensusPerformance.performance1d | valuestyle : 0">
{{ data.consensusPerformance.performance1d | mcurrency : 'GWEI' : unit.pref.Cons }}
</ion-label>
</div>
<div class="grid">
<ion-label class="income-title">
<span
tooltip="Today's consensus reward income. Note that this is counted in beaconchain days, a beaconchain day might start mid day depending on the network. "
trigger="click"
hideDelayAfterClick="5000"
>Today</span
>
</ion-label>
</div>
</div>

<div class="grid-cell" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value" [class]="data.consensusPerformance.performance7d | valuestyle : 0">
{{ data.consensusPerformance.performance7d | mcurrency : 'GWEI' : unit.pref.Cons }}
</ion-label>
</div>
<div>
<ion-label class="income-title right"> Last 7d </ion-label>
</div>
</div>

<div class="grid-cell left" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value left" [class]="data.consensusPerformance.performance31d | valuestyle : 0">
{{ data.consensusPerformance.performance31d | mcurrency : 'GWEI' : unit.pref.Cons }}
</ion-label>
</div>
<div>
<ion-label class="income-title"> Last 31d </ion-label>
</div>
</div>

<div class="grid-cell" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value" [class]="data.consensusPerformance.total | valuestyle : 0">
{{ data.consensusPerformance.total | mcurrency : 'GWEI' : unit.pref.Cons }}
</ion-label>
</div>
<div>
<ion-label class="income-title right">
<span
tooltip="Contains your consensus rewards, your execution rewards and any claimed or unclaimed smoothing pool rewards. "
trigger="click"
hideDelayAfterClick="5000"
>Total</span
>
</ion-label>
</div>
</div>

<div class="grid-cell left">
<div>
<ion-label class="value left" [class]="data.consensusPerformance.apr | valuestyle : 0"> {{ data.consensusPerformance.apr }} % </ion-label>
</div>
<div>
<ion-label class="income-title">
<span
tooltip="Estimated yearly returns on consensus layer (staking), based on the last 31 days"
placement="right"
trigger="click"
hideDelayAfterClick="5000"
>APR</span
>
</ion-label>
</div>
</div>
</div>
<div *ngIf="rewardTab == 'exec'" class="grid">
<div class="grid-cell left" (click)="unit.switchCurrencyPipe()">
<div class="grid">
<ion-label class="value left" [class]="data.executionPerformance.performance1d | valuestyle : 0">
{{ data.executionPerformance.performance1d | mcurrency : 'GWEI' : unit.pref.Exec }}
</ion-label>
</div>
<div class="grid">
<ion-label class="income-title">
<span
tooltip="Today's execution reward income. Note that this is counted in beaconchain days, a beaconchain day might start mid day depending on the network. "
trigger="click"
hideDelayAfterClick="5000"
>Today</span
>
</ion-label>
</div>
</div>

<div class="grid-cell" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value" [class]="data.executionPerformance.performance7d | valuestyle : 0">
{{ data.executionPerformance.performance7d | mcurrency : 'GWEI' : unit.pref.Exec }}
</ion-label>
</div>
<div>
<ion-label class="income-title right"> Last 7d </ion-label>
</div>
</div>

<div class="grid-cell left" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value left" [class]="data.executionPerformance.performance31d | valuestyle : 0">
{{ data.executionPerformance.performance31d | mcurrency : 'GWEI' : unit.pref.Exec }}
</ion-label>
</div>
<div>
<ion-label class="income-title"> Last 31d </ion-label>
</div>
</div>

<div class="grid-cell" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value" [class]="data.executionPerformance.total | valuestyle : 0">
{{ data.executionPerformance.total | mcurrency : 'GWEI' : unit.pref.Exec }}
</ion-label>
</div>
<div>
<ion-label class="income-title right"> Total </ion-label>
</div>
</div>

<div class="grid-cell left">
<div>
<ion-label class="value left" [class]="data.executionPerformance.apr | valuestyle : 0"> {{ data.executionPerformance.apr }} % </ion-label>
</div>
<div>
<ion-label class="income-title">
<span
tooltip="Estimated yearly returns on execution layer (transaction fees), based on the last 31 days"
placement="right"
trigger="click"
hideDelayAfterClick="5000"
>APR</span
>
</ion-label>
</div>
</div>
<div class="grid">
<app-performance-item
*ngIf="rewardTab === 'combined'"
[performanceData]="data.combinedPerformance"
[currency]="'GWEI'"
[unit]="unit"
[todayTooltip]="
'Today\'s consensus and execution reward income. Note that this is counted in beaconchain days, a beaconchain day might start mid day depending on the network.'
"
[last7DaysTooltip]=""
[last31DaysTooltip]=""
[totalTooltip]="'Total (Contains your consensus rewards, your execution rewards and any claimed or unclaimed smoothing pool rewards.)'"
[aprTooltip]="
'APR (Estimated yearly returns on both consensus layer (staking) and execution layer (transaction fees))'
"></app-performance-item>

<app-performance-item
*ngIf="rewardTab === 'cons'"
[performanceData]="data.consensusPerformance"
[currency]="'GWEI'"
[unit]="unit"
[todayTooltip]="
'Today\'s consensus reward income. Note that this is counted in beaconchain days, a beaconchain day might start mid day depending on the network.'
"
[last7DaysTooltip]=""
[last31DaysTooltip]=""
[totalTooltip]="'Total (Contains your consensus rewards)'"
[aprTooltip]="
'APR (Estimated yearly returns on both consensus layer (staking) and execution layer (transaction fees))'
"></app-performance-item>

<app-performance-item
*ngIf="rewardTab === 'exec'"
[performanceData]="data.executionPerformance"
[currency]="'GWEI'"
[unit]="unit"
[todayTooltip]="
'Today\'s execution reward income. Note that this is counted in beaconchain days, a beaconchain day might start mid day depending on the network.'
"
[last7DaysTooltip]=""
[last31DaysTooltip]=""
[totalTooltip]="'Total (Contains execution rewards without any claimed or unclaimed smoothing pool rewards.)'"
[aprTooltip]="
'APR (Estimated yearly returns on both consensus layer (staking) and execution layer (transaction fees))'
"></app-performance-item>
</div>
</ion-item>
</ion-list>
Expand Down
2 changes: 2 additions & 0 deletions src/app/components/dashboard/dashboard.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import { ClientupdateComponentModule } from '../../components/clientupdate/clien
import { MessageComponentModule } from '../../components/message/message.module'
import { TooltipModule } from 'ng2-tooltip-directive-major-angular-updates'
import { AdComponentModule } from '../ad/ad.module'
import { PerformanceItemComponentModule } from '../dashboard/performance-item.module'

@NgModule({
imports: [
Expand All @@ -41,6 +42,7 @@ import { AdComponentModule } from '../ad/ad.module'
MessageComponentModule,
TooltipModule,
AdComponentModule,
PerformanceItemComponentModule,
],
declarations: [DashboardComponent],
exports: [DashboardComponent],
Expand Down
88 changes: 88 additions & 0 deletions src/app/components/dashboard/performance-item.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!--
Copyright (C) 2020 - 2023 Bitfly GmbH
This file is part of Beaconchain Dashboard.
Beaconchain Dashboard is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Beaconchain Dashboard is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Beaconchain Dashboard. If not, see <http://www.gnu.org/licenses/>.
-->

<div class="grid">
<div class="grid-cell left" (click)="unit.switchCurrencyPipe()">
<div class="grid">
<ion-label class="value left" [class]="performanceData.performance1d | valuestyle : 0">
{{ performanceData.performance1d | mcurrency : currency : unit.pref.Cons }}
</ion-label>
</div>
<div class="grid">
<ion-label class="income-title">
<span *ngIf="!todayTooltip">Today</span>
<span *ngIf="todayTooltip" [tooltip]="todayTooltip" trigger="click" hideDelayAfterClick="5000">Today</span>
</ion-label>
</div>
</div>

<div class="grid-cell" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value right" [class]="performanceData.performance7d | valuestyle : 0">
{{ performanceData.performance7d | mcurrency : currency : unit.pref.Cons }}
</ion-label>
</div>
<div>
<ion-label class="income-title right">
<span *ngIf="!last7DaysTooltip">Last 7d</span>
<span *ngIf="last7DaysTooltip" [tooltip]="last7DaysTooltip" trigger="click" hideDelayAfterClick="5000">Last 7d</span>
</ion-label>
</div>
</div>

<div class="grid-cell left" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value left" [class]="performanceData.performance31d | valuestyle : 0">
{{ performanceData.performance31d | mcurrency : currency : unit.pref.Cons }}
</ion-label>
</div>
<div>
<ion-label class="income-title">
<span *ngIf="!last31DaysTooltip">Last 31d</span>
<span *ngIf="last31DaysTooltip" [tooltip]="last31DaysTooltip" trigger="click" hideDelayAfterClick="5000">Last 31d</span>
</ion-label>
</div>
</div>

<div class="grid-cell" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value right" [class]="performanceData.total | valuestyle : 0">
{{ performanceData.total | mcurrency : currency : unit.pref.Cons }}
</ion-label>
</div>
<div>
<ion-label class="income-title right">
<span *ngIf="!totalTooltip">Total</span>
<span *ngIf="totalTooltip" [tooltip]="totalTooltip" trigger="click" hideDelayAfterClick="5000">Total</span>
</ion-label>
</div>
</div>

<div class="grid-cell left">
<div>
<ion-label class="value left" [class]="performanceData.apr31d | valuestyle : 0"> {{ performanceData.apr31d }} % </ion-label>
</div>
<div>
<ion-label class="income-title">
<span *ngIf="!aprTooltip">APR 31d</span>
<span *ngIf="aprTooltip" [tooltip]="aprTooltip" trigger="click" hideDelayAfterClick="5000">APR 31d</span>
</ion-label>
</div>
</div>
</div>
Loading

0 comments on commit 3cbee94

Please sign in to comment.