chart apply test

src/app/commons/component/app-summary-card/app-summary-card.component.html

@@ -1,3 +1,9 @@
-<p>
+<div class="mat-elevation-z4 ">
-  app-summary-card works!
+  <mat-toolbar>
-</p>
+    <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>

src/app/commons/component/app-summary-card/app-summary-card.component.ts

@@ -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() {
   }

src/app/commons/component/app-summary-card/data.ts

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

src/app/commons/component/host-summary-card/data.ts

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

src/app/commons/component/host-summary-card/host-summary-card.component.html

@@ -1,3 +1,9 @@
-<p>
+<div class="mat-elevation-z4 ">
-  host-summary-card works!
+    <mat-toolbar>
-</p>
+        <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>

src/app/commons/component/host-summary-card/host-summary-card.component.ts

@@ -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() {
   }

src/app/commons/component/sensor-summary/sensor-summary.component.html

@@ -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>

src/app/commons/component/sensor-summary/sensor-summary.component.ts

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

src/app/pages/overview/overview-page.component.html

@@ -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>
+    <div fxLayout="row" fxLayoutWrap [style.margin]="'20px 0px'">
-        <of-sensor-summary fxFlex="60"  fxFlex.lt-sm="100"  fxFlex.sm="100" fxFlex.md="70" ></of-sensor-summary>
+      <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>
+      <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>

src/app/pages/overview/overview-page.module.ts

@@ -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