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 1e5cef4a62
commit 64f3a597a2
9 changed files with 264 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html Normal file
View File

@@ -0,0 +1,33 @@
<div
#tooltip
*ngIf="line"
class="bowtie-graph-tooltip"
[style.visibility]="line ? 'visible' : 'hidden'"
[style.left]="tooltipPosition.x + 'px'"
[style.top]="tooltipPosition.y + 'px'"
>
<ng-container *ngIf="!line.rest; else restMsg">
<p>
<ng-container [ngSwitch]="line.type">
<span *ngSwitchCase="'input'" i18n="transaction.input">Input</span>
<span *ngSwitchCase="'output'" i18n="transaction.output">Output</span>
<span *ngSwitchCase="'fee'" i18n="transaction.fee">Fee</span>
</ng-container>
<span *ngIf="line.type !== 'fee'"> #{{ line.index }}</span>
</p>
<p *ngIf="line.value != null"><app-amount [satoshis]="line.value"></app-amount></p>
</ng-container>
<ng-template #restMsg>
<span>{{ line.rest }} </span>
<ng-container [ngSwitch]="line.type">
<span *ngSwitchCase="'input'" i18n="transaction.other-inputs">other inputs</span>
<span *ngSwitchCase="'output'" i18n="transaction.other-outputs">other outputs</span>
</ng-container>
</ng-template>
<p *ngIf="line.type !== 'fee' && line.address" class="address">
<span class="first">{{ line.address.slice(0, -4) }}</span>
<span class="last-four">{{ line.address.slice(-4) }}</span>
</p>
</div>