Skip to content

Commit 3e04111

Browse files
vbakkevbakke
committed
Use flex box to make heatmap more responsive
1 parent 7ffd5b8 commit 3e04111

File tree

3 files changed

+151
-77
lines changed

3 files changed

+151
-77
lines changed

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

Lines changed: 70 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,22 +17,34 @@
1717
}
1818

1919
.right-panel {
20-
float: right;
21-
width: 25%;
2220
margin: 5%;
2321
padding: 20px;
22+
height: 80vh;
23+
display: grid;
24+
grid-template-rows: auto 1fr auto;
2425
}
25-
.downloadButtonClass {
26-
position: fixed;
27-
padding: 10px;
28-
bottom: 5%;
29-
right: 5%;
26+
27+
.heatmapClass {
28+
display: grid;
29+
grid-template-rows: auto 1fr auto;
30+
grid-template-columns: 6fr 4fr;
31+
height: 100%;
32+
width: 100%;
33+
}
34+
35+
.heatmapChart {
36+
grid-row: 1/4;
37+
display: grid;
38+
justify-items: center;
39+
align-content: space-between;
3040
}
31-
.resetButtonClass {
32-
position: fixed;
33-
padding: 10px;
34-
bottom: 5%;
35-
right: 18%;
41+
#chart {
42+
width: 100%;
43+
max-width: min(100vh - 60px, 100vw - 60px);
44+
}
45+
46+
.downloadButtonClass {
47+
margin: 10px 0;
3648
}
3749
.overlay-details {
3850
z-index: 2;
@@ -69,6 +81,21 @@
6981
justify-content: top;
7082
margin-left: auto;
7183
}
84+
.team-filter {
85+
padding: 0.4rem;
86+
grid-column: 2/3;
87+
display: flex;
88+
flex-direction: column;
89+
}
90+
91+
.team-filter.hidden {
92+
height: 0;
93+
visibility: collapse;
94+
}
95+
96+
.filter-toggle .hidden {
97+
display: none;
98+
}
7299
.team-list {
73100
list-style-type: none;
74101
margin: 0;
@@ -81,3 +108,34 @@
81108
.team-filter > .mat-form-field {
82109
display: block;
83110
}
111+
.mat-chip-list {
112+
display: flex;
113+
flex-direction: row;
114+
flex-wrap: wrap;
115+
padding: 1rem;
116+
}
117+
.filter-container {
118+
position: relative;
119+
}
120+
button.filter-toggle {
121+
position: absolute;
122+
top: 2px;
123+
right: 2px;
124+
border: 0;
125+
background-color: transparent;
126+
z-index: 1;
127+
padding: 0;
128+
min-width: 0;
129+
line-height: 24px;
130+
}
131+
132+
.footer-buttons {
133+
grid-column: 2/3;
134+
place-self: flex-end;
135+
margin: 0 1rem;
136+
padding-top: 1rem;
137+
display: flex;
138+
align-items: flex-end;
139+
flex-direction: column;
140+
}
141+

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

Lines changed: 72 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -192,9 +192,18 @@ <h2>Nothing to show</h2>
192192
</div>
193193
</ng-template>
194194
</div>
195-
<div id="chart" class="heatmapClass">
196-
<div class="right-panel">
197-
<div class="team-filter">
195+
<div class="heatmapClass">
196+
<div id="chart" class="heatmapChart"></div>
197+
<div class="filter-container">
198+
<button
199+
class="filter-toggle"
200+
mat-button
201+
color="primary"
202+
(click)="toggleFilters()">
203+
<mat-icon [class.hidden]="!showFilters">keyboard_arrow_up</mat-icon>
204+
<mat-icon [class.hidden]="showFilters">filter_alt</mat-icon>
205+
</button>
206+
<div class="team-filter" [class.hidden]="!showFilters">
198207
<mat-form-field class="team-chip-list">
199208
<mat-label>Team Group Filter</mat-label>
200209
<mat-chip-list selectable>
@@ -225,68 +234,69 @@ <h2>Nothing to show</h2>
225234
</mat-chip-list>
226235
</mat-form-field>
227236
</div>
228-
<mat-card class="example-card" *ngIf="showActivityCard">
229-
<mat-card-title-group>
230-
<mat-card-title>{{ cardHeader }}</mat-card-title>
231-
<mat-card-subtitle>{{ cardSubheader }}</mat-card-subtitle>
232-
</mat-card-title-group>
233-
<mat-card-content
234-
*ngFor="let activity of activityData; index as activityIndex">
235-
<mat-expansion-panel>
236-
<mat-expansion-panel-header>
237-
<mat-panel-title>
238-
<button
239-
class="title-button"
237+
</div>
238+
<mat-card class="example-card" *ngIf="showActivityCard">
239+
<mat-card-title-group>
240+
<mat-card-title>{{ cardHeader }}</mat-card-title>
241+
<mat-card-subtitle>{{ cardSubheader }}</mat-card-subtitle>
242+
</mat-card-title-group>
243+
<mat-card-content
244+
*ngFor="let activity of activityData; index as activityIndex">
245+
<mat-expansion-panel>
246+
<mat-expansion-panel-header>
247+
<mat-panel-title>
248+
<button
249+
class="title-button"
250+
(click)="
251+
$event.preventDefault();
252+
openActivityDetails(
253+
currentDimension,
254+
cardHeader,
255+
activity['activityName']
256+
)
257+
">
258+
{{ activity['activityName'] }}
259+
</button>
260+
</mat-panel-title>
261+
</mat-expansion-panel-header>
262+
<ng-template matExpansionPanelContent>
263+
<ul class="team-list">
264+
<li *ngFor="let teamname of teamVisible">
265+
<mat-checkbox
266+
[checked]="activity.teamsImplemented[teamname]"
267+
color="primary"
240268
(click)="
241-
$event.preventDefault();
242-
openActivityDetails(
243-
currentDimension,
244-
cardHeader,
245-
activity['activityName']
246-
)
269+
this.teamCheckbox(activityIndex, teamname);
270+
$event.preventDefault()
247271
">
248-
{{ activity['activityName'] }}
249-
</button>
250-
</mat-panel-title>
251-
</mat-expansion-panel-header>
252-
<ng-template matExpansionPanelContent>
253-
<ul class="team-list">
254-
<li *ngFor="let teamname of teamVisible">
255-
<mat-checkbox
256-
[checked]="activity.teamsImplemented[teamname]"
257-
color="primary"
258-
(click)="
259-
this.teamCheckbox(activityIndex, teamname);
260-
$event.preventDefault()
261-
">
262-
{{ teamname }}
263-
</mat-checkbox>
264-
</li>
265-
</ul>
266-
<b *ngIf="teamVisible.length === 0">
267-
No Teams Selected, Please select a team from the filters
268-
above.
269-
</b>
270-
</ng-template>
271-
</mat-expansion-panel>
272-
</mat-card-content>
273-
</mat-card>
272+
{{ teamname }}
273+
</mat-checkbox>
274+
</li>
275+
</ul>
276+
<b *ngIf="teamVisible.length === 0">
277+
No Teams Selected, Please select a team from the filters
278+
above.
279+
</b>
280+
</ng-template>
281+
</mat-expansion-panel>
282+
</mat-card-content>
283+
</mat-card>
284+
<div class="footer-buttons">
285+
<button
286+
class="normal-button"
287+
mat-raised-button
288+
class="downloadButtonClass"
289+
(click)="saveEditedYAMLfile()">
290+
Download edited YAML file
291+
</button>
292+
<button
293+
class="normal-button"
294+
mat-raised-button
295+
class="resetButtonClass"
296+
(click)="ResetIsImplemented()">
297+
Reset Implemented
298+
</button>
274299
</div>
275-
276-
<button
277-
class="normal-button"
278-
mat-raised-button
279-
class="downloadButtonClass"
280-
(click)="saveEditedYAMLfile()">
281-
Download edited YAML file
282-
</button>
283-
<button
284-
class="normal-button"
285-
mat-raised-button
286-
class="resetButtonClass"
287-
(click)="ResetIsImplemented()">
288-
Reset Implemented
289-
</button>
290300
</div>
291301
</div>
292302
<div class="col-md-3"></div>

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export class CircularHeatmapComponent implements OnInit {
5757
segment_labels: string[] = [];
5858
activityDetails: any;
5959
showOverlay: boolean;
60+
showFilters: boolean;
6061
markdown: md = md();
6162

6263
constructor(
@@ -65,6 +66,7 @@ export class CircularHeatmapComponent implements OnInit {
6566
private changeDetector: ChangeDetectorRef
6667
) {
6768
this.showOverlay = false;
69+
this.showFilters = true;
6870
}
6971

7072
ngOnInit(): void {
@@ -405,9 +407,9 @@ export class CircularHeatmapComponent implements OnInit {
405407
.data([dataset])
406408
.enter()
407409
.append('svg')
408-
.attr('width', '60%') // 70% forces the heatmap down
409-
.attr('height', 'auto')
410-
.attr('viewBox', '0 0 1150 1150')
410+
.attr('width', '100%')
411+
.attr('height', '100%')
412+
.attr('viewBox', '0 0 1200 1200')
411413
.append('g')
412414
.attr(
413415
'transform',
@@ -766,6 +768,10 @@ export class CircularHeatmapComponent implements OnInit {
766768
this.showOverlay = false;
767769
}
768770

771+
toggleFilters() {
772+
this.showFilters = !this.showFilters;
773+
}
774+
769775
saveEditedYAMLfile() {
770776
this.setTeamsStatus(this.YamlObject, this.teamList, this.ALL_CARD_DATA);
771777
let yamlStr = yaml.dump(this.YamlObject);

0 commit comments

Comments
 (0)