From 11b41ab008769891be12970eb73c4f166a3291e8 Mon Sep 17 00:00:00 2001
From: csba1652 <Bilal.Hassan@student.uibk.ac.at>
Date: Wed, 24 May 2023 15:40:32 +0100
Subject: [PATCH] -working on Add Data Codes of Sanity Checks to Expert View =
Issue 8
---
.../light-chart.component.ts | 38 +++++++++++++---
.../light-chart/light-chart.component.ts | 45 ++++++++++++++++++-
src/app/shared/service/mapper.service.ts | 7 +++
3 files changed, 83 insertions(+), 7 deletions(-)
diff --git a/src/app/module/components/charts/Cjs-timeline-multiple/light-chart.component.ts b/src/app/module/components/charts/Cjs-timeline-multiple/light-chart.component.ts
index 882c956..223bf32 100644
--- a/src/app/module/components/charts/Cjs-timeline-multiple/light-chart.component.ts
+++ b/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}, `;
}
+
+
diff --git a/src/app/module/components/charts/light-chart/light-chart.component.ts b/src/app/module/components/charts/light-chart/light-chart.component.ts
index c2d4641..25c2a2e 100644
--- a/src/app/module/components/charts/light-chart/light-chart.component.ts
+++ b/src/app/module/components/charts/light-chart/light-chart.component.ts
@@ -1,4 +1,4 @@
-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];
+};
diff --git a/src/app/shared/service/mapper.service.ts b/src/app/shared/service/mapper.service.ts
index 14734e9..e038cea 100644
--- a/src/app/shared/service/mapper.service.ts
+++ b/src/app/shared/service/mapper.service.ts
@@ -1,4 +1,5 @@
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() { }
}
--
GitLab