Sineedge/sparqsineedge
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard

Browse Source
This commit is contained in:
saravanakumarkandasami 2018-10-22 15:47:47 +05:30
parent 1fd7ae16c2
commit 3f8add890b
2 changed files with 89 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
ng6-seed/src/app/dashboard/dashboard.component.html
View File

@ -1,7 +1,7 @@
<div class="pad-wrap"> <div class="pad-wrap">
<div fxLayout="row wrap"> <!--<div fxLayout="row wrap">
<div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100"> <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
<mat-card> <mat-card>
<mat-card-title>Today's Status</mat-card-title> <mat-card-title>Today's Status</mat-card-title>
@ -15,8 +15,60 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</div> </div>
</div> </div> -->
<div fxLayout="row wrap">
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap">
<mat-card>
<mat-card-title>Full</mat-card-title>
<mat-card-subtitle></mat-card-subtitle>
<hr>
<mat-card-content>
<mat-card-content>
<div class="w-100 h-300px">
<ngx-charts-gauge [scheme]="colorScheme" [results]="single" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
</ngx-charts-gauge>
</div>
</mat-card-content>
</mat-card-content>
</mat-card>
</div>
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap">
<mat-card>
<mat-card-title>Smart</mat-card-title>
<mat-card-subtitle></mat-card-subtitle>
<hr>
<mat-card-content>
<mat-card-content>
<div class="w-100 h-300px">
<ngx-charts-gauge [scheme]="colorScheme" [results]="single" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
</ngx-charts-gauge>
</div>
</mat-card-content>
</mat-card-content>
</mat-card>
</div>
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap">
<mat-card>
<mat-card-title>Tele</mat-card-title>
<mat-card-subtitle></mat-card-subtitle>
<hr>
<mat-card-content>
<mat-card-content>
<div class="w-100 h-300px">
<ngx-charts-gauge [scheme]="colorScheme" [results]="single" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
</ngx-charts-gauge>
</div>
</mat-card-content>
</mat-card-content>
</mat-card>
</div>
</div>
<!--Lender,Citywise, Same Status--> <!--Lender,Citywise, Same Status-->
<div fxLayout="row wrap"> <div fxLayout="row wrap">

103
ng6-seed/src/app/dashboard/dashboard.component.ts
View File

@ -1,32 +1,55 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
@Component({ @Component({
selector: 'app-dashboard', selector: 'app-dashboard',
templateUrl: './dashboard.component.html', templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'] styleUrls: ['./dashboard.component.scss']
}) })
export class DashboardComponent { export class DashboardComponent {
//public single: any[];
//public multi: any[];
public showXAxis = true; public showXAxis = true;
public showYAxis = true; public showYAxis = true;
public gradient = false; public gradient = false;
public showLegend = false; public showLegend = false;
public showXAxisLabel = true; public showXAxisLabel = true;
public xAxisLabel = 'Type'; public xAxisLabel = 'Status';
public showYAxisLabel = true; public showYAxisLabel = true;
public yAxisLabel = 'PD'; public yAxisLabel = 'PD';
public colorScheme = { public colorScheme = {
domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3', '#ffd740 ', '#eb35bb '] domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3', '#234278 ', '#2a1653']
}; };
public autoScale = true;
constructor() { constructor() {
} }
single: Object[] = [
{
name: 'Triggered',
value: 45
},
{
name: 'Allocated',
value: 50
},
{
name: 'Scheduled',
value: 36
},
{
name: 'InProgress',
value: 90
},
{
name: 'Completed',
value: 56
},
{
name: 'QC Completed',
value: 81
}
];
// //Lender wise PD Triggered // //Lender wise PD Triggered
lenderpd: Object[] = [{ lenderpd: Object[] = [{
lendername:'ICICI', lendername:'ICICI',
@ -45,65 +68,7 @@ export class DashboardComponent {
smartpd:'3', smartpd:'3',
}, ]; }, ];
multi: Object[] = [
{
name: 'Full',
series: [
{
name: 'Triggered',
value: 50
},
{
name: 'Allocated',
value: 29
},
{
name: 'Schudled',
value: 45
},
{
name: 'InProgress',
value: 67
},
{
name: 'Completed',
value: 34
},{
name: 'QC Completed',
value: 22
}
]
},
{
name: 'Smart',
series: [
{
name: 'Triggred',
value: 60
},
{
name: 'Allocated',
value: 33
},
{
name: 'Schudled',
value: 76
},
{
name: 'InProgress',
value: 34
},{
name: 'Completed',
value: 56
},{
name: 'QC Completed',
value: 45
}
]
},
];
//City Wise PD Triggered //City Wise PD Triggered
citywisepd: Object[] = [{ citywisepd: Object[] = [{
cityname: 'Bangalore', cityname: 'Bangalore',