@acorex-platform/module-activity-insight-client 0.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/acorex-platform-module-activity-insight-client-activity-dashboard-page.component-CAcsbq4I.mjs +167 -0
- package/fesm2022/acorex-platform-module-activity-insight-client-activity-dashboard-page.component-CAcsbq4I.mjs.map +1 -0
- package/fesm2022/acorex-platform-module-activity-insight-client-activity-timeline-page.component-DULl2SRF.mjs +286 -0
- package/fesm2022/acorex-platform-module-activity-insight-client-activity-timeline-page.component-DULl2SRF.mjs.map +1 -0
- package/fesm2022/acorex-platform-module-activity-insight-client-contracts.mjs +262 -0
- package/fesm2022/acorex-platform-module-activity-insight-client-contracts.mjs.map +1 -0
- package/fesm2022/acorex-platform-module-activity-insight-client.mjs +1606 -0
- package/fesm2022/acorex-platform-module-activity-insight-client.mjs.map +1 -0
- package/package.json +28 -0
- package/types/acorex-platform-module-activity-insight-client-contracts.d.ts +398 -0
- package/types/acorex-platform-module-activity-insight-client.d.ts +131 -0
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { inject, signal, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { AXPQueryExecutor } from '@acorex-platform/framework-client/runtime';
|
|
4
|
+
import { runtimeQueryCollectionData } from '@acorex-platform/framework-shared/core';
|
|
5
|
+
import { AXMActivityInsightQueryKeys } from '@acorex-platform/module-activity-insight-client/contracts';
|
|
6
|
+
|
|
7
|
+
class AXMActivityInsightDashboardPageComponent {
|
|
8
|
+
constructor() {
|
|
9
|
+
this.queryExecutor = inject(AXPQueryExecutor);
|
|
10
|
+
this.buckets = signal([], /* @ts-ignore */
|
|
11
|
+
...(ngDevMode ? [{ debugName: "buckets" }] : /* istanbul ignore next */ []));
|
|
12
|
+
this.loading = signal(true, /* @ts-ignore */
|
|
13
|
+
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
14
|
+
this.error = signal(null, /* @ts-ignore */
|
|
15
|
+
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
16
|
+
}
|
|
17
|
+
async ngOnInit() {
|
|
18
|
+
try {
|
|
19
|
+
const result = await this.queryExecutor.fetch(AXMActivityInsightQueryKeys.ActivityEvent.Aggregate, { groupBy: ['name'], take: 20 });
|
|
20
|
+
this.buckets.set(runtimeQueryCollectionData(result)?.items ?? []);
|
|
21
|
+
}
|
|
22
|
+
catch (err) {
|
|
23
|
+
this.error.set(String(err));
|
|
24
|
+
}
|
|
25
|
+
finally {
|
|
26
|
+
this.loading.set(false);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMActivityInsightDashboardPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMActivityInsightDashboardPageComponent, isStandalone: true, selector: "axm-activity-insight-dashboard-page", ngImport: i0, template: `
|
|
31
|
+
|
|
32
|
+
<div class="axm-activity-dashboard-page" style="padding: 1.5rem; max-width: 960px;">
|
|
33
|
+
|
|
34
|
+
<h2>Activity Dashboard</h2>
|
|
35
|
+
|
|
36
|
+
<p>Top activity events grouped by event name.</p>
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
@if (loading()) {
|
|
41
|
+
|
|
42
|
+
<p>Loading aggregates…</p>
|
|
43
|
+
|
|
44
|
+
} @else if (error()) {
|
|
45
|
+
|
|
46
|
+
<p style="color: crimson;">{{ error() }}</p>
|
|
47
|
+
|
|
48
|
+
} @else {
|
|
49
|
+
|
|
50
|
+
<table style="width: 100%; border-collapse: collapse;">
|
|
51
|
+
|
|
52
|
+
<thead>
|
|
53
|
+
|
|
54
|
+
<tr>
|
|
55
|
+
|
|
56
|
+
<th style="text-align: left; border-bottom: 1px solid #ccc; padding: 0.5rem;">Event name</th>
|
|
57
|
+
|
|
58
|
+
<th style="text-align: right; border-bottom: 1px solid #ccc; padding: 0.5rem;">Count</th>
|
|
59
|
+
|
|
60
|
+
</tr>
|
|
61
|
+
|
|
62
|
+
</thead>
|
|
63
|
+
|
|
64
|
+
<tbody>
|
|
65
|
+
|
|
66
|
+
@for (bucket of buckets(); track bucket.key['name']) {
|
|
67
|
+
|
|
68
|
+
<tr>
|
|
69
|
+
|
|
70
|
+
<td style="padding: 0.5rem; border-bottom: 1px solid #eee;">{{ bucket.key['name'] }}</td>
|
|
71
|
+
|
|
72
|
+
<td style="padding: 0.5rem; border-bottom: 1px solid #eee; text-align: right;">{{ bucket.count }}</td>
|
|
73
|
+
|
|
74
|
+
</tr>
|
|
75
|
+
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
</tbody>
|
|
79
|
+
|
|
80
|
+
</table>
|
|
81
|
+
|
|
82
|
+
@if (buckets().length === 0) {
|
|
83
|
+
|
|
84
|
+
<p>No activity data yet. Navigate the app to generate tracked events.</p>
|
|
85
|
+
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
93
|
+
}
|
|
94
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMActivityInsightDashboardPageComponent, decorators: [{
|
|
95
|
+
type: Component,
|
|
96
|
+
args: [{
|
|
97
|
+
selector: 'axm-activity-insight-dashboard-page',
|
|
98
|
+
standalone: true,
|
|
99
|
+
changeDetection: ChangeDetectionStrategy.Eager,
|
|
100
|
+
template: `
|
|
101
|
+
|
|
102
|
+
<div class="axm-activity-dashboard-page" style="padding: 1.5rem; max-width: 960px;">
|
|
103
|
+
|
|
104
|
+
<h2>Activity Dashboard</h2>
|
|
105
|
+
|
|
106
|
+
<p>Top activity events grouped by event name.</p>
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
@if (loading()) {
|
|
111
|
+
|
|
112
|
+
<p>Loading aggregates…</p>
|
|
113
|
+
|
|
114
|
+
} @else if (error()) {
|
|
115
|
+
|
|
116
|
+
<p style="color: crimson;">{{ error() }}</p>
|
|
117
|
+
|
|
118
|
+
} @else {
|
|
119
|
+
|
|
120
|
+
<table style="width: 100%; border-collapse: collapse;">
|
|
121
|
+
|
|
122
|
+
<thead>
|
|
123
|
+
|
|
124
|
+
<tr>
|
|
125
|
+
|
|
126
|
+
<th style="text-align: left; border-bottom: 1px solid #ccc; padding: 0.5rem;">Event name</th>
|
|
127
|
+
|
|
128
|
+
<th style="text-align: right; border-bottom: 1px solid #ccc; padding: 0.5rem;">Count</th>
|
|
129
|
+
|
|
130
|
+
</tr>
|
|
131
|
+
|
|
132
|
+
</thead>
|
|
133
|
+
|
|
134
|
+
<tbody>
|
|
135
|
+
|
|
136
|
+
@for (bucket of buckets(); track bucket.key['name']) {
|
|
137
|
+
|
|
138
|
+
<tr>
|
|
139
|
+
|
|
140
|
+
<td style="padding: 0.5rem; border-bottom: 1px solid #eee;">{{ bucket.key['name'] }}</td>
|
|
141
|
+
|
|
142
|
+
<td style="padding: 0.5rem; border-bottom: 1px solid #eee; text-align: right;">{{ bucket.count }}</td>
|
|
143
|
+
|
|
144
|
+
</tr>
|
|
145
|
+
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
</tbody>
|
|
149
|
+
|
|
150
|
+
</table>
|
|
151
|
+
|
|
152
|
+
@if (buckets().length === 0) {
|
|
153
|
+
|
|
154
|
+
<p>No activity data yet. Navigate the app to generate tracked events.</p>
|
|
155
|
+
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
`,
|
|
163
|
+
}]
|
|
164
|
+
}] });
|
|
165
|
+
|
|
166
|
+
export { AXMActivityInsightDashboardPageComponent };
|
|
167
|
+
//# sourceMappingURL=acorex-platform-module-activity-insight-client-activity-dashboard-page.component-CAcsbq4I.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"acorex-platform-module-activity-insight-client-activity-dashboard-page.component-CAcsbq4I.mjs","sources":["../../../../libs/modules/activity-insight/client/src/lib/features/dashboard/activity-dashboard-page.component.ts"],"sourcesContent":["import { Component, inject, OnInit, signal, ChangeDetectionStrategy } from '@angular/core';\n\nimport { AXPQueryExecutor } from '@acorex-platform/framework-client/runtime';\nimport { runtimeQueryCollectionData } from '@acorex-platform/framework-shared/core';\nimport { ActivityAggregateBucketDto, AXMActivityInsightQueryKeys } from '@acorex-platform/module-activity-insight-client/contracts';\n\n\n\n@Component({\n\n selector: 'axm-activity-insight-dashboard-page',\n\n standalone: true,\n\n changeDetection: ChangeDetectionStrategy.Eager,\n template: `\n\n <div class=\"axm-activity-dashboard-page\" style=\"padding: 1.5rem; max-width: 960px;\">\n\n <h2>Activity Dashboard</h2>\n\n <p>Top activity events grouped by event name.</p>\n\n\n\n @if (loading()) {\n\n <p>Loading aggregates…</p>\n\n } @else if (error()) {\n\n <p style=\"color: crimson;\">{{ error() }}</p>\n\n } @else {\n\n <table style=\"width: 100%; border-collapse: collapse;\">\n\n <thead>\n\n <tr>\n\n <th style=\"text-align: left; border-bottom: 1px solid #ccc; padding: 0.5rem;\">Event name</th>\n\n <th style=\"text-align: right; border-bottom: 1px solid #ccc; padding: 0.5rem;\">Count</th>\n\n </tr>\n\n </thead>\n\n <tbody>\n\n @for (bucket of buckets(); track bucket.key['name']) {\n\n <tr>\n\n <td style=\"padding: 0.5rem; border-bottom: 1px solid #eee;\">{{ bucket.key['name'] }}</td>\n\n <td style=\"padding: 0.5rem; border-bottom: 1px solid #eee; text-align: right;\">{{ bucket.count }}</td>\n\n </tr>\n\n }\n\n </tbody>\n\n </table>\n\n @if (buckets().length === 0) {\n\n <p>No activity data yet. Navigate the app to generate tracked events.</p>\n\n }\n\n }\n\n </div>\n\n `,\n\n})\n\nexport class AXMActivityInsightDashboardPageComponent implements OnInit {\n\n private readonly queryExecutor = inject(AXPQueryExecutor);\n\n\n\n readonly buckets = signal<ActivityAggregateBucketDto[]>([]);\n\n readonly loading = signal(true);\n\n readonly error = signal<string | null>(null);\n\n\n\n async ngOnInit(): Promise<void> {\n\n try {\n\n const result = await this.queryExecutor.fetch<Record<string, unknown>, ActivityAggregateBucketDto>(\n AXMActivityInsightQueryKeys.ActivityEvent.Aggregate,\n { groupBy: ['name'], take: 20 },\n );\n\n this.buckets.set(runtimeQueryCollectionData(result)?.items ?? []);\n\n } catch (err) {\n\n this.error.set(String(err));\n\n } finally {\n\n this.loading.set(false);\n\n }\n\n }\n\n}\n\n"],"names":[],"mappings":";;;;;;MAiFa,wCAAwC,CAAA;AAzErD,IAAA,WAAA,GAAA;AA2EmB,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC;QAIhD,IAAA,CAAA,OAAO,GAAG,MAAM,CAA+B,EAAE;oFAAC;QAElD,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,IAAI;oFAAC;QAEtB,IAAA,CAAA,KAAK,GAAG,MAAM,CAAgB,IAAI;kFAAC;AA2B7C,IAAA;AAvBC,IAAA,MAAM,QAAQ,GAAA;AAEZ,QAAA,IAAI;YAEF,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,KAAK,CAC3C,2BAA2B,CAAC,aAAa,CAAC,SAAS,EACnD,EAAE,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAChC;AAED,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,0BAA0B,CAAC,MAAM,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC;QAEnE;QAAE,OAAO,GAAG,EAAE;YAEZ,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAE7B;gBAAU;AAER,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;QAEzB;IAEF;8GAnCW,wCAAwC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wCAAwC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qCAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAlEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,KAAA,EAAA,CAAA,CAAA;;2FAIU,wCAAwC,EAAA,UAAA,EAAA,CAAA;kBAzEpD,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AAET,oBAAA,QAAQ,EAAE,qCAAqC;AAE/C,oBAAA,UAAU,EAAE,IAAI;oBAEhB,eAAe,EAAE,uBAAuB,CAAC,KAAK;AAC9C,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DT,EAAA,CAAA;AAEF,iBAAA;;;;;"}
|
|
@@ -0,0 +1,286 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { inject, signal, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/forms';
|
|
4
|
+
import { FormsModule } from '@angular/forms';
|
|
5
|
+
import { AXPQueryExecutor } from '@acorex-platform/framework-client/runtime';
|
|
6
|
+
import { runtimeQueryPayloadData } from '@acorex-platform/framework-shared/core';
|
|
7
|
+
import { AXMActivityInsightQueryKeys } from '@acorex-platform/module-activity-insight-client/contracts';
|
|
8
|
+
|
|
9
|
+
class AXMActivityInsightTimelinePageComponent {
|
|
10
|
+
constructor() {
|
|
11
|
+
this.queryExecutor = inject(AXPQueryExecutor);
|
|
12
|
+
this.kind = 'session';
|
|
13
|
+
this.lookupId = '';
|
|
14
|
+
this.entityName = '';
|
|
15
|
+
this.entityId = '';
|
|
16
|
+
this.timeline = signal(null, /* @ts-ignore */
|
|
17
|
+
...(ngDevMode ? [{ debugName: "timeline" }] : /* istanbul ignore next */ []));
|
|
18
|
+
this.loading = signal(false, /* @ts-ignore */
|
|
19
|
+
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
20
|
+
this.error = signal(null, /* @ts-ignore */
|
|
21
|
+
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
22
|
+
}
|
|
23
|
+
async loadTimeline() {
|
|
24
|
+
this.loading.set(true);
|
|
25
|
+
this.error.set(null);
|
|
26
|
+
this.timeline.set(null);
|
|
27
|
+
try {
|
|
28
|
+
let result;
|
|
29
|
+
if (this.kind === 'session') {
|
|
30
|
+
result = runtimeQueryPayloadData(await this.queryExecutor.fetch(AXMActivityInsightQueryKeys.ActivityTimeline.Session, this.lookupId));
|
|
31
|
+
}
|
|
32
|
+
else if (this.kind === 'journey') {
|
|
33
|
+
result = runtimeQueryPayloadData(await this.queryExecutor.fetch(AXMActivityInsightQueryKeys.ActivityTimeline.Journey, this.lookupId));
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
result = runtimeQueryPayloadData(await this.queryExecutor.fetch(AXMActivityInsightQueryKeys.ActivityTimeline.Entity, { entityName: this.entityName, entityId: this.entityId }));
|
|
37
|
+
}
|
|
38
|
+
this.timeline.set(result ?? { id: '', title: 'Timeline', steps: [] });
|
|
39
|
+
}
|
|
40
|
+
catch (err) {
|
|
41
|
+
this.error.set(String(err));
|
|
42
|
+
}
|
|
43
|
+
finally {
|
|
44
|
+
this.loading.set(false);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMActivityInsightTimelinePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
48
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMActivityInsightTimelinePageComponent, isStandalone: true, selector: "axm-activity-insight-timeline-page", ngImport: i0, template: `
|
|
49
|
+
|
|
50
|
+
<div class="axm-activity-timeline-page" style="padding: 1.5rem; max-width: 960px;">
|
|
51
|
+
|
|
52
|
+
<h2>Activity Timelines</h2>
|
|
53
|
+
|
|
54
|
+
<p>Load session, journey, or entity timelines from stored activity events.</p>
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0;">
|
|
59
|
+
|
|
60
|
+
<label>
|
|
61
|
+
|
|
62
|
+
Kind
|
|
63
|
+
|
|
64
|
+
<select [(ngModel)]="kind" style="margin-left: 0.5rem;">
|
|
65
|
+
|
|
66
|
+
<option value="session">Session</option>
|
|
67
|
+
|
|
68
|
+
<option value="journey">Journey</option>
|
|
69
|
+
|
|
70
|
+
<option value="entity">Entity</option>
|
|
71
|
+
|
|
72
|
+
</select>
|
|
73
|
+
|
|
74
|
+
</label>
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
@if (kind === 'entity') {
|
|
79
|
+
|
|
80
|
+
<label>
|
|
81
|
+
|
|
82
|
+
Entity name
|
|
83
|
+
|
|
84
|
+
<input [(ngModel)]="entityName" style="margin-left: 0.5rem;" />
|
|
85
|
+
|
|
86
|
+
</label>
|
|
87
|
+
|
|
88
|
+
<label>
|
|
89
|
+
|
|
90
|
+
Entity ID
|
|
91
|
+
|
|
92
|
+
<input [(ngModel)]="entityId" style="margin-left: 0.5rem;" />
|
|
93
|
+
|
|
94
|
+
</label>
|
|
95
|
+
|
|
96
|
+
} @else {
|
|
97
|
+
|
|
98
|
+
<label>
|
|
99
|
+
|
|
100
|
+
{{ kind === 'session' ? 'Session' : 'Journey' }} ID
|
|
101
|
+
|
|
102
|
+
<input [(ngModel)]="lookupId" style="margin-left: 0.5rem;" />
|
|
103
|
+
|
|
104
|
+
</label>
|
|
105
|
+
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
<button type="button" (click)="loadTimeline()" [disabled]="loading()">Load timeline</button>
|
|
111
|
+
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
@if (error()) {
|
|
117
|
+
|
|
118
|
+
<p style="color: crimson;">{{ error() }}</p>
|
|
119
|
+
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
@if (timeline(); as data) {
|
|
125
|
+
|
|
126
|
+
<h3>{{ data.title }}</h3>
|
|
127
|
+
|
|
128
|
+
<ol>
|
|
129
|
+
|
|
130
|
+
@for (step of data.steps; track step.activityId) {
|
|
131
|
+
|
|
132
|
+
<li>
|
|
133
|
+
|
|
134
|
+
<strong>{{ step.name }}</strong>
|
|
135
|
+
|
|
136
|
+
— {{ step.timestamp }}
|
|
137
|
+
|
|
138
|
+
@if (step.durationMs) {
|
|
139
|
+
|
|
140
|
+
({{ step.durationMs }} ms)
|
|
141
|
+
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
</li>
|
|
145
|
+
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
</ol>
|
|
149
|
+
|
|
150
|
+
@if (data.steps.length === 0) {
|
|
151
|
+
|
|
152
|
+
<p>No steps found for this timeline.</p>
|
|
153
|
+
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
161
|
+
}
|
|
162
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMActivityInsightTimelinePageComponent, decorators: [{
|
|
163
|
+
type: Component,
|
|
164
|
+
args: [{
|
|
165
|
+
selector: 'axm-activity-insight-timeline-page',
|
|
166
|
+
standalone: true,
|
|
167
|
+
imports: [FormsModule],
|
|
168
|
+
changeDetection: ChangeDetectionStrategy.Eager,
|
|
169
|
+
template: `
|
|
170
|
+
|
|
171
|
+
<div class="axm-activity-timeline-page" style="padding: 1.5rem; max-width: 960px;">
|
|
172
|
+
|
|
173
|
+
<h2>Activity Timelines</h2>
|
|
174
|
+
|
|
175
|
+
<p>Load session, journey, or entity timelines from stored activity events.</p>
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0;">
|
|
180
|
+
|
|
181
|
+
<label>
|
|
182
|
+
|
|
183
|
+
Kind
|
|
184
|
+
|
|
185
|
+
<select [(ngModel)]="kind" style="margin-left: 0.5rem;">
|
|
186
|
+
|
|
187
|
+
<option value="session">Session</option>
|
|
188
|
+
|
|
189
|
+
<option value="journey">Journey</option>
|
|
190
|
+
|
|
191
|
+
<option value="entity">Entity</option>
|
|
192
|
+
|
|
193
|
+
</select>
|
|
194
|
+
|
|
195
|
+
</label>
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
@if (kind === 'entity') {
|
|
200
|
+
|
|
201
|
+
<label>
|
|
202
|
+
|
|
203
|
+
Entity name
|
|
204
|
+
|
|
205
|
+
<input [(ngModel)]="entityName" style="margin-left: 0.5rem;" />
|
|
206
|
+
|
|
207
|
+
</label>
|
|
208
|
+
|
|
209
|
+
<label>
|
|
210
|
+
|
|
211
|
+
Entity ID
|
|
212
|
+
|
|
213
|
+
<input [(ngModel)]="entityId" style="margin-left: 0.5rem;" />
|
|
214
|
+
|
|
215
|
+
</label>
|
|
216
|
+
|
|
217
|
+
} @else {
|
|
218
|
+
|
|
219
|
+
<label>
|
|
220
|
+
|
|
221
|
+
{{ kind === 'session' ? 'Session' : 'Journey' }} ID
|
|
222
|
+
|
|
223
|
+
<input [(ngModel)]="lookupId" style="margin-left: 0.5rem;" />
|
|
224
|
+
|
|
225
|
+
</label>
|
|
226
|
+
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
|
|
230
|
+
|
|
231
|
+
<button type="button" (click)="loadTimeline()" [disabled]="loading()">Load timeline</button>
|
|
232
|
+
|
|
233
|
+
</div>
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
|
|
237
|
+
@if (error()) {
|
|
238
|
+
|
|
239
|
+
<p style="color: crimson;">{{ error() }}</p>
|
|
240
|
+
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
|
|
245
|
+
@if (timeline(); as data) {
|
|
246
|
+
|
|
247
|
+
<h3>{{ data.title }}</h3>
|
|
248
|
+
|
|
249
|
+
<ol>
|
|
250
|
+
|
|
251
|
+
@for (step of data.steps; track step.activityId) {
|
|
252
|
+
|
|
253
|
+
<li>
|
|
254
|
+
|
|
255
|
+
<strong>{{ step.name }}</strong>
|
|
256
|
+
|
|
257
|
+
— {{ step.timestamp }}
|
|
258
|
+
|
|
259
|
+
@if (step.durationMs) {
|
|
260
|
+
|
|
261
|
+
({{ step.durationMs }} ms)
|
|
262
|
+
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
</li>
|
|
266
|
+
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
</ol>
|
|
270
|
+
|
|
271
|
+
@if (data.steps.length === 0) {
|
|
272
|
+
|
|
273
|
+
<p>No steps found for this timeline.</p>
|
|
274
|
+
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
</div>
|
|
280
|
+
|
|
281
|
+
`,
|
|
282
|
+
}]
|
|
283
|
+
}] });
|
|
284
|
+
|
|
285
|
+
export { AXMActivityInsightTimelinePageComponent };
|
|
286
|
+
//# sourceMappingURL=acorex-platform-module-activity-insight-client-activity-timeline-page.component-DULl2SRF.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"acorex-platform-module-activity-insight-client-activity-timeline-page.component-DULl2SRF.mjs","sources":["../../../../libs/modules/activity-insight/client/src/lib/features/timeline/activity-timeline-page.component.ts"],"sourcesContent":["import { Component, inject, signal, ChangeDetectionStrategy } from '@angular/core';\n\nimport { FormsModule } from '@angular/forms';\n\nimport { AXPQueryExecutor } from '@acorex-platform/framework-client/runtime';\nimport { runtimeQueryPayloadData } from '@acorex-platform/framework-shared/core';\n\nimport {\n\n AXMActivityInsightQueryKeys,\n\n type ActivityTimelineDto,\n\n} from '@acorex-platform/module-activity-insight-client/contracts';\n\n\n\ntype TimelineKind = 'session' | 'journey' | 'entity';\n\n\n\n@Component({\n\n selector: 'axm-activity-insight-timeline-page',\n\n standalone: true,\n\n imports: [FormsModule],\n\n changeDetection: ChangeDetectionStrategy.Eager,\n template: `\n\n <div class=\"axm-activity-timeline-page\" style=\"padding: 1.5rem; max-width: 960px;\">\n\n <h2>Activity Timelines</h2>\n\n <p>Load session, journey, or entity timelines from stored activity events.</p>\n\n\n\n <div style=\"display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0;\">\n\n <label>\n\n Kind\n\n <select [(ngModel)]=\"kind\" style=\"margin-left: 0.5rem;\">\n\n <option value=\"session\">Session</option>\n\n <option value=\"journey\">Journey</option>\n\n <option value=\"entity\">Entity</option>\n\n </select>\n\n </label>\n\n\n\n @if (kind === 'entity') {\n\n <label>\n\n Entity name\n\n <input [(ngModel)]=\"entityName\" style=\"margin-left: 0.5rem;\" />\n\n </label>\n\n <label>\n\n Entity ID\n\n <input [(ngModel)]=\"entityId\" style=\"margin-left: 0.5rem;\" />\n\n </label>\n\n } @else {\n\n <label>\n\n {{ kind === 'session' ? 'Session' : 'Journey' }} ID\n\n <input [(ngModel)]=\"lookupId\" style=\"margin-left: 0.5rem;\" />\n\n </label>\n\n }\n\n\n\n <button type=\"button\" (click)=\"loadTimeline()\" [disabled]=\"loading()\">Load timeline</button>\n\n </div>\n\n\n\n @if (error()) {\n\n <p style=\"color: crimson;\">{{ error() }}</p>\n\n }\n\n\n\n @if (timeline(); as data) {\n\n <h3>{{ data.title }}</h3>\n\n <ol>\n\n @for (step of data.steps; track step.activityId) {\n\n <li>\n\n <strong>{{ step.name }}</strong>\n\n — {{ step.timestamp }}\n\n @if (step.durationMs) {\n\n ({{ step.durationMs }} ms)\n\n }\n\n </li>\n\n }\n\n </ol>\n\n @if (data.steps.length === 0) {\n\n <p>No steps found for this timeline.</p>\n\n }\n\n }\n\n </div>\n\n `,\n\n})\n\nexport class AXMActivityInsightTimelinePageComponent {\n\n private readonly queryExecutor = inject(AXPQueryExecutor);\n\n\n\n kind: TimelineKind = 'session';\n\n lookupId = '';\n\n entityName = '';\n\n entityId = '';\n\n\n\n readonly timeline = signal<ActivityTimelineDto | null>(null);\n\n readonly loading = signal(false);\n\n readonly error = signal<string | null>(null);\n\n\n\n async loadTimeline(): Promise<void> {\n\n this.loading.set(true);\n\n this.error.set(null);\n\n this.timeline.set(null);\n\n\n\n try {\n\n let result: ActivityTimelineDto | null | undefined;\n\n if (this.kind === 'session') {\n\n result = runtimeQueryPayloadData(\n await this.queryExecutor.fetch<string, ActivityTimelineDto>(\n AXMActivityInsightQueryKeys.ActivityTimeline.Session,\n this.lookupId,\n ),\n );\n } else if (this.kind === 'journey') {\n result = runtimeQueryPayloadData(\n await this.queryExecutor.fetch<string, ActivityTimelineDto>(\n AXMActivityInsightQueryKeys.ActivityTimeline.Journey,\n this.lookupId,\n ),\n );\n } else {\n result = runtimeQueryPayloadData(\n await this.queryExecutor.fetch<\n { entityName: string; entityId: string },\n ActivityTimelineDto\n >(\n AXMActivityInsightQueryKeys.ActivityTimeline.Entity,\n { entityName: this.entityName, entityId: this.entityId },\n ),\n );\n\n }\n\n this.timeline.set(result ?? { id: '', title: 'Timeline', steps: [] });\n\n } catch (err) {\n\n this.error.set(String(err));\n\n } finally {\n\n this.loading.set(false);\n\n }\n\n }\n\n}\n\n"],"names":[],"mappings":"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"}
|