mirror of
https://github.com/mempool/mempool.git
synced 2024-11-20 10:21:52 +01:00
Apply proper datetime format according to choosen time scale and force 2h windowPreference in the dashboard
This commit is contained in:
nymkappa
parent
2b0d543ce7
commit
9e8a741d97
@ -25,6 +25,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
|
||||
@Input() top: number | string = '20';
|
||||
@Input() left: number | string = '0';
|
||||
@Input() template: ('widget' | 'advanced') = 'widget';
|
||||
@Input() windowPreferenceOverride: string;
|
||||
|
||||
isLoading = true;
|
||||
mempoolStatsChartOption: EChartsOption = {};
|
||||
@ -46,7 +47,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
|
||||
if (!this.data) {
|
||||
return;
|
||||
}
|
||||
this.windowPreference = this.storageService.getValue('graphWindowPreference');
|
||||
this.windowPreference = this.windowPreferenceOverride ? this.windowPreferenceOverride : this.storageService.getValue('graphWindowPreference');
|
||||
this.mountChart();
|
||||
}
|
||||
|
||||
@ -102,14 +103,41 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
|
||||
type: 'line',
|
||||
},
|
||||
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>`;
|
||||
let itemFormatted = '<div class="title">' + params[0].axisValue + '</div>';
|
||||
let itemFormatted = '<div class="title">' + axisValueLabel + '</div>';
|
||||
params.map((item: any, index: number) => {
|
||||
if (index < 26) {
|
||||
itemFormatted += `<div class="item">
|
||||
<div class="indicator-container">${colorSpan(item.color)}</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>`;
|
||||
}
|
||||
});
|
||||
@ -117,36 +145,12 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
align: 'center',
|
||||
fontSize: 11,
|
||||
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: {
|
||||
type: 'value',
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
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 { formatNumber } from "@angular/common";
|
||||
import { formatDate, formatNumber } from "@angular/common";
|
||||
|
||||
import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface';
|
||||
import { StateService } from 'src/app/services/state.service';
|
||||
@ -32,6 +31,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
|
||||
@Input() left: number | string = 75;
|
||||
@Input() template: ('widget' | 'advanced') = 'widget';
|
||||
@Input() showZoom = true;
|
||||
@Input() windowPreferenceOverride: string;
|
||||
|
||||
isLoading = true;
|
||||
mempoolVsizeFeesData: any;
|
||||
@ -62,7 +62,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
|
||||
if (!this.data) {
|
||||
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.mountFeeChart();
|
||||
}
|
||||
@ -186,6 +186,33 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
|
||||
type: 'line',
|
||||
},
|
||||
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 itemFormatted = [];
|
||||
let totalParcial = 0;
|
||||
@ -257,7 +284,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
|
||||
const titleSum = $localize`Sum`;
|
||||
return `<div class="fees-wrapper-tooltip-chart ${classActive}">
|
||||
<div class="title">
|
||||
${params[0].axisValueLabel}
|
||||
${axisValueLabel}
|
||||
<span class="total-value">
|
||||
${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)}
|
||||
</span>
|
||||
|
||||
@ -54,6 +54,7 @@
|
||||
[limitFee]="150"
|
||||
[limitFilterFee]="1"
|
||||
[data]="mempoolStats.value?.mempool"
|
||||
[windowPreferenceOverride]="'2h'"
|
||||
></app-mempool-graph>
|
||||
</div>
|
||||
</ng-container>
|
||||
@ -73,6 +74,7 @@
|
||||
<app-incoming-transactions-graph
|
||||
[left]="50"
|
||||
[data]="mempoolStats.value?.weightPerSecond"
|
||||
[windowPreferenceOverride]="'2h'"
|
||||
></app-incoming-transactions-graph>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user