Skip to content

Commit 331849d

Browse files
elmilan06elmilan06
committed
feat: implement timeline visualization for compliance evaluations
1 parent 75842a8 commit 331849d

3 files changed

Lines changed: 1821 additions & 232 deletions

File tree

‎frontend/src/app/compliance/shared/components/utm-compliance-timeline/compliance-timeline.component.html‎

Lines changed: 5 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,11 @@
1-
<div class="container-fluid p-3">
2-
<div class="card-header p-2">
1+
<div class="card-header p-2">
32
<h6 class="d-flex align-items-center text-blue-800 font-weight-light">
43
Control Status Timeline
54
</h6>
65
</div>
7-
<div class="card-body p-2 h-10">
8-
<div *ngIf="evaluations.length > 0 && !loading"
9-
class="m-0 h-100" id="eventsTimeline">
10-
<div class="timeline-scroll-wrapper">
11-
<ul class="timeline">
12-
<li *ngFor="let evaluation of evaluations" class="cursor-pointer">
13-
<div class="timeline-item" (click)="selectEvaluation(evaluation)">
14-
<!--<div class="utm_tmlabel timeline-label cursor-pointer"
15-
[ngClass]="selected === evaluation ?
16-
evaluation.status === 'COMPLIANT' ? 'selected compliant': 'selected non-compliant'
17-
: ''"
18-
(click)="selectEvaluation(evaluation)">
19-
<p class="vertical-text">{{ evaluation.status }}</p>
20-
</div>
21-
22-
<div class="timeline-line" [ngClass]="evaluation.status === 'COMPLIANT' ? 'compliant' : 'non-compliant'"></div>-->
23-
24-
<div class="timeline-icons" [ngClass]="evaluation.status === 'COMPLIANT' ? 'compliant' : 'non-compliant'"></div>
25-
26-
<time class="timeline-time">
27-
{{ evaluation.timestamp | date:formatDateEnum.UTM_SHORT:'UTC' }}
28-
</time>
29-
</div>
30-
31-
</li>
32-
</ul>
33-
<!--<div *ngIf="loadingMore && !noMoreResult"
34-
class="d-flex justify-content-center align-items-center p-3 loading">
35-
<app-utm-spinner [height]="'35px'" [loading]="true"
36-
[width]="'35px'" label="Loading more events"></app-utm-spinner>
37-
</div>
38-
<div *ngIf="noMoreResult"
39-
class="d-flex justify-content-center align-items-center p-3 loading">
40-
<i class="icon-three-bars font-size-lg text-blue-800"></i>
41-
<span class="text-blue-800 mt-2">No more data</span>
42-
</div>-->
43-
</div>
44-
<!--<div *ngIf="evaluations && evaluations.length>0" class="my-3 mt-1">
45-
<div class="row justify-content-center">
46-
<ngb-pagination (pageChange)="loadPage($event)"
47-
[(page)]="page"
48-
[boundaryLinks]="true"
49-
[collectionSize]="totalItems"
50-
[maxSize]="3"
51-
[pageSize]="itemsPerPage"eastc
52-
[rotate]="true"
53-
[size]="'sm'"></ngb-pagination>
54-
<app-utm-items-per-page (itemsInPage)="onItemsPerPageChange($event)"
55-
class="ml-3">
56-
</app-utm-items-per-page>
57-
</div>-->
58-
59-
</div>
60-
</div>
61-
<div *ngIf="loading"
62-
class=" h-100 d-flex justify-content-center align-items-center p-3 loading">
63-
<app-utm-spinner [height]="'35px'" [loading]="true"
64-
[width]="'35px'" label="Loading"></app-utm-spinner>
65-
</div>
66-
<div *ngIf="evaluations.length===0 && !loading"
67-
class="card-body message-container p-2 timeline-container h-100">
68-
<div class="h-100 w-100 d-flex justify-content-center align-items-center flex-column">
69-
<div class="event-icon utm-icon-lg utm-icon-light"></div>
70-
<h6 class="text-blue-800 mt-2 text-justify font-weight-light">
71-
No data found
72-
</h6>
73-
</div>
6+
<div class="chart-container">
7+
<div echarts [options]="options" class="chart"
8+
(chartClick)="onChartClick($event)">
749
</div>
7510
</div>
11+

