Moved logo to center, added y axis controls to sensor overview

src/app/sensor/components/sensor.component.html

@@ -31,7 +31,7 @@
       </div>
     </div>
       <div class="graph-range-dates">
-          <div class="input-group calendar-group">
+          <div class="input-group column-group">
               <label for="from">From:</label>
 
               <p-calendar
@@ -47,7 +47,7 @@
               </p-calendar>
           </div>
 
-          <div class="input-group calendar-group">
+          <div class="input-group column-group">
               <label for="to">To:</label>
 
               <p-calendar
@@ -66,6 +66,21 @@
               <button pButton type="button" *ngIf="dateChanged" label="Load data" class="p-button-primary" icon="pi pi-chart-line" (click)="showGraph()"></button>
           </div>
       </div>
+      <div class="y-range">
+          <div>
+              <form class="column-group">
+                  <label for="yFrom">Min y:</label><br>
+                  <input type="number" class="simple-number-input" id="yFrom" name="yFrom" [(ngModel)]="yFrom" placeholder="Min y"/>
+              </form>
+              <form class="column-group">
+                  <label for="yTo">Max y:</label><br>
+                  <input type="number" class="simple-number-input" id="yTo" name="yTo" [(ngModel)]="yTo" placeholder="Max y"/>
+              </form>
+          </div>
+
+          <button pButton type="button" label="Change y" class="p-button-primary" icon="pi pi-chart-line" (click)="changeGraphY()"></button>
+      </div>
+
       <div *ngIf="showIntervalError" class="alert alert-danger interval-alert" role="alert">
           Select a valid interval - interval should be smaller than <b>6 months</b> and the "from" date has to <b>precede</b> the "to" date!
       </div>

src/app/sensor/components/sensor.component.scss

@@ -20,7 +20,7 @@
   margin: 5px !important;
 }
 
-::ng-deep .calendar-group {
+::ng-deep .column-group {
   display: flex;
   flex-direction: column;
   padding-right: 50px;

src/app/sensor/components/sensor.component.ts

@@ -22,6 +22,8 @@ export class SensorComponent implements OnInit, OnDestroy, AfterViewInit {
   unitId: number;
   data = [];
   time = [];
+  yFrom : number;
+  yTo : number;
   from: Date = moment().hour(0).minutes(0).subtract(7, 'days').toDate();
   to: Date = moment().toDate();
   sensor: Sensor;
@@ -163,17 +165,16 @@ export class SensorComponent implements OnInit, OnDestroy, AfterViewInit {
     const box = this.viewElement.nativeElement;
     if (this.graphView) {
       const newWidth = box.getBoundingClientRect().width - 50;
-      this.graphView.width(newWidth).height(300).run();
-      console.log('Requested width : ', newWidth);
-      console.log('Got width: ', this.graphView.width());
-
-      // check if Vega "stole" pixels. If it did, force it again.
-      /*
-      if (this.graphView.width() < newWidth - 50) {
-        this.graphView.width(newWidth).height(300).runAsync();
-        console.log('Calling resize twice');
-      }
-       */
+      GraphLoader.ResizeGraph(this.graphView, newWidth);
+    }
+  }
+
+  changeGraphY() {
+    console.log(this.yFrom + ' ' + this.yTo);
+    // check if the values are valid - To is larger than From and they are not equal
+    if (this.yTo < this.yFrom || this.yTo === this.yFrom) {
+      return;
     }
+    GraphLoader.ChangeYRange(this.graphView, this.yFrom, this.yTo);
   }
 }

src/app/sensor/sensor.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { SensorComponent } from './components/sensor.component';
 import {NavBarModule} from '../shared/nav-bar/nav-bar.module';
 import {CalendarModule} from 'primeng/calendar';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {ListboxModule} from 'primeng/listbox';
 import {RouterModule} from '@angular/router';
 
@@ -17,7 +17,8 @@ import {RouterModule} from '@angular/router';
         CalendarModule,
         FormsModule,
         ListboxModule,
-        RouterModule
+        RouterModule,
+        ReactiveFormsModule
     ]
 })
 export class SensorModule { }

src/app/shared/graph-loading/graphloader.ts

@@ -106,14 +106,30 @@ export class GraphLoader {
 
     // --------------------------------
 
-    // const view = await
     return new vega.View(vega.parse(spec, config))
       .tooltip(handler.call)
       .initialize(element)
       .hover()
       .runAsync();
+  }
+
+  static ResizeGraph(graphView, newWidth: number) {
+    graphView.width(newWidth).height(300).runAsync();
+    console.log('Requested width : ', newWidth);
+    console.log('Got width: ', graphView.width());
+
+    // check if Vega "stole" pixels. If it did, force it again.
+    /*
+    if (graphView.width() < newWidth - 50) {
+      graphView.width(newWidth).height(300).runAsync();
+      console.log('Calling resize twice');
+    }
+     */
+  }
 
-    // this.lastGraphView = view;
-    // console.log("got awaited " + view);
+  static ChangeYRange(graphView, newMin: number, newMax: number) {
+    graphView.signal('extMin', newMin);
+    graphView.signal('extMax', newMax);
+    return graphView.runAsync();
   }
 }

