Skip to content

Commit 23838f9

Browse files
wurstbrotwurstbrot
authored
Merge pull request #246 from wurstbrot/gsoc-2023
Activity Tag Filter and Heatmap Overlay
2 parents d30758b + 6c33c2d commit 23838f9

13 files changed

+587
-157
lines changed

‎package-lock.json

Lines changed: 21 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,12 @@
1717
"@angular/compiler": "^13.0.0",
1818
"@angular/core": "^13.0.0",
1919
"@angular/forms": "^13.0.0",
20+
"@angular/localize": "^13.0.0",
2021
"@angular/material": "^13.0.0",
2122
"@angular/platform-browser": "^13.0.0",
2223
"@angular/platform-browser-dynamic": "^13.0.0",
2324
"@angular/router": "^13.0.0",
24-
"@angular/localize": "^13.0.0",
25+
"@ngneat/until-destroy": "^10.0.0-beta.0",
2526
"d3": "^7.5.0",
2627
"js-yaml": "^4.1.0",
2728
"markdown-it": "^13.0.1",

‎src/app/app.module.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { NgModule } from '@angular/core';
1+
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
33
import { ReactiveFormsModule } from '@angular/forms';
44

‎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()">

0 commit comments

Comments
 (0)