<app-income-counter></app-income-counter> <!-- Row --> <div class="row"> <div class="col-lg-8 col-md-7"> <div class="card"> <div class="card-body"> <div class="d-flex flex-wrap"> <div> <h4 class="card-title">Yearly Earning</h4> </div> <div class="ml-auto"> <ul class="list-inline"> <li> <h6 class="text-muted text-success"> <i class="fa fa-circle font-10 m-r-10 "></i>iMac</h6> </li> <li> <h6 class="text-muted text-info"> <i class="fa fa-circle font-10 m-r-10"></i>iPhone</h6> </li> </ul> </div> </div> <canvas baseChart height="130" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions" [colors]="lineChartColors" [legend]="lineChartLegend" [chartType]="lineChartType"> </canvas> </div> </div> <div class="card card-default"> <div class="card-body"> <h4 class="card-title">Filterable Table</h4> <h6 class="card-subtitle">Smart data table library with sorting, filtering, pagination & add/edit/delete functions.</h6> <div class="table table-responsive"> <ngx-datatable #mydatatable class="material" [headerHeight]="50" [limit]="5" [columnMode]="'force'" [footerHeight]="50" [rowHeight]="'auto'" [rows]="rows"> <ngx-datatable-column name="Name"> <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row"> <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true" *ngIf="!editing[rowIndex + '-name']"> <div class="text-truncate">{{value}}</div> </span> <input class="form-control form-control-sm" autofocus (blur)="updateValue($event, 'name', rowIndex)" *ngIf="editing[rowIndex+ '-name']" type="text" [value]="value" /> </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Status"> <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" let-value="value"> <span title="Double click to edit" class="bg-light p-1 rounded font-12" (dblclick)="editing[rowIndex + '-status'] = true" *ngIf="!editing[rowIndex + '-status']"> {{value}} </span> <select class="custom-select custom-select-sm" *ngIf="editing[rowIndex + '-status']" (change)="updateValue($event, 'status', rowIndex)" [value]="value"> <option value="paid">Paid</option> <option value="pending">Pending</option> <option value="failed">Failed</option> </select> </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Quantity"> <ng-template ngx-datatable-cell-template let-value="value"> {{value}} </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Company"> <ng-template ngx-datatable-cell-template let-value="value"> <div class="text-truncate">{{value}}</div> </ng-template> </ngx-datatable-column> </ngx-datatable> </div> </div> </div> </div> <div class="col-lg-4 col-md-5"> <!-- Column --> <div class="card card-default"> <div class="card-header"> <h4 class="card-title m-b-0">Order Stats</h4> </div> <div class="card-body collapse show"> <div style="height: 220px"> <x-chartist class="" [data]="donuteChart1.data" [type]="donuteChart1.type" [options]="donuteChart1.options" [responsiveOptions]="donuteChart1.responsiveOptions" [events]="donuteChart1.events"> </x-chartist> </div> </div> <ul class="list-inline m-t-20 text-center"> <li> <h6 class="text-muted"> <i class="fa fa-circle text-info"></i> Order</h6> <h4 class="m-b-0">8500</h4> </li> <li> <h6 class="text-muted"> <i class="fa fa-circle text-danger"></i> Pending</h6> <h4 class="m-b-0">3630</h4> </li> <li> <h6 class="text-muted"> <i class="fa fa-circle text-success"></i> Delivered</h6> <h4 class="m-b-0">4870</h4> </li> </ul> </div> <!-- Column --> <div class="card card-default"> <div class="card-header"> <h4 class="card-title m-b-0">Offer for you</h4> </div> <div class="card-body collapse show bg-info"> <ngb-carousel class="no-control-indicator"> <ng-template ngbSlide> <div class=""> <i class="fa fa-shopping-cart fa-2x text-white"></i> <p class="text-white">25th Jan</p> <h3 class="text-white font-light">Now Get <span class="font-bold">50% Off</span> <br> on buy</h3> <div class="text-white m-t-20"> <i>- Ecommerce site</i> </div> </div> </ng-template> <ng-template ngbSlide> <div class=""> <i class="fa fa-shopping-cart fa-2x text-white"></i> <p class="text-white">25th Jan</p> <h3 class="text-white font-light">Now Get <span class="font-bold">60% Off</span> <br> on buy</h3> <div class="text-white m-t-20"> <i>- Ecommerce site</i> </div> </div> </ng-template> <ng-template ngbSlide> <div class=""> <i class="fa fa-shopping-cart fa-2x text-white"></i> <p class="text-white">25th Jan</p> <h3 class="text-white font-light">Now Get <span class="font-bold">70% Off</span> <br> on buy</h3> <div class="text-white m-t-20"> <i>- Ecommerce site</i> </div> </div> </ng-template> </ngb-carousel> </div> </div> <!-- Column --> <div class="card card-default"> <div class="card-header"> <h4 class="card-title m-b-0">Latest Products</h4> </div> <div class="card-body p-0 collapse show text-center"> <ngb-carousel class="no-control-indicator"> <ng-template ngbSlide> <div> <img src="assets/images/gallery/chair.png" alt="user"> <h4 class="m-b-30">Brand New Product</h4> </div> </ng-template> <ng-template ngbSlide> <div> <img src="assets/images/gallery/chair2.png" alt="user"> <h4 class="m-b-30">Brand New Product</h4> </div> </ng-template> <ng-template ngbSlide> <div> <img src="assets/images/gallery/chair3.png" alt="user"> <h4 class="m-b-30">Brand New Product</h4> </div> </ng-template> <ng-template ngbSlide> <div> <img src="assets/images/gallery/chair4.png" alt="user"> <h4 class="m-b-30">Brand New Product</h4> </div> </ng-template> </ngb-carousel> </div> </div> </div> </div>