mempool/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
2022-07-10 16:22:53 +02:00

286 lines
8.1 KiB
TypeScript

import { Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
import { EChartsOption, graphic } from 'echarts';
import { Observable } from 'rxjs';
import { startWith, switchMap, tap } from 'rxjs/operators';
import { SeoService } from 'src/app/services/seo.service';
import { formatNumber } from '@angular/common';
import { FormBuilder, FormGroup } from '@angular/forms';
import { StorageService } from 'src/app/services/storage.service';
import { MiningService } from 'src/app/services/mining.service';
import { download } from 'src/app/shared/graphs.utils';
import { LightningApiService } from '../lightning-api.service';
@Component({
selector: 'app-lightning-statistics-chart',
templateUrl: './lightning-statistics-chart.component.html',
styleUrls: ['./lightning-statistics-chart.component.scss'],
styles: [`
.loadingGraphs {
position: absolute;
top: 50%;
left: calc(50% - 15px);
z-index: 100;
}
`],
})
export class LightningStatisticsChartComponent implements OnInit {
@Input() right: number | string = 45;
@Input() left: number | string = 55;
@Input() widget = false;
miningWindowPreference: string;
radioGroupForm: FormGroup;
chartOptions: EChartsOption = {};
chartInitOptions = {
renderer: 'svg',
};
@HostBinding('attr.dir') dir = 'ltr';
blockSizesWeightsObservable$: Observable<any>;
isLoading = true;
formatNumber = formatNumber;
timespan = '';
chartInstance: any = undefined;
constructor(
@Inject(LOCALE_ID) public locale: string,
private seoService: SeoService,
private lightningApiService: LightningApiService,
private formBuilder: FormBuilder,
private storageService: StorageService,
private miningService: MiningService,
) {
}
ngOnInit(): void {
let firstRun = true;
this.miningWindowPreference = this.miningService.getDefaultTimespan('24h');
this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
this.radioGroupForm.get('dateSpan').valueChanges
.pipe(
startWith(this.miningWindowPreference),
switchMap((timespan) => {
this.timespan = timespan;
if (!firstRun) {
this.storageService.setValue('miningWindowPreference', timespan);
}
firstRun = false;
this.miningWindowPreference = timespan;
this.isLoading = true;
return this.lightningApiService.listStatistics$()
.pipe(
tap((data) => {
this.prepareChartOptions({
channel_count: data.map(val => [val.added * 1000, val.channel_count]),
capacity: data.map(val => [val.added * 1000, val.total_capacity]),
});
this.isLoading = false;
}),
);
}),
).subscribe(() => {
});
}
prepareChartOptions(data) {
let title: object;
if (data.channel_count.length === 0) {
title = {
textStyle: {
color: 'grey',
fontSize: 15
},
text: `Indexing in progess`,
left: 'center',
top: 'center'
};
}
this.chartOptions = {
title: title,
animation: false,
color: [
'#FDD835',
'#D81B60',
],
grid: {
top: 40,
bottom: this.widget ? 30 : 70,
right: this.right,
left: this.left,
},
tooltip: {
show: !this.isMobile(),
trigger: 'axis',
axisPointer: {
type: 'line'
},
backgroundColor: 'rgba(17, 19, 31, 1)',
borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: {
color: '#b1b1b1',
align: 'left',
},
borderColor: '#000',
formatter: (ticks) => {
let sizeString = '';
let weightString = '';
for (const tick of ticks) {
if (tick.seriesIndex === 0) { // Channels
sizeString = `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}`;
} else if (tick.seriesIndex === 1) { // Capacity
weightString = `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1] / 100000000, this.locale, '1.0-0')} BTC`;
}
}
const date = new Date(ticks[0].data[0]).toLocaleDateString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
let tooltip = `<b style="color: white; margin-left: 18px">${date}</b><br>
<span>${sizeString}</span><br>
<span>${weightString}</span>`;
return tooltip;
}
},
xAxis: data.channel_count.length === 0 ? undefined : {
type: 'time',
splitNumber: (this.isMobile() || this.widget) ? 5 : 10,
axisLabel: {
hideOverlap: true,
}
},
legend: data.channel_count.length === 0 ? undefined : {
padding: 10,
data: [
{
name: 'Channels',
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
},
icon: 'roundRect',
},
{
name: 'Capacity (BTC)',
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
},
icon: 'roundRect',
},
],
selected: JSON.parse(this.storageService.getValue('sizes_ln_legend')) ?? {
'Channels': true,
'Capacity (BTC)': true,
}
},
yAxis: data.channel_count.length === 0 ? undefined : [
{
min: 0,
type: 'value',
axisLabel: {
color: 'rgb(110, 112, 121)',
formatter: (val) => {
return `${formatNumber(Math.round(val), this.locale, '1.0-0')}`;
}
},
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
opacity: 0.25,
}
},
},
{
min: 0,
type: 'value',
position: 'right',
axisLabel: {
color: 'rgb(110, 112, 121)',
formatter: (val) => {
return `${formatNumber(Math.round(val / 100000000), this.locale, '1.0-0')}`;
}
},
splitLine: {
show: false,
}
}
],
series: data.channel_count.length === 0 ? [] : [
{
zlevel: 1,
name: 'Channels',
showSymbol: false,
symbol: 'none',
data: data.channel_count,
type: 'line',
lineStyle: {
width: 2,
},
markLine: {
silent: true,
symbol: 'none',
lineStyle: {
type: 'solid',
color: '#ffffff66',
opacity: 1,
width: 1,
},
}
},
{
zlevel: 0,
yAxisIndex: 1,
name: 'Capacity (BTC)',
showSymbol: false,
symbol: 'none',
stack: 'Total',
data: data.capacity,
areaStyle: {},
type: 'line',
}
],
};
}
onChartInit(ec) {
if (this.chartInstance !== undefined) {
return;
}
this.chartInstance = ec;
this.chartInstance.on('legendselectchanged', (e) => {
this.storageService.setValue('sizes_ln_legend', JSON.stringify(e.selected));
});
}
isMobile() {
return (window.innerWidth <= 767.98);
}
onSaveChart() {
// @ts-ignore
const prevBottom = this.chartOptions.grid.bottom;
const now = new Date();
// @ts-ignore
this.chartOptions.grid.bottom = 40;
this.chartOptions.backgroundColor = '#11131f';
this.chartInstance.setOption(this.chartOptions);
download(this.chartInstance.getDataURL({
pixelRatio: 2,
}), `block-sizes-weights-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`);
// @ts-ignore
this.chartOptions.grid.bottom = prevBottom;
this.chartOptions.backgroundColor = 'none';
this.chartInstance.setOption(this.chartOptions);
}
}