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

Add sankey diagram to main tx page

Browse Source
This commit is contained in:
Mononaut
2022-09-16 20:50:12 +00:00
parent 5e1ca44a7f
commit 1e5cef4a62
3 changed files with 99 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -190,6 +190,24 @@
<br>
<div class="title">
<h2 i18n="transaction.diagram|Transaction diagram">Diagram</h2>
</div>
<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>
</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>
<ng-template #collapseBtn>
<button class="btn btn-sm btn-primary graph-toggle" (click)="collapseGraph();"><span i18n="show-less">Show less</span></button>
</ng-template>
</div>
</div>
<br>
<div class="title float-left">
<h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
</div>
@@ -283,6 +301,36 @@
<br>
<div class="title">
<h2 i18n="transaction.diagram|Transaction diagram">Diagram</h2>
</div>
<div class="box">
<div class="graph-container" #graphContainer style="visibility: hidden;"></div>
<div class="row">
<div class="col-sm">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<br>
<div class="title">
<h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
</div>