Funciona el seteo de datos en el gráfico de sectores.

TODO Poner colores diferentes y setear datos en el gráfico de barras

src/app/dash/dash.component.html

@@ -16,7 +16,7 @@
     </mat-grid-tile>
     <mat-grid-tile [colspan]="( cardLayout | async )?.filtros.cols" [rowspan]="( cardLayout | async )?.filtros.rows">
       <app-card title="Menú de filtros">
-        <app-menu-filtros></app-menu-filtros>
+        <app-menu-filtros (actualizar)="recibirCambioOpcion($event)"></app-menu-filtros>
       </app-card>     
     </mat-grid-tile>
   </mat-grid-list>

src/app/dash/dash.component.ts

-import { Component } from '@angular/core';
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
 import { map } from 'rxjs/operators';
 import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
+import { GraficoSectoresComponent } from '../grafico-sectores/grafico-sectores.component';
 
 @Component({
   selector: 'app-dash',
@@ -32,4 +33,82 @@ export class DashComponent {
   );
 
   constructor(private breakpointObserver: BreakpointObserver) {}
+  
+  @ViewChild(GraficoSectoresComponent)
+  private graficoSectores: GraficoSectoresComponent;
+
+  year: string;
+  comunidad: string;
+  opcion: string;
+  etiquetasSectores = [];
+  datosSectores = [];
+  etiquetasBarras = [];
+  datosBarras = []; 
+
+  recibirCambioOpcion(object){
+    this.year = object.y;
+    this.comunidad = object.c;
+    this.opcion = object.o;
+    this.actualizarComponentes();
+  }
+
+  actualizarComponentes(){
+    this.getDatosCsv();
+  }
+
+  async getDatosCsv() {
+    this.datosSectores = []
+    this.etiquetasSectores = []
+    const url = "/assets/total_sectores_"+this.year+".csv";
+    const response = await fetch(url);
+    const datos = await response.text();
+    //Quitamos las primeras 7 líneas que son los títulos y el global del país, y la última línea porque está en blanco.  
+    const datosPorLinea = datos.split('\r\n').slice(7).filter(line => line.trim() !== ""); 
+    
+    for(let i=0; i<datosPorLinea.length;i=i+6){
+      switch(this.opcion){
+        case "Inversión en I+D (%)":{
+          var fila = datosPorLinea[i+1];
+          const columna = fila.split(';');
+          this.etiquetasSectores.push(columna[1]);
+          this.datosSectores.push(this.stringNumeroESPtoNumber(columna[3]));
+          break;
+        }
+        case "Inversión en I+D (Total)":{
+          var fila = datosPorLinea[i+0];
+          const columna = fila.split(';');
+          this.etiquetasSectores.push(columna[1]);
+          this.datosSectores.push(this.stringNumeroESPtoNumber(columna[3]));
+          break;
+        }
+        case "Total empleados EJC":{
+          var fila = datosPorLinea[i+2];
+          const columna = fila.split(';');
+          this.etiquetasSectores.push(columna[1]);
+          this.datosSectores.push(this.stringNumeroESPtoNumber(columna[3]));
+          break;
+        }
+        case "TotalInvestigadoresEJC":{
+          var fila = datosPorLinea[i+4];
+          const columna = fila.split(';');
+          this.etiquetasSectores.push(columna[1]);
+          this.datosSectores.push(this.stringNumeroESPtoNumber(columna[3]));
+          break;
+        }
+      }   
+    }
+    console.log(this.datosSectores);
+    console.log(this.etiquetasSectores);
+    this.graficoSectores.updateChart(this.datosSectores, this.etiquetasSectores);
+   }
+
+   stringNumeroESPtoNumber(str:string){
+    var cadena = str.replace(/\./g,'');
+    console.log(cadena);
+    cadena = cadena.replace(/,/g,'.');
+    console.log(cadena);
+    var numero: number = Number(cadena);
+    console.log(numero);
+    return numero;
+   }
 }

src/app/grafico-sectores/grafico-sectores.component.ts

-import { Component, OnInit } from '@angular/core';
-import {Chart} from 'chart.js/auto';
+import { Component, OnInit, Input } from '@angular/core';
+import {Chart, Colors} from 'chart.js/auto';
 
 @Component({
   selector: 'app-grafico-sectores',
@@ -21,28 +21,37 @@ export class GraficoSectoresComponent implements OnInit {
       type: 'pie', //this denotes tha type of chart
 
       data: {// values on X-Axis
-        labels: ['2022-05-10', '2022-05-11', '2022-05-12','2022-05-13',
-								 '2022-05-14', '2022-05-15', '2022-05-16','2022-05-17', ], 
+        labels: [], 
 	       datasets: [
           {
-            label: "Sales",
-            data: ['467','576', '572', '79', '92',
-								 '574', '573', '576'],
-            backgroundColor: 'blue'
+            label: "Prueba",
+            data: [],
           }, 
-          {
-            label: "Profit",
-            data: ['542', '542', '536', '327', '17',
-									 '0.00', '538', '541'],
-            backgroundColor: 'limegreen'
-          }  
         ]
       },
-      options: {
-        aspectRatio:2.5
-      }
       
     });
   }
 
+  updateChart(datos, etiquetas){
+    console.log("ACTUALIZAR GRAFICO SECTORES");
+    console.log(datos);
+    console.log(etiquetas);
+    var colors = [];
+    for(let i=0; i< datos.length; i++){
+      var color = this.selectColor(datos.length);
+      colors.push(color);
+    }
+    console.log(colors);
+    this.graficoSectores.data.datasets[0].data=datos;
+    this.graficoSectores.data.labels=etiquetas;
+    //this.graficoSectores.data.datasets[0].backgroundColor= colors;
+    this.graficoSectores.update();
+  }
+
+  selectColor(number) {
+    const hue = number * 137.508; // use golden angle approximation
+    return `hsl(${hue},50%,75%)`;
+  }
+
 }

src/app/menu-filtros/menu-filtros.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import { MatRadioChange } from '@angular/material/radio';
 import { MatSelectChange } from '@angular/material/select';
 
@@ -22,8 +22,11 @@ export class MenuFiltrosComponent implements OnInit {
   comunidadList: string[] = ['Castilla y León','Madrid','Andalucía'];
   comunidadSelected = this.comunidadList[0];
 
+  @Output() actualizar = new EventEmitter<object>(); 
+
   cambioOpcion($event: MatRadioChange) {
-    console.log($event.source.name, $event.value);
+    console.log($event.value);
+    this.opcionSelected=$event.value;
     this.actualizarDatos();
   }
 
@@ -41,17 +44,9 @@ export class MenuFiltrosComponent implements OnInit {
     var year = this.yearSelected;
     var comunidad = this.comunidadSelected;
     var opcion = this.opcionSelected;
-    this.getDatosCsv(year, comunidad, opcion)
-  }
-
-  async getDatosCsv(year, comunidad, opcion) {
-    const url = "/assets/total_sectores_"+year+".csv";
-    const response = await fetch(url);
-    const datos = await response.text();
-    console.log(datos);
-
-    
-
-
+    console.log(opcion);
+    console.log(year);
+    console.log(comunidad);
+    this.actualizar.emit({y: year, c: comunidad, o:opcion})
   }
 }