Inicio con el filtrado

Frontend/client/src/app/app.component.html

+<h1 class="app_title">{{title}}</h1> 
+<div>
+    <div class="filters">
+        <h3 class="section_title">Filtrado de Comunidades</h3>
+        <span class="select_all_span">
+            <input id="allElements" type="checkbox" (change)="checkUncheckAll()" [(ngModel)]="allSelected"/>
+            <label for="allElements">Seleccionar todos</label>
+        </span>
+
+        <br> <br>
+
+        <div class="filter_elements_container">
+            <div *ngFor="let e of filterElements; index as i">
+                <input id="checkbox{{i}}" type="checkbox" (change)="isAllSelected()" [(ngModel)]="e.isAllSelected"/>
+                <label for="checkbox{{i}}">{{e.value}}</label>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div>
     <app-line-chart></app-line-chart>
+</div> 
\ No newline at end of file

Frontend/client/src/app/app.component.ts

-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DataService } from 'src/app/service/data.service';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'client';
+export class AppComponent implements OnInit {
+  dataService: DataService = new DataService;
+  
+  title = ' Visualización de publicaciones';
+
+  allSelected!: boolean
+
+  filterElements!: any[]
+  categoriesSelected!: string[]
+
+  ngOnInit(): void{
+    this.allSelected = true
+    this.inicializar()
+  }
+
+  inicializar(): void{
+    this.filterElements = []
+    let comunidades = this.dataService.COMUNIDADES;
+    for(let element of comunidades ) {
+      this.filterElements.push({ value: element, isSelected: true })
+    }
+    this.getCheckedItemList()
+  }
+
+  checkUncheckAll() {
+    for (let element of this.filterElements) {
+      element.isSelected = this.allSelected
+    }
+
+    this.getCheckedItemList()
+  }
+  isAllSelected() {
+    this.allSelected = this.filterElements.every(e => e.isSelected === true)
+    this.getCheckedItemList()
+  }
+
+  getCheckedItemList() {
+    this.categoriesSelected = []
+    for (let element of this.filterElements) {
+      if(element.isSelected) {
+        this.categoriesSelected.push(element.value)
+      }
+    }
+  }
 }

Frontend/client/src/app/app.module.ts

@@ -8,6 +8,8 @@ import { LineChartComponent } from './components/line-chart/line-chart.component
 
 import { HttpClientModule } from '@angular/common/http';
 
+import { FormsModule} from '@angular/forms';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -16,7 +18,8 @@ import { HttpClientModule } from '@angular/common/http';
   imports: [
     BrowserModule,
     HttpClientModule,
-    NgChartsModule
+    NgChartsModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

Frontend/client/src/app/components/line-chart/line-chart.component.html

@@ -2,14 +2,13 @@
     <div class="col-12">
         <div class="row">
             <div class="col-5 pl-5 mt-5">
-                <h3> Visionado publicaciones</h3>
+                <h3> Visionado Gráficos de Barras 2D</h3>
                 <br>
-                <button class= "btn btn-outline-primary" (click)="Comunidades()">Graficos Por Comunidades</button>
-                <br> <br>
                 <button class= "btn btn-outline-primary" (click)="GUniversidades()">Graficos Por Universidad</button>
+                <br> <br>
+                <button class= "btn btn-outline-primary" (click)="Comunidades()">Graficos Por Comunidades</button>
             </div>
             <div class="col-5">
-                
                 <div class="chart-wrapper">
                     <canvas baseChart
                     [datasets]="lineChartData"

Frontend/client/src/app/components/line-chart/line-chart.component.ts

@@ -28,7 +28,7 @@ export class LineChartComponent implements OnInit{
     private UniversidadService: UniversidadService
   ) {}
    ngOnInit():void {
-
+    this.Comunidades()
   }
 
    Comunidades() {

Frontend/client/src/app/service/data.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DataService {
+  readonly COMUNIDADES = [
+    'Andalucía', 'Aragón', 'Principado de Asturias' , 'Islas Baleares', 'Canarias', 'Cantabria', 'Castilla - La Mancha', 'Castilla y León',
+    'Cataluña', 'Comunidad Valenciana', 'Extremadura', 'Galicia', 'La Rioja', 'Comunidad de Madrid', 'Región de Murcia',
+    'Comunidad Foral de Navarra', 'País Vasco', 'Ceuta', 'Melilla'
+  ]
+  
+  constructor() { }
+}
\ No newline at end of file