merge dev into main

-removing unused navigation -moving the input data a little to the right -pushing title to the left -centering min max avg (was bevore shifted a lttle to the right)

src/app/module/components/lev0/lev0.component.html

+<div class="container-flex">
+  <div class="header">
+    <div class="header-left">
+      <h4>Level 0 Summary</h4>
+    </div>
+    <div class="header-right">
+      <div class="container-flex-cover">
+        <mat-form-field appearance="outline">
+          <mat-label>From</mat-label>
+          <input matInput [matDatepicker]="picker">
+          <mat-hint>MM/DD/YYYY</mat-hint>
+          <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+          <mat-datepicker #picker></mat-datepicker>
+        </mat-form-field>
+      </div>
+    </div>
+  </div>
+
+  <div class="scroller">
+    <div *ngFor="let sumAvg of sumOrAvg">
+      <div class="card-b">
+        <div class="header-left">
+          <h5>{{sumAvg.name}}</h5>
+          <h2>{{sumAvg.value.toFixed(1)}}{{" "+unitMapper.get(sumAvg.sensorType)}}</h2>
+          <div class="display-flex"><h4>{{typeMapper.get( sumAvg.type)}}</h4></div>
+        </div>
+        <div class="header-right">
+          <i class="material-icons" style="font-size:80px;color: black">{{iconMapper.get(sumAvg.sensorType)}}</i>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="scroller">
+
+    <div *ngFor="let avgMMax of avgMinMax">
+      <div class="card-group" [ngStyle]="{'box-shadow':avgMMax.isSensorGroup  ? '15px 15px rgb(173,216,230,0.4) ,30px 30px rgb(173,216,230,0.2)':''}">
+        <header>
+          <h5>{{avgMMax.name}}</h5>
+        </header>
+        <main>
+          <div class="min">
+            <h3>Min</h3>
+            <h3>{{avgMMax.min.value.toFixed(2)}}</h3>
+          </div>
+
+          <div class="avg">
+            <h3>Avg</h3>
+            <h3>{{avgMMax.avg.toFixed(2)}}</h3>
+          </div>
+
+          <div class="max">
+            <h3>Min</h3>
+            <h3>{{avgMMax.max.value.toFixed(2)}}</h3>
+          </div>
+
+        </main>
+      </div>
+    </div>
+
+
+  </div>
+
+
+
+</div>
+
+
+<!--
+<div class="container-flex">
+  <div class="header">
+    <div class="header-left">
+        <h4>Level 0 Summary</h4>
+    </div>
+    <div class="header-right">
+      <div class="container-flex-cover">
+        <mat-form-field appearance="outline">
+          <mat-label>From</mat-label>
+          <input matInput [matDatepicker]="picker">
+          <mat-hint>MM/DD/YYYY</mat-hint>
+          <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+          <mat-datepicker #picker></mat-datepicker>
+        </mat-form-field>
+      </div>
+    </div>
+  </div>
+
+
+  <div class="main-lev0">
+      <div class="header">
+
+          <div class="card-b">
+            <div class="header-left">
+              <h5>Rain Percipatation</h5>
+              <h2>230 mm</h2>
+              <div class="display-flex"><h4>12%</h4> <h6>more than yesterday</h6></div>
+            </div>
+            <div class="header-right">
+              <svg xmlns="http://www.w3.org/2000/svg" width="75.557" height="75.557" viewBox="0 0 75.557 75.557">
+                <path id="Icon_awesome-cloud-rain" data-name="Icon awesome-cloud-rain" d="M61.39,18.889c-.089,0-.162.03-.236.03a11.524,11.524,0,0,0,.236-2.391A11.759,11.759,0,0,0,40.582,8.972,16.472,16.472,0,0,0,9.445,16.528a16.782,16.782,0,0,0,.31,3.129,14.131,14.131,0,0,0,4.412,27.567H61.39a14.167,14.167,0,0,0,0-28.334Zm-48.4,36.332c-1.889,6.552-5.9,8.323-5.9,12.942a7.241,7.241,0,0,0,7.083,7.393,7.241,7.241,0,0,0,7.083-7.393c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,12.986,55.222Zm23.612,0c-1.889,6.552-5.9,8.323-5.9,12.942a7.09,7.09,0,1,0,14.167,0c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,36.6,55.222Zm23.612,0c-1.889,6.552-5.9,8.323-5.9,12.942a7.09,7.09,0,1,0,14.167,0c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,60.21,55.222Z"/>
+              </svg>
+            </div>
+          </div>
+
+        <div class="card-b">
+          <div class="header-left">
+            <h5>Rain Percipatation</h5>
+            <h2>230 mm</h2>
+            <div class="display-flex"><h4>12%</h4> <h6>more than yesterday</h6></div>
+
+          </div>
+          <div class="header-right">
+            <svg xmlns="http://www.w3.org/2000/svg" width="75.557" height="75.557" viewBox="0 0 75.557 75.557">
+              <path id="Icon_awesome-cloud-rain" data-name="Icon awesome-cloud-rain" d="M61.39,18.889c-.089,0-.162.03-.236.03a11.524,11.524,0,0,0,.236-2.391A11.759,11.759,0,0,0,40.582,8.972,16.472,16.472,0,0,0,9.445,16.528a16.782,16.782,0,0,0,.31,3.129,14.131,14.131,0,0,0,4.412,27.567H61.39a14.167,14.167,0,0,0,0-28.334Zm-48.4,36.332c-1.889,6.552-5.9,8.323-5.9,12.942a7.241,7.241,0,0,0,7.083,7.393,7.241,7.241,0,0,0,7.083-7.393c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,12.986,55.222Zm23.612,0c-1.889,6.552-5.9,8.323-5.9,12.942a7.09,7.09,0,1,0,14.167,0c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,36.6,55.222Zm23.612,0c-1.889,6.552-5.9,8.323-5.9,12.942a7.09,7.09,0,1,0,14.167,0c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,60.21,55.222Z"/>
+            </svg>
+          </div>
+        </div>
+
+
+        <div class="card-b">
+          <div class="header-left">
+            <h5>Rain Percipatation</h5>
+            <h2>230 mm</h2>
+            <div class="display-flex"><h4>12%</h4> <h6>more than yesterday</h6></div>
+
+          </div>
+          <div class="header-right">
+            <svg xmlns="http://www.w3.org/2000/svg" width="75.557" height="75.557" viewBox="0 0 75.557 75.557">
+              <path id="Icon_awesome-cloud-rain" data-name="Icon awesome-cloud-rain" d="M61.39,18.889c-.089,0-.162.03-.236.03a11.524,11.524,0,0,0,.236-2.391A11.759,11.759,0,0,0,40.582,8.972,16.472,16.472,0,0,0,9.445,16.528a16.782,16.782,0,0,0,.31,3.129,14.131,14.131,0,0,0,4.412,27.567H61.39a14.167,14.167,0,0,0,0-28.334Zm-48.4,36.332c-1.889,6.552-5.9,8.323-5.9,12.942a7.241,7.241,0,0,0,7.083,7.393,7.241,7.241,0,0,0,7.083-7.393c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,12.986,55.222Zm23.612,0c-1.889,6.552-5.9,8.323-5.9,12.942a7.09,7.09,0,1,0,14.167,0c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,36.6,55.222Zm23.612,0c-1.889,6.552-5.9,8.323-5.9,12.942a7.09,7.09,0,1,0,14.167,0c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,60.21,55.222Z"/>
+            </svg>
+          </div>
+        </div>
+
+      </div>
+    <div class="main">
+     <app-light-chart></app-light-chart>
+    </div>
+
+  </div>
+
+
+</div>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,600,0,0" />
+<div class="scroller">
+  <div *ngFor="let sumAvg of sumOrAvg">
+    <div class="card-b">
+      <div class="header-left">
+        <h5>{{sumAvg.name}}</h5>
+        <h2>{{sumAvg.value.toFixed(1)}}{{" "+unitMapper.get(sumAvg.sensorType)}}</h2>
+        <div class="display-flex"><h4>{{typeMapper.get( sumAvg.type)}}</h4></div>
+      </div>
+      <div class="header-right">
+        <i class="material-icons" style="font-size:80px;color: black">{{iconMapper.get(sumAvg.sensorType)}}</i>
+      </div>
+    </div>
+  </div>
+</div>
+-->