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/transactions/transactions-report.compone...

42 lines
2.5 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="start stretch" fxFlex="100" class="padding-gap-x">
<div *ngIf="transactionsNonZeroReportData.length > 0" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" class="font-size-120 font-bold-700 mt-1" [@fadeIn]="transactionsReportSummary">
<div *ngIf="transactionsReportSummary.paymentsSelectedPeriod" fxLayout="row" fxLayoutAlign="start stretch" fxFlex="100">
Paid {{(transactionsReportSummary.amountPaidSelectedPeriod || 0) | number:'1.0-2'}} Sats/{{transactionsReportSummary.paymentsSelectedPeriod | number}} Payments
</div>
<div *ngIf="transactionsReportSummary.invoicesSelectedPeriod" fxLayout="row" fxLayoutAlign="start stretch" fxFlex="100">
Received {{(transactionsReportSummary.amountReceivedSelectedPeriod || 0) | number:'1.0-2'}} Sats/{{transactionsReportSummary.invoicesSelectedPeriod | number}} Invoices
</div>
</div>
<div *ngIf="transactionsNonZeroReportData.length <= 0" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" class="font-size-120 mt-1">No transactions report for the selected period</div>
<div class="mt-1">
<ngx-charts-bar-vertical-2d
*ngIf="transactionsNonZeroReportData.length > 0"
class="two-color"
[view]="view"
[results]="transactionsReportData"
[noBarWhenZero]="false"
[gradient]="false"
[xAxis]="true"
[yAxis]="true"
[showXAxisLabel]="true"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[showGridLines]="false"
[showDataLabel]="false"
[groupPadding]="(reportPeriod === scrollRanges[0]) ? 2 : 8"
(select)="onChartBarSelected($event)"
(mouseup)="onChartMouseUp($event)">
<ng-template #tooltipTemplate let-model="model">
<span class="tooltip-label">{{model.name}}: {{(model.value || 0) | number:'1.0-2'}}/# {{model.name === 'Paid' ? 'Payments' : 'Invoices'}}: {{(model.extra?.total || 0) | number}}</span>
</ng-template>
</ngx-charts-bar-vertical-2d>
</div>
<div class="mt-1">
<rtl-transactions-report-table *ngIf="transactionsNonZeroReportData.length > 0" [displayedColumns]="displayedColumns" [tableSetting]="tableSetting" [dataList]="transactionsNonZeroReportData" [dataRange]="reportPeriod" [selFilter]="transactionFilterValue" />
</div>
</div>
</div>