From 220d9afd978d3224c105e9a6dfed74e623e97eb5 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com>
Date: Sun, 18 Apr 2021 23:17:16 -0700
Subject: [PATCH] persist graph window preference between reloads (#456)

Persist graph window preference between reloads
fixes #365
---
 .../statistics/statistics.component.html      |  3 +--
 .../statistics/statistics.component.ts        | 23 ++++++++++++-------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html
index e876f41fa..b83cb129b 100644
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@@ -14,8 +14,7 @@
       <div class="card mb-3" *ngIf="mempoolStats.length">
         <div class="card-header">
           <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;">
+          <form [formGroup]="radioGroupForm" style="float: right;" (click)='saveGraphPreference()'>
             <div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading"></div>
             <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
               <label ngbButtonLabel class="btn-primary btn-sm">
diff --git a/frontend/src/app/components/statistics/statistics.component.ts b/frontend/src/app/components/statistics/statistics.component.ts
index 8daa192c1..8557913a1 100644
--- a/frontend/src/app/components/statistics/statistics.component.ts
+++ b/frontend/src/app/components/statistics/statistics.component.ts
@@ -35,6 +35,7 @@ export class StatisticsComponent implements OnInit {
 
   radioGroupForm: FormGroup;
   inverted: boolean;
+  graphWindowPreference: String;
 
   constructor(
     @Inject(LOCALE_ID) private locale: string,
@@ -46,8 +47,9 @@ export class StatisticsComponent implements OnInit {
     private seoService: SeoService,
     private storageService: StorageService,
   ) {
+    this.graphWindowPreference = this.storageService.getValue('graphWindowPreference') ? this.storageService.getValue('graphWindowPreference').trim() : '2h';
     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) => {
-      switch (this.radioGroupForm.controls.dateSpan.value) {
+      switch (this.graphWindowPreference) {
         case '2h':
         case '24h':
           value = formatDate(value, 'HH:mm', this.locale);
@@ -114,24 +116,24 @@ export class StatisticsComponent implements OnInit {
     .pipe(
       switchMap(() => {
         this.spinnerLoading = true;
-        if (this.radioGroupForm.controls.dateSpan.value === '2h') {
+        if (this.graphWindowPreference === '2h') {
           this.websocketService.want(['blocks', 'live-2h-chart']);
           return this.apiService.list2HStatistics$();
         }
         this.websocketService.want(['blocks']);
-        if (this.radioGroupForm.controls.dateSpan.value === '24h') {
+        if (this.graphWindowPreference === '24h') {
           return this.apiService.list24HStatistics$();
         }
-        if (this.radioGroupForm.controls.dateSpan.value === '1w') {
+        if (this.graphWindowPreference === '1w') {
           return this.apiService.list1WStatistics$();
         }
-        if (this.radioGroupForm.controls.dateSpan.value === '1m') {
+        if (this.graphWindowPreference === '1m') {
           return this.apiService.list1MStatistics$();
         }
-        if (this.radioGroupForm.controls.dateSpan.value === '3m') {
+        if (this.graphWindowPreference === '3m') {
           return this.apiService.list3MStatistics$();
         }
-        if (this.radioGroupForm.controls.dateSpan.value === '6m') {
+        if (this.graphWindowPreference === '6m') {
           return this.apiService.list6MStatistics$();
         }
         return this.apiService.list1YStatistics$();
@@ -166,4 +168,9 @@ export class StatisticsComponent implements OnInit {
     this.storageService.setValue('inverted-graph', !this.inverted);
     document.location.reload();
   }
+
+  saveGraphPreference() {
+    this.storageService.setValue('graphWindowPreference', this.radioGroupForm.controls.dateSpan.value);
+    document.location.reload();
+  }
 }