diff --git a/src/app/components/chart-timeline/chart-timeline.component.ts b/src/app/components/chart-timeline/chart-timeline.component.ts index 5f3d41a72d625125816087429b03508f15a540ae..8398863bada94f0089ea90be10dd1c2cbf22fa7a 100644 --- a/src/app/components/chart-timeline/chart-timeline.component.ts +++ b/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)); } diff --git a/src/app/model/base-model.ts b/src/app/model/base-model.ts index 28427926e1df77cc40cb1add8083813dd6bff34b..445e5230778b080faa5b3b55e455127af4b3b089 100644 --- a/src/app/model/base-model.ts +++ b/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" } diff --git a/src/environments/environment.ts b/src/environments/environment.ts index d0ea0af4e3e74d177a9f3cc356c8779b3d62ce1c..6086b80d8f4506781e8d4285e67bd1cfdd50663d 100644 --- a/src/environments/environment.ts +++ b/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' };