-working on Add Data Codes of Sanity Checks to Expert View = Issue 8

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

@@ -30,11 +30,25 @@ export class CjsTimelineMultiple implements OnInit,OnChanges{
   @Input() sensorDataArray!:[SensorData[]]
 
   dataParentArray:[Number[]]=[[]]
-  dataParentArrayOptions:[ReadingPayload.SensorErrorEnum[]]=[[]]
+  dataParentArrayError:ReadingPayload.SensorErrorEnum[][]=[]
+  dataChartJsSymbol:String[][]=[]
+//fill some data in
+  testData: Number[][] = [[]]
 
   timeStampsAsHour:any
 
 //*************************lineChart-Trio*****************************
+  footer = (tooltipItems:any) => {
+    let i = 0;
+    let j= 0;
+    tooltipItems.forEach(function(tooltipItem:any) {
+      i = tooltipItem.datasetIndex;
+      j = tooltipItem.dataIndex
+    });
+    if(this.dataParentArrayError[i+2][j]=='NO_ERROR')
+      return ;
+    return this.dataParentArrayError[i+2][j];
+  };
   linConfig:any={
     type:'line',
     data:{datasets: [{},]},
@@ -50,11 +64,19 @@ export class CjsTimelineMultiple implements OnInit,OnChanges{
       plugins:{
         legend: {
           display: false
+        },
+        tooltip: {
+          callbacks: {
+            footer: this.footer,
+          }
         }
       }
     }
   }
 
+
+
+
   linechart: any;
    ngAfterViewInit() {
     this.linConfig.data.labels=this.timeStampsAsHour
@@ -83,7 +105,10 @@ export class CjsTimelineMultiple implements OnInit,OnChanges{
       borderColor:(rgb+'0.8)'),
       tension:0.2,
       data:this.dataParentArray.at(i+2),
-      pointStyle: 'circle',
+      pointStyle: this.dataParentArrayError.at(i+2)?.map(error=>error=="NO_ERROR"?"circle":"triangle"),
+      pointRadius: this.dataParentArrayError.at(i+2)?.map(error=>error=="NO_ERROR"?5:20),
+      pointBackgroundColor: this.dataParentArrayError.at(i+2)?.map(error=>error=="NO_ERROR"?"rgba(0,0,0,0)":"rgba(255,0,0,0.5)"),
+
     }));
     this.linConfig.data.datasets=dataSet
 
@@ -105,15 +130,16 @@ export class CjsTimelineMultiple implements OnInit,OnChanges{
 
     //Map the SensorData
     this.dataParentArray=[[]]
-    this.dataParentArrayOptions=[[]]
+    this.dataParentArrayError=[[]]
     this.sensorDataArray.forEach(
       sensDat=>{
         this.dataParentArray.push(sensDat.map(x=>x.readings.map(y=>y.value)).flat())
-        this.dataParentArrayOptions.push(sensDat.map(x=>x.errorStatus))
+        this.dataParentArrayError.push(sensDat.map(x=>x.errorStatus))
       }
     )
+    this.testData= [[1,2,3,4],[5,6,7,8],[9,10,11,12]];
     this.logger.info("SensorData got from Server",this.dataParentArray)
-    this.logger.info("SensorDataError got from Server",this.dataParentArrayOptions)
+    this.logger.info("SensorDataError got from Server",this.dataParentArrayError)
     this.logger.info("Finished Mapping data")
   }
 }
@@ -123,3 +149,5 @@ function getRandomColor(): string {
   const b = Math.floor(Math.random() * 256);
   return `rgba(${r}, ${g}, ${b}, `;
 }
+
+

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

-import {Component, OnInit, Input } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Chart} from "chart.js/auto";
 
 
@@ -7,9 +7,11 @@ import {Chart} from "chart.js/auto";
   templateUrl: './light-chart.component.html',
   styleUrls: ['./light-chart.component.scss']
 })
+
+
 export class LightChartComponent implements OnInit{
 
-  labels:any=["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
+  public labels:any=["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
   labelsTime:any=["0:00", "1:00", "2:00","3:00", "4:00", "5:00","6:00", "7:00","8:00", "9:00", "10:00" ,"11:00","12:00",
                   "13:00", "14:00", "15:00","16:00", "17:00","18:00", "19:00", "20:00" ,"21:00","22:00","23:00"]
 
@@ -63,6 +65,22 @@ export class LightChartComponent implements OnInit{
     type:'line',
     data:this.data,
     options:{
+      onHover: (event:any, elements:any) => {
+        // Check if any elements (points) were clicked
+        if (elements.length > 0) {
+          // Get the first clicked element
+          const element = elements[0];
+          const datasetIndex = element.datasetIndex;
+          const index = element.index;
+
+          // Check if the clicked point is an outlier
+          if (isOutlier(index)) {
+            console.log("outlier")
+            // Update the label of the clicked point
+            this.linechart.options.tooltips.backgroundColor = 'red';
+          }
+        }
+        },
       responsive:true,
       radius:5,
       hoverRadius:12,
@@ -74,7 +92,13 @@ export class LightChartComponent implements OnInit{
       plugins:{
         legend: {
           display: false
+        },
+        tooltip: {
+          callbacks: {
+            footer: footer,
+          }
         }
+
       }
     }
   }
@@ -87,4 +111,21 @@ export class LightChartComponent implements OnInit{
 
   }
 
+
+
+
+}
+function isOutlier(index:any) {
+  // Define your logic to determine if a point is an outlier
+  // For example, you can use some conditions based on the data value, or predefined indices of outliers
+  // Return true if the point is an outlier, false otherwise
+  return index === 2 || index === 7;
 }
+const labels=["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
+const footer = (tooltipItems:any) => {
+  let sum = 0;
+  tooltipItems.forEach(function(tooltipItem:any) {
+    sum += tooltipItem.dataIndex;
+  });
+  return 'Sum: ' + labels[sum];
+};

src/app/shared/service/mapper.service.ts

 import { Injectable } from '@angular/core';
+import {ReadingPayload} from "../../../../projects/generated-api/src";
 
 @Injectable({
   providedIn: 'root'
@@ -29,5 +30,11 @@ export class MapperService {
     ["","unknown"]
   ]);
 
+
+  getSymbolFromError(error: ReadingPayload.SensorErrorEnum): string {
+    return error === ReadingPayload.SensorErrorEnum.NOERROR ? "circle" : "triangle";
+  }
+
+
   constructor() { }
 }