Add Chart.js

package-lock.json

@@ -1552,6 +1552,14 @@
         "semver-intersect": "1.4.0"
       }
     },
+    "@types/chart.js": {
+      "version": "2.9.30",
+      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.30.tgz",
+      "integrity": "sha512-EgjxUUZFvf6ls3kW2CwyrnSJhgyKxgwrlp/W5G9wqyPEO9iFatO63zAA7L24YqgMxiDjQ+tG7ODU+2yWH91lPg==",
+      "requires": {
+        "moment": "^2.10.2"
+      }
+    },
     "@types/glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -2817,6 +2825,32 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "chart.js": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
+      "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "requires": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
     "chokidar": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz",
@@ -6913,6 +6947,11 @@
       "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
       "dev": true
     },
+    "lodash-es": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.20.tgz",
+      "integrity": "sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA=="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -7432,6 +7471,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -7535,6 +7579,16 @@
         "tslib": "^2.0.0"
       }
     },
+    "ng2-charts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-2.4.2.tgz",
+      "integrity": "sha512-mY3C2uKCaApHCQizS2YxEOqQ7sSZZLxdV6N1uM9u/VvUgVtYvlPtdcXbKpN52ak93ZE22I73DiLWVDnDNG4/AQ==",
+      "requires": {
+        "@types/chart.js": "^2.9.24",
+        "lodash-es": "^4.17.15",
+        "tslib": "^2.0.0"
+      }
+    },
     "ngx-clipboard": {
       "version": "14.0.1",
       "resolved": "https://registry.npmjs.org/ngx-clipboard/-/ngx-clipboard-14.0.1.tgz",

package.json

@@ -20,7 +20,9 @@
     "@angular/platform-browser-dynamic": "~11.0.5",
     "@angular/router": "~11.0.5",
     "angularx-qrcode": "^10.0.11",
+    "chart.js": "^2.9.4",
     "ng-push-ivy": "^1.0.7",
+    "ng2-charts": "^2.4.2",
     "ngx-clipboard": "^14.0.1",
     "ngx-socket-io": "^3.2.0",
     "rxjs": "~6.6.0",

src/app/app.module.ts

@@ -19,6 +19,8 @@ import { LoginComponent } from './dashboard/login/login.component';
 import { FormsModule } from '@angular/forms';
 import { OverviewComponent } from './dashboard/overview/overview.component';
 import { DashboardHeaderComponent } from './dashboard/header/header.component';
+import { ChartComponent } from './dashboard/chart/chart.component';
+import { ChartsModule } from 'ng2-charts';
 
 const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} };
 
@@ -34,7 +36,8 @@ const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} };
     DashboardComponent,
     LoginComponent,
     OverviewComponent,
-    DashboardHeaderComponent
+    DashboardHeaderComponent,
+    ChartComponent
   ],
   imports: [
     BrowserModule,
@@ -45,7 +48,8 @@ const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} };
     PushNotificationsModule,
     ClipboardModule,
     FormsModule,
-    SocketIoModule.forRoot(config)
+    SocketIoModule.forRoot(config),
+    ChartsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/dashboard/chart/chart.component.html

@@ -0,0 +1,2 @@
+<script src="node_modules/chart.js/src/chart.js"></script>
+<h1>Test</h1>

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

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

src/app/dashboard/chart/chart.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-chart',
+  templateUrl: './chart.component.html',
+  styleUrls: ['./chart.component.css']
+})
+export class ChartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/dashboard/dashboard.component.html

@@ -1,3 +1,4 @@
 <dashboard-header></dashboard-header>
+<dashboard-chart></dashboard-chart>
 <div class="bg"></div>
 <router-outlet></router-outlet>