adding shaddow

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

 
 
 
-
+<!--
 <div class="flex w-full min-h-min ">
 
 
@@ -97,6 +97,13 @@
   </div>
 </div>
 
+-->
+
+
+
+
+
+
 
 <!--
 <div class="w-full bg-gray-100 flex flex-col">
@@ -224,3 +231,46 @@
 
 </div>
 -->
+
+
+<div class="w-full flex flex-row items-end justify-start flex-wrap">
+  <div *ngFor="let avgMMax of avgMinMax;let iX=index;">
+    <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>Max</h3>
+          <h3>{{avgMMax.max?.value?.toFixed(2)}}</h3>
+        </div>
+      </main>
+    </div>
+  </div>
+</div>
+
+
+<div class="w-full flex flex-row items-end justify-start flex-wrap ">
+  <div *ngFor="let avgMMax of avgMinMax;let iX=index;">
+    <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)':' rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px'}">
+      <header>
+        <h5>{{avgMMax.name}} <h6>(wemc)</h6></h5>
+      </header>
+      <main class="w-full mb-4 flex">
+        <app-slider [avg]="avgMMax.avg" [min]="avgMMax.min?.value" [max]="avgMMax.max?.value" class="w-full px-5" ></app-slider>
+      </main>
+    </div>
+  </div>
+</div>
+
+

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

@@ -57,7 +57,7 @@
 
   <div class="w-full flex flex-row items-end justify-start flex-wrap">
     <div *ngFor="let avgMMax of avgMinMax;let iX=index;">
-      <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)':''}">
+      <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)':'rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px'}">
         <header>
           <h5>{{avgMMax.name}}</h5>
         </header>
@@ -87,7 +87,7 @@
 
       <div class="flex-col p-2 m-4 bg-white justify-center items-center rounded"
            *ngFor="let dent of dentrometerDailyValue"
-           [ngStyle]="{'box-shadow':dent.isSensorGroup  ? '15px 15px rgb(173,216,230,0.4) ,30px 30px rgb(173,216,230,0.2)':''}">
+           [ngStyle]="{'box-shadow':dent.isSensorGroup  ? '15px 15px rgb(173,216,230,0.4) ,30px 30px rgb(173,216,230,0.2)':'rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px'}">
 
         <h1 class="flex font-bold text-4sm mb-6 justify-start ml-5">{{dent.name}}</h1>
         <div class="mx-8 flex justify-between">

src/app/module/components/lev0Ver2/lev0.component.scss

@@ -112,7 +112,7 @@ app-Cjs-timline {
   flex: 0 0  400px;
   flex-wrap: nowrap;
   flex-shrink: 0;
-
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
 
 
   .header-left{

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

 
 <div class="flex pt-3 w-full items-center">
-  <div class="w-4 h-4 flex items-center">
-    <div class="text-sm ml-1 text-gray-400">{{minTemp}}</div>
+
+
+  <div class="flex h-4 flex items-center ">
+    <div class="text-sm  text-gray-400">{{min?.toFixed(2)}}</div>
   </div>
 
-  <div class="flex h-1 w-full items-center bg-gradient-to-r from-green-700 to-red-900 w-full rounded-xl">
-    <div class="w-1/12"></div>
+  <div class="flex mx-2 h-1 flex-grow items-center bg-gradient-to-r from-green-700 to-red-900 w-full rounded-xl">
+    <div  [style.width.%]="distance"></div>
     <div class="rounded-full border-[1px] border-neutral-400  w-16 -translate-y-1 h-8 justify-center items-start flex ">
-      <div class="text-sm ml-1">{{avgTemp}}&#176;</div>
+      <div class="text-sm ml-1">{{avg?.toFixed(2)}}</div>
     </div>
   </div>
 
-  <div class="w-4 h-4 flex items-center">
-    <div class="text-sm ml-1 text-gray-400">{{maxTemp}}</div>
+
+  <div class="flex h-4 flex items-center">
+    <div class="text-sm ml-1 text-gray-400">{{max?.toFixed(2)}}</div>
   </div>
 </div>
 
+

src/app/module/components/slider/slider.component.ts

-import {Component, Input} from '@angular/core';
+import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
 
 @Component({
   selector: 'app-slider',
   templateUrl: './slider.component.html',
   styleUrls: ['./slider.component.css']
 })
-export class SliderComponent {
-  @Input() avgTemp: number = 0;
-  @Input() maxTemp: number = 0;
-  @Input() minTemp: number = 0;
+export class SliderComponent implements OnChanges{
+  @Input() avg: number | undefined = 0;
+  @Input() max: number | undefined = 0;
+  @Input() min: number | undefined = 0;
 
+  distance: number = (this.avg! - this.min!) / (this.max! - this.min!) * 100;
+
+  ngOnChanges(changes: SimpleChanges) {
+      this.distance = (this.avg! - this.min!) / (this.max! - this.min!) * 100;
+  }
 }