nueva distribucion del front

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

-<h1 class="app_title">{{title}}</h1> 
-<div>
+<!--
+<div class="container mt-5 pt-5">
+    <h2 class="app_title">{{title}}</h2>
+    <div class="col-15">
+        <div class="row">
+            <div class="col-5">
                 <div class="filters">
+                    <br> <br> <br>
                     <h3 class="section_title">Filtrado de Comunidades</h3>
                     <span class="select_all_span">
                         <input id="allElements" type="checkbox" (change)="checkUncheckAll()" [(ngModel)]="allSelected"/>
@@ -15,9 +20,47 @@
                             <label for="checkbox{{i}}">{{e.value}}</label>
                         </div>
                     </div>
+                    
+                <br> <br>
+                
+                 </div>
+            </div>
+            <div>
+                <app-line-chart></app-line-chart>
+            </div>
+        </div>
+    </div>
+</div>
+-->
+<div class="container mt-5 pt-5">
+    <h2 class="app_title">{{title}}</h2>
+    <div class="col-15">
+        <div class="row">
+            <div class="col-5">
+                <div class="filters">
+                    <br> <br> <br>
+                    <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>
+            
+                    <div class="filter_elements_container">
+                        <div *ngFor="let e of filterElements; index as i">
+                            <input id="checkbox{{i}}" type="checkbox" (change)="isAllSelected()" [(ngModel)]="isAllSelected"/>
+                            <label for="checkbox{{i}}">{{e.value}}</label>
                         </div>
                     </div>
                     
+                <br> <br>
+                
+                 </div>
+            </div>
             <div>
                 <app-line-chart></app-line-chart>
             </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

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

-<div class="container mt-5 pt-5">
-    <div class="col-12">
-        <div class="row">
-            <div class="col-5 pl-5 mt-5">
+<div class="container">
+    <div class="col-20">
+        <!-- <div class="row"> -->
+           <!-- <div class="col-5 pl-5 mt-5"> --> 
                 <h3> Visionado Gráficos de Barras 2D</h3>
                 <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">
+                <br> <br>
+           <!-- </div> --> 
+            <!-- <div class="col-5"> -->
                 <div class="chart-wrapper">
                     <canvas baseChart
                     [datasets]="lineChartData"
@@ -17,9 +18,7 @@
                     [plugins]="lineChartPlugins"
                     [labels]="lineChartLabels">
                 </canvas>
-                </div>
-
-            </div>
-        </div>
+            <!-- </div> -->
+        <!-- </div> -->
     </div>
 </div>

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

@@ -19,7 +19,7 @@ export class LineChartComponent implements OnInit{
   // Estos datos están aquí por defecto
   lineChartData: ChartDataset[] = [];
   lineChartLabels:string[] = [];
-  lineChartOptions = { responsive: true, };
+  lineChartOptions = { responsive: true};
   lineChartLegend = true;
   lineChartPlugins = [];
   lineChartType = 'line';