Merge pull request #33 from juanfranciscocis/flame_graph

FLAME GRAPH

package.json

@@ -37,6 +37,7 @@
     "leaflet": "^1.9.4",
     "leaflet-ant-path": "^1.3.0",
     "ngx-echarts": "^18.0.0",
+    "ngx-flamegraph": "^0.0.12",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"

src/app/app-routing.module.ts

@@ -107,6 +107,10 @@ const routes: Routes = [
     loadChildren: () => import('./pages/ai/ai.module').then( m => m.AiPageModule),
     ...canActivate(redirectUnauthorizedToLogin),
   },
+  {
+    path: 'flame-graph',
+    loadChildren: () => import('./pages/flame-graph/flame-graph.module').then( m => m.FlameGraphPageModule)
+  },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -13,6 +13,7 @@ import {getAuth, provideAuth} from "@angular/fire/auth";
 import {HttpClientModule} from "@angular/common/http";
 import {NgxEchartsDirective, NgxEchartsModule, provideEcharts} from "ngx-echarts";
 import {getVertexAI, provideVertexAI} from "@angular/fire/vertexai-preview";
+import {NgxFlamegraphModule} from "ngx-flamegraph";
 
 @NgModule({
   declarations: [AppComponent],
@@ -25,6 +26,7 @@ import {getVertexAI, provideVertexAI} from "@angular/fire/vertexai-preview";
     NgxEchartsModule.forRoot({
       echarts: () => import('echarts')
     }),
+    NgxFlamegraphModule
 
   ],
   providers: [

src/app/pages/flame-graph/flame-graph-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { FlameGraphPage } from './flame-graph.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: FlameGraphPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class FlameGraphPageRoutingModule {}

src/app/pages/flame-graph/flame-graph.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { FlameGraphPageRoutingModule } from './flame-graph-routing.module';
+
+import { FlameGraphPage } from './flame-graph.page';
+import {NgxFlamegraphModule} from "ngx-flamegraph";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        IonicModule,
+        FlameGraphPageRoutingModule,
+        NgxFlamegraphModule
+    ],
+  declarations: [FlameGraphPage]
+})
+export class FlameGraphPageModule {}

src/app/pages/flame-graph/flame-graph.page.html

@@ -0,0 +1,20 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>flame-graph</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">flame-graph</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <h3> Responsive </h3>
+  <div class="wrapper-responsive">
+    <ngx-flamegraph [config]="config"></ngx-flamegraph>
+  </div>
+
+
+</ion-content>

src/app/pages/flame-graph/flame-graph.page.scss

@@ -0,0 +1,15 @@
+.wrapper-fixed-width {
+  width: 900px;
+  margin: auto;
+
+}
+
+.wrapper-responsive {
+  width: 100%;
+  margin: auto;
+}
+
+h2, h3 {
+  text-align: center;
+  user-select: none;
+}

src/app/pages/flame-graph/flame-graph.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FlameGraphPage } from './flame-graph.page';
+
+describe('FlameGraphPage', () => {
+  let component: FlameGraphPage;
+  let fixture: ComponentFixture<FlameGraphPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FlameGraphPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/flame-graph/flame-graph.page.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import {FlameGraphConfig} from "ngx-flamegraph";
+import {RawData} from "ngx-flamegraph/lib/utils";
+
+
+@Component({
+  selector: 'app-flame-graph',
+  templateUrl: './flame-graph.page.html',
+  styleUrls: ['./flame-graph.page.scss'],
+})
+export class FlameGraphPage implements OnInit {
+
+  // @ts-ignore
+  config:FlameGraphConfig = {data }
+
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+
+
+}
+
+const data = [
+  {
+    label: 'root',
+    value: 100,
+    children: [
+      {
+        label: 'cpu_usage',
+        value: 10,
+        children: [
+          {
+            label: 'home',
+            value: 40,
+            children: []
+          },
+          {
+            label: 'about us',
+            value: 60,
+            children: []
+          }
+        ]
+      },
+      {
+        label: 'no_usage',
+        value: 100,
+        children: []
+      },
+    ]
+  }
+] as RawData[];