Merge pull request #1 from UnravelTEC/develop

Develop
UnravelTEC · May 8, 2020 · 13992f2 · 13992f2
2 parents e767b6b + 52310ac
commit 13992f2
Show file tree

Hide file tree

Showing 14 changed files with 525 additions and 168 deletions.
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -1,3 +1,10 @@
+$mainbg: #1E1E1E;
+$buttontext: #fff;
+$buttontextinactive: #666666;
+$buttonbg: #565656;
+$buttonactivebg: #8E8E8E;
+$buttoninactivebg:#373737;
+
 * {
   font-family: Helvetica, Arial, sans-serif;
   margin: 0;
@@ -13,16 +20,16 @@
   height: 100%;
   flex-direction: column;
   display: flex;
-  background-color: #1E1E1E;
+  background-color: $mainbg;
   color: #C7C7C7;
 
   ::ng-deep button {
     border: 2px solid black;
-    background: #565656;
+    background: $buttonbg;
     padding: 0.5em;
     cursor: pointer;
     min-width: 2.25em;
-    color: white;
+    color: $buttontext;
     .mat-icon {
       margin: 0;
       margin-bottom: -10px;
@@ -31,7 +38,7 @@
     }
   }
   ::ng-deep button:hover {
-    background-color: #8e8e8e;
+    background-color: $buttonactivebg;
   }
   ::ng-deep input[type='text'] {
     padding: 0.3em;

diff --git a/src/app/core/helper-functions.service.ts b/src/app/core/helper-functions.service.ts
@@ -26,6 +26,22 @@ export class HelperFunctionsService {
 
   defaultColorMappings = {};
 
+  avgPresets = [
+    { '15m': 900 },
+    { '30m': 1800 },
+    { '1h': 3600 },
+    { '1d': 86400 },
+    { '7d': 604800 },
+    { '30d': 2592000 }
+  ];
+  keys(o) {
+    // for use in htmls
+    return Object.keys(o);
+  }
+  vals(o) {
+    return Object.values(o);
+  }
+
   constructor(private loc: Location) {
     const url = window.location.href;
     const angularRoute = this.loc.path();
@@ -38,7 +54,8 @@ export class HelperFunctionsService {
         this.colorArray.push(this.colors[colorstr][cWeightI]);
       }
     }
-    this.defaultColorMappings = { // define here to calm down TS
+    this.defaultColorMappings = {
+      // define here to calm down TS
       temperature: 'red',
       humidity: 'blue',
       pressure: 'green',
@@ -306,18 +323,21 @@ export class HelperFunctionsService {
     return labelString;
   }
 
-  exportCSV(data, labels, utc = true) {
+  exportCSV(data, labels, utc = true, missing = true) {
     // header
     const separator = '\t';
     const linebreak = '\n';
-    const dummyDate = new Date();
     console.log('utc:', utc);
 
     let header = '';
     if (labels.length === 0 || data.length === 0) {
       alert('no data to export');
       return;
     }
+    let step = 1000;
+    if (data.length > 1) {
+      step = data[1][0].valueOf() - data[0][0].valueOf();
+    }
     for (let i = 0; i < labels.length; i++) {
       const element = labels[i];
       if (i > 0) {
@@ -339,24 +359,37 @@ export class HelperFunctionsService {
     header += linebreak;
 
     let csvbody = '';
-    for (let i = 0; i < data.length; i++) {
-      const row = data[i];
+    function parseRow(row) {
+      let line = '';
       for (let column = 0; column < row.length; column++) {
         const element = row[column];
-        if (column > 0) {
-          csvbody += separator;
-        }
         if (column === 0) {
-          csvbody += element.valueOf() / 1000;
-          csvbody +=
-            separator + (utc ? element.toUTCString() : element.toString());
+          line += String(element.valueOf() / 1000) + separator;
+          line += utc ? element.toUTCString() : element.toString();
         } else {
-          csvbody += String(element);
+          line += separator + String(element);
+        }
+      }
+      return line + linebreak;
+    }
+    for (let i = 0; i < data.length; i++) {
+      const row = data[i];
+      csvbody += parseRow(row);
+
+      // gap detection
+      if (i > 2 && i < data.length - 1) {
+        let currentTS = row[0].valueOf();
+        let nextTS = data[i + 1][0].valueOf();
+        while (currentTS + step < nextTS) {
+          currentTS += step;
+          const row = [new Date(currentTS)];
+          for (let c = 1; c < labels.length; c++) {
+            row.push(null);
+          }
+          csvbody += parseRow(row);
         }
       }
-      csvbody += linebreak;
     }
-    // values
 
     const csv = header + csvbody;
     // console.log(csv);
@@ -569,4 +602,20 @@ export class HelperFunctionsService {
 
     return (textDays + textHours + textMinutes + textSeconds + textMS).trim();
   }
+
+  deepCopyInto(firstObj, secondObj) {
+    for (const key in secondObj) {
+      if (secondObj.hasOwnProperty(key)) {
+        const element = secondObj[key];
+        if (typeof element !== 'object' || element === null) {
+          firstObj[key] = element;
+        } else {
+          if (!firstObj.hasOwnProperty(key))
+            firstObj[key] = { noooooo: 'noooooo' }; // hack to create nonempty obj
+          this.deepCopyInto(firstObj[key], element);
+          delete firstObj['noooooo'];
+        }
+      }
+    }
+  }
 }
diff --git a/src/app/shared/ut-dygraph-in/ut-dygraph-in.component.html b/src/app/shared/ut-dygraph-in/ut-dygraph-in.component.html
@@ -25,20 +25,6 @@
       </div>
     </div>
 
-    <div
-      class="fromDate"
-      *ngIf="showDate == true"
-      [style.transform]="'translateX(' + yO + 'px)'"
-    >
-      {{ fromZoom | date: 'shortDate' }}
-    </div>
-    <div
-      class="toDate {{ y2Range[1] === undefined ? 'noy2' : '' }}"
-      *ngIf="showDate == true"
-      [style.transform]="'translateX(-' + y2O + 'px)'"
-    >
-      {{ toZoom | date: 'shortDate' }}
-    </div>
     <div
       class="overlapTickTexthider y1"
       [style.transform]="'translateX(' + yO + 'px)'"
@@ -87,7 +73,7 @@
     <div
       class="y2min {{ XLabel == '' ? 'noxlabel' : '' }}"
       *ngIf="dyGraphOptions['drawAxis'] !== false && y2Range[0] !== undefined"
-      [style.transform]="'translateX(-' + y2O + 'px)'"
+      [style.border-right-width]="y2O + 'px'"
     >
       {{ y2Range[0] | number: '1.0-2' }}
     </div>
@@ -101,7 +87,7 @@
     <div
       class="y2max"
       *ngIf="dyGraphOptions['drawAxis'] !== false && y2Range[1] !== undefined"
-      [style.transform]="'translateX(-' + y2O + 'px)'"
+      [style.border-right-width]="y2O + 'px'"
     >
       {{ y2Range[1] | number: '1.0-2' }}
     </div>
@@ -119,6 +105,106 @@
     >
       {{ toZoom | date: 'shortTime' }}
     </div>
+    <div
+      class="fromDate"
+      *ngIf="showDate == true"
+      [style.transform]="'translateX(' + yO + 'px)'"
+      (click)="pickerF.open()"
+    >
+      <mat-form-field>
+        <input
+          matInput
+          [matDatepicker]="pickerF"
+          [formControl]="fromFormDate"
+          (dateChange)="fromDatePickerChanged($event)"
+          [max]="pickerEndDate"
+        />
+        <mat-datepicker-toggle
+          matSuffix
+          [for]="pickerF"
+        ></mat-datepicker-toggle>
+        <mat-datepicker #pickerF></mat-datepicker>
+      </mat-form-field>
+    </div>
+    <div
+      class="toDate {{ y2Range[1] === undefined ? 'noy2' : '' }}"
+      *ngIf="showDate == true"
+      [style.transform]="'translateX(-' + y2O + 'px)'"
+      (click)="pickerT.open()"
+    >
+      <mat-form-field>
+        <input
+          matInput
+          [matDatepicker]="pickerT"
+          [formControl]="toFormDate"
+          (dateChange)="toDatePickerChanged($event)"
+          [max]="pickerEndDate"
+          [min]="fromZoom"
+        />
+        <mat-datepicker-toggle
+          matSuffix
+          [for]="pickerT"
+        ></mat-datepicker-toggle>
+        <mat-datepicker #pickerT></mat-datepicker>
+      </mat-form-field>
+    </div>
+    <div
+      class="logbuttons"
+      *ngIf="options == true && showLogscaleSwitcher == true"
+    >
+      <div class="logy y1" (click)="switchLogScale()">
+        <div
+          class="{{
+            dyGraphOptions['axes'] &&
+            dyGraphOptions['axes']['y'] &&
+            dyGraphOptions['axes']['y']['logscale']
+              ? 'active'
+              : ''
+          }}"
+        >
+          log
+        </div>
+        <div
+          class="{{
+            dyGraphOptions['axes'] &&
+            dyGraphOptions['axes']['y'] &&
+            dyGraphOptions['axes']['y']['logscale']
+              ? ''
+              : 'active'
+          }}"
+        >
+          lin
+        </div>
+      </div>
+      <div
+        class="logy y2"
+        *ngIf="dyGraphOptions['drawAxis'] !== false && y2Range[1] !== undefined"
+        (click)="switchLogScale('y2')"
+      >
+        <div
+          class="{{
+            dyGraphOptions['axes'] &&
+            dyGraphOptions['axes']['y2'] &&
+            dyGraphOptions['axes']['y2']['logscale']
+              ? 'active'
+              : ''
+          }}"
+        >
+          log
+        </div>
+        <div
+          class="{{
+            dyGraphOptions['axes'] &&
+            dyGraphOptions['axes']['y2'] &&
+            dyGraphOptions['axes']['y2']['logscale']
+              ? ''
+              : 'active'
+          }}"
+        >
+          lin
+        </div>
+      </div>
+    </div>
   </div>
 
   <div *ngIf="options == true && optionsOpen == true" class="optionsarea">
@@ -171,18 +257,6 @@ <h5>Export</h5>
         </label>
       </form>
 
-      <form class="subbox">
-        <h5>Y linearity</h5>
-        <label for="log">Logarithmic</label>
-        <input
-          type="checkbox"
-          name="logarithmic"
-          id="log"
-          [(ngModel)]="dyGraphOptions.logscale"
-          (change)="updateYlogscale()"
-        />
-      </form>
-
       <form class="subbox">
         <h5>Running Average</h5>
         <label for="runningAvgPoints"></label>