overflow_backup_2018_0455/overflow-webapp
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chart apply test

Browse Source
This commit is contained in:
insanity 2018-02-21 16:31:20 +09:00
parent cc662367bd
commit 48d038610e
10 changed files with 91 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/commons/component/app-summary-card/app-summary-card.component.html
View File

@ -1,3 +1,9 @@
<p>
app-summary-card works!
</p>
<div class="mat-elevation-z4 ">
<mat-toolbar>
<mat-toolbar-row>
<span>Applications</span>
</mat-toolbar-row>
</mat-toolbar>
<ngx-charts-advanced-pie-chart [view]="view" [scheme]="colorScheme" [results]="data" [gradient]="gradient" (select)="onSelect($event)">
</ngx-charts-advanced-pie-chart>
</div>

15
src/app/commons/component/app-summary-card/app-summary-card.component.ts
View File

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { data } from './data';
@Component({
selector: 'of-app-summary-card',
@ -7,7 +8,19 @@ import { Component, OnInit } from '@angular/core';
})
export class AppSummaryCardComponent implements OnInit {
constructor() { }
view: any[] = [440, 180];
colorScheme = {
domain: ['#5AA454', '#C7B42C', '#A10A28']
};
constructor() {
Object.assign(this, { data });
}
onSelect(event) {
console.log(event);
}
ngOnInit() {
}

14
src/app/commons/component/app-summary-card/data.ts Normal file
View File

@ -0,0 +1,14 @@
export const data = [
{
'name': 'Up',
'value': 125
},
{
'name': 'Warning',
'value': 80
},
{
'name': 'Down',
'value': 9
}
];

14
src/app/commons/component/host-summary-card/data.ts Normal file
View File

@ -0,0 +1,14 @@
export const data = [
{
'name': 'Up',
'value': 15
},
{
'name': 'Warning',
'value': 40
},
{
'name': 'Down',
'value': 2
}
];

12
src/app/commons/component/host-summary-card/host-summary-card.component.html
View File

@ -1,3 +1,9 @@
<p>
host-summary-card works!
</p>
<div class="mat-elevation-z4 ">
<mat-toolbar>
<mat-toolbar-row>
<span>Hosts</span>
</mat-toolbar-row>
</mat-toolbar>
<ngx-charts-advanced-pie-chart [view]="view" [scheme]="colorScheme" [results]="data" [gradient]="gradient" (select)="onSelect($event)">
</ngx-charts-advanced-pie-chart>
</div>

15
src/app/commons/component/host-summary-card/host-summary-card.component.ts
View File

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { data } from './data';
@Component({
selector: 'of-host-summary-card',
@ -7,7 +8,19 @@ import { Component, OnInit } from '@angular/core';
})
export class HostSummaryCardComponent implements OnInit {
constructor() { }
view: any[] = [440, 180];
colorScheme = {
domain: ['#5AA454', '#C7B42C', '#A10A28']
};
constructor() {
Object.assign(this, { data });
}
onSelect(event) {
console.log(event);
}
ngOnInit() {
}

2
src/app/commons/component/sensor-summary/sensor-summary.component.html
View File

@ -1,6 +1,5 @@
<div class="sales-list mat-elevation-z4 ">
<mat-toolbar>
<mat-toolbar-row>
<span>Sensor Items Summary</span>
<span class="pull-right"></span>
@ -32,5 +31,4 @@
</mat-chip-list>
</mat-list-item>
</mat-list>
</div>

2
src/app/commons/component/sensor-summary/sensor-summary.component.ts
View File

@ -7,7 +7,7 @@ import { Component, OnInit } from '@angular/core';
})
export class SensorSummaryComponent implements OnInit {
public showLoader = false;
private showLoader = false;
// icon 상태별 색깔 아이콘으로 교체
public sensorStatusList = [

15
src/app/pages/overview/overview-page.component.html
View File

@ -2,20 +2,25 @@
<div fxFlex="70" fxLayout="column" class="mat-elevation-z2 activity-list-container">
<div fxLayoutAlign="start center" fxLayout="row">
<div fxLayout="row" fxLayoutAlign="space-between center">
<of-host-summary-card></of-host-summary-card>
<of-app-summary-card></of-app-summary-card>
</div>
<!-- <div fxLayoutAlign="start center" fxLayout="row">
<div *ngFor="let dash of dashCard" fxFlex.lt-sm="70">
<of-dashboard-card [dashData]="dash"></of-dashboard-card>
</div>
</div>
</div> -->
<div fxLayout="row" fxLayoutWrap>
<of-sensor-summary fxFlex="60" fxFlex.lt-sm="100" fxFlex.sm="100" fxFlex.md="70" ></of-sensor-summary>
<div fxLayout="row" fxLayoutWrap [style.margin]="'20px 0px'">
<of-sensor-summary fxFlex="40" fxFlex.lt-sm="100" fxFlex.sm="100" fxFlex.md="70"></of-sensor-summary>
<of-sensor-item-filter></of-sensor-item-filter>
</div>
</div>
<div fxFlex="30" fxLayout="column" class="mat-elevation-z2 activity-add">
<div fxFlex="30" fxLayout="column" class="mat-elevation-z2 activity-add" >
<div fxFlex="10" fxLayout="row" fxLayoutAlign="space-between center">
<h3 class="mat-headline" fxFlex="80">Activities</h3>
</div>

6
src/app/pages/overview/overview-page.module.ts
View File

@ -10,6 +10,8 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { SensorSummaryComponent } from '../../commons/component/sensor-summary/sensor-summary.component';
import { SensorItemFilterComponent } from '../../commons/component/sensor-item-filter/sensor-item-filter.component';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { HostSummaryCardComponent } from '../../commons/component/host-summary-card/host-summary-card.component';
import { AppSummaryCardComponent } from '../../commons/component/app-summary-card/app-summary-card.component';
@NgModule({
imports: [
@ -24,7 +26,9 @@ import { NgxChartsModule } from '@swimlane/ngx-charts';
OverviewPageComponent,
AddDashboardDialogComponent,
SensorSummaryComponent,
SensorItemFilterComponent
SensorItemFilterComponent,
HostSummaryCardComponent,
AppSummaryCardComponent
],
entryComponents: [
AddDashboardDialogComponent