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.
49 lines
3.4 KiB
HTML
49 lines
3.4 KiB
HTML
<div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="padding-gap-x-large">
|
|
<div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="padding-gap-x">
|
|
<div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100">
|
|
<rtl-horizontal-scroller (stepChanged)="onSelectionChange($event)"></rtl-horizontal-scroller>
|
|
<div class="p-2" *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED">
|
|
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
|
<span>Getting transactions data...</span>
|
|
</div>
|
|
<div class="p-2 error-border my-2" *ngIf="apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</div>
|
|
<div *ngIf="transactionsNonZeroReportData.length > 0 && apiCallStatus.status === apiCallStatusEnum.COMPLETED" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" class="font-size-120 font-bold-700 mt-1" [@fadeIn]="transactionsReportSummary">
|
|
<div *ngIf="transactionsReportSummary.paymentsSelectedPeriod > 0" fxLayout="row" fxLayoutAlign="start stretch" fxFlex="100">
|
|
Paid {{(transactionsReportSummary.amountPaidSelectedPeriod / 1000 || 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 / 1000 || 0) | number:'1.0-2'}} Sats/{{transactionsReportSummary.invoicesSelectedPeriod | number}} Invoices
|
|
</div>
|
|
</div>
|
|
<div *ngIf="transactionsNonZeroReportData.length <= 0 && apiCallStatus.status === apiCallStatusEnum.COMPLETED" 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" *ngIf="transactionsNonZeroReportData.length > 0 && apiCallStatus.status === apiCallStatusEnum.COMPLETED">
|
|
<ngx-charts-bar-vertical-2d
|
|
*ngIf="transactionsReportData.length > 0 && 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 && apiCallStatus.status === apiCallStatusEnum.COMPLETED" [displayedColumns]="displayedColumns" [tableSetting]="tableSetting" [dataList]="transactionsNonZeroReportData" [dataRange]="reportPeriod" [filterValue]="transactionFilterValue"></rtl-transactions-report-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|