Skip to content

Commit d915bdd

Browse files
0x41head0x41head
authored
Merge pull request #118 from 0x41head/angular-ui
Added material card for heatmap view + made all variables TS
2 parents eb703c4 + b08765c commit d915bdd

4 files changed

Lines changed: 166 additions & 54 deletions

File tree

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,13 @@
99
}
1010
.abc{
1111
background-color: aquamarine;
12-
}
12+
}
13+
.example-card {
14+
display:block;
15+
opacity: 2;
16+
background-color:orange;
17+
float: right;
18+
width:25%;
19+
margin:5%;
20+
padding: 20px;
21+
}

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

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,35 @@
11
<div id="cont" class="container-fluid text-center">
2-
32
<div class="row">
43
<div class="col-md-3">
54
</div>
65
<div class="col-md-6">
7-
<div id="chart" class="abc"></div>
6+
<div id="chart" class="abc">
7+
<mat-card class="example-card" *ngIf="show">
8+
<mat-card-title-group>
9+
<mat-card-title>{{header}}</mat-card-title>
10+
<mat-card-subtitle>{{subheader}}</mat-card-subtitle>
11+
</mat-card-title-group>
12+
<mat-card-content *ngFor="let task of tasks;index as i">
13+
<div *ngIf="task.done; then trueBlock else falseBlock"></div>
14+
<p>
15+
<ng-template #trueBlock>
16+
<mat-checkbox (click)="this.checkboxToggle(i)" [checked]="true">
17+
{{task["name"]}}
18+
</mat-checkbox>
19+
</ng-template>
20+
<ng-template #falseBlock>
21+
<mat-checkbox (click)="this.checkboxToggle(i)" [checked]="false">
22+
{{task["name"]}}
23+
</mat-checkbox>
24+
</ng-template>
25+
</p>
26+
</mat-card-content>
27+
</mat-card>
28+
</div>
29+
830
</div>
931
<div class="col-md-3">
1032
</div>
1133
</div>
12-
13-
14-
1534
</div>
1635

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

