From ca540d902a0edce56c40fbf562b3d6faad3f8b4c Mon Sep 17 00:00:00 2001 From: softsimon Date: Mon, 16 Nov 2020 19:27:06 +0700 Subject: [PATCH] Adding a button to invert the graph globally. --- frontend/src/app/app.module.ts | 3 ++- .../mempool-graph/mempool-graph.component.ts | 12 +++++++++--- .../components/statistics/statistics.component.html | 1 + .../components/statistics/statistics.component.ts | 9 +++++++++ frontend/src/app/services/storage.service.ts | 1 + 5 files changed, 22 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index f52b74924..270143297 100644 --- a/frontend/src/app/app.module.ts +++ b/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); } } diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts index 496f532ef..285c46df4 100644 --- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts +++ b/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; } - } diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html index 1e634e60f..6d56b7728 100644 --- a/frontend/src/app/components/statistics/statistics.component.html +++ b/frontend/src/app/components/statistics/statistics.component.html @@ -40,6 +40,7 @@ 1Y +
diff --git a/frontend/src/app/components/statistics/statistics.component.ts b/frontend/src/app/components/statistics/statistics.component.ts index 969b84e63..c9d65a809 100644 --- a/frontend/src/app/components/statistics/statistics.component.ts +++ b/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(); + } } diff --git a/frontend/src/app/services/storage.service.ts b/frontend/src/app/services/storage.service.ts index c39117a9e..c7595b404 100644 --- a/frontend/src/app/services/storage.service.ts +++ b/frontend/src/app/services/storage.service.ts @@ -9,6 +9,7 @@ export class StorageService { return localStorage.getItem(key); } catch (e) { console.log(e); + return ''; } }