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

Hide xaxis label overlapping - Show current day/month/year below the chart for self better self containing overview

Browse Source
This commit is contained in:
nymkappa 2021-12-13 14:27:05 +09:00
parent aee319ed51
commit cf0af20947
3 changed files with 53 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit }
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';
import { formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
@Component({
selector: 'app-incoming-transactions-graph',
@ -78,6 +78,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
type: 'slider',
brushSelect: false,
realtime: true,
bottom: 0,
selectedDataBackground: {
lineStyle: {
color: '#fff',
@ -86,7 +87,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
areaStyle: {
opacity: 0,
}
}
},
}],
tooltip: {
trigger: 'axis',
@ -118,14 +119,24 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
return `<div class="tx-wrapper-tooltip-chart ${(this.template === 'advanced') ? 'tx-wrapper-tooltip-chart-advanced' : ''}">${itemFormatted}</div>`;
}
},
xAxis: {
xAxis: [
{
name: formatterXAxisLabel(this.locale, this.windowPreference),
nameLocation: 'middle',
nameTextStyle: {
padding: [20, 0, 0, 0],
},
type: 'time',
axisLabel: {
margin: 20,
align: 'center',
fontSize: 11,
lineHeight: 12
},
lineHeight: 12,
hideOverlap: true,
padding: [0, 5],
},
}
],
yAxis: {
type: 'value',
axisLabel: {

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

@ -6,7 +6,7 @@ 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';
import { formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
@Component({
selector: 'app-mempool-graph',
@ -113,7 +113,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
mountFeeChart() {
this.orderLevels();
const { labels, series } = this.mempoolVsizeFeesData;
const { series } = this.mempoolVsizeFeesData;
const seriesGraph = [];
const newColors = [];
@ -313,13 +313,21 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
},
xAxis: [
{
name: formatterXAxisLabel(this.locale, this.windowPreference),
nameLocation: 'middle',
nameTextStyle: {
padding: [20, 0, 0, 0],
},
type: 'time',
boundaryGap: false,
axisLine: { onZero: true },
axisLabel: {
margin: 20,
align: 'center',
fontSize: 11,
lineHeight: 12,
hideOverlap: true,
padding: [0, 5],
},
}
],

22
frontend/src/app/shared/graphs.utils.ts
View File

@ -26,3 +26,25 @@ export const formatterXAxis = (
return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
}
};
export const formatterXAxisLabel = (
locale: string,
windowPreference: string,
) => {
const date = new Date();
switch (windowPreference) {
case '2h':
case '24h':
return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
case '1w':
return date.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
case '1m':
case '3m':
case '6m':
return date.toLocaleDateString(locale, { year: 'numeric' });
case '1y':
case '2y':
case '3y':
return null;
}
};