components/src/dev-app/performance/performance-demo.html at main · angular/components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<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>

}

}