Stack Trace Visualizer With Angular Flame Graph

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) {
    // ...
  }
}

Preview: