Merged statistics with visualize

package.json

@@ -26,12 +26,13 @@
     "core-js": "^2.6.3",
     "hammerjs": "^2.0.8",
     "moment": "^2.24.0",
+    "ng-beautiful-gauges": "^6.0.4",
     "rxjs": "^6.2.2",
     "rxjs-compat": "^6.2.2",
     "zone.js": "^0.8.29"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.8.9",
+    "@angular-devkit/build-angular": "^0.13.6",
     "@angular/cli": "^6.2.9",
     "@angular/compiler-cli": "^6.1.10",
     "@angular/language-service": "^6.1.10",

src/app/app.component.html

@@ -1,2 +1,2 @@
 <app-header></app-header>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { GaugesModule } from 'ng-beautiful-gauges';
 
 import { MaterialModule } from './material.module';
 import { AppComponent } from './app.component';
@@ -37,6 +38,7 @@ import { VisualizeOneComponent } from './visualize-one/visualize-one.component';
     MaterialModule,
     BrowserAnimationsModule,
     HttpClientModule,
+    GaugesModule,
     RouterModule.forRoot([
 
     {path: 'dashboard', component: FrontpageComponent},

src/app/services/metrics.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MetricsService } from './metrics.service';
+
+describe('MetricsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: MetricsService = TestBed.get(MetricsService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/metrics.service.ts

@@ -0,0 +1,85 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/throw';
+import 'rxjs/add/operator/catch';
+import { ReplaySubject } from 'rxjs';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MetricsService {
+
+  constructor(private http: HttpClient) { }
+
+  getRecentMetrics(token) {
+
+    let gen_id = localStorage.getItem('gen_id');
+    return this.http.get('http://sd5-backend.engr.uconn.edu/data/query/exp/year/' + gen_id, {
+      headers: {
+        Authorization: 'Bearer ' + token
+      }
+    });
+  }
+
+  getHourMetrics(token) {
+
+    let gen_id = localStorage.getItem('gen_id');
+    return this.http.get('http://sd5-backend.engr.uconn.edu/data/query/exp/hour/' + gen_id, {
+      headers: {
+        Authorization: 'Bearer ' + token
+      }
+    });
+  }
+
+  getDayMetrics(token) {
+
+    let gen_id = localStorage.getItem('gen_id');
+    return this.http.get('http://sd5-backend.engr.uconn.edu/data/query/exp/day/' + gen_id, {
+      headers: {
+        Authorization: 'Bearer ' + token
+      }
+    });
+  }
+
+  getWeekMetrics(token) {
+
+    let gen_id = localStorage.getItem('gen_id');
+    return this.http.get('http://sd5-backend.engr.uconn.edu/data/query/exp/week/' + gen_id, {
+      headers: {
+        Authorization: 'Bearer ' + token
+      }
+    });
+  }
+  getMonthMetrics(token) {
+
+    let gen_id = localStorage.getItem('gen_id');
+    return this.http.get('http://sd5-backend.engr.uconn.edu/data/query/exp/month/' + gen_id, {
+      headers: {
+        Authorization: 'Bearer ' + token
+      }
+    });
+  }
+
+  getYearMetrics(token) {
+
+    let gen_id = localStorage.getItem('gen_id');
+    return this.http.get('http://sd5-backend.engr.uconn.edu/data/query/exp/year/' + gen_id, {
+      headers: {
+        Authorization: 'Bearer ' + token
+      }
+    });
+  }
+
+   getDevMetrics(token) {
+
+    let gen_id = localStorage.getItem('gen_id');
+    return this.http.get('http://localhost:3000/data/query/exp/dev/' + gen_id, {
+      headers: {
+        Authorization: 'Bearer ' + 'eyJhbGciOiJSUzI1NiJ9.eyJpZCI6MywiZW1haWwiOiJ0ZXN0LmFjY291bnRAdWNvbm4uZWR1Iiwib3JnX2lkIjoxLCJmaXJzdF9uYW1lIjoiVGVzdCIsImxhc3RfbmFtZSI6IkFjY291bnQiLCJwZXJtaXNzaW9ucyI6eyIxIjp7ImlkIjo0LCJuYW1lIjoiQ2xpZW50IiwicGVybWlzc2lvbnMiOnsiZ2VuX3JlYWQiOjEsImdlbl9leGVjdXRlIjowLCJkYXRhX3JlYWQiOjEsImRhdGFfZXhwb3J0IjowLCJvcmdfbWFuYWdlIjowfX19fQ.CPMhtApFtRzyPjkRrt5NSVeqWvrn57UI0ifb2QB9rkRE97WvNdCp8h8cAdR-X5Ft5K6jMjXbEsgsmBxEvc6z7Q'
+      }
+    });
+  }
+
+}

src/app/statistics/statistics.component.css

@@ -1,120 +1,28 @@
-.bubble {
-    width: 75px;
-    height: 75px;
-    border-radius: 50%;
-    font-size: 25px;
-    color: #fff;
-    line-height: 0px;
-    background:#00cc66;
-}
-input
+mwl-gauge 
 {
-    background: transparent;
-    border: none;
-    margin-left: 20px;
-    margin-top: 20px
-}
-div {
-    margin: 20px;
-    display: inline-block;
-}
-
-.tg-list {
-  text-align: center;
-  display: flex;
-  align-items: center;
-}
-.tg-list-item {
-  margin: 0 2em;
-}
-.tgl {
-  display: none;
-}
-.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
-  box-sizing: border-box;
-}
-.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
-  background: none;
-}
-.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
-  background: none;
-}
-.tgl + .tgl-btn {
-  outline: 0;
-  display: block;
-  width: 4em;
-  height: 2em;
-  position: relative;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
-  position: relative;
+  width: 150px;
+  height: 150px;
   display: block;
-  content: "";
-  width: 50%;
-  height: 100%;
-}
-.tgl + .tgl-btn:after {
-  left: 0;
+  padding: 10px;
 }
