You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
RTL/src/app/eclair/reports/routing/routing-report.component.html

44 lines
2.6 KiB
HTML

<div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="padding-gap-x-large">
<rtl-horizontal-scroller (stepChanged)="onSelectionChange($event)" />
<div fxLayout="column" fxLayoutAlign="center center" class="padding-gap-x">
<mat-radio-group class="my-1" color="primary" name="selReportBy" fxFlex="100" fxLayoutAlign="start center" [(ngModel)]="selReportBy" (change)="onSelReportByChange()">
<span class="mr-2">Report By: </span>
<mat-radio-button class="mr-2" tabindex="1" value="{{reportBy.FEES}}">Fees</mat-radio-button>
<mat-radio-button tabindex="2" value="{{reportBy.EVENTS}}">Events</mat-radio-button>
</mat-radio-group>
</div>
<div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="padding-gap-x">
<div *ngIf="routingReportData.length > 0 && filteredEventsBySelectedPeriod.length > 0" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" class="font-size-120 font-bold-700 mt-1"
[@fadeIn]="totalFeeSat">{{(totalFeeSat || 0) | number:'1.0-2'}} Sats/{{(filteredEventsBySelectedPeriod.length || 0) | number}} Events</div>
<div *ngIf="routingReportData.length <= 0 || filteredEventsBySelectedPeriod.length <= 0" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" class="font-size-120 mt-1">No routing report for the selected period</div>
<div class="mt-1">
<ngx-charts-bar-vertical
*ngIf="routingReportData.length > 0 && filteredEventsBySelectedPeriod.length > 0"
class="one-color"
[view]="view"
[results]="routingReportData"
[gradient]="false"
[xAxis]="true"
[yAxis]="true"
[showXAxisLabel]="true"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[showGridLines]="false"
[showDataLabel]="false"
(select)="onChartBarSelected($event)"
(mouseup)="onChartMouseUp($event)">
<ng-template #tooltipTemplate let-model="model">
<span>
<span class="tooltip-label">Events: {{((selReportBy === reportBy.EVENTS ? model.value : model.extra.totalEvents) || 0) | number}}</span>
<span class="tooltip-label">Fee: {{((selReportBy === reportBy.EVENTS ? model.extra.totalFees : model.value) || 0) | number:'1.0-2'}}</span>
</span>
</ng-template>
</ngx-charts-bar-vertical>
</div>
<div class="mt-1">
<rtl-ecl-forwarding-history *ngIf="filteredEventsBySelectedPeriod.length > 0" [pageId]="'reports'" [tableId]="'routing'"[eventsData]="filteredEventsBySelectedPeriod" [selFilter]="eventFilterValue" />
</div>
</div>
</div>