persist graph window preference between reloads (#456)

Persist graph window preference between reloads
fixes #365
This commit is contained in:
Felipe Knorr Kuhn 2021-04-18 23:17:16 -07:00 committed by GitHub
parent dfd88a7ff9
commit 220d9afd97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 10 deletions

View File

@ -14,8 +14,7 @@
<div class="card mb-3" *ngIf="mempoolStats.length"> <div class="card mb-3" *ngIf="mempoolStats.length">
<div class="card-header"> <div class="card-header">
<i class="fa fa-area-chart"></i> <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span> <i class="fa fa-area-chart"></i> <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
<form [formGroup]="radioGroupForm" style="float: right;" (click)='saveGraphPreference()'>
<form [formGroup]="radioGroupForm" style="float: right;">
<div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading"></div> <div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading"></div>
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan"> <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm"> <label ngbButtonLabel class="btn-primary btn-sm">

View File

@ -35,6 +35,7 @@ export class StatisticsComponent implements OnInit {
radioGroupForm: FormGroup; radioGroupForm: FormGroup;
inverted: boolean; inverted: boolean;
graphWindowPreference: String;
constructor( constructor(
@Inject(LOCALE_ID) private locale: string, @Inject(LOCALE_ID) private locale: string,
@ -46,8 +47,9 @@ export class StatisticsComponent implements OnInit {
private seoService: SeoService, private seoService: SeoService,
private storageService: StorageService, private storageService: StorageService,
) { ) {
this.graphWindowPreference = this.storageService.getValue('graphWindowPreference') ? this.storageService.getValue('graphWindowPreference').trim() : '2h';
this.radioGroupForm = this.formBuilder.group({ this.radioGroupForm = this.formBuilder.group({
dateSpan: '2h' dateSpan: this.graphWindowPreference
}); });
} }
@ -63,7 +65,7 @@ export class StatisticsComponent implements OnInit {
} }
const labelInterpolationFnc = (value: any, index: any) => { const labelInterpolationFnc = (value: any, index: any) => {
switch (this.radioGroupForm.controls.dateSpan.value) { switch (this.graphWindowPreference) {
case '2h': case '2h':
case '24h': case '24h':
value = formatDate(value, 'HH:mm', this.locale); value = formatDate(value, 'HH:mm', this.locale);
@ -114,24 +116,24 @@ export class StatisticsComponent implements OnInit {
.pipe( .pipe(
switchMap(() => { switchMap(() => {
this.spinnerLoading = true; this.spinnerLoading = true;
if (this.radioGroupForm.controls.dateSpan.value === '2h') { if (this.graphWindowPreference === '2h') {
this.websocketService.want(['blocks', 'live-2h-chart']); this.websocketService.want(['blocks', 'live-2h-chart']);
return this.apiService.list2HStatistics$(); return this.apiService.list2HStatistics$();
} }
this.websocketService.want(['blocks']); this.websocketService.want(['blocks']);
if (this.radioGroupForm.controls.dateSpan.value === '24h') { if (this.graphWindowPreference === '24h') {
return this.apiService.list24HStatistics$(); return this.apiService.list24HStatistics$();
} }
if (this.radioGroupForm.controls.dateSpan.value === '1w') { if (this.graphWindowPreference === '1w') {
return this.apiService.list1WStatistics$(); return this.apiService.list1WStatistics$();
} }
if (this.radioGroupForm.controls.dateSpan.value === '1m') { if (this.graphWindowPreference === '1m') {
return this.apiService.list1MStatistics$(); return this.apiService.list1MStatistics$();
} }
if (this.radioGroupForm.controls.dateSpan.value === '3m') { if (this.graphWindowPreference === '3m') {
return this.apiService.list3MStatistics$(); return this.apiService.list3MStatistics$();
} }
if (this.radioGroupForm.controls.dateSpan.value === '6m') { if (this.graphWindowPreference === '6m') {
return this.apiService.list6MStatistics$(); return this.apiService.list6MStatistics$();
} }
return this.apiService.list1YStatistics$(); return this.apiService.list1YStatistics$();
@ -166,4 +168,9 @@ export class StatisticsComponent implements OnInit {
this.storageService.setValue('inverted-graph', !this.inverted); this.storageService.setValue('inverted-graph', !this.inverted);
document.location.reload(); document.location.reload();
} }
saveGraphPreference() {
this.storageService.setValue('graphWindowPreference', this.radioGroupForm.controls.dateSpan.value);
document.location.reload();
}
} }