Merge pull request #162 from mempool/simon/graph-inverter

Adding a button to invert the graph globally.

frontend/src/app/app.module.ts

@@ -43,7 +43,7 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 import { FeesBoxComponent } from './components/fees-box/fees-box.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
-import { faAngleDoubleDown, faAngleDoubleUp, faAngleDown, faAngleUp, faBolt, faChartArea, faCogs, faCubes, faDatabase, faInfoCircle,
+import { faAngleDoubleDown, faAngleDoubleUp, faAngleDown, faAngleUp, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
   faLink, faList, faSearch, faTachometerAlt, faThList, faTint, faTv } from '@fortawesome/free-solid-svg-icons';
 import { ApiDocsComponent } from './components/api-docs/api-docs.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
@@ -121,5 +121,6 @@ export class AppModule {
     library.addIcons(faTint);
     library.addIcons(faAngleDown);
     library.addIcons(faAngleUp);
+    library.addIcons(faExchangeAlt);
   }
 }

frontend/src/app/components/mempool-graph/mempool-graph.component.ts

@@ -4,6 +4,7 @@ import { VbytesPipe } from 'src/app/shared/pipes/bytes-pipe/vbytes.pipe';
 import * as Chartist from '@mempool/chartist';
 import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface';
 import { StateService } from 'src/app/services/state.service';
+import { StorageService } from 'src/app/services/storage.service';
 
 @Component({
   selector: 'app-mempool-graph',
@@ -21,11 +22,13 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   mempoolVsizeFeesData: any;
 
   isMobile = window.innerWidth <= 767.98;
+  inverted: boolean;
 
   constructor(
     private vbytesPipe: VbytesPipe,
     private stateService: StateService,
     @Inject(LOCALE_ID) private locale: string,
+    private storageService: StorageService,
   ) { }
 
   ngOnInit(): void {
@@ -62,7 +65,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
       showLine: false,
       fullWidth: true,
       showPoint: false,
-      stackedLine: true,
+      stackedLine: !this.inverted,
       low: 0,
       axisX: {
         labelInterpolationFnc: labelInterpolationFnc,
@@ -72,7 +75,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
         labelInterpolationFnc: (value: number): any => this.vbytesPipe.transform(value, 2),
         offset: showLegend ? 160 : 60,
       },
-      plugins: []
+      plugins: this.inverted ? [Chartist.plugins.ctTargetLine({ value: 1000000 })] : []
     };
 
     if (showLegend) {
@@ -97,6 +100,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges() {
+    this.inverted = this.storageService.getValue('inverted-graph') === 'true';
     this.mempoolVsizeFeesData = this.handleNewMempoolData(this.data.concat([]));
   }
 
@@ -131,10 +135,12 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
           feesArray.push(0);
         }
       });
+      if (this.inverted && finalArray.length) {
+        feesArray = feesArray.map((value, i) => value + finalArray[finalArray.length - 1][i]);
+      }
       finalArray.push(feesArray);
     }
     finalArray.reverse();
     return finalArray;
   }
-
 }

frontend/src/app/components/statistics/statistics.component.html

@@ -40,6 +40,7 @@
                 <input ngbButton type="radio" [value]="'1y'" [routerLink]="['/graphs' | relativeUrl]" fragment="1y"> 1Y
               </label>
             </div>
+            <button (click)="invertGraph()" class="btn btn-primary btn-sm ml-2 d-none d-md-inline"><fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true" title="Search"></fa-icon></button>
           </form>
         </div>
         <div class="card-body">

frontend/src/app/components/statistics/statistics.component.ts

@@ -12,6 +12,7 @@ import { ApiService } from '../../services/api.service';
 import * as Chartist from '@mempool/chartist';
 import { StateService } from 'src/app/services/state.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { StorageService } from 'src/app/services/storage.service';
 
 @Component({
   selector: 'app-statistics',
@@ -33,6 +34,7 @@ export class StatisticsComponent implements OnInit {
   transactionsWeightPerSecondOptions: any;
 
   radioGroupForm: FormGroup;
+  inverted: boolean;
 
   constructor(
     @Inject(LOCALE_ID) private locale: string,
@@ -42,6 +44,7 @@ export class StatisticsComponent implements OnInit {
     private apiService: ApiService,
     private stateService: StateService,
     private seoService: SeoService,
+    private storageService: StorageService,
   ) {
     this.radioGroupForm = this.formBuilder.group({
       dateSpan: '2h'
@@ -51,6 +54,7 @@ export class StatisticsComponent implements OnInit {
   ngOnInit() {
     this.seoService.setTitle('Graphs');
     this.stateService.networkChanged$.subscribe((network) => this.network = network);
+    this.inverted = this.storageService.getValue('inverted-graph') === 'true';
     const isMobile = window.innerWidth <= 767.98;
     let labelHops = isMobile ? 48 : 24;
 
@@ -157,4 +161,9 @@ export class StatisticsComponent implements OnInit {
       series: [mempoolStats.map((stats) => stats.vbytes_per_second)],
     };
   }
+
+  invertGraph() {
+    this.storageService.setValue('inverted-graph', !this.inverted);
+    document.location.reload();
+  }
 }

frontend/src/app/services/storage.service.ts

@@ -9,6 +9,7 @@ export class StorageService {
       return localStorage.getItem(key);
     } catch (e) {
       console.log(e);
+      return '';
     }
   }