add graphis

blackrock/package.json

@@ -26,6 +26,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "chart.js": "^3.7.0",
     "faker": "^6.6.6",
     "firebase-tools": "^9.23.3",
     "html2canvas": "^1.4.1",

blackrock/src/app/app-routing.module.ts

@@ -9,11 +9,13 @@ import { ProfileComponent } from './pages/profile/profile.component';
 import { CoursesComponent } from './pages/courses/courses.component';
 import { SpinnerComponent } from './pages/spinner/spinner.component';
 import { AngularFireAuthGuard, redirectLoggedInTo, redirectUnauthorizedTo } from '@angular/fire/compat/auth-guard';
+import { CanvasComponent } from './pages/canvas/canvas.component';
 
 const redirectLoggedInToILogin = () => redirectLoggedInTo(['profile']);
 const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['']);
 const routes: Routes = [
   {  path:"", component:HomeComponent, pathMatch:"full"},
+  {path:"data", component:CanvasComponent, pathMatch:"full"},
   {path:"quiz", component:QuizComponent, pathMatch:"full", canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectLoggedInToILogin }},
   { path:"edit", component:EditProfileComponent, pathMatch:"full", canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectUnauthorizedToLogin }},
    {path:"results", component:ResultsComponent, pathMatch:"full", canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectLoggedInToILogin }},

blackrock/src/app/app.module.ts

@@ -46,6 +46,7 @@ import { SpinnerComponent } from './pages/spinner/spinner.component';
 import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
 import { ShareIconsModule } from 'ngx-sharebuttons/icons';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
