rangle / angular-devtools

Moved to the Angular organization.
https://github.com/angular/angular/tree/master/devtools
255 stars 18 forks source link

Show bar chart for time spent per component #144

Closed mgechev closed 4 years ago

mgechev commented 4 years ago

In the individual profile frames, together with the flamegraph and treemap views, we can show a bar chart view, where we order the components by time spent.

For example:

[###### 15ms #####] NgForOf
[### 10ms ###] AppComponent
[## 5ms ##] BarComponent
mgechev commented 4 years ago

We can show this view by default once the user stops recording. When the user clicks on any of the bars, in a sidebar on the right we can show all the parents of this component with visjs and the time spent in change detection vs lifecycle hooks, with a pie chart.