merge times by notificationType

src/app/components/chart-timeline/chart-timeline.component.ts

@@ -17,7 +17,7 @@ import {
 } from 'ng-apexcharts';
 
 import { MarkerColorMap } from 'src/environments/environment';
-import {Object, PositionUpdate} from 'src/app/model/base-model';
+import {NotificationType, Object, PositionUpdate} from 'src/app/model/base-model';
 
 export type ChartOptions = {
   series: ApexAxisChartSeries;
@@ -40,69 +40,9 @@ export class ChartTimelineComponent implements OnInit {
   private subsPosition: Subscription;
 
   public chartOptions: Partial<ChartOptions> | any;
-  // public series: ApexAxisChartSeries;
-
-  public seriesData: ApexAxisChartSeries;
-
 
   constructor(private _mqttService: MqttService) {
 
-    this.seriesData = [
-      {
-        name: "Bob",
-        data: [
-          {
-            x: "Design",
-            y: [
-              new Date("2021-09-14T09:41:20+00:00").getTime(),
-              new Date("2021-09-14T09:51:20+00:00").getTime()
-            ]
-          },
-          {
-            x: "Code",
-            y: [
-              new Date("2021-09-14T09:52:20+00:00").getTime(),
-              new Date("2021-09-14T09:54:20+00:00").getTime()
-            ]
-          },
-          {
-            x: "Test",
-            y: [
-              new Date("2021-09-14T10:21:20+00:00").getTime(),
-              new Date("2021-09-14T10:31:20+00:00").getTime()
-            ]
-          }
-        ]
-      },
-      {
-        name: "Joe",
-        data: [
-          {
-            x: "Design",
-            y: [
-              new Date("2021-09-14T09:11:20+00:00").getTime(),
-              new Date("2021-09-14T09:21:20+00:00").getTime()
-            ]
-          },
-          {
-            x: "Code",
-            y: [
-              new Date("2021-09-14T09:11:20+00:00").getTime(),
-              new Date("2021-09-14T09:41:20+00:00").getTime()
-            ]
-          },
-          {
-            x: "Test",
-            y: [
-              new Date("2021-09-14T11:31:20+00:00").getTime(),
-              new Date("2021-09-14T11:41:20+00:00").getTime()
-            ]
-          }
-        ]
-      }
-    ],
-    
-
     this.chartOptions = {
       series: [],
       chart: {
@@ -120,7 +60,7 @@ export class ChartTimelineComponent implements OnInit {
           var a = moment(val[0]);
           var b = moment(val[1]);
           var diff = b.diff(a, "minutes");
-          return diff + "min";
+          return diff + " min";
         }
       },
       xaxis: {
@@ -143,6 +83,7 @@ export class ChartTimelineComponent implements OnInit {
   }
 
   addNewSeries(obj: Object) {
+    // --- Get index of the agent in series
     let name = obj.id
     let idx = this.chartOptions.series.findIndex((s: { name: string; }) => s.name === name) 
     if (idx == -1) {
@@ -156,22 +97,38 @@ export class ChartTimelineComponent implements OnInit {
       this.chartOptions.series[idx]["color"] = markerConf?.circle
     }
 
-    // --- Colect new data
-    let dataPatch: any[] = obj.zoneDescriptors.map(zone => {
-      return {
-        "x": zone.zoneId,
-        "y": [
-          new Date(obj.lastPosUpdate).getTime(),
-          new Date(obj.lastPosUpdate).getTime() + 360000
-        ],
-        "fillColor": markerConf?.circle,
-        "strokeColor": markerConf?.circle
+    // --- Add new data
+    obj.zoneDescriptors.forEach(zone => {
+      // [1] lastPosUpdate is `EntryNotification`
+      if (!this.chartOptions.series[idx]["data"].length || zone.notificationType?.toString() == "EntryNotification") {
+        let patch = {
+          "x": zone.zoneId,
+          "y": [
+            new Date(obj.lastPosUpdate).getTime(),
+            new Date(obj.lastPosUpdate).getTime() + 1000
+          ],
+          "fillColor": markerConf?.circle,
+          "strokeColor": markerConf?.circle
+        }
+        this.chartOptions.series[idx]["data"].push(patch)
+
+      } else {
+        // [2] lastPosUpdate is `undefined` + [3] lastPosUpdate is `ExitNotification`
+        let oldData = this.chartOptions.series[idx]["data"].pop();
+        let patch = {
+          "x": zone.zoneId,
+          "y": [
+            oldData['y'][0],
+            new Date(obj.lastPosUpdate).getTime()
+          ],
+          "fillColor": markerConf?.circle,
+          "strokeColor": markerConf?.circle
+        }
+        this.chartOptions.series[idx]["data"].push(patch)
       }
     });
 
-    // --- Add it
-    this.chartOptions.series[idx]["data"] = dataPatch.concat(this.chartOptions.series[idx]["data"])
-
+    // --- Update chart
     this.chartOptions.series = this.chartOptions.series.map((s: any) => Object.assign({}, s));
   }
 

src/app/model/base-model.ts

@@ -45,21 +45,22 @@ interface Orientation {
     w: number
 }
 
-enum NotificationType {
-    EntryNotification,
-    Unknown
+export enum NotificationType {
+    "EntryNotification",
+    "ExitNotification",
+    "Unknown"
 }
 
 enum ObjectType {
-    HUMAN,
-    BOX,
-    ROBOT
+    "HUMAN",
+    "BOX",
+    "ROBOT"
 }
 
 enum SensorType {
-    UWB,
-    Bluetooth,
-    WiFi
+    "UWB",
+    "Bluetooth",
+    "WiFi"
 }
 
 

src/environments/environment.ts

@@ -23,9 +23,9 @@ export const environment = {
 };
 
 export const MQTTconfig: IMqttServiceOptions = {
-  hostname: 'broker.hivemq.com',
-  port: 8000,
-  protocol: 'ws',
+  hostname: 'broker.emqx.io',
+  port: 8084,
+  protocol: 'wss',
   path: '/mqtt'
 };