+import { CanvasComponent } from './pages/canvas/canvas.component';
 
 
 @NgModule({
@@ -74,6 +75,7 @@ import {MatSnackBarModule} from '@angular/material/snack-bar';
     EditProfileComponent,
     QuizMainComponent,
     SpinnerComponent,
+    CanvasComponent,
   ],
   imports: [
     BrowserModule,

blackrock/src/app/pages/canvas/canvas.component.html

@@ -0,0 +1,2 @@
+<canvas #pieCanvas id="pieCanvas" style="height: 20vh; width: 40vw"></canvas>
+<canvas #barraCanvas id="barCanvas" style="height: 20vh; width: 40vw"></canvas>

blackrock/src/app/pages/canvas/canvas.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CanvasComponent } from './canvas.component';
+
+describe('CanvasComponent', () => {
+  let component: CanvasComponent;
+  let fixture: ComponentFixture<CanvasComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CanvasComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CanvasComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

blackrock/src/app/pages/canvas/canvas.component.ts

@@ -0,0 +1,140 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import { Chart, registerables } from 'chart.js';
+import { FakeAPIService } from 'src/app/services/fake-api.service';
+
+@Component({
+  selector: 'app-canvas',
+  templateUrl: './canvas.component.html',
+  styleUrls: ['./canvas.component.scss'],
+})
+export class CanvasComponent implements AfterViewInit {
+  @ViewChild('#pieCanvas')
+  women = 0;
+  men = 0;
+  noasnwerGender = 0;
+  chart: any;
+  nivel1 = 0;
+  nivel2 = 0;
+  nivel3 = 0;
+  nivel4 = 0;
+  nivel5 = 0;
+
+  constructor(
+    private apiservice: FakeAPIService,
+    private elementRef: ElementRef
+  ) {
+    Chart.register(...registerables);
+  }
+
+  ngAfterViewInit() {
+    this.apiservice.getAllUsersData().subscribe((data: any) => {
+      const women = data.filter((item: any) => item.gender === 'Mujer');
+      const men = data.filter((item: any) => item.gender === 'Hombre');
+      const noanswer = data.filter(
+        (item: any) => item.gender === 'Prefiero no responder'
+      );
+      const nivel1 = data.filter((item: any) => item.level === 'Iniciado Jedi');
+      const nivel2 = data.filter((item: any) => item.level === 'Padawan Jedi');
+      const nivel3 = data.filter(
+        (item: any) => item.level === 'Caballero Jedi'
+      );
+      const nivel4 = data.filter((item: any) => item.level === 'Maestro Jedi');
+      const nivel5 = data.filter((item: any) => item.level === 'Maestro Yoda');
+
+      this.women = women.length;
+      this.men = men.length;
+      this.noasnwerGender = noanswer.length;
+      this.nivel1 = nivel1.length;
+      this.nivel2 = nivel2.length;
+      this.nivel3 = nivel3.length;
+      this.nivel4 = nivel4.length;
+      this.nivel5 = nivel5.length;
+      this.createCanva();
+      this.createBar();
+    });
+  }
+  createCanva(): void {
+    const ctx = this.elementRef.nativeElement
+      .querySelector('#pieCanvas')
+      .getContext('2d');
+    this.chart = new Chart(ctx, {
+      type: 'doughnut',
+      data: {
+        labels: ['Mujer', 'Hombre', 'Prefiero no responder'],
+        datasets: [
+          {
+            backgroundColor: ['#008B5C', '#FD9BB4', '#FECE00'],
+            data: [this.women, this.men, this.noasnwerGender],
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        plugins: {
+          legend: {
+            position: 'top',
+          },
+          title: {
+            display: true,
+            text: 'Registros por sexo',
+          },
+        },
+      },
+    });
+  }
+  createBar(): void {
+    const ctx = this.elementRef.nativeElement
+      .querySelector('#barCanvas')
+      .getContext('2d');
+    this.chart = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: [
+          'Iniciado Jedi',
+          'Padawan Jedi',
+          'Caballero Jedi',
+          'Maestro Jedi',
+          'Maestro Yoda',
+        ],
+        datasets: [
+          {
+            backgroundColor: [
+              '#C80058',
+              '#6D3FA2',
+              '#008B5C',
+              '#FD9BB4',
+              '#FECE00',
+            ],
+            data: [
+              this.nivel1,
+              this.nivel2,
+              this.nivel3,
+              this.nivel4,
+              this.nivel5,
+            ],
+            borderWidth: 1,
+            label: 'Usuarios por nivel',
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        plugins: {
+          legend: {
+            position: 'top',
+          },
+          title: {
+            display: true,
+            text: 'Usuarios por nivel',
+          },
+        },
+      },
+    });
+  }
+}

blackrock/src/app/pages/profile/profile.component.html

@@ -55,3 +55,4 @@ <h3 routerLink="/courses">Continúa con tu entrenamiento</h3>
     </div>
   </section>
 </main>
+<canvas id="sexGraphic"></canvas>

blackrock/src/app/pages/profile/profile.component.ts

@@ -5,6 +5,7 @@ import { FakeAPIService } from 'src/app/services/fake-api.service';
 import { FirebaseService } from 'src/app/services/firebase.service';
 import { jsPDF } from 'jspdf';
 import 'jspdf-autotable';
+import { Chart } from 'chart.js';
 
 @Component({
   selector: 'app-profile',
@@ -22,6 +23,10 @@ export class ProfileComponent implements OnInit {
   leftCourses = 0;
   goal = '';
   coursesToShow = [] as any;
+  women = 0;
+  men = 0;
+  noanswerGender = 0;
+  chart: any;
   doc = new jsPDF({
     orientation: 'l',
     unit: 'mm',
@@ -53,17 +58,7 @@ export class ProfileComponent implements OnInit {
 
   ngOnInit() {
     this.getUserData();
-    console.log(this.userLevel);
-
-    this.apiservice.getAllUsersData().subscribe((data: any) => {
-      let content = data;
-
-      for (let element of content) {
-        let valores = Object.values(element);
-
-        this.values.push(valores);
-      }
-    });
+
   }
 
   getUserData() {
@@ -102,4 +97,5 @@ export class ProfileComponent implements OnInit {
     });
     this.doc.save('tableOfUsers.pdf');
   }
+  createGraphicBySex() {}
 }