angular-material-app documentation
  1. Components
  2. PerformanceComponent

File

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

Implements

OnInit

Metadata

selector apm-performance
styleUrls ./performance.component.scss
templateUrl ./performance.component.html

Index

Properties
Methods

Constructor

constructor(service: PerformanceService, router: Router)
Defined in src/app/apm/performance/performance.component.ts:63
Parameters :
Name Type Optional
service PerformanceService No
router Router No

Methods

ngOnInit
ngOnInit()
Defined in src/app/apm/performance/performance.component.ts:67
Returns : void
onDetailClicked
onDetailClicked(row)
Defined in src/app/apm/performance/performance.component.ts:98
Parameters :
Name Optional
row No
Returns : void
onRowClicked
onRowClicked(row)
Defined in src/app/apm/performance/performance.component.ts:94
Parameters :
Name Optional
row No
Returns : void

Properties

analysisDom_time
Type : number
Default value : 62
Defined in src/app/apm/performance/performance.component.ts:47
count
Type : number
Default value : 13
Defined in src/app/apm/performance/performance.component.ts:48
dataBrowserChart
Type : []
Default value : []
Defined in src/app/apm/performance/performance.component.ts:58
dataSource
Type : any
Default value : new MatTableDataSource([])
Defined in src/app/apm/performance/performance.component.ts:34
devicesDataSource
Type : []
Default value : []
Defined in src/app/apm/performance/performance.component.ts:40
displayedColumns
Type : string[]
Default value : [ 'url', 'load_time', 'white_time', 'dom_time', 'analysisDom_time', 'dns_time', 'tcp_time', 'redirect_time', 'unload_time', 'request_time', 'ready_time', 'create_time', 'start' ]
Defined in src/app/apm/performance/performance.component.ts:19
dns_time
Type : number
Default value : 0
Defined in src/app/apm/performance/performance.component.ts:49
dom_time
Type : number
Default value : 72.38461538461539
Defined in src/app/apm/performance/performance.component.ts:50
doughnut
Default value : false
Defined in src/app/apm/performance/performance.component.ts:63
eventDataSource
Type : []
Default value : []
Defined in src/app/apm/performance/performance.component.ts:41
isLoadingResults
Default value : true
Defined in src/app/apm/performance/performance.component.ts:37
isRateLimitReached
Default value : false
Defined in src/app/apm/performance/performance.component.ts:38
load_time
Type : number
Default value : 134.15384615384616
Defined in src/app/apm/performance/performance.component.ts:51
paginator
Type : MatPaginator
Decorators :
@ViewChild(MatPaginator, {static: true})
Defined in src/app/apm/performance/performance.component.ts:43
ready_time
Type : number
Default value : 4.538461538461538
Defined in src/app/apm/performance/performance.component.ts:52
request_time
Type : number
Default value : 4.923076923076923
Defined in src/app/apm/performance/performance.component.ts:53
resultsLength
Type : number
Default value : 0
Defined in src/app/apm/performance/performance.component.ts:36
search
Type : SearchComponent
Decorators :
@ViewChild(SearchComponent, {static: true})
Defined in src/app/apm/performance/performance.component.ts:45
showLabels
Default value : false
Defined in src/app/apm/performance/performance.component.ts:62
showLegend
Default value : false
Defined in src/app/apm/performance/performance.component.ts:60
sidenav
Type : MatSidenav
Decorators :
@ViewChild(MatSidenav, {static: true})
Defined in src/app/apm/performance/performance.component.ts:44
tcp_time
Type : number
Default value : 0
Defined in src/app/apm/performance/performance.component.ts:54
white_time
Type : number
Default value : 9.153846153846153
Defined in src/app/apm/performance/performance.component.ts:55
 
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import {
  MatPaginator,
  MatTableDataSource,
  MatSidenav
} from '@angular/material';
import { merge, of as observableOf } from 'rxjs';
import { catchError, map, startWith, switchMap } from 'rxjs/operators';
import { SearchComponent } from '../../component';
import { PerformanceService } from './performance.service';

@Component({
  selector: 'apm-performance',
  templateUrl: './performance.component.html',
  styleUrls: ['./performance.component.scss']
})
export class PerformanceComponent implements OnInit {
  displayedColumns: string[] = [
    'url',
    'load_time',
    'white_time',
    'dom_time',
    'analysisDom_time',
    'dns_time',
    'tcp_time',
    'redirect_time',
    'unload_time',
    'request_time',
    'ready_time',
    'create_time',
    'start'
  ];
  dataSource: any = new MatTableDataSource([]);

  resultsLength = 0;
  isLoadingResults = true;
  isRateLimitReached = false;

