Add dashboard component with chart.js

package-lock.json

@@ -17,6 +17,7 @@
         "@angular/platform-browser-dynamic": "^15.0.0",
         "@angular/router": "^15.0.0",
         "bootstrap": "^5.2.3",
+        "chart.js": "^4.0.1",
         "jquery": "^3.6.1",
         "md-select": "^0.0.1-alpha.1",
         "ng-multiselect-dropdown": "^0.3.9",
@@ -3711,6 +3712,14 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "node_modules/chart.js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.0.1.tgz",
+      "integrity": "sha512-5/8/9eBivwBZK81mKvmIwTb2Pmw4D/5h1RK9fBWZLLZ8mCJ+kfYNmV9rMrGoa5Hgy2/wVDBMLSUDudul2/9ihA==",
+      "engines": {
+        "pnpm": "^7.0.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -13757,6 +13766,11 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "chart.js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.0.1.tgz",
+      "integrity": "sha512-5/8/9eBivwBZK81mKvmIwTb2Pmw4D/5h1RK9fBWZLLZ8mCJ+kfYNmV9rMrGoa5Hgy2/wVDBMLSUDudul2/9ihA=="
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",

package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser-dynamic": "^15.0.0",
     "@angular/router": "^15.0.0",
     "bootstrap": "^5.2.3",
+    "chart.js": "^4.0.1",
     "jquery": "^3.6.1",
     "md-select": "^0.0.1-alpha.1",
     "ng-multiselect-dropdown": "^0.3.9",

src/app/app-routing.module.ts

@@ -9,9 +9,11 @@ import {StationComponent} from "./station/station.component";
 import {SensorComponent} from "./station/sensor/sensor.component";
 import {ClientComponent} from "./station/client/client.component";
 import {HostComponent} from "./station/host/host.component";
+import {DashboardComponent} from "./dashboard/dashboard.component";
 
 const routes: Routes = [
-  {path: '', redirectTo: 'login', pathMatch: 'full'},
+  {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
+  {path: 'dashboard', component: DashboardComponent},
   {path: 'login', component: LoginComponent},
   {path: 'signup', component: SignupComponent},
   {path: 'admin', component: AdminDashboardComponent, canActivate: [RoleGuard], data: {roles: ['ROLE_ADMIN']}},

src/app/app.component.html

@@ -4,7 +4,7 @@
     <ng-container *ngIf="isLoggedIn">
       <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
         <div class="navbar-nav">
-          <div class="nav-item nav-link active" href="#">Home</div>
+          <button type="button" class="btn btn-success" (click)="navigate(5)">Home</button>
           <div *ngIf="isAdmin">
             <button type="button" class="btn btn-success" (click)="navigate(0)">Stations</button>
             <button type="button" class="btn btn-success" (click)="navigate(1)">Hosts</button>

src/app/app.component.ts

@@ -69,6 +69,8 @@ export class AppComponent {
       this.router.navigate(['/station/sensor']);
     } else if (i === 4){
       this.router.navigate(['/admin']);
+    } else if (i === 5){
+      this.router.navigate(['/']);
     }
   }
 }

src/app/app.module.ts

@@ -13,6 +13,7 @@ import {ClientComponent} from "./station/client/client.component";
 import {SensorComponent} from "./station/sensor/sensor.component";
 import {HostComponent} from "./station/host/host.component";
 import {EventEmitterService} from "./shared/event.emitter.service";
+import { DashboardComponent } from './dashboard/dashboard.component';
 
 @NgModule({
   declarations: [
@@ -23,7 +24,8 @@ import {EventEmitterService} from "./shared/event.emitter.service";
     StationComponent,
     HostComponent,
     ClientComponent,
-    SensorComponent
+    SensorComponent,
+    DashboardComponent
   ],
   imports: [
     BrowserModule,

src/app/dashboard/dashboard.component.html

+<div class="container">
+  <canvas id="myChart"></canvas>
+</div>

src/app/dashboard/dashboard.component.spec.ts

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

src/app/dashboard/dashboard.component.ts

+import {Component, OnInit} from '@angular/core';
+import { Chart, registerables } from 'chart.js/auto';
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.css']
+})
+
+export class DashboardComponent implements OnInit {
+
+  ngOnInit() {
+
+    const myChart: any = new Chart('myChart', {
+      type: 'line',
+      data: {
+        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',],
+        datasets: [{
+          label: "Sales",
+          data: ['467', '576', '572', '79', '92',
+            '574', '573', '576'],
+          backgroundColor: 'blue'
+        },
+          {
+            label: "Profit",
+            data: ['542', '542', '536', '327', '17',
+              '0.00', '538', '541'],
+            backgroundColor: 'limegreen'
+          }]
+      },
+      options: {
+        aspectRatio: 2.5
+      }
+    });
+  }
+}