conexión con back en las gráficas y mapa de paisaje sonoro

.vscode/settings.json

@@ -1,4 +1,23 @@
 {
   "i18n-ally.localesPaths": ["src/assets/i18n"],
-  "peacock.remoteColor": "#215732"
+  "peacock.remoteColor": "#215732",
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#2f7c47",
+    "activityBar.background": "#2f7c47",
+    "activityBar.foreground": "#e7e7e7",
+    "activityBar.inactiveForeground": "#e7e7e799",
+    "activityBarBadge.background": "#422c74",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "commandCenter.border": "#e7e7e799",
+    "sash.hoverBorder": "#2f7c47",
+    "statusBar.background": "#215732",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#2f7c47",
+    "statusBarItem.remoteBackground": "#215732",
+    "statusBarItem.remoteForeground": "#e7e7e7",
+    "titleBar.activeBackground": "#215732",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveBackground": "#21573299",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  }
 }

src/app/modules/soundscape/components/perception-chart/perception-chart.component.ts

@@ -1,9 +1,11 @@
-import { AfterViewInit, Component, HostListener, Input } from '@angular/core';
+import { Component, HostListener, OnDestroy, OnInit, inject } from '@angular/core';
 import { Observations } from '../../../../models/observations';
 import * as echarts from 'echarts/core';
 import { BarChart, PieChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
 import { GridComponent, LegendComponent } from 'echarts/components';
+import { ObservationsService } from '../../../../services/observations/observations.service';
+import { Subscription } from 'rxjs';
 
 echarts.use([GridComponent, LegendComponent, BarChart, CanvasRenderer,PieChart]);
 
@@ -12,17 +14,19 @@ echarts.use([GridComponent, LegendComponent, BarChart, CanvasRenderer,PieChart])
   templateUrl: './perception-chart.component.html',
   styleUrl: './perception-chart.component.scss'
 })
