src/dev-app/performance/performance-demo.html - main - githubmirror/components

src/dev-app/performance/performance-demo.html
100 строк3 KB
Kristiyan Kostadinov
refactor(multiple): switch button selectors
14 мар 2025, 09:04
14 мар 2025, 09:04103ac7c
<p class="demo-disclaimer">
  <mat-icon color="warn">warning</mat-icon>
  Disclaimer: This is an approximate measurement, for more precise performance benchmarking use
  Chrome devtools
</p>

<div>
  <mat-form-field appearance="outline" style="margin-right: 32px">
    <mat-label>Sample size</mat-label>
    <mat-select [(value)]="sampleSize" [disabled]="isRunningBenchmark">
      <mat-option [value]="1">1</mat-option>
      <mat-option [value]="10">10</mat-option>
      <mat-option [value]="100">100</mat-option>
      <mat-option [value]="1000">1000</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field appearance="outline">
    <mat-label>Component count</mat-label>
    <mat-select
      [(value)]="componentCount"
      [disabled]="isRunningBenchmark"
      (selectionChange)="componentArray = [].constructor(componentCount)"
    >
      <mat-option [value]="1">1</mat-option>
      <mat-option [value]="10">10</mat-option>
      <mat-option [value]="100">100</mat-option>
      <mat-option [value]="1000">1000</mat-option>
    </mat-select>
  </mat-form-field>
</div>

<div class="demo-table-and-paginator-container">
  <div class="demo-table-container">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <ng-container matColumnDef="index">
        <th mat-header-cell *matHeaderCellDef>No.</th>
        <td mat-cell *matCellDef="let item">{{ item.index }}</td>
        <td mat-footer-cell *matFooterCellDef>
          @if (allSamples.length) {

            <strong>Average render time</strong>

}
          @if (!allSamples.length) {
 No data yet
}
        </td>
      </ng-container>

      <ng-container matColumnDef="time">
        <th mat-header-cell *matHeaderCellDef>Time</th>
        <td mat-cell *matCellDef="let item">{{ item.time }}</td>
        <td mat-footer-cell *matFooterCellDef>
          <strong>{{ computedResults }}</strong>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
    </table>
  </div>
  <mat-divider></mat-divider>
  <mat-paginator
    [pageSizeOptions]="[10, 50, 100]"
    [pageSize]="100"
    showFirstLastButtons
    [disabled]="isRunningBenchmark"
  ></mat-paginator>
</div>

@if (allSamples.length) {
<button
  color="accent"
  matButton
  (click)="clearMetrics()"
  [disabled]="isRunningBenchmark"
  style="margin-right: 32px"

>
  Clear Metrics
</button>
}

<button color="primary" matButton="elevated" (click)="runBenchmark()" [disabled]="isRunningBenchmark">
  Run Benchmark
</button>

@if (show) {

  @for (_ of componentArray; track _) {

    <mat-form-field>
      <mat-label>Input</mat-label>
      <input matInput />
    </mat-form-field>

}

}