Skip to content

Commit 6c33c2d

Browse files
ptechofficialptechofficial
authored
Merge pull request #232 from wurstbrot/feat/heatmap
Overlay for Comprehensive Heatmap
2 parents 3aef850 + 64e2765 commit 6c33c2d

File tree

3 files changed

+252
-31
lines changed

3 files changed

+252
-31
lines changed

‎src/app/component/circular-heatmap/circular-heatmap.component.css

Lines changed: 48 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,70 @@
11
.margin30 {
2-
margin-bottom: 30px;
3-
}
2+
margin-bottom: 30px;
3+
}
44
.axis path,
55
.axis line {
6-
fill: none;
7-
stroke: #000;
8-
shape-rendering: crispEdges;
9-
}
10-
6+
fill: none;
7+
stroke: #000;
8+
shape-rendering: crispEdges;
9+
}
1110

12-
button{
11+
.normal-button {
1312
background-color: white;
1413
border: none;
1514
text-align: left;
16-
cursor:pointer;
15+
cursor: pointer;
1716
}
1817

1918
.example-card {
2019
float: right;
21-
width:25%;
22-
margin:5%;
20+
width: 25%;
21+
margin: 5%;
2322
padding: 20px;
2423
}
25-
.downloadButtonClass{
24+
.downloadButtonClass {
2625
position: absolute;
2726
padding: 10px;
2827
bottom: 5%;
2928
right: 5%;
3029
}
31-
.resetButtonClass{
30+
.resetButtonClass {
3231
position: absolute;
3332
padding: 10px;
3433
bottom: 5%;
3534
right: 18%;
36-
}
35+
}
36+
.overlay-details {
37+
z-index: 2;
38+
background-color: rgba(0, 0, 0, 0.555);
39+
backdrop-filter: blur(3px);
40+
position: absolute;
41+
/* padding: 6em; */
42+
/* margin-left: 20%; */
43+
width: 60%;
44+
min-height: 100%;
45+
}
46+
.overlay-modal {
47+
/* border: 1px solid black; */
48+
margin: 5em;
49+
background-color: rgb(238, 238, 238);
50+
padding: 1em;
51+
border-radius: 1em;
52+
height: 100%;
53+
}
54+
55+
.overlay-header {
56+
display: grid;
57+
grid-template-columns: 1fr 0.1fr;
58+
}
59+
60+
.overlay-close {
61+
border: black solid 1px;
62+
background-color: rgba(0, 0, 0, 0);
63+
border: none;
64+
color: black;
65+
grid-column: 2/3;
66+
grid-row: 1/4;
67+
display: grid;
68+
justify-content: top;
69+
margin-left: auto;
70+
}

‎src/app/component/circular-heatmap/circular-heatmap.component.html

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,175 @@
22
<div class="row">
33
<div class="col-md-3"></div>
44
<div class="col-md-6">
5+
<div class="overlay-details" [hidden]="!showOverlay">
6+
<div *ngIf="taskDetails; then taskTrue; else taskFalse"></div>
7+
<ng-template #taskTrue>
8+
<div class="overlay-modal">
9+
<mat-accordion multi="true" class="overlay-accordion">
10+
<div
11+
*ngIf="
12+
taskDetails.navigationExtras;
13+
then navigationTrue;
14+
else navigationFalse
15+
"></div>
16+
<div>
17+
<ng-template #navigationTrue>
18+
<div class="overlay-header">
19+
<button class="overlay-close" (click)="closeOverlay()">
20+
<mat-icon class="white-icon">close</mat-icon>
21+
</button>
22+
<h2>{{ taskDetails.navigationExtras.dimension }}</h2>
23+
<h3>{{ taskDetails.navigationExtras.subDimension }}</h3>
24+
<h4>
25+
{{ taskDetails.navigationExtras.taskName }}
26+
</h4>
27+
</div>
28+
</ng-template>
29+
<ng-template #navigationFalse>
30+
<div class="overlay-header">
31+
<button class="overlay-close" (click)="closeOverlay()">
32+
<mat-icon class="white-icon">close</mat-icon>
33+
</button>
34+
<h2>Nothing to show</h2>
35+
</div>
36+
</ng-template>
37+
</div>
38+
<mat-expansion-panel
39+
[expanded]="true"
40+
*ngIf="taskDetails.description">
41+
<mat-expansion-panel-header>
42+
<mat-panel-title>
43+
<b>Description</b>
44+
</mat-panel-title>
45+
</mat-expansion-panel-header>
46+
<ng-template matExpansionPanelContent>
47+
<p [innerHTML]="taskDetails.description"></p>
48+
</ng-template>
49+
</mat-expansion-panel>
50+
<mat-expansion-panel [expanded]="true" *ngIf="taskDetails.risk">
51+
<mat-expansion-panel-header>
52+
<mat-panel-title>
53+
<b>Risk</b>
54+
</mat-panel-title>
55+
</mat-expansion-panel-header>
56+
<ng-template matExpansionPanelContent>
57+
<p [innerHTML]="taskDetails.risk"></p>
58+
</ng-template>
59+
</mat-expansion-panel>
60+
<mat-expansion-panel
61+
[expanded]="true"
62+
*ngIf="taskDetails.measure">
63+
<mat-expansion-panel-header>
64+
<mat-panel-title>
65+
<b>Measure</b>
66+
</mat-panel-title>
67+
</mat-expansion-panel-header>
68+
<ng-template matExpansionPanelContent>
69+
<p [innerHTML]="taskDetails.measure"></p>
70+
</ng-template>
71+
</mat-expansion-panel>
72+
<mat-expansion-panel
73+
[expanded]="true"
74+
*ngIf="taskDetails.implementation">
75+
<mat-expansion-panel-header>
76+
<mat-panel-title>
77+
<b>Implementation Guide</b>
78+
</mat-panel-title>
79+
</mat-expansion-panel-header>
80+
<ng-template matExpansionPanelContent>
81+
<ul>
82+
<li *ngFor="let implement of taskDetails.implementation">
83+
<a href="{{ implement.url }}">{{ implement.name }}</a>
84+
</li>
85+
</ul>
86+
</ng-template>
87+
</mat-expansion-panel>
88+
<mat-expansion-panel
89+
[expanded]="true"
90+
*ngIf="taskDetails.dependsOn">
91+
<mat-expansion-panel-header>
92+
<mat-panel-title>
93+
<b>Depends On</b>
94+
</mat-panel-title>
95+
</mat-expansion-panel-header>
96+
<ng-template matExpansionPanelContent>
97+
<p [innerHTML]="taskDetails.dependsOn"></p>
98+
</ng-template>
99+
</mat-expansion-panel>
100+
<mat-expansion-panel
101+
[expanded]="true"
102+
*ngIf="taskDetails.difficultyOfImplementation">
103+
<mat-expansion-panel-header>
104+
<mat-panel-title>
105+
<b>Difficulty of Implementation</b>
106+
</mat-panel-title>
107+
</mat-expansion-panel-header>
108+
<ng-template matExpansionPanelContent>
109+
<p>
110+
Knowledge:
111+
{{ taskDetails.difficultyOfImplementation.knowledge }}
112+
</p>
113+
<p>Time: {{ taskDetails.difficultyOfImplementation.time }}</p>
114+
<p>
115+
Resources:
116+
{{ taskDetails.difficultyOfImplementation.resources }}
117+
</p>
118+
</ng-template>
119+
</mat-expansion-panel>
120+
<mat-expansion-panel
121+
[expanded]="true"
122+
*ngIf="taskDetails.references">
123+
<mat-expansion-panel-header>
124+
<mat-panel-title>
125+
<b>References</b>
126+
</mat-panel-title>
127+
</mat-expansion-panel-header>
128+
<ng-template matExpansionPanelContent>
129+
<b>ISO 27001-2017:</b>
130+
131+
<ul>
132+
<li
133+
*ngFor="
134+
let iso of taskDetails.references['iso27001-2017']
135+
">
136+
{{ iso }}
137+
</li>
138+
</ul>
139+
<b>ISO 27001-2022:</b>
140+
141+
<ul>
142+
<li
143+
*ngFor="
144+
let iso of taskDetails.references['iso27001-2022']
145+
">
146+
{{ iso }}
147+
</li>
148+
</ul>
149+
<!-- </p> -->
150+
<p>
151+
<b>Resources:</b>
152+
{{ taskDetails.references.samm2 }}
153+
</p>
154+
</ng-template>
155+
</mat-expansion-panel>
156+
</mat-accordion>
157+
</div>
158+
</ng-template>
159+
<ng-template #taskFalse>
160+
<div class="overlay-modal">
161+
<button class="overlay-close" (click)="closeOverlay()">
162+
<mat-icon class="white-icon">close</mat-icon>
163+
</button>
164+
<mat-expansion-panel [expanded]="false" hideToggle disabled>
165+
<mat-expansion-panel-header>
166+
<mat-panel-title>
167+
<b>Nothing to show</b>
168+
</mat-panel-title>
169+
</mat-expansion-panel-header>
170+
</mat-expansion-panel>
171+
</div>
172+
</ng-template>
173+
</div>
5174
<div id="chart" class="heatmapClass">
6175
<mat-card class="example-card" *ngIf="showTaskCard">
7176
<mat-card-title-group>
@@ -18,6 +187,7 @@
18187
color="primary">
19188
</mat-checkbox>
20189
<button
190+
class="normal-button"
21191
(click)="
22192
navigate(currentDimension, cardHeader, 1, task['taskName'])
23193
">
@@ -31,6 +201,7 @@
31201
color="primary">
32202
</mat-checkbox>
33203
<button
204+
class="normal-button"
34205
(click)="
35206
navigate(currentDimension, cardHeader, 1, task['taskName'])
36207
">
@@ -41,12 +212,14 @@
41212
</mat-card-content>
42213
</mat-card>
43214
<button
215+
class="normal-button"
44216
mat-raised-button
45217
class="downloadButtonClass"
46218
(click)="SaveEditedYAMLfile()">
47219
Download edited YAML file
48220
</button>
49221
<button
222+
class="normal-button"
50223
mat-raised-button
51224
class="resetButtonClass"
52225
(click)="ResetIsImplemented()">

‎src/app/component/circular-heatmap/circular-heatmap.component.ts

Lines changed: 31 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,12 @@ export class CircularHeatmapComponent implements OnInit {
3535
radial_labels: string[] = [];
3636
YamlObject: any;
3737
segment_labels: string[] = [];
38-
constructor(private yaml: ymlService, private router: Router) {}
38+
taskDetails: any;
39+
showOverlay: boolean;
40+
41+
constructor(private yaml: ymlService, private router: Router) {
42+
this.showOverlay = false;
43+
}
3944

4045
ngOnInit(): void {
4146
this.yaml.setURI('./assets/YAML/meta.yaml');
@@ -56,8 +61,10 @@ export class CircularHeatmapComponent implements OnInit {
5661
this.yaml.getJson().subscribe(data => {
5762
//console.log(this.radial_labels)
5863
this.YamlObject = data;
64+
// console.log(this.YamlObject);
65+
5966
var allDimensionNames = Object.keys(this.YamlObject);
60-
//console.log(allDimensionNames)
67+
// console.log(allDimensionNames);
6168
for (var i = 0; i < allDimensionNames.length; i++) {
6269
var allSubDimensionInThisDimension = Object.keys(
6370
this.YamlObject[allDimensionNames[i]]
@@ -66,7 +73,7 @@ export class CircularHeatmapComponent implements OnInit {
6673
this.segment_labels.push(allSubDimensionInThisDimension[j]);
6774
}
6875
}
69-
//console.log(this.segment_labels)
76+
// console.log(this.segment_labels);
7077
for (var l = 0; l < this.maxLevelOfTasks; l++) {
7178
var allDimensionNames = Object.keys(this.YamlObject);
7279
for (var i = 0; i < allDimensionNames.length; i++) {
@@ -123,7 +130,7 @@ export class CircularHeatmapComponent implements OnInit {
123130
}
124131
}
125132
}
126-
//console.log(this.ALL_CARD_DATA);
133+
// console.log(this.ALL_CARD_DATA);
127134
this.loadState();
128135
this.loadCircularHeatMap(
129136
this.ALL_CARD_DATA,
@@ -154,7 +161,7 @@ export class CircularHeatmapComponent implements OnInit {
154161
} else {
155162
this.ALL_CARD_DATA[index]['Task'][taskIndex]['ifTaskDone'] = true;
156163
}
157-
//console.log(this.data[i]["Task"][taskIndex]["done"])
164+
// console.log(this.data[i]["Task"][taskIndex]["done"])
158165
for (var i = 0; i < this.ALL_CARD_DATA[index]['Task'].length; i++) {
159166
console.log(this.ALL_CARD_DATA[index]['Task'][i]['ifTaskDone']);
160167
if (this.ALL_CARD_DATA[index]['Task'][i]['ifTaskDone']) {
@@ -170,7 +177,7 @@ export class CircularHeatmapComponent implements OnInit {
170177
if (allSubDimensionInThisDimension[j] == this.cardHeader) {
171178
var taskName =
172179
this.ALL_CARD_DATA[index]['Task'][taskIndex]['taskName'];
173-
//console.log(taskName)
180+
// console.log(taskName);
174181
this.YamlObject[allDimensionNames[i]][
175182
allSubDimensionInThisDimension[j]
176183
][taskName]['isImplemented'] =
@@ -181,7 +188,7 @@ export class CircularHeatmapComponent implements OnInit {
181188
}
182189
this.ALL_CARD_DATA[index]['Done%'] =
183190
cnt / this.ALL_CARD_DATA[index]['Task'].length;
184-
//console.log(this.data[index]['Done%'],cnt)
191+
// console.log(this.data[index]['Done%'], cnt);
185192
var color = d3
186193
.scaleLinear<string, string>()
187194
.domain([0, 1])
@@ -557,17 +564,24 @@ export class CircularHeatmapComponent implements OnInit {
557564
}
558565

559566
navigate(dim: string, subdim: string, lvl: Number, taskName: string) {
560-
let navigationExtras: NavigationExtras = {
561-
queryParams: {
562-
dimension: dim,
563-
subDimension: subdim,
564-
level: lvl,
565-
taskName: taskName,
566-
},
567+
let navigationExtras = {
568+
dimension: dim,
569+
subDimension: subdim,
570+
level: lvl,
571+
taskName: taskName,
567572
};
568-
//console.log(navigationExtras);
569-
//console.log(this.ALL_CARD_DATA);
570-
this.router.navigate([this.Routing], navigationExtras);
573+
this.yaml.setURI('./assets/YAML/generated/generated.yaml');
574+
this.taskDetails = this.YamlObject[dim][subdim][taskName];
575+
console.log(this.YamlObject);
576+
console.log(this.YamlObject[dim][subdim]);
577+
if (this.taskDetails) {
578+
this.taskDetails.navigationExtras = navigationExtras;
579+
}
580+
console.log(this.taskDetails);
581+
this.showOverlay = true;
582+
}
583+
closeOverlay() {
584+
this.showOverlay = false;
571585
}
572586
SaveEditedYAMLfile() {
573587
//console.log(this.YamlObject);

0 commit comments

Comments
 (0)