first commit
This commit is contained in:
13
src/app/content/dashboard/dashboard.module.spec.ts
Normal file
13
src/app/content/dashboard/dashboard.module.spec.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { DashboardModule } from './dashboard.module';
|
||||
|
||||
describe('DashboardModule', () => {
|
||||
let dashboardModule: DashboardModule;
|
||||
|
||||
beforeEach(() => {
|
||||
dashboardModule = new DashboardModule();
|
||||
});
|
||||
|
||||
it('should create an instance', () => {
|
||||
expect(dashboardModule).toBeTruthy();
|
||||
});
|
||||
});
|
||||
51
src/app/content/dashboard/dashboard.module.ts
Normal file
51
src/app/content/dashboard/dashboard.module.ts
Normal file
@@ -0,0 +1,51 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { EcommerceComponent } from './ecommerce/ecommerce.component';
|
||||
import { ChartistModule } from 'ng-chartist';
|
||||
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { CardModule } from '../partials/general/card/card.module';
|
||||
import { NgChartsModule } from 'ng2-charts';
|
||||
import { SalesComponent } from './sales/sales.component';
|
||||
import { BlockUIModule } from 'ng-block-ui';
|
||||
import { BlockTemplateComponent } from '../../_layout/blockui/block-template.component';
|
||||
import { MatchHeightModule } from '../partials/general/match-height/match-height.module';
|
||||
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
||||
import { HospitalComponent } from './hospital/hospital.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
ChartistModule,
|
||||
FormsModule,
|
||||
NgChartsModule,
|
||||
CardModule,
|
||||
MatchHeightModule,
|
||||
NgxDatatableModule,
|
||||
PerfectScrollbarModule,
|
||||
NgbModule,
|
||||
BlockUIModule.forRoot({
|
||||
template: BlockTemplateComponent
|
||||
}),
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'ecommerce',
|
||||
component: EcommerceComponent
|
||||
},
|
||||
{
|
||||
path: 'sales',
|
||||
component: SalesComponent
|
||||
},
|
||||
{
|
||||
path: 'hospital',
|
||||
component: HospitalComponent
|
||||
}
|
||||
])
|
||||
],
|
||||
declarations: [EcommerceComponent, SalesComponent, HospitalComponent],
|
||||
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class DashboardModule { }
|
||||
414
src/app/content/dashboard/ecommerce/ecommerce.component.css
Normal file
414
src/app/content/dashboard/ecommerce/ecommerce.component.css
Normal file
@@ -0,0 +1,414 @@
|
||||
.avatar-xs {
|
||||
width: 24px !important;
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
|
||||
.btn_set_padding {
|
||||
padding: 0% !important;
|
||||
}
|
||||
|
||||
.chart_body_padding {
|
||||
padding: 2rem !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .scoreLineShadow {
|
||||
-webkit-filter: drop-shadow(0px 20px 11px rgba(0, 0, 0, 0.5)) !important;
|
||||
filter: drop-shadow(0px 20px 11px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
|
||||
:host ::ng-deep .ecommercesaleslineArea .ct-series-a .ct-point-circle {
|
||||
stroke-width: 5px;
|
||||
stroke: #ffffff;
|
||||
fill: #1e9ff2;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ecommercesaleslineArea .ct-series-b .ct-point-circle {
|
||||
stroke-width: 5px;
|
||||
stroke: #ffffff;
|
||||
fill: #58e0cd;
|
||||
;
|
||||
}
|
||||
|
||||
:host ::ng-deep .media {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
|
||||
:host ::ng-deep .position-relative {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ct-series-b .ct-bar,
|
||||
.ct-series-b .ct-slice-donut {
|
||||
stroke: #beb6b6;
|
||||
}
|
||||
|
||||
:host ::ng-deep .progress:last-child {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .areaChartLegend .ct-series-a .ct-line {
|
||||
stroke: url(#gradient2);
|
||||
stroke-width: 5px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
:host ::ng-deep .areaChartLegend .ct-series-a .ct-area {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .areaChartLegend .ct-series-a .ct-line {
|
||||
stroke: #3da2ea;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ecommercesaleslineArea .ct-series-a .ct-area {
|
||||
fill: #4105f9f5;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ecommercesaleslineArea .ct-series-b .ct-area {
|
||||
fill: #03f7b2fa;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ecommercesaleslineArea .ct-series-b .ct-line {
|
||||
stroke: #58e0cd;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ecommercesaleslineArea .ct-series-a .ct-line {
|
||||
stroke: #1e9ff2;
|
||||
}
|
||||
|
||||
:host ::ng-deep .barchart .ct-series-a .ct-bar {
|
||||
stroke: #ff394f !important;
|
||||
stroke-width: 7px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .pull-up {
|
||||
-webkit-transition: all 0.25s ease;
|
||||
-o-transition: all 0.25s ease;
|
||||
-moz-transition: all 0.25s ease;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
:host ::ng-deep .chart-info {
|
||||
margin-top: 73px !important;
|
||||
}
|
||||
|
||||
.mb-3,
|
||||
.my-3 {
|
||||
margin-bottom: -4rem !important;
|
||||
}
|
||||
|
||||
.mb-2,
|
||||
.my-2 {
|
||||
margin-bottom: -4.5rem !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut .ct-done .ct-slice-donut {
|
||||
stroke: #28d094;
|
||||
stroke-width: 24px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut .ct-progress .ct-slice-donut {
|
||||
stroke: #ff4558;
|
||||
stroke-width: 16px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut .ct-outstanding .ct-slice-donut {
|
||||
stroke: #ff7d4d;
|
||||
stroke-width: 8px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut .ct-started .ct-slice-donut {
|
||||
stroke: #666ECC;
|
||||
stroke-width: 32px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut .ct-label {
|
||||
text-anchor: middle;
|
||||
font-size: 20px;
|
||||
fill: #868e96;
|
||||
}
|
||||
|
||||
:host ::ng-deep .Barchart {
|
||||
display: block;
|
||||
margin-left: -100px;
|
||||
margin-bottom: -60px;
|
||||
margin-top: -45px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .Barchart .ct-label {
|
||||
font-size: 0.75rem;
|
||||
line-height: 15;
|
||||
}
|
||||
|
||||
.p {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: -1.5rem;
|
||||
font-size: large;
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .text-center .p {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: -1.2rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .height-300 {
|
||||
height: 250px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .gradient-blackberry {
|
||||
background-image: linear-gradient(45deg, #b9e2fa, #b9e2fa) !important;
|
||||
margin-left: 48px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .gradient-mint {
|
||||
background-image: linear-gradient(45deg, #ff9ba6, #ff9ba6);
|
||||
margin-left: 48px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .gradient-info {
|
||||
background-image: linear-gradient(45deg, #6ef9d6, #6ef9d6);
|
||||
margin-left: 48px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .extraPadding7 {
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .avatar-md {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .square {
|
||||
border-radius: 0% !important;
|
||||
height: auto;
|
||||
border: 2px solid #FFF !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ps--active-x>.ps__rail-x {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .border-top-0 {
|
||||
padding: 1.25rem 2rem !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-danger {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .progress:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
|
||||
:host ::ng-deep .btn.active {
|
||||
outline: none;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
background-color: #2196F3 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.btn_dropdown {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .text_color {
|
||||
color: #0c84d1;
|
||||
}
|
||||
|
||||
:host ::ng-deep .progress {
|
||||
box-shadow: 6px 6px 14px -1px rgba(62, 57, 107, .2);
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-group {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width:767px) {
|
||||
.btn-group {
|
||||
position: relative !important;
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep .text-muted {
|
||||
color: #6b6f82 !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mb-3,
|
||||
.my-3 {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .media {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
:host ::ng-deep .height-350 {
|
||||
height: 250px !important;
|
||||
margin-left: 18%;
|
||||
margin-bottom: 55px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .card-text:last-child {
|
||||
margin-bottom: 0;
|
||||
height: 430px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mb-3 {
|
||||
margin-bottom: 1.1rem !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .chart-info .p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .order-tbl_change th,
|
||||
.order-tbl_change td {
|
||||
padding-right: 0.8rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep svg.ct-chart-bar {
|
||||
width: 100% !important;
|
||||
padding-top: 5%;
|
||||
}
|
||||
|
||||
:host ::ng-deep #donut-dashboard-chart {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:host ::ng-deep .pr_stats {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
:host ::ng-deep .height-300 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:host ::ng-deep .alert_basics_charrt {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:host ::ng-deep .card-header .heading-elements a.btn {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
|
||||
:host ::ng-deep .row_padding {
|
||||
padding: 1.25rem 2rem !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .border_bottom {
|
||||
margin-bottom: 0rem !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .top_space {
|
||||
padding-top: 5% !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .border_top {
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .card-footer {
|
||||
padding: 2rem !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ct-chart-bar .ct-label.ct-horizontal.ct-end {
|
||||
text-anchor: middle;
|
||||
font-family: sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ct-chart-bar .ct-label.ct-vertical.ct-start {
|
||||
text-anchor: middle;
|
||||
font-family: sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .chartist-tooltip.bar_tooltip {
|
||||
border-radius: 10px;
|
||||
padding: 18px;
|
||||
color: rgb(29, 28, 28);
|
||||
height: 60px;
|
||||
width: 80px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: solid 2px rgba(230, 230, 230, 0.9);
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:host ::ng-deep .chartist-tooltip.donut_tooltip {
|
||||
border-radius: 10px;
|
||||
padding: 2px;
|
||||
color: rgb(29, 28, 28);
|
||||
height: 60px;
|
||||
width: 90px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: solid 2px rgba(230, 230, 230, 0.9);
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
top: 16.906px;
|
||||
}
|
||||
|
||||
|
||||
:host ::ng-deep .chartist-tooltip.tooltip-show {
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .chartist-tooltip.bar_tooltip:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -15px;
|
||||
border: 15px solid transparent;
|
||||
border-top-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
:host ::ng-deep .chartist-tooltip.donut_tooltip:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -15px;
|
||||
border: 15px solid transparent;
|
||||
border-top-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
:host ::ng-deep .tab-content > .tab-pane,
|
||||
.pill-content > .pill-pane {
|
||||
display: block;
|
||||
height: 0;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
:host ::ng-deep .tab-content > .active,
|
||||
.pill-content > .active {
|
||||
height: auto;
|
||||
}
|
||||
510
src/app/content/dashboard/ecommerce/ecommerce.component.html
Normal file
510
src/app/content/dashboard/ecommerce/ecommerce.component.html
Normal file
@@ -0,0 +1,510 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- eCommerce statistic -->
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-lg-6 col-12">
|
||||
<div class="card pull-up">
|
||||
<div class="card-content">
|
||||
<div class="card-body card_padding">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h3 class="info">850</h3>
|
||||
<h6>Products Sold</h6>
|
||||
</div>
|
||||
<div>
|
||||
<i class="icon-basket-loaded info font-large-2 float-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-0 mt-1">
|
||||
<ngb-progressbar height="7px" width="100%" type="gradient-x-info" [value]="80"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-12">
|
||||
<div class="card pull-up">
|
||||
<div class="card-content">
|
||||
<div class="card-body card_padding">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h3 class="warning">$748</h3>
|
||||
<h6>Net Profit</h6>
|
||||
</div>
|
||||
<div>
|
||||
<i class="icon-pie-chart warning font-large-2 float-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-0 mt-1">
|
||||
<ngb-progressbar height="7px" width="100%" type="gradient-x-warning" [value]="65">
|
||||
</ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-3 col-lg-6 col-12">
|
||||
<div class="card pull-up">
|
||||
<div class="card-content">
|
||||
<div class="card-body card_padding">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h3 class="success">146</h3>
|
||||
<h6>New Customers</h6>
|
||||
</div>
|
||||
<div>
|
||||
<i class="icon-user-follow success font-large-2 float-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-0 mt-1">
|
||||
<ngb-progressbar height="7px" width="100%" type="gradient-x-success" [value]="75"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-12">
|
||||
<div class="card pull-up">
|
||||
<div class="card-content">
|
||||
<div class="card-body card_padding">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h3 class="danger">99.89 %</h3>
|
||||
<h6>Customer Satisfaction</h6>
|
||||
</div>
|
||||
<div>
|
||||
<i class="icon-heart danger font-large-2 float-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-0 mt-1">
|
||||
<ngb-progressbar height="7px" width="100%" type="gradient-x-danger" [value]="85"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ eCommerce statistic -->
|
||||
|
||||
<!-- Products sell and New Orders -->
|
||||
<div class="row">
|
||||
<div class="col-xl-8 col-12">
|
||||
<div class="card card-shadow">
|
||||
<div class="card-header card-header-transparent py-20">
|
||||
<div class="btn-group dropdown">
|
||||
<a [routerLink]="" ngbDropdown class="d-inline-block">
|
||||
<button class="btn btn_dropdown btn_set_padding btn-dropdown-toggle" id="dropdownBasic1"
|
||||
ngbDropdownToggle>PRODUCTS SALES</button>
|
||||
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
|
||||
<button class="dropdown-item">Sales</button>
|
||||
<button class="dropdown-item">Total Sales</button>
|
||||
<button class="dropdown-item">Profit</button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<ul ngbNav #nav="ngbNav" class="justify-content-end nav nav-pills">
|
||||
<li [ngbNavItem]="1">
|
||||
<a ngbNavLink>Day</a>
|
||||
<ng-template ngbNavContent>
|
||||
<div class="areaChartLegend scoreLineShadow">
|
||||
<x-chartist *ngIf="lineAreaDay" [data]="lineAreaDay.data" [type]="lineAreaDay.type"
|
||||
[options]="lineAreaDay.options" [responsiveOptions]="lineAreaDay.responsiveOptions"
|
||||
[events]="lineAreaDay.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</ng-template>
|
||||
</li>
|
||||
<li [ngbNavItem]="2">
|
||||
<a ngbNavLink>Week</a>
|
||||
<ng-template ngbNavContent>
|
||||
<div class="areaChartLegend scoreLineShadow">
|
||||
<x-chartist *ngIf="lineAreaWeek" [data]="lineAreaWeek.data" [type]="lineAreaWeek.type"
|
||||
[options]="lineAreaWeek.options" [responsiveOptions]="lineAreaWeek.responsiveOptions"
|
||||
[events]="lineAreaWeek.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</ng-template>
|
||||
</li>
|
||||
<li [ngbNavItem]="3">
|
||||
<a ngbNavLink>Month</a>
|
||||
<ng-template ngbNavContent>
|
||||
<div class="areaChartLegend scoreLineShadow">
|
||||
<x-chartist *ngIf="lineAreaMonth" [data]="lineAreaMonth.data" [type]="lineAreaMonth.type"
|
||||
[options]="lineAreaMonth.options" [responsiveOptions]="lineAreaMonth.responsiveOptions"
|
||||
[events]="lineAreaMonth.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</ng-template>
|
||||
</li>
|
||||
</ul>
|
||||
<div [ngbNavOutlet]="nav"></div>
|
||||
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12" *blockUI="'newOrders'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadNewOrders($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
New Orders
|
||||
</ng-container>
|
||||
<ng-container mCardContent>
|
||||
<div id="new-orders" class="media-list position-relative">
|
||||
<div class="table-responsive">
|
||||
<table id="new-orders-table" class="table table-hover table-xl mb-0 order-tbl_change">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="border-top-0">Product</th>
|
||||
<th class="border-top-0">Customers</th>
|
||||
<th class="border-top-0">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-truncate">iPhone X</td>
|
||||
<td class="text-truncate p-1">
|
||||
<ul class="list-unstyled users-list m-0">
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="John Doe"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../assets/images/portrait/small/avatar-s-19.png" alt="Avatar">
|
||||
</li>
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom"
|
||||
data-original-title="Katherine Nichols" class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../assets/images/portrait/small/avatar-s-18.png" alt="Avatar">
|
||||
</li>
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Joseph Weaver"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../assets/images/portrait/small/avatar-s-17.png" alt="Avatar">
|
||||
</li>
|
||||
<li class="avatar avatar-sm">
|
||||
<span class="badge badge-info">+4 more</span>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td class="text-truncate">$8999</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-truncate">Pixel 2</td>
|
||||
<td class="text-truncate p-1">
|
||||
<ul class="list-unstyled users-list m-0">
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Alice Scott"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../assets/images/portrait/small/avatar-s-16.png" alt="Avatar">
|
||||
</li>
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Charles Miller"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../assets/images/portrait/small/avatar-s-15.png" alt="Avatar">
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td class="text-truncate">$5550</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-truncate">OnePlus</td>
|
||||
<td class="text-truncate p-1">
|
||||
<ul class="list-unstyled users-list m-0">
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Christine Ramos"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../assets/images/portrait/small/avatar-s-11.png" alt="Avatar">
|
||||
</li>
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Thomas Brewer"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../assets/images/portrait/small/avatar-s-10.png" alt="Avatar">
|
||||
</li>
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Alice Chapman"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../assets/images/portrait/small/avatar-s-9.png" alt="Avatar">
|
||||
</li>
|
||||
<li class="avatar avatar-sm">
|
||||
<span class="badge badge-info">+3 more</span>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td class="text-truncate">$9000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-truncate">Galaxy</td>
|
||||
<td class="text-truncate p-1">
|
||||
<ul class="list-unstyled users-list m-0">
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Ryan Schneider"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../assets/images/portrait/small/avatar-s-14.png" alt="Avatar">
|
||||
</li>
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Tiffany Oliver"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../assets/images/portrait/small/avatar-s-13.png" alt="Avatar">
|
||||
</li>
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Joan Reid"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../assets/images/portrait/small/avatar-s-12.png" alt="Avatar">
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td class="text-truncate">$7500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-truncate">Moto Z2</td>
|
||||
<td class="text-truncate p-1">
|
||||
<ul class="list-unstyled users-list m-0">
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Kimberly Simmons"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../assets/images/portrait/small/avatar-s-8.png" alt="Avatar">
|
||||
</li>
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Willie Torres"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../assets/images/portrait/small/avatar-s-7.png" alt="Avatar">
|
||||
</li>
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Rebecca Jones"
|
||||
class="avatar avatar-sm pull-up">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../../assets/images/portrait/small/avatar-s-6.png" alt="Avatar">
|
||||
</li>
|
||||
<li class="avatar avatar-sm">
|
||||
<span class="badge badge-info">+1 more</span>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td class="text-truncate">$8500</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Products sell and New Orders -->
|
||||
|
||||
<!-- Recent Transactions -->
|
||||
<div class="row match_height">
|
||||
<div id="recent-transactions" class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Recent Transactions</h4>
|
||||
|
||||
<div class="heading-elements invoice">
|
||||
<ul class="list-inline mb-0">
|
||||
<li><a [routerLink]="" class="btn btn-sm btn-danger box-shadow-2 round btn-min-width pull-right"
|
||||
(click)="rotueInvoice()">Invoice Summary</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="table-responsive" fxFlex="auto" [perfectScrollbar]="config">
|
||||
<table class="table table-hover table-xl border_bottom">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="border-top-0">Status</th>
|
||||
<th scope="col" class="border-top-0">Invoice#</th>
|
||||
<th scope="col" class="border-top-0">Customer Name</th>
|
||||
<th scope="col" class="border-top-0">Products</th>
|
||||
<th scope="col" class="border-top-0">Categories</th>
|
||||
<th scope="col" class="border-top-0">Shipping</th>
|
||||
<th scope="col" class="border-top-0">Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let row of rows">
|
||||
<td class="text-truncate row_padding">
|
||||
<i class="la la-dot-circle-o {{row.statusSymbol}} font-medium-1 mr-1"></i>
|
||||
{{row.status}}
|
||||
</td>
|
||||
<td class="text-truncate row_padding">
|
||||
<a [routerLink]="">{{ row.invoice }}</a>
|
||||
</td>
|
||||
<td class="text-truncate row_padding">
|
||||
<span class="avatar avatar-xs"><img class="box-shadow-2 image-name-space"
|
||||
[src]="row.image"></span><span>{{row.name}}</span>
|
||||
</td>
|
||||
<td class="text-truncate row_padding">
|
||||
<span><img class="media-object avatar avatar-md avatar-online media-left pull-up square"
|
||||
[src]="row.categories"></span>
|
||||
</td>
|
||||
<td class="text-truncate row_padding">
|
||||
<span>
|
||||
<button type="button"
|
||||
class="btn btn-sm btn-outline-{{row.type}} round">{{row.buttonname}}</button>
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-truncate row_padding">
|
||||
<ngb-progressbar height="7px" type="{{row.progressColor}}" [value]=row.value>
|
||||
</ngb-progressbar>
|
||||
</td>
|
||||
<td class="text-truncate row_padding">{{ row.amount }} </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Recent Transactions -->
|
||||
|
||||
<!--Recent Orders & Monthly Sales -->
|
||||
<div class="row match_height">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-content top_space">
|
||||
<div id="cost-revenue" class="ecommercesaleslineArea position-relative">
|
||||
<x-chartist *ngIf="ecommercesaleslineArea" [data]="ecommercesaleslineArea.data"
|
||||
[type]="ecommercesaleslineArea.type" [options]="ecommercesaleslineArea.options"
|
||||
[responsiveOptions]="ecommercesaleslineArea.responsiveOptions"
|
||||
[events]="ecommercesaleslineArea.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border_top">
|
||||
<div class="row mt-1">
|
||||
<div class="col-3 text-center">
|
||||
<h6 class="text-muted">Total Products</h6>
|
||||
<h2 class="block font-weight-normal">18.6 k</h2>
|
||||
<div class="TotalProducts">
|
||||
<ngb-progressbar height="7px" type="gradient-x-info" [value]="70"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<h6 class="text-muted">Total Sales</h6>
|
||||
<h2 class="block font-weight-normal">64.5 M</h2>
|
||||
<div class="TotalSales">
|
||||
<ngb-progressbar height="7px" type="gradient-x-warning" [value]="60"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<h6 class="text-muted">Total Cost</h6>
|
||||
<h2 class="block font-weight-normal">24.3 B</h2>
|
||||
<div class="TotalCost">
|
||||
<ngb-progressbar height="7px" type="gradient-x-danger" [value]="40"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<h6 class="text-muted">Total Revenue</h6>
|
||||
<h2 class="block font-weight-normal">36.7 M</h2>
|
||||
<div class="TotalRevenue">
|
||||
<ngb-progressbar height="7px" type="gradient-x-success" [value]="90"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Recent Orders & Monthly Sales -->
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-4 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Basic Card</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<img class="img-fluid" src="../../../../assets/images/carousel/05.jpg" alt="Card image cap">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
|
||||
card's content.</p>
|
||||
<a [routerLink]="" class="card-link">Card link</a>
|
||||
<a [routerLink]="" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-top-blue-grey border-top-lighten-5 text-muted">
|
||||
<span class="float-left">3 hours ago</span>
|
||||
<span class="float-right">
|
||||
<a [routerLink]="" class="card-link">Read More <i class="fa fa-angle-right"></i></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Project Stats</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="font-medium-2 text-muted text-center dountchartheader">Project Tasks</p>
|
||||
<div id="donut-dashboard-chart" class="donut">
|
||||
<x-chartist *ngIf="donutChart" class="pr_stats" [data]="donutChart.data" [type]="donutChart.type"
|
||||
[options]="donutChart.options" [responsiveOptions]="donutChart.responsiveOptions"
|
||||
[events]="donutChart.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="col Started">
|
||||
<span class="mb-1 text-muted cardtext d-block">23% - Done</span>
|
||||
<div>
|
||||
<ngb-progressbar height="7px" type="success" [value]="23"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col Progress">
|
||||
<span class="mb-1 text-muted cardtext d-block">14% - In Progress</span>
|
||||
<div>
|
||||
<ngb-progressbar height="7px" type="danger" [value]="14"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col Remaining">
|
||||
<span class="mb-1 text-muted cardtext d-block">35% - Remaining</span>
|
||||
<div>
|
||||
<ngb-progressbar height="7px" type="warning" [value]="35"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col Done">
|
||||
<span class="mb-1 text-muted cardtext d-block">28% - Started</span>
|
||||
<div>
|
||||
<ngb-progressbar height="7px" type="primary" [value]="28"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="card-body sales-growth-chart">
|
||||
<div id="monthly-sales" class=""></div>
|
||||
<div class="barchart">
|
||||
<x-chartist *ngIf="barChart" [data]="barChart.data" [type]="barChart.type"
|
||||
[options]="barChart.options" [responsiveOptions]="barChart.responsiveOptions"
|
||||
[events]="barChart.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="chart-title mb-1 text-center">
|
||||
<h6>Total monthly Sales.</h6>
|
||||
</div>
|
||||
<div class="chart-stats text-center">
|
||||
<a [routerLink]="" class="btn btn-sm btn-danger box-shadow-2 mr-1">Statistics <i
|
||||
class="feather ft-bar-chart" (click)=" reLoad()"></i></a> <span class="text-muted">for the last
|
||||
year.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Basic Horizontal Timeline -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { EcommerceComponent } from './ecommerce.component';
|
||||
|
||||
describe('EcommerceComponent', () => {
|
||||
let component: EcommerceComponent;
|
||||
let fixture: ComponentFixture<EcommerceComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ EcommerceComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(EcommerceComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
401
src/app/content/dashboard/ecommerce/ecommerce.component.ts
Normal file
401
src/app/content/dashboard/ecommerce/ecommerce.component.ts
Normal file
@@ -0,0 +1,401 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import * as Chartist from 'chartist';
|
||||
import { DatatableComponent } from '@swimlane/ngx-datatable';
|
||||
import { ChartEvent, ChartType } from 'ng-chartist';
|
||||
import 'chartist-plugin-tooltips';
|
||||
import { BlockUI, NgBlockUI } from 'ng-block-ui';
|
||||
import { PerfectScrollbarDirective, PerfectScrollbarComponent, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
|
||||
import { ChartApiService } from '../../../_services/chart.api';
|
||||
import { TableApiService } from '../../../_services/table-api.service';
|
||||
import { Router } from '@angular/router';
|
||||
export interface Chart {
|
||||
type: ChartType;
|
||||
data: Chartist.IChartistData;
|
||||
options?: any;
|
||||
responsiveOptions?: any;
|
||||
events?: ChartEvent;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-ecommerce',
|
||||
templateUrl: './ecommerce.component.html',
|
||||
styleUrls: ['./ecommerce.component.css']
|
||||
})
|
||||
export class EcommerceComponent implements OnInit {
|
||||
|
||||
@BlockUI('newOrders') blockUINewOrders: NgBlockUI;
|
||||
public config: PerfectScrollbarConfigInterface = { wheelPropagation: true };
|
||||
|
||||
@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
|
||||
@ViewChild(PerfectScrollbarDirective) directiveRef?: PerfectScrollbarDirective;
|
||||
|
||||
currentJustify = 'end';
|
||||
loadingIndicator = true;
|
||||
options = {
|
||||
close: false,
|
||||
expand: false,
|
||||
minimize: false,
|
||||
reload: true
|
||||
};
|
||||
ChartistData: any;
|
||||
datatableData: any;
|
||||
lineAreaDay: any;
|
||||
lineAreaWeek: any;
|
||||
lineAreaMonth: any;
|
||||
ecommercesaleslineArea: any;
|
||||
donutChart: any;
|
||||
barChart: any;
|
||||
rows: any;
|
||||
@ViewChild(DatatableComponent, { static: true }) table: DatatableComponent;
|
||||
Daygraph = true;
|
||||
Weekgraph = false;
|
||||
Monthgraph = false;
|
||||
|
||||
constructor(private chartApiservice: ChartApiService,
|
||||
private tableApiservice: TableApiService,
|
||||
private route: Router) { }
|
||||
getTabledata() {
|
||||
this.rows = this.datatableData.rows;
|
||||
}
|
||||
getlineArea() {
|
||||
const ChartData = this.ChartistData;
|
||||
this.lineAreaDay = {
|
||||
type: 'Line',
|
||||
data: ChartData['lineArea'],
|
||||
options: {
|
||||
lineSmooth: Chartist.Interpolation.simple({
|
||||
divisor: 1.8
|
||||
}),
|
||||
fullwidth: true,
|
||||
height: '320px',
|
||||
low: 0,
|
||||
showArea: true,
|
||||
fullWidth: true,
|
||||
showPoint: false,
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
},
|
||||
axisY: {
|
||||
low: 0,
|
||||
offset: 16,
|
||||
scaleMinSpace: 40,
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value + 'K';
|
||||
},
|
||||
},
|
||||
},
|
||||
responsiveOptions: [
|
||||
['screen and (max-width: 640px) and (min-width: 200px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 2 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}],
|
||||
['screen and (max-width: 380px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 3 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}]
|
||||
],
|
||||
events: {
|
||||
created(data: any): void {
|
||||
const defs = data.svg.elem('defs');
|
||||
defs.elem('linearGradient', {
|
||||
id: 'gradient2',
|
||||
x1: 1,
|
||||
y1: 1,
|
||||
x2: 1,
|
||||
y2: 1
|
||||
}).elem('stop', {
|
||||
offset: 0,
|
||||
'stop-color': 'rgba(22, 141, 238, 1)'
|
||||
}).parent().elem('stop', {
|
||||
offset: 1,
|
||||
'stop-color': 'rgba(98, 188, 270, 11)'
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
this.lineAreaWeek = {
|
||||
type: 'Line',
|
||||
data: ChartData['lineAreaWeek'],
|
||||
|
||||
options: {
|
||||
lineSmooth: Chartist.Interpolation.simple({
|
||||
divisor: 2
|
||||
}),
|
||||
fullwidth: true,
|
||||
height: '320px',
|
||||
low: 0,
|
||||
showArea: true,
|
||||
fullWidth: true,
|
||||
showPoint: false,
|
||||
chartPadding: {
|
||||
top: 33,
|
||||
},
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
axisY: {
|
||||
low: 0,
|
||||
scaleMinSpace: 40,
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value + 'K';
|
||||
},
|
||||
offset: 20,
|
||||
},
|
||||
},
|
||||
responsiveOptions: [
|
||||
['screen and (max-width: 640px) and (min-width: 200px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 2 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}],
|
||||
['screen and (max-width: 380px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 3 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}]
|
||||
],
|
||||
events: {
|
||||
created(data: any): void {
|
||||
const defs = data.svg.elem('defs');
|
||||
defs.elem('linearGradient', {
|
||||
id: 'gradient2',
|
||||
x1: 0,
|
||||
y1: 0,
|
||||
x2: 1,
|
||||
y2: 0
|
||||
}).elem('stop', {
|
||||
offset: 0,
|
||||
'stop-color': 'rgba(22, 141, 238, 1)'
|
||||
}).parent().elem('stop', {
|
||||
offset: 1,
|
||||
'stop-color': 'rgba(98, 188, 246, 1)'
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
this.lineAreaMonth = {
|
||||
type: 'Line',
|
||||
data: ChartData['lineAreaMonth'],
|
||||
options: {
|
||||
lineSmooth: Chartist.Interpolation.simple({
|
||||
divisor: 2
|
||||
}),
|
||||
// low: 650,
|
||||
fullwidth: true,
|
||||
height: '320px',
|
||||
low: 0,
|
||||
chartPadding: {
|
||||
top: 30,
|
||||
left: 0,
|
||||
right: 25
|
||||
},
|
||||
showArea: true,
|
||||
fullWidth: true,
|
||||
showPoint: false,
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
axisY: {
|
||||
low: 0,
|
||||
scaleMinSpace: 60,
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value + 'K';
|
||||
},
|
||||
}
|
||||
|
||||
},
|
||||
responsiveOptions: [
|
||||
['screen and (max-width: 640px) and (min-width: 200px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 2 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}],
|
||||
['screen and (max-width: 380px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 3 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}]
|
||||
],
|
||||
events: {
|
||||
created(data: any): void {
|
||||
const defs = data.svg.elem('defs');
|
||||
defs.elem('linearGradient', {
|
||||
id: 'gradient2',
|
||||
x1: 0,
|
||||
y1: 0,
|
||||
x2: 1,
|
||||
y2: 0
|
||||
}).elem('stop', {
|
||||
offset: 0,
|
||||
'stop-color': 'rgba(22, 141, 238, 1)'
|
||||
}).parent().elem('stop', {
|
||||
offset: 1,
|
||||
'stop-color': 'rgba(98, 188, 246, 1)'
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
this.ecommercesaleslineArea = {
|
||||
type: 'Line',
|
||||
data: ChartData['lineArea2'],
|
||||
options: {
|
||||
height: '300px',
|
||||
low: 0,
|
||||
showArea: true,
|
||||
fullWidth: true,
|
||||
onlyInteger: true,
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
axisY: {
|
||||
low: 0,
|
||||
scaleMinSpace: 40,
|
||||
showGrid: false
|
||||
},
|
||||
},
|
||||
responsiveOptions: [
|
||||
['screen and (max-width: 640px) and (min-width: 381px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 2 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}],
|
||||
['screen and (max-width: 380px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 3 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}]
|
||||
],
|
||||
events: {
|
||||
|
||||
draw(data: any): void {
|
||||
const circleRadius = 6;
|
||||
if (data.type === 'point') {
|
||||
const circle = new Chartist.Svg('circle', {
|
||||
cx: data.x,
|
||||
cy: data.y,
|
||||
r: circleRadius,
|
||||
class: 'ct-point-circle'
|
||||
});
|
||||
data.element.replace(circle);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
// Doughnut
|
||||
this.donutChart = {
|
||||
type: 'Pie',
|
||||
data: ChartData.donutDashboard,
|
||||
options: {
|
||||
width: '100%',
|
||||
height: '290px',
|
||||
donut: true,
|
||||
startAngle: 0,
|
||||
low: 0,
|
||||
high: 8,
|
||||
fullWidth: true,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip({
|
||||
appendToBody: false,
|
||||
class: 'donut_tooltip',
|
||||
})
|
||||
],
|
||||
labelInterpolationFnc: function (value) {
|
||||
const total = ChartData.donutDashboard.series.reduce(function (prev, series) {
|
||||
return prev + series.value;
|
||||
}, 0);
|
||||
return total + '%';
|
||||
}
|
||||
},
|
||||
events: {
|
||||
draw(data: any): void {
|
||||
if (data.type === 'label') {
|
||||
if (data.index === 0) {
|
||||
data.element.attr({
|
||||
dx: data.element.root().width() / 2,
|
||||
dy: data.element.root().height() / 2
|
||||
});
|
||||
} else {
|
||||
data.element.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
///////////////////// End doughnutchart////////////////
|
||||
///////////////////// Start barchart////////////////
|
||||
this.barChart = {
|
||||
type: 'Bar',
|
||||
data: ChartData['Bar'],
|
||||
options: {
|
||||
fullwidth: true,
|
||||
height: '380px',
|
||||
seriesBarDistance: 21,
|
||||
chartPadding: {
|
||||
top: 0,
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip({
|
||||
appendToBody: false,
|
||||
class: 'bar_tooltip',
|
||||
})
|
||||
],
|
||||
axisX: {
|
||||
showLable: true,
|
||||
showGrid: false,
|
||||
offset: 60,
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value.slice(0, 3);
|
||||
}
|
||||
},
|
||||
|
||||
axisY: {
|
||||
scaleMinSpace: 40,
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
///////////////////// End barchart////////////////
|
||||
ngOnInit() {
|
||||
this.chartApiservice.getEcommerceData().subscribe(Response => {
|
||||
this.ChartistData = Response;
|
||||
this.getlineArea();
|
||||
});
|
||||
this.tableApiservice.getEcommerceTableData().subscribe(Response => {
|
||||
this.datatableData = Response;
|
||||
this.getTabledata();
|
||||
});
|
||||
}
|
||||
reloadNewOrders() {
|
||||
this.blockUINewOrders.start('Loading..');
|
||||
setTimeout(() => {
|
||||
this.blockUINewOrders.stop();
|
||||
}, 2500);
|
||||
}
|
||||
rotueInvoice() {
|
||||
this.route.navigate(['/invoice/invoice-summary']);
|
||||
}
|
||||
reLoad(){
|
||||
this.route.navigate(['/sale'])
|
||||
}
|
||||
}
|
||||
125
src/app/content/dashboard/hospital/data.ts
Normal file
125
src/app/content/dashboard/hospital/data.ts
Normal file
@@ -0,0 +1,125 @@
|
||||
///////////////////// Start Barchart ///////////////
|
||||
export const barChartOptions: any = {
|
||||
responsive: true,
|
||||
scaleShowVerticalLines: false,
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
labels: {
|
||||
padding: 30
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
categoryPercentage: 0.36,
|
||||
barPercentage: 0.68
|
||||
}]
|
||||
}
|
||||
};
|
||||
export const barChartLabels: string[] = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];
|
||||
export const barChartType = 'bar';
|
||||
export const barChartLegend = true;
|
||||
export const barChartData: any[] = [
|
||||
{ data: [70, 75, 90, 60, 80, 75, 65], label: 'Fulfilled',
|
||||
backgroundColor: '#00a5a8',
|
||||
borderColor: '#00a5a8',
|
||||
pointBackgroundColor: '#00a5a8',
|
||||
pointBorderColor: '#00a5a8',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: '#00a5a8',
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 0.5 },
|
||||
{ data: [60, 65, 80, 63, 90, 80, 70], label: 'Booked',
|
||||
backgroundColor: '#ff4081',
|
||||
borderColor: '#ff4081',
|
||||
pointBackgroundColor: '#ff4081',
|
||||
pointBorderColor: '#ff4081',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: '#ff4081',
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 0.5 },
|
||||
{ data: [42, 45, 65, 40, 42, 63, 35], label: 'Arrived',
|
||||
backgroundColor: '#626e82',
|
||||
borderColor: '#626e82',
|
||||
pointBackgroundColor: '#626e82',
|
||||
pointBorderColor: '#626e82',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: '#626e82',
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 0.5 },
|
||||
{ data: [50, 55, 70, 40, 47, 65, 38], label: 'No show',
|
||||
backgroundColor: '#ff6e40',
|
||||
borderColor: '#ff6e40',
|
||||
pointBackgroundColor: '#ff6e40',
|
||||
pointBorderColor: '#ff6e40',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: '#ff6e40',
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 0.5 },
|
||||
{ data: [40, 40, 45, 45, 45, 40, 45], label: 'reschedule',
|
||||
backgroundColor: '#7c4dff',
|
||||
borderColor: '#7c4dff',
|
||||
pointBackgroundColor: '#7c4dff',
|
||||
pointBorderColor: '#7c4dff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: '#7c4dff',
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 0.5 },
|
||||
{
|
||||
|
||||
type: 'line', // override the default type
|
||||
data: [40, 60, 80, 60, 75, 60, 70],
|
||||
label:'Appointment',
|
||||
backgroundColor: 'rgba(0,255,255,0)',
|
||||
borderColor: '#1e9ff2',
|
||||
fill: false,
|
||||
pointBorderColor: '#1e9ff2',
|
||||
pointBackgroundColor: '#FFF',
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
lineTension: 0.4
|
||||
}
|
||||
];
|
||||
export const barChartColors: Array<any> = [
|
||||
{
|
||||
backgroundColor: '#00a5a8',
|
||||
borderColor: '#00a5a8',
|
||||
pointBackgroundColor: '#00a5a8',
|
||||
pointBorderColor: '#00a5a8',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: '#00a5a8',
|
||||
},
|
||||
{
|
||||
backgroundColor: '#ff4081',
|
||||
borderColor: '#ff4081',
|
||||
pointBackgroundColor: '#ff4081',
|
||||
pointBorderColor: '#ff4081',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: '#ff4081'
|
||||
},
|
||||
{
|
||||
backgroundColor: '#626e82',
|
||||
borderColor: '#626e82',
|
||||
pointBackgroundColor: '#626e82',
|
||||
pointBorderColor: '#626e82',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: '#626e82'
|
||||
},
|
||||
{
|
||||
backgroundColor: '#ff6e40',
|
||||
borderColor: '#ff6e40',
|
||||
pointBackgroundColor: '#ff6e40',
|
||||
pointBorderColor: '#ff6e40',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: '#ff6e40'
|
||||
},
|
||||
{
|
||||
backgroundColor: '#7c4dff',
|
||||
borderColor: '#7c4dff',
|
||||
pointBackgroundColor: '#7c4dff',
|
||||
pointBorderColor: '#7c4dff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: '#7c4dff'
|
||||
},
|
||||
];
|
||||
///////////////////// End barchart////////////////
|
||||
196
src/app/content/dashboard/hospital/hospital.component.html
Normal file
196
src/app/content/dashboard/hospital/hospital.component.html
Normal file
@@ -0,0 +1,196 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-overlay"></div>
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row">
|
||||
</div>
|
||||
<div class="content-body"><!-- Hospital Info cards -->
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
|
||||
<div class="card pull-up">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="align-self-center">
|
||||
<i class="la la-user-md font-large-2 success"></i>
|
||||
</div>
|
||||
<div class="media-body text-right">
|
||||
<h5 class="text-muted text-bold-500">Doctors Available</h5>
|
||||
<h3 class="text-bold-600">122</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
|
||||
<div class="card pull-up">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="align-self-center">
|
||||
<i class="la la-stethoscope font-large-2 warning"></i>
|
||||
</div>
|
||||
<div class="media-body text-right">
|
||||
<h5 class="text-muted text-bold-500">Visiting Doctors</h5>
|
||||
<h3 class="text-bold-600">34</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
|
||||
<div class="card pull-up">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="align-self-center">
|
||||
<i class="la la-calendar-check-o font-large-2 info"></i>
|
||||
</div>
|
||||
<div class="media-body text-right">
|
||||
<h5 class="text-muted text-bold-500">Today's Inquiry</h5>
|
||||
<h3 class="text-bold-600">3.5K</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
|
||||
<div class="card pull-up">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="align-self-center">
|
||||
<i class="la la-bed font-large-2 danger"></i>
|
||||
</div>
|
||||
<div class="media-body text-right">
|
||||
<h5 class="text-muted text-bold-500">Rooms Available</h5>
|
||||
<h3 class="text-bold-600">179</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hospital Info cards Ends -->
|
||||
|
||||
<!-- Appointment Bar Line Chart -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<section id="chartjs-bar-charts">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'barCharts'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadBarCharts($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Appointment
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="z">
|
||||
<canvas class="barchart" height="328" baseChart [datasets]="barChartData" [labels]="barChartLabels"
|
||||
[options]="barChartOptions" [legend]="barChartLegend"
|
||||
[chartType]="barChartType"></canvas>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Appointment Bar Line Chart Ends -->
|
||||
|
||||
<!-- Appointment Table -->
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Doctors Available</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="table-responsive">
|
||||
<table id="recent-orders" class="table table-hover table-xl mb-0">
|
||||
<tbody>
|
||||
<tr *ngFor = "let doctor of doctors ">
|
||||
<td class="text-truncate p-1 border-top-0">
|
||||
<div class="avatar avatar-md">
|
||||
<img class="media-object rounded-circle" [src]= doctor.image
|
||||
alt="Avatar">
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-truncate pl-0 border-top-0">
|
||||
<div class="name">{{doctor.name}}</div>
|
||||
<div class="designation text-light font-small-2">Dentist</div>
|
||||
</td>
|
||||
<td class="text-right border-top-0">
|
||||
<a href="hospital-book-appointment.html" class="btn btn-sm btn-outline-success">Book Appointment</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="recent-appointments" class="col-12 col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Recent Appointments</h4>
|
||||
<a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
|
||||
<div class="heading-elements">
|
||||
<ul class="list-inline mb-0">
|
||||
<li><a class="btn btn-sm btn-danger box-shadow-2 round btn-min-width pull-right" href="hospital-book-appointment.html"
|
||||
target="_blank">View all</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content mt-1">
|
||||
<div class="table-responsive">
|
||||
<table id="recent-orders-doctors" class="table table-hover table-xl mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="border-top-0">Doctor</th>
|
||||
<th class="border-top-0">Patients</th>
|
||||
<th class="border-top-0">Specialities</th>
|
||||
<th class="border-top-0">Timings</th>
|
||||
<th class="border-top-0">Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="pull-up" *ngFor="let doctor of doctorList">
|
||||
<td class="text-truncate">{{doctor.name}}</td>
|
||||
<td class="text-truncate p-1">
|
||||
<ul class="list-unstyled users-list m-0">
|
||||
<li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Kimberly Simmons" class="avatar avatar-sm pull-up" *ngFor="let imageUrl of doctor.image">
|
||||
<img class="media-object rounded-circle" [src]="imageUrl" alt="Avatar">
|
||||
|
||||
</li>
|
||||
|
||||
<li class="avatar avatar-sm">
|
||||
<span class="badge badge-info">{{doctor.bagde}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-sm btn-outline-{{doctor.type}} round">{{doctor.designation}}</button>
|
||||
</td>
|
||||
<td class="text-truncate">{{doctor.time}}</td>
|
||||
<td class="text-truncate">{{doctor.amount}}</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Appointment Table Ends -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Content-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HospitalComponent } from './hospital.component';
|
||||
|
||||
describe('HospitalComponent', () => {
|
||||
let component: HospitalComponent;
|
||||
let fixture: ComponentFixture<HospitalComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ HospitalComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HospitalComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
66
src/app/content/dashboard/hospital/hospital.component.ts
Normal file
66
src/app/content/dashboard/hospital/hospital.component.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { PerfectScrollbarComponent, PerfectScrollbarDirective, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
|
||||
import * as chartsData from './data';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-hospital',
|
||||
templateUrl: './hospital.component.html',
|
||||
styleUrls: ['./hospital.component.css']
|
||||
})
|
||||
export class HospitalComponent {
|
||||
public config: PerfectScrollbarConfigInterface = { suppressScrollY: true };
|
||||
@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
|
||||
@ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
|
||||
|
||||
constructor() { }
|
||||
|
||||
doctors = [
|
||||
{'name': 'Jane Andre','image':'../../../assets/images/portrait/small/avatar-s-4.png'},
|
||||
{'name': 'Kail Reack','image':'../../../assets/images/portrait/small/avatar-s-5.png'},
|
||||
{'name': 'Shail Black','image':'../../../assets/images/portrait/small/avatar-s-6.png'},
|
||||
{'name': 'Zena wall','image':'../../../assets/images/portrait/small/avatar-s-7.png'},
|
||||
{'name': 'Colin Welch','image':'../../../assets/images/portrait/small/avatar-s-8.png'}
|
||||
]
|
||||
|
||||
firstRow = ['../../../assets/images/portrait/small/avatar-s-4.png',
|
||||
'../../../assets/images/portrait/small/avatar-s-5.png',
|
||||
'../../../assets/images/portrait/small/avatar-s-6.png'];
|
||||
secondRow = ['../../../assets/images/portrait/small/avatar-s-7.png',
|
||||
'../../../assets/images/portrait/small/avatar-s-8.png'];
|
||||
thirdRow = ['../../../assets/images/portrait/small/avatar-s-1.png',
|
||||
'../../../assets/images/portrait/small/avatar-s-2.png',
|
||||
'../../../assets/images/portrait/small/avatar-s-3.png'];
|
||||
fourthRow = ['../../../assets/images/portrait/small/avatar-s-11.png',
|
||||
'../../../assets/images/portrait/small/avatar-s-12.png'];
|
||||
fifthRow = ['../../../assets/images/portrait/small/avatar-s-6.png',
|
||||
'../../../assets/images/portrait/small/avatar-s-4.png'];
|
||||
doctorList = [
|
||||
{
|
||||
'type': 'danger', 'designation': 'Dentist', 'name': 'Jane Andre',
|
||||
'image': this.firstRow, 'time': '8:00 A.M. - 12:00 P.M.', 'amount': '$ 1200.00', 'bagde': '+8 more'
|
||||
},
|
||||
{
|
||||
'type': 'success', 'designation': 'Dermatologist', 'name': 'Kail Reack',
|
||||
'image': this.secondRow, 'time': '10:00 A.M. - 1:00 P.M.', 'amount': '$ 1190.00', 'bagde': '+5 more'
|
||||
},
|
||||
{
|
||||
'type': 'danger', 'designation': 'Psychiatrist', 'name': 'Shail Black',
|
||||
'image': this.thirdRow, 'time': '11:00 A.M. - 2:00 P.M.', 'amount': '$ 999.00', 'bagde': '+3 more'
|
||||
},
|
||||
{
|
||||
'type': 'success', 'designation': 'Gastroenterologist', 'name': 'Zena wall',
|
||||
'image': this.fourthRow, 'time': '11:30 A.M. - 3:00 P.M.', 'amount': '$ 1150.00'
|
||||
},
|
||||
{
|
||||
'type': 'danger', 'designation': 'Pediatrician', 'name': 'Colin Welch',
|
||||
'image': this.fifthRow, 'time': '5:00 P.M. - 8:00 P.M.', 'amount': '$ 1180.00'
|
||||
}
|
||||
];
|
||||
public barChartOptions = chartsData.barChartOptions;
|
||||
public barChartLabels = chartsData.barChartLabels;
|
||||
public barChartType = chartsData.barChartType;
|
||||
public barChartLegend = chartsData.barChartLegend;
|
||||
public barChartData = chartsData.barChartData;
|
||||
public barChartColors = chartsData.barChartColors;
|
||||
}
|
||||
281
src/app/content/dashboard/sales/sales.component.css
Normal file
281
src/app/content/dashboard/sales/sales.component.css
Normal file
@@ -0,0 +1,281 @@
|
||||
:host ::ng-deep .chartist .ct-series-a .ct-line {
|
||||
|
||||
stroke: url(#gradient2);
|
||||
stroke-linecap: round;
|
||||
/* -webkit-filter: drop-shadow(0px 20px 11px rgba(0, 0, 0, 0.5)) !important; */
|
||||
}
|
||||
:host ::ng-deep .chartist {
|
||||
filter: drop-shadow(0px 20px 11px rgba(252, 198, 198, 0.8)) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .chartist .ct-grid{
|
||||
stroke-dasharray: 0px;
|
||||
stroke: rgba(0, 0, 0, 0.4);
|
||||
stroke-width: 0.6px;
|
||||
}
|
||||
:host ::ng-deep .chartist .ct-series-b .ct-line {
|
||||
stroke: #c8c2c3;
|
||||
stroke-dasharray: 8px 3px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .chartist .ct-label.ct-vertical.ct-start {
|
||||
font-weight: 600;
|
||||
color: #636161;
|
||||
font-size: 12px;
|
||||
}
|
||||
:host ::ng-deep .earningchart .ct-series-a .ct-area {
|
||||
fill: rgba(255,117,136,1);
|
||||
}
|
||||
:host ::ng-deep .earningchart .ct-series-a .ct-point-circle {
|
||||
stroke-width: 3px;
|
||||
stroke: #FF4961;
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .earningchart .ct-series-a .ct-line {
|
||||
stroke: #FF4961;
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .avatar-xs {
|
||||
width: 32px !important;
|
||||
border: 2px solid #FFF;
|
||||
}
|
||||
:host ::ng-deep .donut-chart2{
|
||||
margin-bottom: -25px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut {
|
||||
stroke: #28d094;
|
||||
stroke-width: 5.5px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut {
|
||||
stroke: #ff4961;
|
||||
stroke-width: 5.5px !important;
|
||||
}
|
||||
:host ::ng-deep .donut-chart2 {
|
||||
-webkit-filter: drop-shadow(0px 10px 11px rgba(187,187,187)) !important;
|
||||
filter: drop-shadow(0px 10px 11px rgba(187,187,187));
|
||||
}
|
||||
:host ::ng-deep .donut-chart1 {
|
||||
margin-bottom: -25px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
|
||||
stroke: #ff7889;
|
||||
stroke-width: 5.5px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut {
|
||||
stroke: #ffffff;
|
||||
stroke-width: 5.5px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart1 .ct-label {
|
||||
fill: #ffffff;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-size: 1.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart2 .ct-label {
|
||||
fill: #ff4b62;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-size: 1.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
:host ::ng-deep .position-relative {
|
||||
position: relative !important;
|
||||
margin-left: 0px;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .pt-1,
|
||||
.py-1 {
|
||||
padding-top: 0rem !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .chartist .ct-label.ct-horizontal.ct-end {
|
||||
/* align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: start; */
|
||||
font-weight: 600;
|
||||
color: #636161;
|
||||
font-size: 12px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
|
||||
:host ::ng-deep .container > .ct-chart .ct-series.ct-series-c .ct-line {
|
||||
stroke-width: 2px;
|
||||
stroke-dasharray: 20px 180px;
|
||||
stroke: #28d094;
|
||||
animation: draw 0.3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes draw {
|
||||
from {
|
||||
stroke-dashoffset: 200
|
||||
}
|
||||
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep .ct-series-c .ct-point,
|
||||
.ct-series-c .ct-line,
|
||||
.ct-series-c .ct-bar,
|
||||
.ct-series-c .ct-slice-donut {
|
||||
stroke: #28d094;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ct-chart .ct-series.ct-series-c .ct-line {
|
||||
stroke: #28d094;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .ct-series-b .ct-point,
|
||||
.ct-series-b .ct-line,
|
||||
.ct-series-b .ct-bar,
|
||||
.ct-series-b .ct-slice-donut {
|
||||
stroke: #ff4961;
|
||||
}
|
||||
|
||||
:host ::ng-deep .container > .ct-chart .ct-series.ct-series-a .ct-line {
|
||||
stroke-dasharray: 5px;
|
||||
animation: dash 4s linear infinite;
|
||||
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
to {
|
||||
stroke-dashoffset: 2000;
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep .ct-chart .ct-point {
|
||||
stroke-width: 10px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
:host ::ng-deep .container > .ct-chart .ct-series.ct-series-b .ct-line {
|
||||
stroke-width: 10px;
|
||||
stroke-dasharray: 15px 5px;
|
||||
animation: draw 4s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes draw {
|
||||
from {
|
||||
stroke-dashoffset: 100
|
||||
}
|
||||
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:host ::ng-deep .container {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
:host ::ng-deep .btn.gradient-blackberry.active,
|
||||
.gradient-blackberry {
|
||||
background-color: #f05b4f;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .Visit {
|
||||
|
||||
background-color: #28d094;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .Sales {
|
||||
/* background-image: linear-gradient(45deg,#843cf7,#38b8f2)!important; */
|
||||
background-color: #d70206;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .col-md-11 {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .col-md-1 {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .box-shadow-0 .ct-label.ct-vertical.ct-start {
|
||||
|
||||
font-weight: bold;
|
||||
color: #6e6e6e;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .box-shadow-0 .ct-label.ct-horizontal.ct-end {
|
||||
|
||||
font-weight: bold;
|
||||
color: #6e6e6e;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
:host ::ng-deep .text-truncate {
|
||||
padding: 0.9rem 2rem;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-left: 1rem !important;
|
||||
margin-right: 0rem !important;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top : 1.5rem !important;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left : 2rem !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .my-custom-cell {
|
||||
padding-right: 6% !important;
|
||||
padding-top: 1.5% !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .border_bottom {
|
||||
margin-bottom: 0rem !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .border-top-0 {
|
||||
padding: 1.25rem 2rem !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .progress {
|
||||
box-shadow: 0 10px 18px 0 rgba(62, 57, 107, .2);
|
||||
margin-top: 1rem!important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-danger {
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .users-list li + li {
|
||||
margin-left: -10px !important;
|
||||
}
|
||||
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ps--active-x > .ps__rail-x {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .progress {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
269
src/app/content/dashboard/sales/sales.component.html
Normal file
269
src/app/content/dashboard/sales/sales.component.html
Normal file
@@ -0,0 +1,269 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Revenue, Hit Rate & Deals -->
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-12">
|
||||
<div class="Revenue" *blockUI="'revenue'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadRevenue($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Revenue
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="row mb-1">
|
||||
<div class="col-6 col-md-4">
|
||||
<h5>Current week</h5>
|
||||
<h2 class="danger">$82,124</h2>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<h5>Previous week</h5>
|
||||
<h2 class="text-muted">$52,502</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chartist">
|
||||
<x-chartist *ngIf="lineArea" [data]="lineArea.data" [type]="lineArea.type" [options]="lineArea.options"
|
||||
[responsiveOptions]="lineArea.responsiveOptions" [events]="lineArea.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-12">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-12 ">
|
||||
<div class="HitRate" *blockUI="'hitrate'; message: 'Loading'">
|
||||
<m-card [options]="hitRateOptions" id="card" (reloadFunction)="reloadHitRate($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Hit Rate <span class="danger">-12%</span>
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div id="donut-chart2" class="height-230 donut-chart2">
|
||||
<x-chartist *ngIf="donutChart2" [data]="donutChart2.data" [type]="donutChart2.type" [options]="donutChart2.options"
|
||||
[responsiveOptions]="donutChart2.responsiveOptions" [events]="donutChart2.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-12">
|
||||
<m-card [options]="dealsOptions">
|
||||
<ng-container mCardBody>
|
||||
<h4 class="card-title white">Deals <span class="white">-55%</span>
|
||||
<span class="float-right">
|
||||
<span class="white">152</span><span class="red lighten-4">/200</span>
|
||||
</span>
|
||||
</h4>
|
||||
<div id="donut-chart1" class="height-230 donut-chart1">
|
||||
<x-chartist *ngIf="donutChart1" [data]="donutChart1.data" [type]="donutChart1.type" [options]="donutChart1.options"
|
||||
[responsiveOptions]="donutChart1.responsiveOptions" [events]="donutChart1.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="card pull-up">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h6 class="text-muted">Order Value </h6>
|
||||
<h3>$ 88,568</h3>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i class="icon-trophy success font-large-2 float-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="card pull-up">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h6 class="text-muted">Calls</h6>
|
||||
<h3>3,568</h3>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i class="icon-call-in danger font-large-2 float-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Revenue, Hit Rate & Deals -->
|
||||
|
||||
<!-- Emails Products & Avg Deals -->
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-3">
|
||||
<div class="EmailRate" *blockUI="'email'; message: 'Updating'">
|
||||
<m-card [options]="emailsOptions" (reloadFunction)="reloadEmail($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Emails
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p>Open rate <span class="float-right text-bold-600">89%</span></p>
|
||||
<ngb-progressbar height="7px" type="danger" [value]="89"></ngb-progressbar>
|
||||
<p class="pt-1">Sent <span class="float-right"><span class="text-bold-600">310</span>/500</span>
|
||||
</p>
|
||||
<ngb-progressbar height="7px" type="success" [value]="50"></ngb-progressbar>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Top Products</h4>
|
||||
<div class="heading-elements">
|
||||
<ul class="list-inline mb-0">
|
||||
<li><a class="info">Show all</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row" class="border-top-0">iPone X</th>
|
||||
<td class="border-top-0">2245</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">One Plus</th>
|
||||
<td>1850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Samsung S7</th>
|
||||
<td>1550</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title text-center">Average Deal Size</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body pt-0">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-12 border-right-blue-grey border-right-lighten-5 text-center">
|
||||
<h6 class="danger text-bold-600">-30%</h6>
|
||||
<h4 class="font-large-2 text-bold-400">$12,536</h4>
|
||||
<p class="blue-grey lighten-2 mb-0">Per rep</p>
|
||||
</div>
|
||||
<div class="col-md-6 col-12 text-center">
|
||||
<h6 class="success text-bold-600">12%</h6>
|
||||
<h4 class="font-large-2 text-bold-400">$18,548</h4>
|
||||
<p class="blue-grey lighten-2 mb-0">Per team</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Emails Products & Avg Deals -->
|
||||
|
||||
<!-- Total earning & Recent Sales -->
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="earning-chart position-relative">
|
||||
<div class="chart-title position-absolute mt-2 ml-2">
|
||||
<h1 class="display-4">$1,596</h1>
|
||||
<span class="text-muted">Total Earning</span>
|
||||
</div>
|
||||
<div id="cost-revenue" class="earningchart position-relative">
|
||||
<x-chartist *ngIf="earningchart" [data]="earningchart.data" [type]="earningchart.type" [options]="earningchart.options"
|
||||
[responsiveOptions]="earningchart.responsiveOptions" [events]="earningchart.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
<div class="chart-stats position-absolute position-bottom-0 position-right-0 mb-2 mr-3">
|
||||
<a [routerLink]="" class="btn round btn-danger mr-1 btn-glow">Statistics <i class="feather ft-bar-chart"></i></a>
|
||||
<span class="text-muted">for the <a [routerLink]="" class="danger darken-2">last year.</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="recent-sales" class="col-12 col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Recent Sales</h4>
|
||||
<div class="heading-elements">
|
||||
<ul class="list-inline mb-0">
|
||||
<li><a [routerLink]="" class="btn btn-sm btn-danger box-shadow-2 round btn-min-width pull-right" (click)="rotueInvoice()">View
|
||||
all</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content mt-1">
|
||||
<div class="table-responsive" fxFlex="auto" [perfectScrollbar]="config">
|
||||
<table class="table border_bottom table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="border-top-0">Product</th>
|
||||
<th scope="col" class="border-top-0">Customers</th>
|
||||
<th scope="col" class="border-top-0">Categories</th>
|
||||
<th scope="col" class="border-top-0">Popularity</th>
|
||||
<th scope="col" class="border-top-0">Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let row of rows">
|
||||
<td class="text-truncate">
|
||||
{{row.product}}
|
||||
</td>
|
||||
<td class="text-truncate p-1">
|
||||
<ul class="list-unstyled users-list m-0">
|
||||
<li class="avatar avatar-sm pull-up" *ngFor="let imageUrl of row.image">
|
||||
<img class="media-object rounded-circle" [src]="imageUrl" alt="Avatar">
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td class="text-truncate">
|
||||
<span>
|
||||
<button type="button"
|
||||
class="btn btn-sm btn-outline-{{row.type}} round">{{row.buttonname}}</button>
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-truncate">
|
||||
<ngb-progressbar height="7px" type="{{row.type}}" [value]=row.value>
|
||||
</ngb-progressbar>
|
||||
</td>
|
||||
<td class="text-truncate">{{ row.amount }} </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Total earning & Recent Sales -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
25
src/app/content/dashboard/sales/sales.component.spec.ts
Normal file
25
src/app/content/dashboard/sales/sales.component.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { SalesComponent } from './sales.component';
|
||||
|
||||
describe('SalesComponent', () => {
|
||||
let component: SalesComponent;
|
||||
let fixture: ComponentFixture<SalesComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ SalesComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SalesComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
332
src/app/content/dashboard/sales/sales.component.ts
Normal file
332
src/app/content/dashboard/sales/sales.component.ts
Normal file
@@ -0,0 +1,332 @@
|
||||
import { Component, OnInit, ViewChild, Renderer2 } from '@angular/core';
|
||||
import * as Chartist from 'chartist';
|
||||
import { DatatableComponent } from '@swimlane/ngx-datatable';
|
||||
import { ChartEvent, ChartType } from 'ng-chartist';
|
||||
import { BlockUI, NgBlockUI } from 'ng-block-ui';
|
||||
import { PerfectScrollbarComponent, PerfectScrollbarDirective, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
|
||||
import { ChartApiService } from '../../../_services/chart.api';
|
||||
import { Router } from '@angular/router';
|
||||
export interface Chart {
|
||||
type: ChartType;
|
||||
data: Chartist.IChartistData;
|
||||
options?: any;
|
||||
responsiveOptions?: any;
|
||||
events?: ChartEvent;
|
||||
}
|
||||
@Component({
|
||||
selector: 'app-sales',
|
||||
templateUrl: './sales.component.html',
|
||||
styleUrls: ['./sales.component.css']
|
||||
})
|
||||
export class SalesComponent implements OnInit {
|
||||
|
||||
@BlockUI('revenue') blockUIRevenue: NgBlockUI;
|
||||
@BlockUI('hitrate') blockUIHitRate: NgBlockUI;
|
||||
@BlockUI('email') blockUIEmail: NgBlockUI;
|
||||
|
||||
public config: PerfectScrollbarConfigInterface = { suppressScrollY: true };
|
||||
@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
|
||||
@ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
|
||||
|
||||
salesData: any;
|
||||
lineArea: any;
|
||||
earningchart: any;
|
||||
donutChart2: any;
|
||||
donutChart1: any;
|
||||
options = {
|
||||
bodyClass: ['pt-0'],
|
||||
close: false,
|
||||
expand: false,
|
||||
minimize: false,
|
||||
reload: true
|
||||
};
|
||||
|
||||
hitRateOptions = {
|
||||
bodyClass: ['bg-hexagons', 'pt-0'],
|
||||
headerClass: ['bg-hexagons'],
|
||||
cardClass: ['pull-up'],
|
||||
close: false,
|
||||
expand: false,
|
||||
minimize: false,
|
||||
reload: true
|
||||
};
|
||||
|
||||
dealsOptions = {
|
||||
bodyClass: ['bg-hexagons-danger'],
|
||||
cardClass: ['pull-up'],
|
||||
contentClass: ['bg-gradient-directional-danger']
|
||||
};
|
||||
|
||||
emailsOptions = {
|
||||
bodyClass: ['pt-0'],
|
||||
close: false,
|
||||
expand: false,
|
||||
minimize: false,
|
||||
reload: true
|
||||
};
|
||||
loadingIndicator = true;
|
||||
|
||||
firstRow = ['../../../assets/images/portrait/small/avatar-s-4.png',
|
||||
'../../../assets/images/portrait/small/avatar-s-5.png',
|
||||
'../../../assets/images/portrait/small/avatar-s-6.png'];
|
||||
secondRow = ['../../../assets/images/portrait/small/avatar-s-7.png',
|
||||
'../../../assets/images/portrait/small/avatar-s-8.png'];
|
||||
thirdRow = ['../../../assets/images/portrait/small/avatar-s-1.png',
|
||||
'../../../assets/images/portrait/small/avatar-s-2.png',
|
||||
'../../../assets/images/portrait/small/avatar-s-3.png'];
|
||||
fourthRow = ['../../../assets/images/portrait/small/avatar-s-11.png',
|
||||
'../../../assets/images/portrait/small/avatar-s-12.png'];
|
||||
fifthRow = ['../../../assets/images/portrait/small/avatar-s-6.png',
|
||||
'../../../assets/images/portrait/small/avatar-s-4.png'];
|
||||
rows = [
|
||||
{
|
||||
'type': 'danger', 'value': 85, 'product': 'iPhone X',
|
||||
'image': this.firstRow, 'buttonname': 'Mobile', 'amount': '$ 1200.00', 'bagde': '+8 more'
|
||||
},
|
||||
{
|
||||
'type': 'success', 'value': 75, 'product': 'iPad',
|
||||
'image': this.secondRow, 'buttonname': 'Teblet', 'amount': '$ 1190.00', 'bagde': '+5 more'
|
||||
},
|
||||
{
|
||||
'type': 'danger', 'value': 65, 'product': 'OnePlus',
|
||||
'image': this.thirdRow, 'buttonname': 'Mobile', 'amount': '$ 999.00', 'bagde': '+3 more'
|
||||
},
|
||||
{
|
||||
'type': 'success', 'value': 55, 'product': 'ZenPad',
|
||||
'image': this.fourthRow, 'buttonname': 'Teblet', 'amount': '$ 1150.00'
|
||||
},
|
||||
{
|
||||
'type': 'danger', 'value': 45, 'product': 'Pixel 2',
|
||||
'image': this.fifthRow, 'buttonname': 'Mobile', 'amount': '$ 1180.00'
|
||||
}
|
||||
];
|
||||
|
||||
@ViewChild(DatatableComponent, { static: true }) table: DatatableComponent;
|
||||
Daygraph = true;
|
||||
Weekgraph = false;
|
||||
Monthgraph = false;
|
||||
ngOnInit() {
|
||||
this.chartApiservice.getSalesData().subscribe(Response => {
|
||||
this.salesData = Response;
|
||||
this.getChartdata();
|
||||
});
|
||||
}
|
||||
constructor(private _renderer: Renderer2, private route: Router,
|
||||
private chartApiservice: ChartApiService) { }
|
||||
reloadRevenue() {
|
||||
this.blockUIRevenue.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIRevenue.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadHitRate() {
|
||||
this.blockUIHitRate.start('Please Wait..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIHitRate.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadEmail() {
|
||||
this.blockUIEmail.start();
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIEmail.stop();
|
||||
}, 2500);
|
||||
}
|
||||
rotueInvoice() {
|
||||
this.route.navigate(['/invoice/invoice-summary']);
|
||||
}
|
||||
getChartdata() {
|
||||
const Chartdata = this.salesData;
|
||||
this.lineArea = {
|
||||
type: 'Line',
|
||||
data: Chartdata['lineArea'],
|
||||
options: {
|
||||
lineSmooth: Chartist.Interpolation.simple({
|
||||
divisor: 2.8
|
||||
}),
|
||||
fullWidth: true,
|
||||
height: '270px',
|
||||
showArea: false,
|
||||
showPoint: false,
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
showLabel: true,
|
||||
offset: 32
|
||||
},
|
||||
axisY: {
|
||||
showGrid: true,
|
||||
showLabel: true,
|
||||
scaleMinSpace: 28,
|
||||
offset: 44
|
||||
},
|
||||
},
|
||||
events: {
|
||||
created(data: any): void {
|
||||
const defs = data.svg.elem('defs');
|
||||
defs.elem('linearGradient', {
|
||||
id: 'gradient2',
|
||||
x1: 0,
|
||||
y1: 0,
|
||||
x2: 1,
|
||||
y2: 0
|
||||
}).elem('stop', {
|
||||
offset: 0,
|
||||
'stop-color': 'rgb(255,73,97)'
|
||||
}).parent().elem('stop', {
|
||||
offset: 1,
|
||||
'stop-color': 'rgb(255,73,97)'
|
||||
});
|
||||
},
|
||||
draw(data: any): void {
|
||||
const circleRadius = 4;
|
||||
if (data.type === 'point') {
|
||||
const circle = new Chartist.Svg('circle', {
|
||||
cx: data.x,
|
||||
cy: data.y,
|
||||
r: circleRadius,
|
||||
class: 'ct-point-circle'
|
||||
});
|
||||
data.element.replace(circle);
|
||||
} else if (data.type === 'label') {
|
||||
// adjust label position for rotation
|
||||
const dX = data.width / 2 + (26 - data.width);
|
||||
data.element.attr({ x: data.element.attr('x') - dX });
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
this.earningchart = {
|
||||
type: 'Line',
|
||||
data: Chartdata['earningchart'],
|
||||
options: {
|
||||
chartPadding: 0,
|
||||
height: '440px',
|
||||
low: 0,
|
||||
showArea: true,
|
||||
fullWidth: true,
|
||||
onlyInteger: true,
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
showLabel: false,
|
||||
offset: -1
|
||||
},
|
||||
axisY: {
|
||||
scaleMinSpace: 40,
|
||||
showGrid: false,
|
||||
showLabel: false,
|
||||
offset: -2
|
||||
},
|
||||
},
|
||||
responsiveOptions: [
|
||||
['screen and (max-width: 640px) and (min-width: 381px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 2 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}],
|
||||
['screen and (max-width: 380px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 3 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}]
|
||||
],
|
||||
events: {
|
||||
created(data: any): void {
|
||||
const defs = data.svg.elem('defs');
|
||||
defs.elem('linearGradient', {
|
||||
id: 'gradient1',
|
||||
x1: 0,
|
||||
y1: 0,
|
||||
x2: 1,
|
||||
y2: 0
|
||||
}).elem('stop', {
|
||||
offset: 0,
|
||||
'stop-color': 'rgb(255,73,97)'
|
||||
}).parent().elem('stop', {
|
||||
offset: 1,
|
||||
'stop-color': 'rgb(255,73,97)'
|
||||
});
|
||||
},
|
||||
draw(data: any): void {
|
||||
const circleRadius = 6;
|
||||
if (data.type === 'point') {
|
||||
const circle = new Chartist.Svg('circle', {
|
||||
cx: data.x,
|
||||
cy: data.y,
|
||||
r: circleRadius,
|
||||
class: 'ct-point-circle'
|
||||
});
|
||||
data.element.replace(circle);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
// Doughnut
|
||||
this.donutChart2 = {
|
||||
type: 'Pie',
|
||||
data: Chartdata['donut1'],
|
||||
options: {
|
||||
chartPadding: 0,
|
||||
fullwidth: true,
|
||||
height: '273px',
|
||||
donut: true,
|
||||
showLabel: true,
|
||||
startAngle: 0,
|
||||
labelInterpolationFnc: function (value) {
|
||||
const total = 82;
|
||||
return total + '%';
|
||||
}
|
||||
},
|
||||
events: {
|
||||
draw(data: any): void {
|
||||
if (data.type === 'label') {
|
||||
if (data.index === 0) {
|
||||
data.element.attr({
|
||||
dx: data.element.root().width() / 2,
|
||||
dy: data.element.root().height() / 2
|
||||
});
|
||||
} else {
|
||||
data.element.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
this.donutChart1 = {
|
||||
type: 'Pie',
|
||||
data: Chartdata['donut2'],
|
||||
options: {
|
||||
chartPadding: 0,
|
||||
fullwidth: true,
|
||||
height: '273px',
|
||||
donut: true,
|
||||
showLabel: true,
|
||||
labelInterpolationFnc: function (value) {
|
||||
const total = 76;
|
||||
return total + '%';
|
||||
}
|
||||
},
|
||||
events: {
|
||||
draw(data: any): void {
|
||||
if (data.type === 'label') {
|
||||
if (data.index === 0) {
|
||||
data.element.attr({
|
||||
dx: data.element.root().width() / 2,
|
||||
dy: data.element.root().height() / 2
|
||||
});
|
||||
} else {
|
||||
data.element.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user