feat(apm): update feature

Author: stbui

src/app/apm/collection/collection.component.html

@@ -52,7 +52,19 @@
       <mat-card-header>
         <mat-card-title>性能分析</mat-card-title>
       </mat-card-header>
-      <mat-card-content>content</mat-card-content>
+      <mat-card-content class="chart-container">
+        <ngx-charts-bar-vertical
+          *ngIf="dataChart?.length"
+          [results]="dataChart"
+          [gradient]="gradient"
+          [xAxis]="showXAxis"
+          [yAxis]="showYAxis"
+          [legend]="showLegend"
+          [showXAxisLabel]="showXAxisLabel"
+          [showYAxisLabel]="showYAxisLabel"
+        >
+        </ngx-charts-bar-vertical>
+      </mat-card-content>
     </mat-card>
 
     <stbui-search

src/app/apm/collection/collection.component.scss

@@ -20,3 +20,7 @@
 table {
   width: 100%;
 }
+
+.chart-container {
+  min-height: 400px;
+}

src/app/apm/collection/collection.component.ts

@@ -43,6 +43,22 @@ export class CollectionComponent implements OnInit {
   count = 0;
   duration = '0';
 
+  // chart
+  dataChart: any = [];
+
+  showXAxis = true;
+  showYAxis = true;
+  gradient = false;
+  showLegend = false;
+  showXAxisLabel = true;
+  xAxisLabel = 'Country';
+  showYAxisLabel = true;
+  yAxisLabel = 'Population';
+
+  colorScheme = {
+    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
+  };
+
   constructor(private service: CollectionService, private datePipe: DatePipe) {}
 
   ngOnInit() {
@@ -67,7 +83,16 @@ export class CollectionComponent implements OnInit {
           return observableOf([]);
         })
       )
-      .subscribe(data => (this.dataSource = data));
+      .subscribe(data => {
+        this.dataSource = data;
+
+        data.map(d => {
+          this.dataChart.push({
+            name: this.datePipe.transform(d.create_time,'yyyy-MM-dd hh:mm:ss'),
+            value: d.duration
+          });
+        });
+      });
 
     this.service.getCount().subscribe(res => {
       this.body_size = res.data.body_size;

src/app/apm/collection/collection.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule, DatePipe } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
+
 import { SharedModule } from '../../shared/shared.module';
 import { SearchModule } from '../../component/search';
 import { WidgetModule } from '../../component/widget';
@@ -14,6 +16,7 @@ import { DetailComponent } from './detail/detail.component';
     CommonModule,
     SharedModule,
     HttpClientModule,
+    NgxChartsModule,
     SearchModule,
     WidgetModule
   ],

src/app/apm/layout/layout.component.html

@@ -4,7 +4,5 @@
     <stbui-navigation [navigationModel]="navigationModel"></stbui-navigation>
   </mat-sidenav>
 
-  <div class="sidenav-container">
-    <div class="main-container"><router-outlet></router-outlet></div>
-  </div>
+  <mat-sidenav-content> <router-outlet></router-outlet> </mat-sidenav-content>
 </mat-sidenav-container>

src/app/apm/layout/layout.component.ts

@@ -3,7 +3,7 @@ import { Subscription } from 'rxjs';
 import { NavigationService } from './navigation.service';
 
 @Component({
-  selector: 'app-layout',
+  selector: 'apm-layout',
   templateUrl: './layout.component.html',
   styleUrls: ['./layout.component.scss']
 })

src/app/apm/layout/navigation.model.ts

@@ -57,6 +57,11 @@ export class NavigationModel {
         title: '应用告警',
         type: 'item',
         icon: 'alarm',
+        badge: {
+          title: '10',
+          bg: '#ff4081',
+          fg: '#fff'
+        },
         url: '/apm/alarm'
       },
       {
@@ -65,7 +70,7 @@ export class NavigationModel {
         type: 'item',
         icon: 'laptop',
         url: '/apm/manage'
-      },
+      }
     ];
   }
 }

src/app/apm/performance/performance.component.html

@@ -113,20 +113,50 @@
         <mat-card-header>
           <mat-card-title>浏览器分类统计</mat-card-title>
         </mat-card-header>
+        <mat-card-content class="chart-container">
+          <ngx-charts-pie-chart
+            *ngIf="dataBrowserChart?.length"
+            [results]="dataBrowserChart"
+            [legend]="showLegend"
+            [labels]="showLabels"
+            [doughnut]="doughnut"
+          >
+          </ngx-charts-pie-chart>
+        </mat-card-content>
       </mat-card>
     </div>
     <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
       <mat-card>
         <mat-card-header>
           <mat-card-title>系统分类统计</mat-card-title>
         </mat-card-header>
+        <mat-card-content class="chart-container">
+          <ngx-charts-pie-chart
+            *ngIf="dataBrowserChart?.length"
+            [results]="dataBrowserChart"
+            [legend]="showLegend"
+            [labels]="showLabels"
+            [doughnut]="doughnut"
+          >
+          </ngx-charts-pie-chart>
+        </mat-card-content>
       </mat-card>
     </div>
     <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
       <mat-card>
         <mat-card-header>
           <mat-card-title>地理位置分类统计</mat-card-title>
         </mat-card-header>
+        <mat-card-content class="chart-container">
+          <ngx-charts-pie-chart
+            *ngIf="dataBrowserChart?.length"
+            [results]="dataBrowserChart"
+            [legend]="showLegend"
+            [labels]="showLabels"
+            [doughnut]="doughnut"
+          >
+          </ngx-charts-pie-chart>
+        </mat-card-content>
       </mat-card>
     </div>
   </div>

src/app/apm/performance/performance.component.scss

@@ -11,3 +11,7 @@
 table {
   width: 100%;
 }
+
+.chart-container {
+  min-height: 400px;
+}

src/app/apm/performance/performance.component.ts

@@ -54,6 +54,14 @@ export class PerformanceComponent implements OnInit {
   tcp_time = 0;
   white_time = 9.153846153846153;
 
+  // chart
+  dataBrowserChart = [];
+  // options
+  showLegend = false;
+  // pie
+  showLabels = false;
+  doughnut = false;
+
   constructor(private service: PerformanceService, private router: Router) {}
 
   ngOnInit() {
@@ -78,6 +86,9 @@ export class PerformanceComponent implements OnInit {
         })
       )
       .subscribe(data => (this.dataSource = data));
+
+    this.dataBrowserChart.push({ name: 'Chrome', value: 13 });
+    this.dataBrowserChart.push({ name: 'IE', value: 1 });
   }
 
   onRowClicked(row) {