‎frontend/src/app/compliance/shared/components/utm-compliance-timeline/compliance-timeline.component.scss‎

Lines changed: 14 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,19 @@
1-
2-
.timeline-scroll-wrapper {
3-
width: 100%;
4-
overflow-x: auto;
5-
overflow-y: hidden;
6-
padding-bottom: 8px;
7-
}
8-
9-
.timeline {
10-
display: flex;
11-
flex-direction: row;
12-
gap: 25px;
13-
list-style: none;
14-
padding: 10px 0;
15-
align-items: center;
16-
position: relative;
17-
min-width: max-content;
18-
}
19-
20-
.timeline::before {
21-
position: absolute;
22-
top: 25px;
23-
left: 0;
24-
right: 0;
25-
height: 1px;
26-
z-index: 0;
1+
.chart-container {
272
width: 100%;
28-
border-radius: unset;
3+
height: 200px;
4+
overflow-x: auto;
5+
overflow-y: hidden;
6+
display: block; /* ← IMPORTANTE */
7+
white-space: nowrap; /* ← permite crecimiento horizontal */
298
}
309

31-
.timeline-item {
32-
display: flex;
33-
flex-direction: column;
34-
align-items: center;
35-
text-align: center;
36-
width: 100px;
37-
}
38-
39-
.timeline-label {
40-
font-size: 14px;
41-
border-bottom: 3px solid #4caf50 !important;
42-
height: 150px;
43-
display: flex;
44-
align-items: center;
45-
width: 50px;
46-
justify-content: center;
47-
box-shadow: 2px 0 1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
48-
}
49-
50-
.timeline-line {
51-
width: 2px;
52-
height: 30px;
53-
margin: 4px 0;
54-
}
55-
56-
.timeline-icons {
57-
width: 25px;
58-
height: 25px;
59-
border-radius: 50%;
60-
display: flex;
61-
align-items: center;
62-
justify-content: center;
63-
color: white;
64-
font-size: 20px;
65-
z-index: 2;
66-
border-color: whitesmoke !important;
67-
box-shadow: 0 0 0 4px rgba(104, 159, 56, .25);
68-
}
69-
70-
.timeline-icons::before {
71-
content: '\ea16';
72-
font-family: icomoon, sans-serif;
73-
color: white;
74-
font-size: 12px;
75-
}
7610

77-
.timeline-icons::after {
78-
display: none;
79-
}
80-
81-
.timeline-line.compliant,
82-
.timeline-icons.compliant,
83-
.timeline-label.compliant,
84-
.timeline-label.compliant:hover {
85-
background: #4CAF50;
86-
}
87-
88-
.timeline-line.non-compliant,
89-
.timeline-icons.non-compliant,
90-
.timeline-label.non-compliant,
91-
.timeline-label.non-compliant:hover {
92-
background: #DC3545;
93-
}
94-
95-
.timeline-time {
96-
font-size: 12px;
97-
color: #666;
98-
margin-top: 6px;
99-
margin-bottom: 0 !important;
100-
}
101-
102-
.vertical-text {
103-
transform: rotate(270deg);
104-
}
105-
106-
.selected p{
107-
color: white;
108-
}
11+
.chart {
12+
height: 200px;
13+
width: max-content; /* ← permite que ECharts crezca horizontalmente */
14+
min-width: 100%; /* ← pero nunca menos que el contenedor */
15+
}
10916

110-
.timeline-label:hover {
111-
background-color: #f0f0f0;
112-
box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.12);
113-
}
17+
.echarts canvas {
18+
width: max-content !important;
19+
}

0 commit comments

Comments
 (0)