working on expert view adding dowload functionality

src/app/app.module.ts

@@ -39,6 +39,7 @@ import {MatCheckboxModule} from "@angular/material/checkbox";
 import {ApiModule} from "../../projects/swagger-client/src";
 import { InterceptorService } from './shared/auth/interceptor.service';
 import {CjsTimelineMultiple} from "./module/components/charts/Cjs-timeline-multiple/light-chart.component";
+import {MatButtonModule} from "@angular/material/button";
 
 @NgModule({
   declarations: [
@@ -67,23 +68,24 @@ import {CjsTimelineMultiple} from "./module/components/charts/Cjs-timeline-multi
     CjsTimelineMultiple
 
   ],
-    imports: [
-        BrowserModule,
-        AppRoutingModule,
-        ReactiveFormsModule,
-        HttpClientModule,
-        FormsModule,
-        BrowserAnimationsModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatSelectModule,
-        MatDatepickerModule,
-        MatInputModule,
-        MatNativeDateModule,
-        MatAutocompleteModule,
-        MatCheckboxModule,
-      ApiModule,
-    ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    ReactiveFormsModule,
+    HttpClientModule,
+    FormsModule,
+    BrowserAnimationsModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule,
+    MatAutocompleteModule,
+    MatCheckboxModule,
+    ApiModule,
+    MatButtonModule,
+  ],
   providers: [EventEmitterService,{provide:HTTP_INTERCEPTORS,useClass:InterceptorService,multi:true}],
   bootstrap: [AppComponent],
 })

src/app/module/components/charts/Cjs-timeline-multiple/light-chart.component.ts