src/app/shared/nav-bar/components/nav-bar.component.html

@@ -11,8 +11,8 @@
                 <span></span>
             </button>
 
-            <a class="navbar-brand logo" href="/">
-                <img src="/assets/images/senslog-logo.svg" alt="Logo SensLog">
+            <a class="navbar-brand logo d-lg-none" href="/">
+                <img src="/assets/images/senslog-logo.svg" alt="Logo SensLog" >
             </a>
         </div>
 
@@ -33,6 +33,9 @@
                 </li>
             </ul>
 
+            <a class="navbar-brand logo mx-auto d-none d-lg-block" href="/">
+                <img src="/assets/images/senslog-logo.svg" alt="Logo SensLog">
+            </a>
 
             <ul class="navbar-nav right">
                 <li class="nav-item nav-link-user">

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

@@ -30,7 +30,7 @@
     margin: 5px !important;
 }
 
-::ng-deep .calendar-group {
+::ng-deep .column-group {
     display: flex;
     flex-direction: column;
     padding-right: 50px;

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

@@ -88,17 +88,13 @@ export class UnitComponent implements OnInit, OnDestroy {
     const itemCount = Object.keys(this.graphViews).length;
     console.log('Number of entries:', itemCount);
 
-    window.requestAnimationFrame(() => {
-      Object.entries(this.graphViews).forEach(([key, view]) => {
-        if (view) {
-          const box = document.getElementById('vega_container_' + key);
-          const newWidth = box.getBoundingClientRect().width - 50;
-          view.width(newWidth).run();
-          console.log('Requested width : ', newWidth);
-          console.log('Got width: ', view.width());
-        }
-      })
-    });
+    Object.entries(this.graphViews).forEach(([key, view]) => {
+      if (view) {
+        const box = document.getElementById('vega_container_' + key);
+        const newWidth = box.getBoundingClientRect().width - 50;
+        GraphLoader.ResizeGraph(view, newWidth);
+      }
+    })
   }
 
   /**

src/assets/scss/_dashboard.scss

@@ -160,3 +160,12 @@
 .p-dialog {
   background: $primary
 }
+
+.simple-number-input {
+  background-color: white;
+  color: black;
+  border-radius: 6px;
+  border: 1px solid;
+  padding: 6px;
+  border-color: #174B97 !important;
+}

src/assets/scss/_graph.scss

@@ -87,7 +87,7 @@
   background: #F2F2F2;
 
   .p-button-primary {
-    margin: 0 10px;
+    margin: 10px 10px;
   }
 }
 
@@ -153,3 +153,19 @@
     overflow-x: scroll;
   }
 }
+
+.y-range {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  margin-top: $grid-gutter-width;
+  margin-bottom: $grid-gutter-width;
+  padding: 10px $grid-gutter-width;
+
+  @include media-breakpoint-down(md) {
+    justify-content: center;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}

src/assets/scss/_themes.scss

@@ -16,10 +16,11 @@ html,body{
       border-color: #2067BC;
       background: #2067BC;
 
-    @include media-breakpoint-down(xs) {
-      padding-right: math.div($grid-gutter-width, 2);
-      padding-left: math.div($grid-gutter-width, 2);
-    }
+    // this changes button size if hover/focus
+    //@include media-breakpoint-down(xs) {
+    //  padding-right: math.div($grid-gutter-width, 2);
+    //  padding-left: math.div($grid-gutter-width, 2);
+    // }
   }
 
   i {

src/assets/scss/styles.scss

@@ -21,4 +21,16 @@ $terciary: #1B3059;
 
 .p-button {
   border-radius: 6px;
+}
+
+/* Target all Bootstrap buttons or a specific class */
+.p-button-primary:active,
+.p-button-primary.active {
+  transform: scale(1) !important; /* Force the button to stay at 100% size */
+  transition: none !important;    /* Optional: Remove any 'bounce' timing */
+}
+
+::placeholder {
+  color: #727271FF;
+  opacity: 1;
 }

src/vega/body/linechart.json

@@ -86,6 +86,12 @@
     {},
     {},
     {},
+    { "name": "extMin", "value": -1 },
+    { "name": "extMax", "value": -1 },
+    {
+      "name": "yDomainSignal",
+      "update": "(extMin === -1 || extMax === -1) ? null : [extMin, extMax]"
+    },
     {
       "name": "tooltipSignal",
       "value": {},
@@ -110,15 +116,22 @@
           "name": "yDetail",
           "type": "linear",
           "range": [390, 0],
+          "nice": true,
+          "zero": false,
+          "padding": 0,
+
           "domain": {
             "fields": [
-              {"data": "range", "field": "valueMax"},
-              {"data":  "table", "field": "value"}
+              {
+                "data": "range", "field": "valueMax"
+              },
+              {
+                "data": "table", "field": "value"
+              }
             ]
           },
-          "nice": true,
-          "zero": false,
-          "padding": 0
+          "domainRaw":
+          { "signal": "yDomainSignal" }
         }
       ],
       "axes": [