Hide xaxis label overlapping - Show current day/month/year below the chart for self better self containing overview
This commit is contained in:
parent
aee319ed51
commit
cf0af20947
@ -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: {
|
||||||
|
@ -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],
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
};
|
};
|
Loading…
x
Reference in New Issue
Block a user