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

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

View File

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

View File

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

View File

@ -25,4 +25,26 @@ export const formatterXAxis = (
case '3y': case '3y':
return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' }); 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;
}
}; };