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

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

View File

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

View File

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

View File

@ -29,7 +29,7 @@
<div class="card">
<div class="card-body pl-2 pr-2">
<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 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>
@ -41,7 +41,7 @@
<div class="card">
<div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
<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 class="mt-1"><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" fragment="1y" i18n="dashboard.view-more">View more &raquo;</a></div>
</div>

View File

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

View File

@ -76,8 +76,8 @@
</div>
<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"
(chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
<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)">
</div>
<div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">

View File

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