Lines changed: 128 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -7,54 +7,155 @@ import * as d3 from 'd3';
77
styleUrls: ['./circular-heatmap.component.css']
88
})
99
export class CircularHeatmapComponent implements OnInit {
10-
11-
constructor() { }
12-
13-
ngOnInit(): void {
14-
15-
var data =[{
10+
11+
show:number=0
12+
header:string=''
13+
subheader:string=''
14+
tasks:any[]=[]
15+
data:any[] =[{
1616
"Name": "Build",
1717
"Level": "Level 1",
18-
"Done": 0.5
18+
"Done%":1/2,
19+
"Task":[
20+
{ name:"temp1",
21+
done:1
22+
},
23+
{ name:"temp2",
24+
done:0
25+
}
26+
]
1927
},{
2028
"Name": "Deployment",
2129
"Level": "Level 1",
22-
"Done": 0.2
30+
"Done%":1/2,
31+
"Task":[
32+
{ name:"temp1",
33+
done:1
34+
},
35+
{ name:"temp2",
36+
done:0
37+
}
38+
]
2339
},{
2440
"Name": "Build",
2541
"Level": "Level 2",
26-
"Done": 0.25
42+
"Done%":1/2,
43+
"Task":[
44+
{ name:"temp1",
45+
done:1
46+
},
47+
{ name:"temp2",
48+
done:0
49+
}
50+
]
2751
},{
2852
"Name": "Deployment",
2953
"Level": "Level 2",
30-
"Done": 0.1
54+
"Done%":1/2,
55+
"Task":[
56+
{ name:"temp1",
57+
done:1
58+
},
59+
{ name:"temp2",
60+
done:0
61+
}
62+
]
3163
}, {
3264
"Name": "Build",
3365
"Level": "Level 3",
34-
"Done": 0.67
66+
"Done%":1/2,
67+
"Task":[
68+
{ name:"temp1",
69+
done:1
70+
},
71+
{ name:"temp2",
72+
done:0
73+
}
74+
]
3575
},{
3676
"Name": "Deployment",
3777
"Level": "Level 3",
38-
"Done": 0.3
78+
"Done%":1/2,
79+
"Task":[
80+
{ name:"temp1",
81+
done:1
82+
},
83+
{ name:"temp2",
84+
done:0
85+
}
86+
]
3987
},{
4088
"Name": "Build",
4189
"Level": "Level 4",
42-
"Done": 0.1
90+
"Done%":1/2,
91+
"Task":[
92+
{ name:"temp1",
93+
done:1
94+
},
95+
{ name:"temp2",
96+
done:0
97+
}
98+
]
4399
},{
44100
"Name": "Deployment",
45101
"Level": "Level 4",
46-
"Done": 0.75
102+
"Done%":1/3,
103+
"Task":[
104+
{ name:"temp1",
105+
done:1
106+
},
107+
{ name:"temp2",
108+
done:0
109+
},
110+
{ name:"temp3",
111+
done:0
112+
}
113+
]
47114
}];
115+
radial_labels = ['Level 1','Level 2','Level 3','Level 4'];
48116

49-
var radial_labels = ['Level 1','Level 2','Level 3','Level 4'];
117+
segment_labels = ['Build', 'Deployment'];
118+
constructor() { }
50119

51-
var segment_labels = ['Build', 'Deployment'];
120+
ngOnInit(): void {
52121

53-
this.loadCircularHeatMap(data, "#chart", radial_labels, segment_labels);
122+
this.loadCircularHeatMap(this.data, "#chart", this.radial_labels, this.segment_labels);
54123

55124
}
56125

126+
checkboxToggle(taskIndex:number){
127+
//console.log('fo')
128+
var index=0;
129+
var cnt=0;
130+
for(var i=0;i<this.data.length;i++){
131+
if(this.data[i]["Name"]===this.header&&this.data[i]["Level"]===this.subheader){
132+
index=i
133+
break;
134+
}
135+
}
136+
if(this.data[index]["Task"][taskIndex]["done"]==1){
137+
this.data[index]["Task"][taskIndex]["done"]=0
138+
}
139+
else{
140+
this.data[index]["Task"][taskIndex]["done"]=1
141+
}
142+
//console.log(this.data[i]["Task"][taskIndex]["done"])
143+
for(var i=0;i< this.data[index]["Task"].length;i++){
144+
console.log(this.data[index]["Task"][i]["done"])
145+
if(this.data[index]["Task"][i]["done"]==1){
146+
cnt+=1
147+
}
148+
}
149+
this.data[index]['Done%']=cnt/this.data[index]["Task"].length
150+
//console.log(this.data[index]['Done%'],cnt)
151+
this.loadCircularHeatMap(this.data, "#chart", this.radial_labels, this.segment_labels);
152+
153+
}
154+
57155
loadCircularHeatMap(dataset:any, dom_element_to_append_to:string, radial_labels:string[], segment_labels:string[]) {
156+
//d3.select(dom_element_to_append_to).selectAll('svg').exit()
157+
//console.log(dataset)
158+
let _self=this
58159
var margin = {
59160
top: 50,
60161
right: 50,
@@ -77,9 +178,9 @@ export class CircularHeatmapComponent implements OnInit {
77178
.segmentLabels(segment_labels);
78179

79180
chart.accessor(function(d:any) {
80-
return d.Done;
181+
return d["Done%"];
81182
})
82-
183+
//d3.select("svg").remove();
83184
var svg = d3.select(dom_element_to_append_to)
84185
.selectAll('svg')
85186
.data([dataset])
@@ -92,19 +193,6 @@ export class CircularHeatmapComponent implements OnInit {
92193
"translate(" + ((width) / 2 - (radial_labels.length * segmentHeight + innerRadius)) + "," + margin.top + ")")
93194
.call(chart);
94195

95-
96-
97-
98-
var tooltip = d3.select(dom_element_to_append_to)
99-
.append('div')
100-
.attr('class', 'tooltip');
101-
102-
tooltip.append('div')
103-
.attr('class', 'name');
104-
tooltip.append('div')
105-
.attr('class', 'level');
106-
tooltip.append('div')
107-
.attr('class', 'done');
108196

109197
function cx(){
110198
var e = window.event as MouseEvent;
@@ -114,20 +202,14 @@ export class CircularHeatmapComponent implements OnInit {
114202
var e = window.event as MouseEvent ;
115203
return e.clientY;
116204
}
205+
117206
svg.selectAll("path")
118207
.on('click', function(d) {
119-
//console.log('oa')
120-
tooltip.style('display', 'none');
121-
tooltip.style('opacity', 0);
122-
tooltip.select('.name').html("<b> Name: " + d.explicitOriginalTarget.__data__.Name + "</b>");
123-
tooltip.select('.level').html("<b> Level: " + d.explicitOriginalTarget.__data__.Level + "</b>");
124-
tooltip.select('.done').html("<b> Done: " + d.explicitOriginalTarget.__data__.Done + "</b>");
125-
tooltip.style('display', 'block');
126-
tooltip.style('opacity', 2);
127-
tooltip.style('background-color', 'orange');
128-
tooltip.style('float', 'right');
129-
tooltip.style('width', '25%');
130-
tooltip.style('margin', '5%');
208+
_self.subheader=d.explicitOriginalTarget.__data__.Level
209+
_self.tasks=d.explicitOriginalTarget.__data__.Task;
210+
_self.header=d.explicitOriginalTarget.__data__.Name
211+
_self.show=1
212+
console.log(_self.tasks)
131213
})
132214
.on('mouseover', function(d) {
133215

@@ -142,8 +224,7 @@ export class CircularHeatmapComponent implements OnInit {
142224

143225
})
144226
.on('mousemove', function(d,event) {
145-
tooltip.style('top', (cy() + 10) + 'px')
146-
.style('left', (cx() - 25) + 'px');
227+
147228
})
148229
.on('mouseout', function(d) {
149230
//console.log(d.explicitOriginalTarget.__data__.Day)
@@ -163,7 +244,7 @@ export class CircularHeatmapComponent implements OnInit {
163244
var color = d3.scaleLinear<string,string>().domain([0,1]).range(["white", "green"]);
164245
// how to access a function within reusable charts
165246
console.log(color(d.Done));
166-
return color(d.Done);
247+
return color(d["Done%"]);
167248
});
168249
}
169250

‎src/app/material/material.module.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import {MatChipsModule} from '@angular/material/chips';
99
import {MatAutocompleteModule} from '@angular/material/autocomplete';
1010
import {MatInputModule} from '@angular/material/input';
1111
import {MatExpansionModule} from '@angular/material/expansion';
12+
import {MatCardModule} from '@angular/material/card';
13+
import {MatCheckboxModule} from '@angular/material/checkbox';
1214

1315
const MaterialComponents= [
1416
MatSidenavModule,
@@ -21,7 +23,8 @@ const MaterialComponents= [
2123
MatAutocompleteModule,
2224
MatInputModule,
2325
MatExpansionModule,
24-
26+
MatCardModule,
27+
MatCheckboxModule
2528
];
2629

2730
@NgModule({

0 commit comments

Comments
 (0)