unit sensor graphs expandable

src/app/unit/components/unit.component.html

@@ -32,26 +32,37 @@
       </div>
     </div>
   </div>
-  <div class="graph-view-wrapper">
-    <ng-container *ngFor="let group of sensorGroups">
-      <div class="row">
-        <div class="graph-group-heading">
-          Group of
+
+  <p-accordion [multiple]="true" class="graph-view-wrapper">
+    <p-accordionTab *ngFor="let group of sensorGroups">
+
+      <ng-template pTemplate="header">        
+        <div class="graph-group-heading">          
           <ng-container *ngFor="let sensorType of sensorTypes">
             <ng-container *ngIf="sensorType.sensorId.toString().slice(0, 5) === group">
               {{sensorType.sensorType}}
             </ng-container>
           </ng-container>
-          sensors:
+          sensors
         </div>
-        <ng-container *ngFor="let sensor of sensors">
-          <div *ngIf="sensor.sensorId.toString().slice(0, 5) === group" class="p-field-checkbox">
-            <p-checkbox [id]="sensor.sensorId" name="{{group}}" [value]="sensor.sensorId.toString()" [(ngModel)]="selectedSensors" [inputId]="sensor.sensorId.toString()" (onChange)="addSensorToGraph(sensor.sensorId.toString(), $event)"></p-checkbox>
-            <label>{{sensor.sensorName}}</label>
-          </div>
-        </ng-container>
-      </div>
-      <div id="vega_container_{{group}}"></div>
-    </ng-container>
-  </div>
+      </ng-template>
+      
+      <ng-template pTemplate="content">
+
+        <div class="row">
+          <ng-container *ngFor="let sensor of sensors">
+            <div *ngIf="sensor.sensorId.toString().slice(0, 5) === group" class="p-field-checkbox">
+              <p-checkbox [id]="sensor.sensorId" name="{{group}}" [value]="sensor.sensorId.toString()" [(ngModel)]="selectedSensors" [inputId]="sensor.sensorId.toString()" (onChange)="addSensorToGraph(sensor.sensorId.toString(), $event)"></p-checkbox>
+              <label>{{sensor.sensorName}}</label>
+            </div>
+          </ng-container>
+        </div>
+        
+        
+        <div id="vega_container_{{group}}"></div>
+      </ng-template>
+
+    </p-accordionTab>
+  </p-accordion>
+
 </div>

src/app/unit/components/unit.component.scss

@@ -0,0 +1,9 @@
+::ng-deep .p-accordion-header-link{
+    background-color: #F2F2F2 !important;
+    color: black !important;    
+}
+
+::ng-deep .p-accordion-content{
+    background-color: white !important;
+    color: black !important;    
+}

src/app/unit/components/unit.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { map, tap } from 'rxjs/operators';
 import * as moment from 'moment-timezone';
@@ -26,18 +26,18 @@ export class UnitComponent implements OnInit, OnDestroy {
   time = [];
   from: Date = moment().hour(0).minutes(0).subtract(7, 'days').toDate();
   to: Date = moment().toDate();
-  today: Date = moment().toDate();  
+  today: Date = moment().toDate();
   observationsData: any[] = [];
   sensorGroups = [];
   selectedSensors: string[] = [];
-  sensors: Sensor[];  
+  sensors: Sensor[];
   dateChanged = false;
   sensorTypes: SensorType[];
   unitDescription: string;
   subscription: Subscription[] = [];
 
   constructor(
-    private activatedRoute: ActivatedRoute,    
+    private activatedRoute: ActivatedRoute,
     private sensorService: SensorsService,
     private toastService: ToastService,
     private observationService: ObservationService,
@@ -83,7 +83,7 @@ export class UnitComponent implements OnInit, OnDestroy {
       }
     });
     this.sensorService.getSensorTypes().toPromise().then(types => this.sensorTypes = types);
-    this.unitId = parseInt(this.activatedRoute.snapshot.paramMap.get('unitId'), 10);  
+    this.unitId = parseInt(this.activatedRoute.snapshot.paramMap.get('unitId'), 10);
   }
 
   ngOnInit(): void {
@@ -102,7 +102,7 @@ export class UnitComponent implements OnInit, OnDestroy {
   showGraph(changedDate: boolean = true, changedSensor: string = null) {
     const range: Date[] = [this.from, this.to];
     this.getObservations(range, changedDate, changedSensor);
-  } 
+  }
 
   /**
    * Check button handler.

src/app/unit/unit.module.ts

@@ -1,25 +1,27 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { UnitComponent } from './components/unit.component';
-import {NavBarModule} from '../shared/nav-bar/nav-bar.module';
-import {CalendarModule} from 'primeng/calendar';
-import {FormsModule} from '@angular/forms';
-import {ListboxModule} from 'primeng/listbox';
-import {CheckboxModule} from 'primeng/checkbox';
+import { NavBarModule } from '../shared/nav-bar/nav-bar.module';
+import { CalendarModule } from 'primeng/calendar';
+import { FormsModule } from '@angular/forms';
+import { ListboxModule } from 'primeng/listbox';
+import { CheckboxModule } from 'primeng/checkbox';
 import { RouterModule } from '@angular/router';
+import { AccordionModule } from 'primeng/accordion';
 
 
 
 @NgModule({
   declarations: [UnitComponent],
-    imports: [
-      CommonModule,
-      NavBarModule,
-      RouterModule,
-      CalendarModule,
-      FormsModule,
-      ListboxModule,
-      CheckboxModule
-    ]
+  imports: [
+    CommonModule,
+    NavBarModule,
+    RouterModule,
+    CalendarModule,
+    FormsModule,
+    ListboxModule,
+    CheckboxModule,
+    AccordionModule
+  ]
 })
 export class UnitModule { }