Added functionality to get time series graph for Assets reading [FOGL-1524]

src/app/components/core/asset-readings/assets.module.ts

@@ -11,6 +11,7 @@ import { ChartModule } from '../../common/chart';
 import { NumberInputDebounceModule } from '../../common/number-input-debounce/number-input-debounce.module';
 import { PaginationModule } from '../../common/pagination/pagination.module';
 import { ReadingsGraphComponent } from '../asset-readings/readings-graph/readings-graph.component';
+import { SeriesGraphComponent } from '../asset-readings/series-graph/series-graph.component';
 import { AssetsComponent } from './assets/assets.component';
 
 const routes: Routes = [
@@ -24,7 +25,8 @@ const routes: Routes = [
 @NgModule({
   declarations: [
     AssetsComponent,
-    ReadingsGraphComponent
+    ReadingsGraphComponent,
+    SeriesGraphComponent
   ],
   imports: [
     FormsModule,

src/app/components/core/asset-readings/assets/assets.component.html

@@ -30,13 +30,19 @@
                       <i class="fa fa-line-chart" aria-hidden="true"></i>
                     </a>
                   </td>
+                  <td>
+                    <a (click)="showSeriesGraph(asset.assetCode)" class="is-pulled-right">
+                      <i class="fa fa-bar-chart" aria-hidden="true"></i>
+                    </a>
+                  </td>
                 </tr>
-                <tbody>
+              <tbody>
             </table>
           </ng-container>
         </ng-container>
       </div>
     </div>
   </div>
   <app-readings-graph (notify)='onNotify($event)'></app-readings-graph>
-</div>
+  <app-series-graph (notify)='onNotify($event)'></app-series-graph>
+</div>

src/app/components/core/asset-readings/assets/assets.component.ts

@@ -5,6 +5,7 @@ import { interval } from 'rxjs';
 import { AlertService, AssetsService, PingService } from '../../../../services';
 import { MAX_INT_SIZE, POLLING_INTERVAL } from '../../../../utils';
 import { ReadingsGraphComponent } from '../readings-graph/readings-graph.component';
+import { SeriesGraphComponent } from '../series-graph/series-graph.component';
 
 @Component({
   selector: 'app-assets',
@@ -21,6 +22,7 @@ export class AssetsComponent implements OnInit, OnDestroy {
   private isAlive: boolean;
 
   @ViewChild(ReadingsGraphComponent) readingsGraphComponent: ReadingsGraphComponent;
+  @ViewChild(SeriesGraphComponent) seriesGraphComponent: SeriesGraphComponent;
 
   constructor(private assetService: AssetsService,
     private alertService: AlertService,
@@ -73,6 +75,14 @@ export class AssetsComponent implements OnInit, OnDestroy {
     this.readingsGraphComponent.toggleModal(true);
   }
 
+  /**
+  * Open series graph modal dialog
+  */
+  public showSeriesGraph(assetCode) {
+    this.seriesGraphComponent.getSeriesGraph(assetCode, false);
+    this.seriesGraphComponent.toggleModal(true);
+  }
+
   public showLoadingSpinner() {
     this.showSpinner = true;
   }

src/app/components/core/asset-readings/series-graph/series-graph.component.css

@@ -0,0 +1,13 @@
+.delete {
+  margin: 0;
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 23px;
+  height: 23px;
+  font-size: 0;
+}
+
+[hidden] {
+  display: none !important;
+}

src/app/components/core/asset-readings/series-graph/series-graph.component.html

@@ -0,0 +1,31 @@
+<div id="series_graph" class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title is-size-5">{{assetCode}}
+      </p>
+      <div class="close">
+        <button class="delete" aria-label="close" (click)="toggleModal(false)"></button>
+      </div>
+    </header>
+    <section class="modal-card-body">
+      <div *ngIf='showGraph' class="columns is-mobile">
+        <div class="column is-two-fifths">
+          <app-number-input-debounce placeholder="time" (value)="setTimeValue($event)" [val]="time"></app-number-input-debounce>
+        </div>
+        <div class="column is-two-fifths">
+          <div class="select is-small">
+            <select #selectedTime (change)="setGroup(selectedTime.value)">
+              <option value="seconds">seconds</option>
+              <option value="minutes">minutes</option>
+              <option value="hours">hours</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <p *ngIf='!showGraph'> Not Available </p>
+      <app-chart *ngIf='showGraph' [type]="assetChartType" [data]="assetReadingValues" [options]="assetChartOptions"
+        #assetChart></app-chart>
+    </section>
+  </div>
+</div>

src/app/components/core/asset-readings/series-graph/series-graph.component.spec.ts

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