Author: | mgechev |
---|---|
Official Page: | Go to website |
Publish Date: | February 17, 2020 |
License: | MIT |
Description:
An Angular based flame graph component to visualize stack trace on the app.
How to use it:
1. Import the Angular Flame Graph component.
npm i ngx-flamegraph --save
import { NgxFlamegraphModule } from 'ngx-flamegraph'; @NgModule({ imports: [NgxFlamegraphModule], }) export class AppModule {}
2. Use the component in your app.
interface Data { value: number; label: string; children: Data[]; color?: string; } @Component({ selector: 'app-root', template: ` <ngx-flamegraph [data]="data" [frameClick]="handleClick($event)" [frameMouseEnter]="handleMouseEnter($event)" [frameMouseLeave]="handleMouseLeave($event)" siblingLayout="relative" [width]="width" [height]="200"> </ngx-flamegraph> ` }) export class AppComponent implements OnInit { width = window.innerWidth - 100; data = [ { label: 'root', value: 10, children: [ { label: 'foo', value: 8, children: [] }, { label: 'bar', value: 8, color: '#ff0000', children: [] }, ] } ]; handleClick(entry: Data) { // ... } handleMouseEnter(entry: Data) { // ... } handleMouseLeave(entry: Data) { // ... } }