mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 22:58:30 +01:00
Code Issues Projects Releases Wiki Activity

Add click navigation to balance history chart

Browse source
This commit is contained in:
Mononaut 2024-03-21 09:02:17 +00:00
parent 78f03bd6d5
commit 3dd328475e
No known key found for this signature in database
GPG key ID: A3F058E41374C04E
1 changed files with 24 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/app/components/address-graph/address-graph.component.ts
View file

@ -1,10 +1,11 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnChanges, SimpleChanges } from '@angular/core';
import { echarts, EChartsOption } from '../../graphs/echarts'; import { echarts, EChartsOption } from '../../graphs/echarts';
import { of } from 'rxjs'; import { of } from 'rxjs';
import { catchError } from 'rxjs/operators'; import { catchError } from 'rxjs/operators';
import { ChainStats } from '../../interfaces/electrs.interface'; import { ChainStats } from '../../interfaces/electrs.interface';
import { ElectrsApiService } from '../../services/electrs-api.service'; import { ElectrsApiService } from '../../services/electrs-api.service';
import { AmountShortenerPipe } from '../../shared/pipes/amount-shortener.pipe'; import { AmountShortenerPipe } from '../../shared/pipes/amount-shortener.pipe';
import { Router } from '@angular/router';
@Component({ @Component({
selector: 'app-address-graph', selector: 'app-address-graph',
@ -20,13 +21,16 @@ import { AmountShortenerPipe } from '../../shared/pipes/amount-shortener.pipe';
`], `],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class AddressGraphComponent implements OnInit, OnChanges { export class AddressGraphComponent implements OnChanges {
@Input() address: string; @Input() address: string;
@Input() isPubkey: boolean = false; @Input() isPubkey: boolean = false;
@Input() stats: ChainStats; @Input() stats: ChainStats;
@Input() right: number | string = 10; @Input() right: number | string = 10;
@Input() left: number | string = 70; @Input() left: number | string = 70;
data: any[] = [];
hoverData: any[] = [];
chartOptions: EChartsOption = {}; chartOptions: EChartsOption = {};
chartInitOptions = { chartInitOptions = {
renderer: 'svg', renderer: 'svg',
@ -39,14 +43,10 @@ export class AddressGraphComponent implements OnInit, OnChanges {
constructor( constructor(
@Inject(LOCALE_ID) public locale: string, @Inject(LOCALE_ID) public locale: string,
private electrsApiService: ElectrsApiService, private electrsApiService: ElectrsApiService,
private router: Router,
private amountShortenerPipe: AmountShortenerPipe, private amountShortenerPipe: AmountShortenerPipe,
private cd: ChangeDetectorRef, private cd: ChangeDetectorRef,
) { ) {}
}
ngOnInit(): void {
}
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
this.isLoading = true; this.isLoading = true;
@ -69,13 +69,13 @@ export class AddressGraphComponent implements OnInit, OnChanges {
prepareChartOptions(summary): void { prepareChartOptions(summary): void {
let total = (this.stats.funded_txo_sum - this.stats.spent_txo_sum); // + (summary[0]?.value || 0); let total = (this.stats.funded_txo_sum - this.stats.spent_txo_sum); // + (summary[0]?.value || 0);
const data = summary.map(d => { this.data = summary.map(d => {
const balance = total; const balance = total;
total -= d.value; total -= d.value;
return [d.time * 1000, balance, d]; return [d.time * 1000, balance, d];
}).reverse(); }).reverse();
const maxValue = data.reduce((acc, d) => Math.max(acc, Math.abs(d[1])), 0); const maxValue = this.data.reduce((acc, d) => Math.max(acc, Math.abs(d[1])), 0);
this.chartOptions = { this.chartOptions = {
color: [ color: [
@ -163,10 +163,11 @@ export class AddressGraphComponent implements OnInit, OnChanges {
showSymbol: false, showSymbol: false,
symbol: 'circle', symbol: 'circle',
symbolSize: 8, symbolSize: 8,
data: data, data: this.data,
areaStyle: { areaStyle: {
opacity: 0.5, opacity: 0.5,
}, },
triggerLineEvent: true,
type: 'line', type: 'line',
smooth: false, smooth: false,
step: 'end' step: 'end'
@ -175,8 +176,20 @@ export class AddressGraphComponent implements OnInit, OnChanges {
}; };
} }
onChartClick(e) {
if (this.hoverData?.length && this.hoverData[0]?.[2]?.txid) {
this.router.navigate(['/tx/', this.hoverData[0][2].txid]);
}
}
onTooltip(e) {
this.hoverData = (e?.dataByCoordSys?.[0]?.dataByAxis?.[0]?.seriesDataIndices || []).map(indices => this.data[indices.dataIndex]);
}
onChartInit(ec) { onChartInit(ec) {
this.chartInstance = ec; this.chartInstance = ec;
this.chartInstance.on('showTip', this.onTooltip.bind(this));
this.chartInstance.on('click', 'series', this.onChartClick.bind(this));
} }
isMobile() { isMobile() {