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

Make hashrate chart more responsive

Browse Source
This commit is contained in:
nymkappa 2022-02-21 14:02:41 +09:00
parent 53a8d5b246
commit ac118141ce
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
3 changed files with 51 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,6 @@
<div [class]="widget === false ? 'container-xl' : ''">
<div [class]="widget === false ? 'full-container' : ''">
<div *ngIf="hashrateObservable$ | async" class="" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
<div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div>
</div>
<div class="card-header mb-0 mb-lg-4 mt-3" [style]="widget ? 'display:none' : ''">
<div class="card-header mb-0 mb-lg-4" [style]="widget ? 'display:none' : ''">
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as hashrates">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="hashrates.availableTimespanDay >= 90">
@ -29,4 +24,10 @@
</div>
</form>
</div>
<div *ngIf="hashrateObservable$ | async" [class]="widget === false ? 'chart' : ''" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
<div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div>
</div>
</div>

34
frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
View File

@ -8,3 +8,37 @@
text-align: center;
padding-bottom: 3px;
}
.full-container {
width: 100%;
height: calc(100% - 100px);
@media (max-width: 992px) {
height: calc(100% - 140px);
};
@media (max-width: 576px) {
height: calc(100% - 180px);
};
}
.chart {
width: 100%;
height: 100%;
padding: 1.25rem;
}
.formRadioGroup {
margin-top: 6px;
display: flex;
flex-direction: column;
@media (min-width: 830px) {
flex-direction: row;
float: right;
margin-top: 0px;
}
.btn-sm {
font-size: 9px;
@media (min-width: 830px) {
font-size: 14px;
}
}
}

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

@ -22,12 +22,16 @@ import { FormBuilder, FormGroup } from '@angular/forms';
})
export class HashrateChartComponent implements OnInit {
@Input() widget: boolean = false;
@Input() right: number | string = 10;
@Input() left: number | string = 75;
radioGroupForm: FormGroup;
chartOptions: EChartsOption = {};
chartInitOptions = {
renderer: 'svg'
renderer: 'svg',
width: 'auto',
height: 'auto',
};
hashrateObservable$: Observable<any>;
@ -73,6 +77,10 @@ export class HashrateChartComponent implements OnInit {
prepareChartOptions(data) {
this.chartOptions = {
grid: {
right: this.right,
left: this.left,
},
title: {
text: this.widget ? '' : $localize`:@@mining.hashrate:Hashrate`,
left: 'center',