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

Apply proper datetime format according to choosen time scale and force 2h windowPreference in the dashboard

Browse Source
This commit is contained in:
nymkappa 2021-12-11 15:26:59 +09:00
parent 2b0d543ce7
commit 9e8a741d97
3 changed files with 65 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
View File

@ -25,6 +25,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
@Input() top: number | string = '20'; @Input() top: number | string = '20';
@Input() left: number | string = '0'; @Input() left: number | string = '0';
@Input() template: ('widget' | 'advanced') = 'widget'; @Input() template: ('widget' | 'advanced') = 'widget';
@Input() windowPreferenceOverride: string;
isLoading = true; isLoading = true;
mempoolStatsChartOption: EChartsOption = {}; mempoolStatsChartOption: EChartsOption = {};
@ -46,7 +47,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
if (!this.data) { if (!this.data) {
return; return;
} }
this.windowPreference = this.storageService.getValue('graphWindowPreference'); this.windowPreference = this.windowPreferenceOverride ? this.windowPreferenceOverride : this.storageService.getValue('graphWindowPreference');
this.mountChart(); this.mountChart();
} }
@ -102,14 +103,41 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
type: 'line', type: 'line',
}, },
formatter: (params: any) => { formatter: (params: any) => {
// Todo - Refactor
let axisValueLabel: string = "";
switch (this.windowPreference) {
case "2h":
axisValueLabel = `${formatDate(params[0].axisValue, 'h:mm a', this.locale)}`;
break;
case "24h":
axisValueLabel = `${formatDate(params[0].axisValue, 'EEE HH:mm', this.locale)}`
break;
case "1w":
axisValueLabel = `${formatDate(params[0].axisValue, 'MMM d HH:mm', this.locale)}`
break;
case "1m":
case "3m":
case "6m":
axisValueLabel = `${formatDate(params[0].axisValue, 'MMM d HH:00', this.locale)}`
break;
case "1y":
case "2y":
case "3y":
axisValueLabel = `${formatDate(params[0].axisValue, 'MMM d y', this.locale)}`
break;
default:
axisValueLabel = `${formatDate(params[0].axisValue, 'M/d', this.locale)}\n${formatDate(params[0].axisValue, 'H:mm', this.locale)}`
break;
}
const colorSpan = (color: string) => `<span class="indicator" style="background-color: ` + color + `"></span>`; const colorSpan = (color: string) => `<span class="indicator" style="background-color: ` + color + `"></span>`;
let itemFormatted = '<div class="title">' + params[0].axisValue + '</div>'; let itemFormatted = '<div class="title">' + axisValueLabel + '</div>';
params.map((item: any, index: number) => { params.map((item: any, index: number) => {
if (index < 26) { if (index < 26) {
itemFormatted += `<div class="item"> itemFormatted += `<div class="item">
<div class="indicator-container">${colorSpan(item.color)}</div> <div class="indicator-container">${colorSpan(item.color)}</div>
<div class="grow"></div> <div class="grow"></div>
<div class="value">${item.value} <span class="symbol">vB/s</span></div> <div class="value">${item.value[1]} <span class="symbol">vB/s</span></div>
</div>`; </div>`;
} }
}); });
@ -117,36 +145,12 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
} }
}, },
xAxis: { xAxis: {
type: 'category', type: 'time',
axisLabel: { axisLabel: {
align: 'center', align: 'center',
fontSize: 11, fontSize: 11,
lineHeight: 12 lineHeight: 12
}, },
data: this.data.labels.map((value: any) => {
switch (this.windowPreference) {
case "2h":
return `${formatDate(value, 'h:mm a', this.locale)}`
case "24h":
return `${formatDate(value, 'h a', this.locale)}`
case "1w":
return `${formatDate(value, 'EEE, MMM d', this.locale)}`
case "1m":
return `${formatDate(value, 'EEE, MMM d', this.locale)}`
case "3m":
return `${formatDate(value, 'MMM d', this.locale)}`
case "6m":
return `${formatDate(value, 'MMM d', this.locale)}`
case "1y":
return `${formatDate(value, 'MMM y', this.locale)}`
case "2y":
return `${formatDate(value, 'MMM y', this.locale)}`
case "3y":
return `${formatDate(value, 'MMM y', this.locale)}`
default:
return `${formatDate(value, 'M/d', this.locale)}\n${formatDate(value, 'H:mm', this.locale)}`
}
}),
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',

35
frontend/src/app/components/mempool-graph/mempool-graph.component.ts
View File

@ -1,7 +1,6 @@
import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core'; import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core';
import { formatDate } from '@angular/common';
import { VbytesPipe } from 'src/app/shared/pipes/bytes-pipe/vbytes.pipe'; import { VbytesPipe } from 'src/app/shared/pipes/bytes-pipe/vbytes.pipe';
import { formatNumber } from "@angular/common"; import { formatDate, formatNumber } from "@angular/common";
import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface'; import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface';
import { StateService } from 'src/app/services/state.service'; import { StateService } from 'src/app/services/state.service';
@ -32,6 +31,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
@Input() left: number | string = 75; @Input() left: number | string = 75;
@Input() template: ('widget' | 'advanced') = 'widget'; @Input() template: ('widget' | 'advanced') = 'widget';
@Input() showZoom = true; @Input() showZoom = true;
@Input() windowPreferenceOverride: string;
isLoading = true; isLoading = true;
mempoolVsizeFeesData: any; mempoolVsizeFeesData: any;
@ -62,7 +62,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
if (!this.data) { if (!this.data) {
return; return;
} }
this.windowPreference = this.storageService.getValue('graphWindowPreference'); this.windowPreference = this.windowPreferenceOverride ? this.windowPreferenceOverride : this.storageService.getValue('graphWindowPreference');
this.mempoolVsizeFeesData = this.handleNewMempoolData(this.data.concat([])); this.mempoolVsizeFeesData = this.handleNewMempoolData(this.data.concat([]));
this.mountFeeChart(); this.mountFeeChart();
} }
@ -186,6 +186,33 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
type: 'line', type: 'line',
}, },
formatter: (params: any) => { formatter: (params: any) => {
// Todo - Refactor
let axisValueLabel: string = "";
switch (this.windowPreference) {
case "2h":
axisValueLabel = `${formatDate(params[0].axisValue, 'h:mm a', this.locale)}`;
break;
case "24h":
axisValueLabel = `${formatDate(params[0].axisValue, 'EEE HH:mm', this.locale)}`
break;
case "1w":
axisValueLabel = `${formatDate(params[0].axisValue, 'MMM d HH:mm', this.locale)}`
break;
case "1m":
case "3m":
case "6m":
axisValueLabel = `${formatDate(params[0].axisValue, 'MMM d HH:00', this.locale)}`
break;
case "1y":
case "2y":
case "3y":
axisValueLabel = `${formatDate(params[0].axisValue, 'MMM d y', this.locale)}`
break;
default:
axisValueLabel = `${formatDate(params[0].axisValue, 'M/d', this.locale)}\n${formatDate(params[0].axisValue, 'H:mm', this.locale)}`
break;
}
const { totalValue, totalValueArray } = this.getTotalValues(params); const { totalValue, totalValueArray } = this.getTotalValues(params);
const itemFormatted = []; const itemFormatted = [];
let totalParcial = 0; let totalParcial = 0;
@ -257,7 +284,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
const titleSum = $localize`Sum`; const titleSum = $localize`Sum`;
return `<div class="fees-wrapper-tooltip-chart ${classActive}"> return `<div class="fees-wrapper-tooltip-chart ${classActive}">
<div class="title"> <div class="title">
${params[0].axisValueLabel} ${axisValueLabel}
<span class="total-value"> <span class="total-value">
${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)} ${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)}
</span> </span>

2
frontend/src/app/dashboard/dashboard.component.html
View File

@ -54,6 +54,7 @@
[limitFee]="150" [limitFee]="150"
[limitFilterFee]="1" [limitFilterFee]="1"
[data]="mempoolStats.value?.mempool" [data]="mempoolStats.value?.mempool"
[windowPreferenceOverride]="'2h'"
></app-mempool-graph> ></app-mempool-graph>
</div> </div>
</ng-container> </ng-container>
@ -73,6 +74,7 @@
<app-incoming-transactions-graph <app-incoming-transactions-graph
[left]="50" [left]="50"
[data]="mempoolStats.value?.weightPerSecond" [data]="mempoolStats.value?.weightPerSecond"
[windowPreferenceOverride]="'2h'"
></app-incoming-transactions-graph> ></app-incoming-transactions-graph>
</div> </div>
</ng-template> </ng-template>