working on last viewing dendrometer graph in expert view

src/app/module/components/pro-view/pro-view.component.html

-<div class="bg-sky-500">
-
 
+<div class="flex-col">
 <form class="mt-10 flex flex-wrap justify-center sm:justify-between w-full
             [&>*]:w-full [&>*]:sm:w-1/4  [&>*]:p-2">
 
@@ -118,12 +117,14 @@
     </section>
   </div>
 </div>
+<!--
+<app-Cjs-timeline-multiple *ngIf="this.sensorControl.value?.length!=1||!isDendrometer" [chartId]="chartId_chartAll" #timeline [sensorData]="this.sensorData" [sensorDataArray]="this.sensorDataArray" >
+</app-Cjs-timeline-multiple>
+*ngIf="sensorControl.value?.length==1&&isDendrometer"
+
+-->
 
-<div class="bg-slate-500 flex">
-  <app-Cjs-timeline-multiple [sensorData]="this.sensorData" [sensorDataArray]="this.sensorDataArray" ></app-Cjs-timeline-multiple>
 
-  <app-Cjs-timline></app-Cjs-timline>
-</div>
 
 
 </div>
@@ -133,7 +134,7 @@
 
 
 
-<div class="w-full flex flex-row items-end justify-center flex-wrap">
+<div #dendrometer  class="w-full flex flex-row items-end justify-center flex-wrap ">
 
   <div class="card-dendrometer">
     <h1>Dendrometer</h1>
@@ -155,7 +156,7 @@
       </div>
     </div>
 
-    <app-Cjs-timline  *ngIf="threePhaseDendromete"  [threePhaseDenrometer]="this.threePhaseDendromete"></app-Cjs-timline>
+    <app-Cjs-timline [chartId]="chartId_dendrometer"  *ngIf="threePhaseDendromete"  [threePhaseDenrometer]="this.threePhaseDendromete"></app-Cjs-timline>
   </div>
 
 </div>

src/app/module/components/pro-view/pro-view.component.scss

@@ -293,8 +293,8 @@ h6{
 }
 
 .card-dendrometer{
-  height: 700px;
-  width: 1100px;
+  height: 90vh;
+  width: 100%;
   margin: 50px;
   padding-top: 50px;
   padding-left: 20px;
@@ -302,9 +302,10 @@ h6{
   display: flex;
   flex-direction: column;
   background-color: white;
-  justify-content: center;
+  justify-content: start;
   align-items: center;
 
+
 .headers{
 
   width: 70%;

src/app/module/components/pro-view/pro-view.component.ts

-import {Component} from '@angular/core';
+import {Component, ElementRef} from '@angular/core';
 import {FormControl, FormGroup} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
@@ -24,6 +24,9 @@ import {HttpClient} from "@angular/common/http";
   providers: [DatePipe]
 })
 export class ProViewComponent {
+
+  chartId_dendrometer:string="dendrometer"
+  chartId_chartAll:string="chartAll"
   stationControl = new FormControl('');
   availableStation: string[] = ['One', 'Two', 'Three'];
   availableSensors: string[] = [];
@@ -69,14 +72,15 @@ t_bool:boolean=true
 
   sensorData:SensorData[]=[]
   sensorDataArray:[SensorData[]]=[[]]
-
+  showDendrometer:boolean=this.isDendrometer&&this.sensorControl.value?.length==1
   station!: Observable<Array<Station>>;
   constructor(private stationControllerService: StationControllerService,private hostControllerService:HostControllerService,
               private clientControllerService:ClientControllerService,private serverControllerService:ServerControllerService,
               private sensorControllerService:SensorControllerService,
               private datePipe: DatePipe,
               private logger:MyLoggerServiceService,
-              private http:HttpClient
+              private http:HttpClient,
+              private elementRef: ElementRef
               ) {
     this.logger.setLevel(LogLevel.LOG)
     this.logger.setTopic("ProViewInputParent")
@@ -85,11 +89,11 @@ t_bool:boolean=true
   ngOnInit() {
 
 
-
+/*
     this.http.get("http://localhost:8080/api/v1/server/get/dendrometer/range?sensorId=ddm_id_1&from=15-04-2022T00:00:00&to=15-04-2022T23:59:59").subscribe(
       // @ts-ignore
       x=>this.logger.info("dendrometer",this.threePhaseDendromete=x))
-
+*/
     //test for dendrometer
     const date = new Date('2022-04-15T00:00:00');
     const formattedDate = this.datePipe.transform(date, 'dd-MM-yyyy');
@@ -226,7 +230,7 @@ t_bool:boolean=true
     //set all data for each selection to emtpy
     this.sensorData=[]
     this.sensorDataArray=[[]]
-
+    let sensor_dend:String="ddm_id_1"
     //convert the inputDate to Date for API
     let datePipe = new DatePipe('en-US');
     let dateStart = datePipe.transform(this.range.value.start, 'dd-MM-yyyyTHH:mm:ss');
@@ -239,10 +243,11 @@ t_bool:boolean=true
         let s_id:String=this.sensorControl.value[0]
         this.sensorControllerService.getSensorById(s_id+"").subscribe(
           s=>{
-            this.logger.info("GET sensor",s)
+            this.logger.info("GET sensorsssssssssssssssss",s)
             this.logger.info("GET sensor type",s.measurements?.at(0)?.type)
-            if (s.measurements?.at(0)?.type=="SOLAR_RADIATION"){
+            if (s.measurements?.at(0)?.type=="CIRCUMFERENCE_INCREMENT"){
               this.isDendrometer=true
+              sensor_dend=s_id
             }
           })
         console.log("s_id",s_id)
@@ -259,11 +264,26 @@ t_bool:boolean=true
             error => this.logger.error("Get sensordata error")
           )
         )
-
+        //get the sensor data for the dendrometer
+        //http://localhost:8080/api/v1/server/get/dendrometer/range?sensorId=ddm_id_1&from=15-04-2022T00:00:00&to=15-04-2022T23:59:59
+        this.http.get("http://localhost:8080/api/v1/server/get/dendrometer/range?"+
+          "sensorId="+sensor_dend+
+          "&from="+dateStart+
+          "&to="+dateEnd).subscribe(
+          // @ts-ignore
+          x=>this.logger.info("dendrometersssssssssssssssss",this.threePhaseDendromete=x))
       }
   }
 
 
+  ngAfterViewInit() {
+  //  const cjsTimeline = this.elementRef.nativeElement.querySelector('#timeline');
+  //  const firstElement = this.elementRef.nativeElement.querySelector('#dendrometer');
+  //  cjsTimeline.style.display = 'block';
+  //  firstElement.style.display = 'block';
+  }
+
+
 }
 
 export interface checkHostsStation{