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

Refactor tooltip formatting into common file and switch to native js localization

Browse Source
This commit is contained in:
nymkappa 2021-12-11 17:10:55 +09:00
parent 7e7dbdbaf2
commit 11577842a2
4 changed files with 34 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,8 @@
import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit } from '@angular/core';
import { formatDate } from '@angular/common';
import { EChartsOption } from 'echarts';
import { OnChanges } from '@angular/core';
import { StorageService } from 'src/app/services/storage.service';
import { formatterXAxis } from 'src/app/shared/graphs.utils';
@Component({
selector: 'app-incoming-transactions-graph',
@ -103,33 +103,7 @@ 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 axisValueLabel: string = formatterXAxis(this.locale, this.windowPreference, params[0].axisValue);
const colorSpan = (color: string) => `<span class="indicator" style="background-color: ` + color + `"></span>`;
let itemFormatted = '<div class="title">' + axisValueLabel + '</div>';
params.map((item: any, index: number) => {

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

@ -1,12 +1,12 @@
import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core';
import { VbytesPipe } from 'src/app/shared/pipes/bytes-pipe/vbytes.pipe';
import { formatDate, formatNumber } from "@angular/common";
import { formatNumber } from "@angular/common";
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';
import { EChartsOption } from 'echarts';
import { feeLevels, chartColors } from 'src/app/app.constants';
import { formatterXAxis } from 'src/app/shared/graphs.utils';
@Component({
selector: 'app-mempool-graph',
@ -186,33 +186,7 @@ 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 axisValueLabel: string = formatterXAxis(this.locale, this.windowPreference, params[0].axisValue);
const { totalValue, totalValueArray } = this.getTotalValues(params);
const itemFormatted = [];
let totalParcial = 0;

28
frontend/src/app/shared/graphs.utils.ts Normal file
View File

@ -0,0 +1,28 @@
export const formatterXAxis = (
locale: string,
windowPreference: string,
value: string
) => {
if(value.length === 0){
return null;
}
const date = new Date(value);
switch (windowPreference) {
case '2h':
return date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' });
case '24h':
return date.toLocaleTimeString(locale, { weekday: 'short', hour: 'numeric', minute: 'numeric' });
case '1w':
return date.toLocaleTimeString(locale, { month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' });
case '1m':
case '3m':
case '6m':
return date.toLocaleTimeString(locale, { month: 'short', day: 'numeric', hour: 'numeric' });
case '1y':
case '2y':
case '3y':
return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
}
};

2
frontend/src/styles.scss
View File

@ -555,7 +555,7 @@ html:lang(ru) .card-title {
}
.tx-wrapper-tooltip-chart-advanced {
width: 115px;
width: 140px;
.indicator-container {
.indicator {
margin-right: 5px;