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

Add interactivity to tx sankey diagram

Browse Source
This commit is contained in:
Mononaut
2022-09-17 01:20:08 +00:00
parent 8aa042f61a
commit 9d66f83996
9 changed files with 264 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/transaction/transaction.component.html
View File

@@ -196,7 +196,7 @@
<div class="box">
<div class="graph-container" #graphContainer>
<tx-bowtie-graph [tx]="tx" [width]="graphWidth" [height]="graphExpanded ? (maxInOut * 15) : 360" [maxStrands]="graphExpanded ? maxInOut : 24" [network]="network"></tx-bowtie-graph>
<tx-bowtie-graph [tx]="tx" [width]="graphWidth" [height]="graphExpanded ? (maxInOut * 15) : graphHeight" [maxStrands]="graphExpanded ? maxInOut : 24" [network]="network" [tooltip]="true"></tx-bowtie-graph>
</div>
<div class="toggle-wrapper" *ngIf="maxInOut > 24">
<button class="btn btn-sm btn-primary graph-toggle" (click)="expandGraph();" *ngIf="!graphExpanded; else collapseBtn"><span i18n="show-more">Show more</span></button>

6
frontend/src/app/components/transaction/transaction.component.ts
View File

@@ -49,7 +49,9 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
outputIndex: number;
graphExpanded: boolean = false;
graphWidth: number = 1000;
graphHeight: number = 360;
maxInOut: number = 0;
tooltipPosition: { x: number, y: number };
@ViewChild('graphContainer')
graphContainer: ElementRef;
@@ -296,7 +298,8 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
}
setupGraph() {
this.maxInOut = Math.min(250, Math.max(this.tx?.vin?.length || 1, this.tx?.vout?.length || 1));
this.maxInOut = Math.min(250, Math.max(this.tx?.vin?.length || 1, this.tx?.vout?.length + 1 || 1));
this.graphHeight = Math.min(360, this.maxInOut * 80);
}
expandGraph() {
@@ -309,7 +312,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
@HostListener('window:resize', ['$event'])
setGraphSize(): void {
console.log('resize', this.graphContainer);
if (this.graphContainer) {
this.graphWidth = this.graphContainer.nativeElement.clientWidth - 24;
}