@@ -26,7 +26,10 @@ export class CjsTimelineMultiple implements OnInit,OnChanges{
 
   @Input() chartId:String="test"
   @Input() sensorData!:SensorData[]
+  @Input() sensorDataArray!:[SensorData[]]
   dataParent:Number[]=[]
+  dataParentArray:[Number[]]=[[]]
+
   timeStampsAsHour:any
   coloredData:any
   colorMapper = new Map<String, String>([
@@ -82,11 +85,17 @@ export class CjsTimelineMultiple implements OnInit,OnChanges{
     let datePipe = new DatePipe('en-US');
     this.timeStampsAsHour=timeStamp.map(x=>datePipe.transform(x,'HH:mm'))
     this.logger.info("Timeline got from Server #gS",this.timeStampsAsHour)
-    // @ts-ignore
-    this.coloredData=this.sensorData[0].readings.map(y=>this.colorMapper.get(y.fluctuationType))
-    // @ts-ignore
-    this.logger.info("Data Code #gS",this.coloredData);
     this.logger.info("Finished Mapping data")
+
+    console.log("from childArray",this.sensorDataArray)
+    // this.dataParentArray=this.sensorDataArray.map(x=>x.map(y=>y.readings.map(z=>z.value).flat()))
+    this.dataParentArray=[[]]
+    this.sensorDataArray.forEach(
+      sensDat=>{
+        this.dataParentArray.push(sensDat.map(x=>x.readings.map(y=>y.value)).flat())
+      }
+    )
+    console.log("filterd array child",this.dataParentArray)
   }
 
    ngAfterViewInit() {
@@ -101,13 +110,43 @@ export class CjsTimelineMultiple implements OnInit,OnChanges{
     /**********THIS FUNCTION WILL TRIGGER WHEN PARENT COMPONENT UPDATES 'someInput'**************/
     //Write your code here
     this.mapData()
-    this.linConfig.data.labels=this.timeStampsAsHour
-    this.linConfig.data.datasets[0].data=this.dataParent
+   this.linConfig.data.labels=this.timeStampsAsHour
+  //  this.linConfig.data.labels= Array(47).fill(0).map((_, i) => i);
+  //  for (let i = 0; i < 3; i++) {
+     // if(i>1)
+     //   this.linConfig.data.datasets[i-2].data=this.dataParentArray[i]
+    let names: string[] = [];
+    this.sensorDataArray.forEach(dat => {
+      if (dat && dat[0] && dat[0].sensorName) {
+        names.push(dat[0].sensorName);
+      }})
+  console.log("sensorname",names)
+    const data = Array.from({ length: this.sensorDataArray.length }, (_, i) => (
+      {
+      label:`Dataset ${i+1}`+names.at(i),
+      backgroundColor:( getRandomColor()+'0.1)'),
+      fill:true,
+      borderColor:(getRandomColor()+'0.8)'),
+      tension:0.2,
+      data:this.dataParentArray.at(i+2),
+    }));
+
+    function getRandomColor(): string {
+      const r = Math.floor(Math.random() * 256);
+      const g = Math.floor(Math.random() * 256);
+      const b = Math.floor(Math.random() * 256);
+      return `rgba(${r}, ${g}, ${b}, `;
+    }
+    this.linConfig.data.datasets=data
+    // }
+   // if(this.dataParentArray.length<3)
+   //   this.linConfig.data.datasets[0].data=this.dataParent
 //    this.linConfig.data.datasets[0].pointBorderColor=this.coloredData
 //    this.linConfig.data.datasets[0].pointBackgroundColor=this.coloredData
  //   this.linechart.data = this.linConfig.data;
     console.log("channnged")
-    this.linechart.update();
+    if(this.linechart !== undefined)
+      this.linechart.update();
   }
 
 }

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

@@ -81,37 +81,26 @@
   </mat-form-field>
 </form>
 
-<div class="flex flex-wrap w-full justify-center sm:justify-between
+<div class="flex flex-wrap w-full justify-center sm:justify-end
              [&>*]:w-full [&>*]:sm:w-1/4  [&>*]:h-16  [&>*]:p-2 ">
-
+<!--
   <div class="">
     <section class="bg-slate-100 h-full w-full flex items-center rounded-2xl">
       <mat-checkbox [(ngModel)]="isChecked" class="m-2">Select Me</mat-checkbox>
     </section>
   </div>
+-->
 
   <div class="">
-    <section class="bg-slate-100 h-full w-full flex items-center rounded-2xl">
-      <mat-checkbox class="m-2">Select Me</mat-checkbox>
-    </section>
-  </div>
-
-  <div class="">
-    <section class="bg-slate-100 h-full w-full flex items-center rounded-2xl">
-      <mat-checkbox class="m-2">Select Me</mat-checkbox>
-    </section>
-  </div>
-
-  <div class="">
-    <section class="bg-slate-100 h-full w-full flex items-center rounded-2xl">
-      <mat-checkbox class="m-2">Select Me</mat-checkbox>
+    <section class=" h-full w-full flex items-center rounded-2xl">
+      <button class="w-full h-full" mat-raised-button color="primary" (click)="downloadCSV4()">Download Data <mat-icon>download</mat-icon></button>
     </section>
   </div>
 
 </div>
 <button (click)="downloadCSV()">Download</button>
 
-<app-Cjs-timeline-multiple [sensorData]="this.sensorData" ></app-Cjs-timeline-multiple>
+<app-Cjs-timeline-multiple [sensorData]="this.sensorData" [sensorDataArray]="this.sensorDataArray" ></app-Cjs-timeline-multiple>
 {{isChecked}}
 {{this.selectedHostClient}}
 

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

@@ -10,6 +10,7 @@ import {
 } from "../../../../../projects/swagger-client/src";
 
 import {DatePipe} from "@angular/common";
+import {List} from "postcss/lib/list";
 
 
 @Component({
@@ -49,6 +50,7 @@ export class ProViewComponent {
   })
 
   sensorData:SensorData[]=[]
+  sensorDataArray:[SensorData[]]=[[]]
 
   data: any[] = [
     { name: 'John', age: 28, city: 'New York' },
@@ -194,7 +196,13 @@ export class ProViewComponent {
   }
 
   downloadCSV() {
-    const csv = this.convertToCSV(this.data);
+    const transformedData = this.sensorData.map(data => ({
+      timestamp: data.timestamp,
+      Sensor_name:data.sensorName,
+      Sensor_id: data._id,
+      values: data.readings.map(reading => reading.value),
+    }));
+    const csv = this.convertToCSV(transformedData);
     const blob = new Blob([csv], { type: 'text/csv' });
     const url = window.URL.createObjectURL(blob);
 
@@ -202,11 +210,49 @@ export class ProViewComponent {
     const a = document.createElement('a');
     a.style.display = 'none';
     a.href = url;
-    a.download = 'data.csv';
+    a.download = 'forte-sensor-data.csv';
     document.body.appendChild(a);
     a.click();
   }
 
+  downloadCSV4() {
+    // Use the first timestamp in each array of sensorDataArray as the timestamp for each row
+    let csvData:any[]=[[]]
+    csvData.push()
+    const timestamps = this.sensorDataArray.at(1)?.map(data => data.timestamp?? '')??[];
+    console.log("timestamo vsc4",timestamps)
+   const sensorData: any[] = [];
+   this.sensorDataArray.forEach((sD,i)=>{
+     sensorData.push(   sD.map(data => ({
+        timestamp: data.timestamp,
+       [data.sensorName]: data.readings.map(reading => reading.value),
+      })) );
+    })
+    console.log("sensodata csv",sensorData)
+    let transformedData = timestamps.map((timestamp, i) => ({
+      timestamp: timestamp
+    }));
+    for (let i = 1; i < sensorData.length; i++) {
+      transformedData= transformedData.map((obj, ii) => {
+        return { ...obj, ...sensorData[i][ii] };
+      });
+    }
+
+  console.log("merged",transformedData)
+    const csv = this.convertToCSV(transformedData);
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = window.URL.createObjectURL(blob);
+    // Create a link element and click it to trigger the download
+    const a = document.createElement('a');
+    a.style.display = 'none';
+    a.href = url;
+    a.download = 'forte-sensor-data.csv';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
+
+
   onSelectionChange(event: checkHostsStation[]) {
     console.log(this.selectedHostClient,"selected host clients")
     this.availableSensors=[]
@@ -229,6 +275,7 @@ export class ProViewComponent {
 
   onSelectionChange2(event: string[]) {
     this.sensorData=[]
+    this.sensorDataArray=[[]]
       console.log("final sensor",event)
     console.log(this.range.value)
     console.log("tooooooping",this.toppings.value)
@@ -249,11 +296,14 @@ export class ProViewComponent {
               console.log(s)
               // @ts-ignore
               this.sensorData=s
+              this.sensorDataArray.push(this.sensorData)
               console.log("sensor data",this.sensorData)
+              console.log("array sensor Data",this.sensorDataArray)
             },
             error => console.error("error")
           )
         )
+
       }
   }