-.tgl + .tgl-btn:before {
-  display: none;
+mwl-gauge > .gauge > .dial {
+  stroke: #eee;
+  stroke-width: 2;
+  fill: rgba(0,0,0,0);
 }
-.tgl:checked + .tgl-btn:after {
-  left: 50%;
+mwl-gauge > .gauge > .value {
+  stroke: rgb(47, 227, 255);
+  stroke-width: 2;
+  fill: rgba(0,0,0,0);
 }
-.tgl-flip + .tgl-btn {
-  padding: 2px;
-  transition: all .2s ease;
+mwl-gauge > .gauge > .value-text {
+  fill: rgb(47, 227, 255);
   font-family: sans-serif;
-  -webkit-perspective: 100px;
-          perspective: 100px;
-}
-.tgl-flip + .tgl-btn:after, .tgl-flip + .tgl-btn:before {
-  display: inline-block;
-  transition: all .4s ease;
-  width: 100%;
-  text-align: center;
-  position: absolute;
-  line-height: 2em;
   font-weight: bold;
-  color: #fff;
-  position: absolute;
-  top: 0;
-  left: 0;
-  -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
-  border-radius: 4px;
-}
-.tgl-flip + .tgl-btn:after {
-  content: attr(data-tg-on);
-  background: #02C66F;
-  -webkit-transform: rotateY(-180deg);
-          transform: rotateY(-180deg);
-}
-.tgl-flip + .tgl-btn:before {
-  background: #FF3A19;
-  content: attr(data-tg-off);
+  font-size: 1em;
 }
-.tgl-flip + .tgl-btn:active:before {
-  -webkit-transform: rotateY(-20deg);
-          transform: rotateY(-20deg);
-}
-.tgl-flip:checked + .tgl-btn:before {
-  -webkit-transform: rotateY(180deg);
-          transform: rotateY(180deg);
-}
-.tgl-flip:checked + .tgl-btn:after {
-  -webkit-transform: rotateY(0);
-          transform: rotateY(0);
-  left: 0;
-  background: #7FC6A6;
-}
-.tgl-flip:checked + .tgl-btn:active:after {
-  -webkit-transform: rotateY(20deg);
-          transform: rotateY(20deg);
+.fusioncharts
+{
+  position: relative;
+  padding: 5px;
 }