Skip to content
Snippets Groups Projects
Commit 8e160741 authored by Darío de la Torre Guinaldo's avatar Darío de la Torre Guinaldo
Browse files

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

TODO Poner colores diferentes y setear datos en el gráfico de barras
parent d08b631c
No related branches found
No related tags found
No related merge requests found
......@@ -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>
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;
}
}
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%)`;
}
}
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})
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment