Skip to content

Commit 0ffff95

Browse files
ptechofficialptechofficial
committed
Heatmap %done based on team and added an expansion panel
1 parent 50dcf91 commit 0ffff95

3 files changed

Lines changed: 94 additions & 54 deletions

File tree

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
border: none;
1414
text-align: left;
1515
cursor: pointer;
16+
font-weight: 700;
1617
}
1718

1819
.example-card {
@@ -31,7 +32,7 @@
3132
position: fixed;
3233
padding: 10px;
3334
bottom: 5%;
34-
right: 22%;
35+
right: 18%;
3536
}
3637
.overlay-details {
3738
z-index: 2;
@@ -68,3 +69,8 @@
6869
justify-content: top;
6970
margin-left: auto;
7071
}
72+
.team-list {
73+
list-style-type: none;
74+
margin: 0;
75+
padding: 0 1em;
76+
}

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

Lines changed: 26 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -178,41 +178,33 @@ <h2>Nothing to show</h2>
178178
<mat-card-title>{{ cardHeader }}</mat-card-title>
179179
<mat-card-subtitle>{{ cardSubheader }}</mat-card-subtitle>
180180
</mat-card-title-group>
181-
<mat-card-content *ngFor="let task of tasksData; index as i">
182-
<div *ngIf="task.ifTaskDone; then trueBlock; else falseBlock"></div>
183-
<p>
184-
<ng-template #trueBlock>
185-
<mat-checkbox
186-
(click)="this.toggleCheckbox(i)"
187-
[checked]="true"
188-
color="primary">
189-
</mat-checkbox>
190-
</ng-template>
191-
<ng-template #falseBlock>
192-
<mat-checkbox
193-
(click)="this.toggleCheckbox(i)"
194-
[checked]="false"
195-
color="primary">
196-
</mat-checkbox>
181+
<mat-card-content *ngFor="let task of tasksData; index as taskIndex">
182+
<mat-expansion-panel>
183+
<mat-expansion-panel-header>
184+
<mat-panel-title>
185+
<button
186+
class="normal-button"
187+
(click)="
188+
$event.preventDefault();
189+
navigate(currentDimension, cardHeader, task['taskName'])
190+
">
191+
{{ task['taskName'] }}
192+
</button>
193+
</mat-panel-title>
194+
</mat-expansion-panel-header>
195+
<ng-template matExpansionPanelContent>
196+
<ul class="team-list">
197+
<li *ngFor="let item of task.teamsImplemented | keyvalue">
198+
<mat-checkbox
199+
[checked]="item.value === true"
200+
color="primary"
201+
(click)="this.teamCheckbox(taskIndex, item.key)">
202+
{{ item.key }}
203+
</mat-checkbox>
204+
</li>
205+
</ul>
197206
</ng-template>
198-
<button
199-
class="normal-button"
200-
(click)="
201-
navigate(currentDimension, cardHeader, 1, task['taskName'])
202-
">
203-
{{ task['taskName'] }}
204-
</button>
205-
</p>
206-
207-
<ul>
208-
<li *ngFor="let item of task.teamsImplemented | keyvalue">
209-
<mat-checkbox [checked]="item.value === true" color="primary">
210-
{{ item.key }}
211-
</mat-checkbox>
212-
</li>
213-
</ul>
214-
<!-- </p> -->
215-
<!-- </p> -->
207+
</mat-expansion-panel>
216208
</mat-card-content>
217209
</mat-card>
218210
<button

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

