# 📊 Performance Monitor Logger - Complete Guide

## Instalação

```bash
npm i performance-monitor-logger --save-dev
```

## Exemplo de Uso

### tela.service.ts

```typescript
import { Injectable } from "@angular/core";
import { PerformanceMonitor } from "performance-monitor-logger"; //<--

@Injectable({ providedIn: "root" })
export class ExemploService {
  constructor() {}

  @PerformanceMonitor() //<--
  async buscarUsuarios() {
    try {
      const usuarios = await this.http.get("/api/usuarios").toPromise();
      return usuarios;
    } catch (error) {
      throw error;
    }
  }

  @PerformanceMonitor() //<--
  async salvarUsuario(usuario: any) {
    try {
      const resultado = await this.http.post("/api/usuarios", usuario).toPromise();
      return resultado;
    } catch (error) {
      throw error;
    }
  }
}
```

### tela.component.ts

```typescript
import { Injectable } from "@angular/core";
import { GlobalPerformanceLogger } from "performance-monitor-logger"; //<--


  constructor() {
    GlobalPerformanceLogger.injectMonitorButton(); //<--
  }


```

### app.module.ts

```typescript
import { PerformanceMonitorInterceptor } from "performance-monitor-logger"; //<--

@NgModule({
  providers: [
    ...{
      provide: HTTP_INTERCEPTORS, //<--
      useClass: PerformanceMonitorInterceptor, //<--
      multi: true, //<--
    },
  ],
})
export class AppModule {}
```

## Resultado esperado:

### No console você verá:

![Logs](./projects/performance-monitor-logger/src/lib/img/1.png)
![análise detalhada](./projects/performance-monitor-logger/src/lib/img/2.png)
![relatório de performance](./projects/performance-monitor-logger/src/lib/img/3.png)
![relatório de requisição](./projects/performance-monitor-logger/src/lib/img/4.png)