  devicesDataSource = [];
  eventDataSource = [];

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSidenav, { static: true }) sidenav: MatSidenav;
  @ViewChild(SearchComponent, { static: true }) search: SearchComponent;

  analysisDom_time = 62;
  count = 13;
  dns_time = 0;
  dom_time = 72.38461538461539;
  load_time = 134.15384615384616;
  ready_time = 4.538461538461538;
  request_time = 4.923076923076923;
  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() {
    this.search.onSearch.subscribe(() => (this.paginator.pageIndex = 0));

    merge(this.search.onSearch, this.paginator.page)
      .pipe(
        startWith({}),
        switchMap(search => {
          return this.service.getList(this.paginator.pageIndex, search);
        }),
        map(data => {
          this.isLoadingResults = false;
          this.isRateLimitReached = false;
          this.resultsLength = data.data.totalNum;
          return data.data.datalist;
        }),
        catchError(() => {
          this.isLoadingResults = false;
          this.isRateLimitReached = true;
          return observableOf([]);
        })
      )
      .subscribe(data => (this.dataSource = data));

    this.dataBrowserChart.push({ name: 'Chrome', value: 13 });
    this.dataBrowserChart.push({ name: 'IE', value: 1 });
  }

  onRowClicked(row) {
    console.log(row);
  }

  onDetailClicked(row) {
    this.router.navigateByUrl(`${this.router.url}/${row._id}`);
  }
}
Copy
<div fxLayout="row wrap" fxLayoutGap="12px grid">
  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="load_time / 1000 | number: '0.3-3'"
      icon="group_add"
      backgroundcolor="linear-gradient(-134deg, #8C99E0 0%, #6572B8 100%)"
      textcolor="white"
      property="平均加载耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>
  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="white_time | number: '0.3-3'"
      icon="pageview"
      backgroundcolor="linear-gradient(-134deg, #4DD0E2 0%, #4CA8BA 100%)"
      textcolor="white"
      property="平均白屏耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="dom_time | number: '0.3-3'"
      icon="monetization_on"
      backgroundcolor="linear-gradient(-134deg, #81C683 0%, #62A864 100%)"
      textcolor="white"
      property="平均DOM构建耗时"
      changeicon="trending_down"
      valuesubfix="s"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="count"
      icon="playlist_add"
      backgroundcolor="linear-gradient(-134deg, #EAC459 0%, #DCAC3F 100%)"
      textcolor="white"
      property="调用次数"
      changeicon="trending_up"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="analysisDom_time | number: '0.3-3'"
      icon="group_add"
      backgroundcolor="linear-gradient(-134deg, #ff6e40 0%, #8e24aa 100%)"
      textcolor="white"
      property="平均解析DOM耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="dns_time | number: '0.3-3'"
      icon="pageview"
      backgroundcolor="linear-gradient(45deg, #FF5252 0%, #f48fb1 100%)"
      textcolor="white"
      property="平均DNS解析耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="tcp_time | number: '0.3-3'"
      icon="monetization_on"
      backgroundcolor="linear-gradient(45deg, #ff6f00 0%, #ffca28 100%)"
      textcolor="white"
      property="平均TCP连接耗时"
      changeicon="trending_down"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="request_time | number: '0.3-3'"
      icon="playlist_add"
      backgroundcolor="linear-gradient(45deg, #43A047 0%, #1de9b6 100%)"
      textcolor="white"
      property="平均request请求耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="ready_time | number: '0.3-3'"
      icon="playlist_add"
      backgroundcolor="linear-gradient(to bottom right,#8200fb,#c000ff)"
      textcolor="white"
      property="平均页面准备耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>
</div>

<div class="m-t-12 m-b-12">
  <div fxLayout="row wrap" fxLayoutGap="12px grid">
    <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 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>
</div>

<stbui-search
  placeholder="输入资源名称"
  class="mat-elevation-z4 m-b-16"
></stbui-search>

<div class="mat-elevation-z4">
  <div class="table-container">
    <table class="table-hover" mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="url">
        <th mat-header-cell *matHeaderCellDef>URL</th>
        <td mat-cell *matCellDef="let element">{{ element.url }}</td>
      </ng-container>

      <ng-container matColumnDef="load_time">
        <th mat-header-cell *matHeaderCellDef>页面加载时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.load_time / 1000 | number: '0.3-3' }}s
        </td>
      </ng-container>

      <ng-container matColumnDef="white_time">
        <th mat-header-cell *matHeaderCellDef>白屏时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.white_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="dom_time">
        <th mat-header-cell *matHeaderCellDef>DOM构建时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.dom_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="analysisDom_time">
        <th mat-header-cell *matHeaderCellDef>解析dom耗时</th>
        <td mat-cell *matCellDef="let element">
          {{ element.analysisDom_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="dns_time">
        <th mat-header-cell *matHeaderCellDef>DNS解析时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.dns_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="tcp_time">
        <th mat-header-cell *matHeaderCellDef>TCP连接时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.tcp_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="redirect_time">
        <th mat-header-cell *matHeaderCellDef>页面重定向时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.redirect_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="unload_time">
        <th mat-header-cell *matHeaderCellDef>unload时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.unload_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="request_time">
        <th mat-header-cell *matHeaderCellDef>request请求耗时</th>
        <td mat-cell *matCellDef="let element">
          {{ element.request_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="ready_time">
        <th mat-header-cell *matHeaderCellDef>页面准备时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.ready_time | number: '0.2-2' }}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="create_time">
        <th mat-header-cell *matHeaderCellDef>页面请求时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.create_time | date: 'yyyy-MM-dd hh:mm:ss' }}
        </td>
      </ng-container>

      <ng-container matColumnDef="start">
        <th mat-header-cell *matHeaderCellDef>操作</th>
        <td
          mat-cell
          *matCellDef="let element"
          (click)="onDetailClicked(element); $event.stopPropagation()"
        >
          详情
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr
        mat-row
        *matRowDef="let row; columns: displayedColumns"
        (click)="onRowClicked(row)"
      ></tr>
    </table>
  </div>

  <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
</div>
Copy

./performance.component.scss 

:host {
  display: block;
  margin: 24px;
}

.table-container {
  position: relative;
  overflow: auto;
}

table {
  width: 100%;
}

.chart-container {
  min-height: 400px;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""