feat: Add chart page and print MQ2 data on it

package-lock.json

@@ -1856,9 +1856,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "10.17.13",
+      "version": "10.17.17",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.13.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.17.tgz",
-      "integrity": "sha512-pMCcqU2zT4TjqYFrWtYHKal7Sl30Ims6ulZ4UFXxI4xbtQqK/qqKwkDoBFCfooRqqmRu9vY3xaJRwxSh673aYg==",
+      "integrity": "sha512-gpNnRnZP3VWzzj5k3qrpRC6Rk3H/uclhAVo1aIvwzK5p5cOrs9yEyQ8H/HBsBY0u5rrWxXEiVPQ0dEB6pkjE8Q==",
       "dev": true
     },
     "@types/normalize-package-data": {

package.json

@@ -42,20 +42,21 @@
     "zone.js": "^0.9.1"
   },
   "devDependencies": {
+    "@angular-devkit/build-angular": "^0.801.0",
     "@angular/cli": "~8.1.0",
     "@angular/compiler-cli": "^8.1.0",
     "@angular/language-service": "^8.1.0",
-    "@angular-devkit/build-angular": "^0.801.0",
     "@angularclass/hmr": "^2.1.3",
     "@biesbjerg/ngx-translate-extract": "^2.3.4",
     "@ngx-rocket/scripts": "^4.0.0",
     "@types/jasmine": "^3.3.13",
     "@types/jasminewd2": "^2.0.3",
-    "@types/node": "^10.9.0",
+    "@types/node": "^10.17.17",
     "codelyzer": "^5.1.0",
     "hads": "^1.7.0",
     "htmlhint": "^0.11.0",
     "https-proxy-agent": "^2.0.0",
+    "husky": "^3.0.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.2.0",
@@ -66,18 +67,17 @@
     "karma-jasmine-html-reporter": "^1.4.0",
     "karma-junit-reporter": "^1.2.0",
     "prettier": "^1.16.3",
-    "tslint-config-prettier": "^1.14.0",
-    "stylelint-config-prettier": "^5.1.0",
     "pretty-quick": "^1.10.0",
-    "husky": "^3.0.0",
     "protractor": "~5.4.0",
     "puppeteer": "^1.17.0",
     "stylelint": "~10.1.0",
+    "stylelint-config-prettier": "^5.1.0",
     "stylelint-config-recommended-scss": "~3.3.0",
     "stylelint-config-standard": "~18.3.0",
     "stylelint-scss": "~3.9.0",
     "ts-node": "^8.3.0",
     "tslint": "~5.18.0",
+    "tslint-config-prettier": "^1.14.0",
     "typescript": "~3.4.0"
   },
   "prettier": {

src/app/app-routing.module.ts

@@ -3,7 +3,10 @@ import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
 import { Shell } from '@app/shell/shell.service';
 
 const routes: Routes = [
-  Shell.childRoutes([{ path: 'map', loadChildren: './map/map.module#MapModule' }]),
+  Shell.childRoutes([
+    { path: 'map', loadChildren: './map/map.module#MapModule' },
+    { path: 'chart', loadChildren: './chart/chart.module#ChartModule' }
+  ]),
   // Fallback when no prior route is matched
   { path: '**', redirectTo: '', pathMatch: 'full' }
 ];

src/app/app.module.ts

@@ -13,6 +13,7 @@ import { HomeModule } from './home/home.module';
 import { ShellModule } from './shell/shell.module';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
+import { ChartComponent } from './chart/chart.component';
 
 @NgModule({
   imports: [

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

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { extract } from '@app/core';
+import { ChartComponent } from './chart.component';
+
+const routes: Routes = [
+  // Module is lazy loaded, see app-routing.module.ts
+  { path: '', component: ChartComponent, data: { title: extract('Chart') } }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  providers: []
+})
+export class ChartRoutingModule {}

src/app/chart/chart.component.html

@@ -0,0 +1 @@
+<div id="chartContainer" style="height: 85vh; width: 100%; margin-left:auto;margin-right:auto;"></div>

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

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

src/app/chart/chart.component.ts

@@ -0,0 +1,83 @@
+import { Component, OnInit } from '@angular/core';
+// Dirty fix for `require` type definition
+declare var require: any;
+const CanvasJS = require('../../assets/canvasjs.min');
+import { LogsService } from '@app/logs.service';
+import { interval } from 'rxjs';
+
+@Component({
+  selector: 'app-chart',
+  templateUrl: './chart.component.html',
+  styleUrls: ['./chart.component.scss']
+})
+export class ChartComponent implements OnInit {
+  sub: any;
+
+  constructor(private logsService: LogsService) {}
+
+  dataPoints: any[] = [];
+
+  async ngOnInit() {
+    let dpsLength = 0;
+    let chart = new CanvasJS.Chart('chartContainer', {
+      zoomEnabled: true,
+      animationEnabled: true,
+      exportEnabled: true,
+      title: {
+        text: ''
+      },
+      data: [
+        {
+          type: 'spline',
+          dataPoints: this.dataPoints
+        }
+      ]
+    });
+
+    let data = await this.logsService.getUpdates();
+    let mq2: any = data.map(log => {
+      return log['sensorReadings']['MQ2'];
+    });
+
+    let i = 0;
+    mq2.forEach((value: any) => {
+      this.dataPoints.push({ x: ++i, y: parseInt(value) });
+    });
+    dpsLength = this.dataPoints.length;
+    chart.render();
+    this.sub = interval(1000).subscribe(async val => {
+      let data = await this.logsService.getUpdates();
+      let mq2: any = data.map((log: any) => {
+        return log['sensorReadings']['MQ2'];
+      });
+
+      let j = i;
+      mq2.forEach((value: any) => {
+        this.dataPoints.push({ x: ++j, y: parseInt(value) });
+        dpsLength++;
+      });
+      i = j;
+
+      // if (dataPoints.length >  20 ) {
+      //       dataPoints.shift();
+      //     }
+      chart.render();
+    });
+
+    // async function updateChart(data:any) {
+    //   // let data = await logs.getUpdates();
+    //   let mq2:any = data.map((log:any) => {
+    //     return log["sensorReadings"]["MQ2"];
+    //   });
+    //   $.each(mq2, function(key:any, value:any) {
+    //     dataPoints.push({x: ++i, y: parseInt(value)});
+    //     dpsLength++;
+    //   });
+
+    //   // if (dataPoints.length >  20 ) {
+    //   //       dataPoints.shift();
+    //   //     }
+    //   chart.render();
+    //   }
+  }
+}

src/app/chart/chart.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { ChartRoutingModule } from './chart-routing.module';
+import { ChartComponent } from './chart.component';
+
+@NgModule({
+  imports: [CommonModule, TranslateModule, ChartRoutingModule],
+  declarations: [ChartComponent]
+})
+export class ChartModule {}

src/app/logs.service.ts

@@ -24,15 +24,16 @@ export class LogsService {
   }
 
   async getUpdates(): Promise<Array<Object>> {
+    let prevData = this.previousData;
     if (!this.previousData) {
       let data = await this.getLogs();
       this.previousData = data;
       return data;
     } else {
       let latestData = await this.getLogs();
-      let changes = latestData.filter(function(e) {
+
-        return this.indexOf(e) < 0;
+      var changes = latestData.filter(item1 => !this.previousData.some(item2 => item2['_id'] === item1['_id']));
-      }, this.previousData);
+
       this.previousData = latestData;
       return changes;
     }

src/app/map/map.component.html

@@ -1,13 +1,13 @@
 <div class="container-fluid">
-  <div class="jumbotron text-center">
+  <!-- <div class="jumbotron text-center"> -->
-    <!-- <h1>
+  <!-- <h1>
       <span translate>APP_NAME</span>
     </h1> -->
-    <!-- <p><i class="far fa-bookmark"></i> <span translate>Version</span> {{ version }}</p> -->
+  <!-- <p><i class="far fa-bookmark"></i> <span translate>Version</span> {{ version }}</p> -->
-    <div class="mapDiv">
+  <div class="mapDiv">
-      <div #mapContainer id="map"></div>
+    <div #mapContainer id="map"></div>
-    </div>
   </div>
+  <!-- </div> -->
   <ul>
     <li *ngFor="let log of data; let i = index">{{ log.gps_data.longitude }} | {{ log.gps_data.latitude }}</li>
   </ul>

src/app/map/map.component.scss

@@ -1,5 +1,5 @@
 #map {
-  height: 75vh;
+  height: 85vh;
   width: 100%;
 }
 

tsconfig.json

@@ -11,7 +11,7 @@
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true,
     "target": "es2015",
-    "types": ["node_modules/@types", "googlemaps"],
+    "typeRoots": ["node_modules/@types"],
     "lib": ["es2018", "dom"],
     "baseUrl": "./",
     "paths": {