-export class PerceptionChartComponent implements AfterViewInit{
+export class PerceptionChartComponent implements OnInit, OnDestroy{
 
-  @Input() observations: Observations[];
   @HostListener('window:resize', ['$event'])
   onResize(event: any) {
     this.chart.resize();
   }
+  private observations!: Observations[];
   private chart: echarts.ECharts;
   private option! : echarts.EChartsCoreOption;
   private data:number[][] = [];
   public pie: number = 0;
+  private observationsService = inject(ObservationsService);
+  private observations$!: Subscription;
 
 
   public pieOptions: {value:number, label:string}[] = [
@@ -39,12 +43,24 @@ export class PerceptionChartComponent implements AfterViewInit{
     ['Poc segur', 'Segur', 'Molt segur'],
   ]
 
+
+  ngOnInit(): void {
+    let chartDom = document.getElementById('perceptionChart')!;
+    this.chart = echarts.init(chartDom);
+    this.observations$ = this.observationsService.observations$.subscribe((observations: Observations[]) => {
+      this.observations = observations;
+      this.data = this.getDataFromObservations();
+      this.updateChart();
+    });
+  }
+
   ngAfterViewInit(): void {
     let chartDom = document.getElementById('perceptionChart')!;
     this.chart = echarts.init(chartDom);
     this.data = this.getDataFromObservations();
     this.updateChart();
   }
+
   public updateChart(): void {
     this.option = {
       title: {
@@ -110,4 +126,8 @@ export class PerceptionChartComponent implements AfterViewInit{
     return data;
   }
 
+  ngOnDestroy(): void {
+    this.observations$.unsubscribe();
+  }
+
 }

src/app/modules/soundscape/components/pressure-chart/pressure-chart.component.ts

@@ -1,9 +1,11 @@
-import { AfterViewInit, Component, HostListener, Input } from '@angular/core';
+import { AfterViewInit, Component, HostListener, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import { Observations } from '../../../../models/observations';
 import * as echarts from 'echarts/core';
 import { BarChart, PieChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
 import { GridComponent, LegendComponent } from 'echarts/components';
+import { ObservationsService } from '../../../../services/observations/observations.service';
+import { Subscription } from 'rxjs';
 
 echarts.use([GridComponent, LegendComponent, BarChart, CanvasRenderer,PieChart]);
 
@@ -12,23 +14,32 @@ echarts.use([GridComponent, LegendComponent, BarChart, CanvasRenderer,PieChart])
   templateUrl: './pressure-chart.component.html',
   styleUrl: './pressure-chart.component.scss'
 })
-export class PressureChartComponent implements AfterViewInit {
+export class PressureChartComponent implements OnInit, OnDestroy{
 
-  @Input() observations: Observations[];
+  @HostListener('window:resize', ['$event'])
+  onResize(event: any) {
+    this.chart.resize();
+  }
+  private observations!: Observations[];
   private chart: echarts.ECharts;
   private option! : echarts.EChartsCoreOption;
+  private observationsService = inject(ObservationsService);
+  private observations$!: Subscription;
   public totalObservationTypes:number = 0
   private quietTypesLabel = ['Matí (7:00 - 19:00)', 'Vespre (19:00 - 23:00)', 'Nit (23:00 - 7:00)'];
   private dBLevels = ['< = 35', '35-40', '40-45', '45-50', '50-55', '55-60', '60-65', '65-70', '70-75', '75-80', '> 80'];
 
-  @HostListener('window:resize', ['$event'])
-  onResize(event: any) {
-    this.chart.resize();
-  }
-
-  ngAfterViewInit(): void {
+  ngOnInit(): void {
     let chartDom = document.getElementById('pressureChart')!;
     this.chart = echarts.init(chartDom);
+    this.observations$ = this.observationsService.observations$.subscribe((observations: Observations[]) => {
+      this.observations = observations;
+      this.updateChart();
+    });
+  }
+
+
+  private updateChart(): void {
 
     const rawData:number[][] = this.getDataFromObservations();
 
@@ -139,4 +150,7 @@ export class PressureChartComponent implements AfterViewInit {
     return 10;
 
   }
+  ngOnDestroy(): void {
+    this.observations$.unsubscribe();
+  }
 }

src/app/modules/soundscape/components/quas-chart/quas-chart.component.ts

@@ -1,9 +1,11 @@
-import { AfterViewInit, Component, HostListener, Input } from '@angular/core';
+import { Component, HostListener, OnDestroy, OnInit, inject } from '@angular/core';
 import { Observations } from '../../../../models/observations';
 import * as echarts from 'echarts/core';
 import { BarChart, PieChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
 import { GridComponent, LegendComponent } from 'echarts/components';
+import { ObservationsService } from '../../../../services/observations/observations.service';
+import { Subscription } from 'rxjs';
 
 echarts.use([GridComponent, LegendComponent, BarChart, CanvasRenderer,PieChart]);
 
@@ -12,23 +14,32 @@ echarts.use([GridComponent, LegendComponent, BarChart, CanvasRenderer,PieChart])
   templateUrl: './quas-chart.component.html',
   styleUrl: './quas-chart.component.scss'
 })
-export class QuasChartComponent implements AfterViewInit{
+export class QuasChartComponent implements OnInit, OnDestroy{
 
-  @Input() observations: Observations[];
+  @HostListener('window:resize', ['$event'])
+  onResize(event: any) {
+    this.chart.resize();
+  }
+  private observations!: Observations[];
   private chart: echarts.ECharts;
   private option! : echarts.EChartsCoreOption;
   public totalObservationTypes:number = 0
+  private observationsService = inject(ObservationsService);
+  private observations$!: Subscription;
   private quietTypesLabel = ['Moderament tranquil', 'Bastant tranquil', 'Molt tranquil'];
   private dBLevels = ['< = 35', '35-40', '40-45', '45-50', '50-55', '55-60', '60-65', '65-70', '70-75', '75-80', '> 80'];
 
-  @HostListener('window:resize', ['$event'])
-  onResize(event: any) {
-    this.chart.resize();
-  }
 
-  ngAfterViewInit(): void {
+  ngOnInit(): void {
     let chartDom = document.getElementById('quasChart')!;
     this.chart = echarts.init(chartDom);
+    this.observations$ = this.observationsService.observations$.subscribe((observations: Observations[]) => {
+      this.observations = observations;
+      this.updateChart();
+    });
+  }
+
+  private updateChart(): void {
 
     const rawData:number[][] = this.getDataFromObservations();
 
@@ -133,5 +144,8 @@ export class QuasChartComponent implements AfterViewInit{
 
   }
 
+  ngOnDestroy(): void {
+    this.observations$.unsubscribe();
+  }
 
 }