Lines changed: 61 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,6 @@ export class CircularHeatmapComponent implements OnInit {
7575
}
7676
}
7777
// console.log(this.segment_labels);
78-
console.log('check');
7978
for (var l = 0; l < this.maxLevelOfTasks; l++) {
8079
var allDimensionNames = Object.keys(this.YamlObject);
8180
for (var i = 0; i < allDimensionNames.length; i++) {
@@ -121,7 +120,7 @@ export class CircularHeatmapComponent implements OnInit {
121120
teamStatus = {
122121
V: false,
123122
};
124-
console.log('fails');
123+
console.log('Adding dummy team name');
125124
}
126125
if (Status) {
127126
totalImplemented += 1;
@@ -139,13 +138,11 @@ export class CircularHeatmapComponent implements OnInit {
139138
console.log('level for task does not exist');
140139
}
141140
}
142-
console.log('tempData', tempData);
143141
this.ALL_CARD_DATA.push(tempData);
144-
console.log('new all card data', this.ALL_CARD_DATA);
145142
}
146143
}
147144
}
148-
console.log('check', this.ALL_CARD_DATA);
145+
console.log('ALL CARD DATA', this.ALL_CARD_DATA);
149146
this.loadState();
150147
this.loadCircularHeatMap(
151148
this.ALL_CARD_DATA,
@@ -158,7 +155,6 @@ export class CircularHeatmapComponent implements OnInit {
158155
}
159156

160157
toggleCheckbox(taskIndex: number) {
161-
//console.log('fo')
162158
let _self = this;
163159
var index = 0;
164160
var cnt = 0;
@@ -178,12 +174,14 @@ export class CircularHeatmapComponent implements OnInit {
178174
}
179175

180176
// console.log(this.data[i]["Task"][taskIndex]["done"])
177+
// Creating counter for %done
181178
for (var i = 0; i < this.ALL_CARD_DATA[index]['Task'].length; i++) {
182179
console.log(this.ALL_CARD_DATA[index]['Task'][i]['ifTaskDone']);
183180
if (this.ALL_CARD_DATA[index]['Task'][i]['ifTaskDone']) {
184181
cnt += 1;
185182
}
186183
}
184+
// Updating values in this.YamlObject
187185
var allDimensionNames = Object.keys(this.YamlObject);
188186
for (var i = 0; i < allDimensionNames.length; i++) {
189187
var allSubDimensionInThisDimension = Object.keys(
@@ -193,7 +191,6 @@ export class CircularHeatmapComponent implements OnInit {
193191
if (allSubDimensionInThisDimension[j] == this.cardHeader) {
194192
var taskName =
195193
this.ALL_CARD_DATA[index]['Task'][taskIndex]['taskName'];
196-
// console.log(taskName);
197194
this.YamlObject[allDimensionNames[i]][
198195
allSubDimensionInThisDimension[j]
199196
][taskName]['isImplemented'] =
@@ -221,6 +218,61 @@ export class CircularHeatmapComponent implements OnInit {
221218
this.saveState();
222219
}
223220

221+
teamCheckbox(taskIndex: number, teamKey: any) {
222+
let _self = this;
223+
var index = 0;
224+
var cntTrue = 0;
225+
var cntAll = 0;
226+
for (var i = 0; i < this.ALL_CARD_DATA.length; i++) {
227+
if (
228+
this.ALL_CARD_DATA[i]['SubDimension'] === this.cardHeader &&
229+
this.ALL_CARD_DATA[i]['Level'] === this.cardSubheader
230+
) {
231+
index = i;
232+
break;
233+
}
234+
}
235+
236+
this.ALL_CARD_DATA[index]['Task'][taskIndex]['teamsImplemented'][teamKey] =
237+
!this.ALL_CARD_DATA[index]['Task'][taskIndex]['teamsImplemented'][
238+
teamKey
239+
];
240+
// Working on %done
241+
// Creating counter for %done
242+
for (var i = 0; i < this.ALL_CARD_DATA[index]['Task'].length; i++) {
243+
console.log(this.ALL_CARD_DATA[index]['Task'][i]['ifTaskDone']);
244+
245+
var teamList: any;
246+
teamList = this.ALL_CARD_DATA[index]['Task'][i]['teamsImplemented'];
247+
(Object.keys(teamList) as (keyof typeof teamList)[]).forEach(
248+
(key, index) => {
249+
if (teamList[key] === true) {
250+
console.log(key, ' is true');
251+
cntTrue += 1;
252+
}
253+
cntAll += 1;
254+
}
255+
);
256+
}
257+
258+
this.ALL_CARD_DATA[index]['Done%'] = cntTrue / cntAll;
259+
console.log(this.ALL_CARD_DATA[index]['Done%'], cntTrue);
260+
var color = d3
261+
.scaleLinear<string, string>()
262+
.domain([0, 1])
263+
.range(['white', 'green']);
264+
265+
d3.selectAll(
266+
'#segment-' +
267+
this.ALL_CARD_DATA[index]['SubDimension'].replace(/ /g, '-') +
268+
'-' +
269+
this.ALL_CARD_DATA[index]['Level'].replace(' ', '-')
270+
).attr('fill', function (p) {
271+
return color(_self.ALL_CARD_DATA[index]['Done%']);
272+
});
273+
this.saveState();
274+
}
275+
224276
loadCircularHeatMap(
225277
dataset: any,
226278
dom_element_to_append_to: string,
@@ -229,7 +281,6 @@ export class CircularHeatmapComponent implements OnInit {
229281
) {
230282
//console.log(segment_labels)
231283
//d3.select(dom_element_to_append_to).selectAll('svg').exit()
232-
//console.log(dataset)
233284
let _self = this;
234285
var margin = {
235286
top: 50,
@@ -307,20 +358,11 @@ export class CircularHeatmapComponent implements OnInit {
307358
}
308359
}
309360
console.log('index', _self.ALL_CARD_DATA[index]['Task']);
310-
console.log('dataset', dataset);
311361
_self.currentDimension = curr.Dimension;
312362
_self.cardSubheader = curr.Level;
313363
_self.tasksData = curr.Task;
314364
_self.cardHeader = curr.SubDimension;
315365
_self.showTaskCard = true;
316-
// for (var i = 0; i < _self.tasksData.length; i++) {
317-
// console.log(_self.tasksData[i].teamsImplemented['V']);
318-
// }
319-
(
320-
Object.keys(_self.tasksData) as (keyof typeof _self.tasksData)[]
321-
).forEach((key, index) => {
322-
console.log(key, _self.tasksData[key], index);
323-
});
324366
})
325367
.on('mouseover', function (d) {
326368
//console.log(d.toElement.__data__.Name)
@@ -598,11 +640,11 @@ export class CircularHeatmapComponent implements OnInit {
598640
}
599641
}
600642

601-
navigate(dim: string, subdim: string, lvl: Number, taskName: string) {
643+
navigate(dim: string, subdim: string, taskName: string) {
602644
let navigationExtras = {
603645
dimension: dim,
604646
subDimension: subdim,
605-
level: lvl,
647+
606648
taskName: taskName,
607649
};
608650
this.yaml.setURI('./assets/YAML/generated/generated.yaml');

0 commit comments

Comments
 (0)