<mat-sidenav-container class="collection-container">
  <mat-sidenav #sidenav mode="over" position="end">
    <!-- <button mat-icon-button (click)="sidenav.toggle()">
      <mat-icon>close</mat-icon>
    </button> -->

    <apm-collection-detail
      [eventDataSource]="eventDataSource"
      [devicesDataSource]="devicesDataSource"
    ></apm-collection-detail>
  </mat-sidenav>

  <mat-sidenav-content>
    <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]="duration"
          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]="count"
          icon="pageview"
          backgroundcolor="linear-gradient(-134deg, #4DD0E2 0%, #4CA8BA 100%)"
          textcolor="white"
          property="调用次数"
          changeicon="trending_up"
          valuesubfix="次"
        ></stb-widget-state>
      </div>

      <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
        <stb-widget-state
          [value]="body_size"
          icon="monetization_on"
          backgroundcolor="linear-gradient(-134deg, #81C683 0%, #62A864 100%)"
          textcolor="white"
          property="Body大小"
          changeicon="trending_down"
        ></stb-widget-state>
      </div>
    </div>

    <mat-card class="m-b-20 m-t-20">
      <mat-card-header>
        <mat-card-title>性能分析</mat-card-title>
      </mat-card-header>
      <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
      placeholder="输入过滤条件"
      class="mat-elevation-z4 m-b-16"
      (onSearch)="onSearchTriggered($event)"
    >
    </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>API地址</th>
            <td mat-cell *matCellDef="let element">{{ element.url }}</td>
          </ng-container>

          <ng-container matColumnDef="method">
            <th mat-header-cell *matHeaderCellDef>请求方式</th>
            <td mat-cell *matCellDef="let element">{{ element.method }}</td>
          </ng-container>

          <ng-container matColumnDef="duration">
            <th mat-header-cell *matHeaderCellDef>请求耗时</th>
            <td mat-cell *matCellDef="let element">{{ element.duration }}</td>
          </ng-container>

          <ng-container matColumnDef="decoded_body_size">
            <th mat-header-cell *matHeaderCellDef>资源大小</th>
            <td mat-cell *matCellDef="let element">
              {{ element.decoded_body_size }}
            </td>
          </ng-container>

          <ng-container matColumnDef="options">
            <th mat-header-cell *matHeaderCellDef>请求参数</th>
            <td mat-cell *matCellDef="let element">{{ element.options }}</td>
          </ng-container>

          <ng-container matColumnDef="call_url">
            <th mat-header-cell *matHeaderCellDef>调用页面</th>
            <td mat-cell *matCellDef="let element">{{ element.call_url }}</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>

          <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>
  </mat-sidenav-content>
</mat-sidenav-container>

./collection.component.scss

.collection-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  mat-sidenav-content {
    padding: 24px;
  }
}

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

table {
  width: 100%;
}

.chart-container {
  min-height: 400px;
}