71 lines
2.6 KiB
HTML
71 lines
2.6 KiB
HTML
<section class="content">
|
|
<div class="content-block">
|
|
<div class="block-header">
|
|
<!-- breadcrumb -->
|
|
<app-breadcrumb [title]="'MENUITEMS.DASHBOARD.LIST.INCOME'" [items]="['HOME']" [active_item]="'MENUITEMS.DASHBOARD.LIST.INCOME'"></app-breadcrumb>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
|
|
<div class="card">
|
|
<div class="header">
|
|
<h2>{{'PERIOD' | translate}}</h2>
|
|
</div>
|
|
<div class="body">
|
|
<div class="example-container">
|
|
<app-date-period [from]="dateFrom" [to]="dateTo" (onChange)="onChangePeriod($event)"></app-date-period>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row clearfix">
|
|
<!-- Bar chart with line -->
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
|
|
<div class="card">
|
|
<div class="header">
|
|
<h2>{{'INCOME' | translate}}</h2>
|
|
<button mat-icon-button [matMenuTriggerFor]="menu" class="header-dropdown">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
<mat-menu #menu="matMenu">
|
|
<button mat-menu-item>Action</button>
|
|
<button mat-menu-item>Another action</button>
|
|
<button mat-menu-item>Something else here</button>
|
|
</mat-menu>
|
|
</div>
|
|
<div class="body">
|
|
<div id="chart">
|
|
<apx-chart #chart *ngIf="chartOptions" class="apex-pie-center" (contextmenu)="onRightClick($event)"
|
|
[series]="chartOptions.series!"
|
|
[chart]="chartOptions.chart!"
|
|
[dataLabels]="chartOptions.dataLabels!"
|
|
[plotOptions]="chartOptions.plotOptions!"
|
|
[title]="chartOptions.title!"
|
|
[legend]="chartOptions.legend!">
|
|
</apx-chart>
|
|
</div>
|
|
<div class="table-responsive m-t-15" *ngIf="dashboardModel">
|
|
<table class="table align-items-center">
|
|
<tbody>
|
|
<tr *ngFor="let item of dashboardModel!.details">
|
|
<td><i class="fa fa-circle col-cyan msr-2"></i> {{item.name}}</td>
|
|
<td [ngClass]="{ 'col-green': item.value != 0, 'col-red': item.value == 0}" style="text-align: right;">{{item.valueRaw | number: '1.2'}}</td>
|
|
<td [ngClass]="{ 'col-green': item.value != 0, 'col-red': item.value == 0}" style="text-align: right;">{{item.value | number: '1.2'}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="col-cyan">{{'TOTAL' | translate}}</td>
|
|
<td class="col-cyan" style="text-align: right;"></td>
|
|
<td class="col-cyan" style="text-align: right;">{{total | number: '1.2'}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|