machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5109 from mempool/natsoni/fix-mining-graphs

Browse Source 
Fix widget mining graphs
This commit is contained in:
softsimon 2024-05-29 15:58:56 +07:00 committed by GitHub
commit 9186f664da
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
View File

@ -54,8 +54,8 @@
</form> </form>
</div> </div>
<div [class]="!widget ? 'chart' : 'chart-widget'" *browserOnly [style]="{ height: widget ? ((height + 20) + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions" <div [class]="!widget ? 'chart' : 'chart-widget'" *browserOnly [style]="{ height: widget ? ((height + 20) + 'px') : null, opacity: isLoading ? 0.5 : 1 }" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}"> (chartInit)="onChartInit($event)">
</div> </div>
<div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading"> <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
<div class="spinner-border text-light"></div> <div class="spinner-border text-light"></div>

8
frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
View File

@ -349,7 +349,9 @@ export class HashrateChartComponent implements OnInit {
const selectedPowerOfTen: any = selectPowerOfTen(val); const selectedPowerOfTen: any = selectPowerOfTen(val);
const newVal = Math.round(val / selectedPowerOfTen.divider); const newVal = Math.round(val / selectedPowerOfTen.divider);
return `${newVal} ${selectedPowerOfTen.unit}H/s`; return `${newVal} ${selectedPowerOfTen.unit}H/s`;
} },
showMinLabel: false,
showMaxLabel: false,
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
@ -381,7 +383,9 @@ export class HashrateChartComponent implements OnInit {
const selectedPowerOfTen: any = selectPowerOfTen(val); const selectedPowerOfTen: any = selectPowerOfTen(val);
const newVal = Math.round(val / selectedPowerOfTen.divider); const newVal = Math.round(val / selectedPowerOfTen.divider);
return `${newVal} ${selectedPowerOfTen.unit}`; return `${newVal} ${selectedPowerOfTen.unit}`;
} },
showMinLabel: false,
showMaxLabel: false,
}, },
splitLine: { splitLine: {
show: false, show: false,

4
frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
View File

@ -29,7 +29,7 @@
<div class="card"> <div class="card">
<div class="card-body pl-2 pr-2"> <div class="card-body pl-2 pr-2">
<div class="mempool-graph"> <div class="mempool-graph">
<app-pool-ranking [height]="graphHeight" [attr.data-cy]="'pool-distribution'" [widget]=true></app-pool-ranking> <app-pool-ranking [height]="poolGraphHeight" [attr.data-cy]="'pool-distribution'" [widget]=true></app-pool-ranking>
</div> </div>
<div class="mt-1"><a [attr.data-cy]="'pool-distribution-view-more'" [routerLink]="['/graphs/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div> <div class="mt-1"><a [attr.data-cy]="'pool-distribution-view-more'" [routerLink]="['/graphs/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
</div> </div>
@ -41,7 +41,7 @@
<div class="card"> <div class="card">
<div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2"> <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
<div class="fixed-mempool-graph"> <div class="fixed-mempool-graph">
<app-hashrate-chart [height]="graphHeight" [attr.data-cy]="'hashrate-graph'" [widget]="true"></app-hashrate-chart> <app-hashrate-chart [height]="hashrateGraphHeight" [attr.data-cy]="'hashrate-graph'" [widget]="true"></app-hashrate-chart>
</div> </div>
<div class="mt-1"><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" fragment="1y" i18n="dashboard.view-more">View more &raquo;</a></div> <div class="mt-1"><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" fragment="1y" i18n="dashboard.view-more">View more &raquo;</a></div>
</div> </div>

12
frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
View File

@ -12,7 +12,8 @@ import { EventType, NavigationStart, Router } from '@angular/router';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class MiningDashboardComponent implements OnInit, AfterViewInit { export class MiningDashboardComponent implements OnInit, AfterViewInit {
graphHeight = 375; hashrateGraphHeight = 335;
poolGraphHeight = 375;
constructor( constructor(
private seoService: SeoService, private seoService: SeoService,
@ -44,11 +45,14 @@ export class MiningDashboardComponent implements OnInit, AfterViewInit {
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(): void { onResize(): void {
if (window.innerWidth >= 992) { if (window.innerWidth >= 992) {
this.graphHeight = 335; this.hashrateGraphHeight = 335;
this.poolGraphHeight = 375;
} else if (window.innerWidth >= 768) { } else if (window.innerWidth >= 768) {
this.graphHeight = 245; this.hashrateGraphHeight = 245;
this.poolGraphHeight = 265;
} else { } else {
this.graphHeight = 240; this.hashrateGraphHeight = 240;
this.poolGraphHeight = 240;
} }
} }
} }

4
frontend/src/app/components/pool-ranking/pool-ranking.component.html
View File

@ -76,8 +76,8 @@
</div> </div>
<div [class]="!widget ? '' : 'pb-0'" class="container pb-lg-0"> <div [class]="!widget ? '' : 'pb-0'" class="container pb-lg-0">
<div [class]="widget ? 'chart-widget' : 'chart'" *browserOnly [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions" <div [class]="widget ? 'chart-widget' : 'chart'" *browserOnly [style]="{ height: widget ? (height + 'px') : null, opacity: isLoading ? 0.5 : 1 }" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}"> (chartInit)="onChartInit($event)">
</div> </div>
<div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading"> <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">

1
frontend/src/app/components/pool-ranking/pool-ranking.component.scss
View File

@ -24,6 +24,7 @@
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
max-height: 230px; max-height: 230px;
} }
margin-bottom: 20px;
} }
.chart-widget { .chart-widget {
width: 100%; width: 100%;