Skip to content

Commit 98c70bc

Browse files
authored
Merge pull request #339 from vbakke/fix/yaml-order
Fix #338 by ensuring correct load order of yaml files
2 parents e0cb8e4 + 3d32dbd commit 98c70bc

File tree

1 file changed

+153
-122
lines changed

1 file changed

+153
-122
lines changed

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

Lines changed: 153 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -66,131 +66,149 @@ export class CircularHeatmapComponent implements OnInit {
6666
}
6767

6868
ngOnInit(): void {
69-
this.LoadMaturityLevels();
70-
this.LoadTeamsFromMetaYaml();
71-
this.LoadMaturityDataFromGeneratedYaml();
69+
// Ensure that Levels and Teams load before MaturityData
70+
// using promises, since ngOnInit does not support async/await
71+
this.LoadMaturityLevels()
72+
.then(() => this.LoadTeamsFromMetaYaml())
73+
.then(() => this.LoadMaturityDataFromGeneratedYaml());
7274
}
7375

7476
@ViewChildren(MatChip) chips!: QueryList<MatChip>;
7577
matChipsArray: MatChip[] = [];
7678

7779
private LoadMaturityDataFromGeneratedYaml() {
78-
this.yaml.setURI('./assets/YAML/generated/generated.yaml');
79-
80-
this.yaml.getJson().subscribe(data => {
81-
this.YamlObject = data;
82-
var allDimensionNames = Object.keys(this.YamlObject);
83-
var totalTeamsImplemented: number = 0;
84-
var totalActivityTeams: number = 0;
85-
86-
this.AddSegmentLabels(allDimensionNames);
87-
88-
for (var l = 0; l < this.maxLevelOfActivities; l++) {
89-
for (var d = 0; d < allDimensionNames.length; d++) {
90-
var allSubDimensionInThisDimension = Object.keys(
91-
this.YamlObject[allDimensionNames[d]]
92-
);
93-
for (var s = 0; s < allSubDimensionInThisDimension.length; s++) {
94-
var allActivityInThisSubDimension = Object.keys(
95-
this.YamlObject[allDimensionNames[d]][
96-
allSubDimensionInThisDimension[s]
97-
]
80+
return new Promise<void>((resolve, reject) => {
81+
console.log(
82+
`${this.perfNow()}s: LoadMaturityDataFromGeneratedYaml Fetch`
83+
);
84+
this.yaml.setURI('./assets/YAML/generated/generated.yaml');
85+
86+
this.yaml.getJson().subscribe(data => {
87+
console.log(
88+
`${this.perfNow()}s: LoadMaturityDataFromGeneratedYaml Downloaded`
89+
);
90+
this.YamlObject = data;
91+
var allDimensionNames = Object.keys(this.YamlObject);
92+
var totalTeamsImplemented: number = 0;
93+
var totalActivityTeams: number = 0;
94+
95+
this.AddSegmentLabels(allDimensionNames);
96+
97+
for (var l = 0; l < this.maxLevelOfActivities; l++) {
98+
for (var d = 0; d < allDimensionNames.length; d++) {
99+
var allSubDimensionInThisDimension = Object.keys(
100+
this.YamlObject[allDimensionNames[d]]
98101
);
99-
var level = 'Level ' + (l + 1);
100-
var activity: activitySchema[] = [];
101-
var activityCompletionStatus: number = -1;
102-
103-
for (var a = 0; a < allActivityInThisSubDimension.length; a++) {
104-
try {
105-
var uuid =
106-
this.YamlObject[allDimensionNames[d]][
107-
allSubDimensionInThisDimension[s]
108-
][allActivityInThisSubDimension[a]]['uuid'];
109-
110-
var lvlOfCurrentActivity =
111-
this.YamlObject[allDimensionNames[d]][
112-
allSubDimensionInThisDimension[s]
113-
][allActivityInThisSubDimension[a]]['level'];
114-
115-
if (lvlOfCurrentActivity == l + 1) {
116-
var nameOfActivity: string = allActivityInThisSubDimension[a];
117-
var teamStatus: { [key: string]: boolean } = {};
118-
const teams = this.teamList;
119-
120-
totalActivityTeams += 1;
121-
122-
teams.forEach((singleTeam: any) => {
123-
teamStatus[singleTeam] = false;
124-
});
125-
126-
var teamsImplemented: any =
102+
for (var s = 0; s < allSubDimensionInThisDimension.length; s++) {
103+
var allActivityInThisSubDimension = Object.keys(
104+
this.YamlObject[allDimensionNames[d]][
105+
allSubDimensionInThisDimension[s]
106+
]
107+
);
108+
var level = 'Level ' + (l + 1);
109+
var activity: activitySchema[] = [];
110+
var activityCompletionStatus: number = -1;
111+
112+
for (var a = 0; a < allActivityInThisSubDimension.length; a++) {
113+
try {
114+
var uuid =
127115
this.YamlObject[allDimensionNames[d]][
128116
allSubDimensionInThisDimension[s]
129-
][allActivityInThisSubDimension[a]]['teamsImplemented'];
130-
131-
if (teamsImplemented) {
132-
teamStatus = teamsImplemented;
133-
}
134-
135-
var localStorageData = this.getFromBrowserState();
117+
][allActivityInThisSubDimension[a]]['uuid'];
136118

137-
if (localStorageData != null && localStorageData.length > 0) {
119+
var lvlOfCurrentActivity =
138120
this.YamlObject[allDimensionNames[d]][
139121
allSubDimensionInThisDimension[s]
140-
][allActivityInThisSubDimension[a]]['teamsImplemented'] =
141-
this.getTeamImplementedFromJson(
142-
localStorageData,
143-
allActivityInThisSubDimension[a]
144-
);
145-
}
122+
][allActivityInThisSubDimension[a]]['level'];
123+
124+
if (lvlOfCurrentActivity == l + 1) {
125+
var nameOfActivity: string =
126+
allActivityInThisSubDimension[a];
127+
var teamStatus: { [key: string]: boolean } = {};
128+
const teams = this.teamList;
146129

147-
(
148-
Object.keys(teamStatus) as (keyof typeof teamStatus)[]
149-
).forEach((key, index) => {
150130
totalActivityTeams += 1;
151-
if (teamStatus[key] === true) {
152-
totalTeamsImplemented += 1;
131+
132+
teams.forEach((singleTeam: any) => {
133+
teamStatus[singleTeam] = false;
134+
});
135+
136+
var teamsImplemented: any =
137+
this.YamlObject[allDimensionNames[d]][
138+
allSubDimensionInThisDimension[s]
139+
][allActivityInThisSubDimension[a]]['teamsImplemented'];
140+
141+
if (teamsImplemented) {
142+
teamStatus = teamsImplemented;
153143
}
154-
});
155144

156-
activity.push({
157-
uuid: uuid,
158-
activityName: nameOfActivity,
159-
teamsImplemented: teamStatus,
160-
});
161-
}
145+
var localStorageData = this.getFromBrowserState();
146+
147+
if (
148+
localStorageData != null &&
149+
localStorageData.length > 0
150+
) {
151+
this.YamlObject[allDimensionNames[d]][
152+
allSubDimensionInThisDimension[s]
153+
][allActivityInThisSubDimension[a]]['teamsImplemented'] =
154+
this.getTeamImplementedFromJson(
155+
localStorageData,
156+
allActivityInThisSubDimension[a]
157+
);
158+
}
162159

163-
if (totalActivityTeams > 0) {
164-
activityCompletionStatus =
165-
totalTeamsImplemented / totalActivityTeams;
160+
(
161+
Object.keys(teamStatus) as (keyof typeof teamStatus)[]
162+
).forEach((key, index) => {
163+
totalActivityTeams += 1;
164+
if (teamStatus[key] === true) {
165+
totalTeamsImplemented += 1;
166+
}
167+
});
168+
169+
activity.push({
170+
uuid: uuid,
171+
activityName: nameOfActivity,
172+
teamsImplemented: teamStatus,
173+
});
174+
}
175+
176+
if (totalActivityTeams > 0) {
177+
activityCompletionStatus =
178+
totalTeamsImplemented / totalActivityTeams;
179+
}
180+
} catch {
181+
console.log('level for activity does not exist');
166182
}
167-
} catch {
168-
console.log('level for activity does not exist');
169183
}
170-
}
171184

172-
var cardSchemaData: cardSchema = {
173-
Dimension: allDimensionNames[d],
174-
SubDimension: allSubDimensionInThisDimension[s],
175-
Level: level,
176-
'Done%': activityCompletionStatus,
177-
Activity: activity,
178-
};
185+
var cardSchemaData: cardSchema = {
186+
Dimension: allDimensionNames[d],
187+
SubDimension: allSubDimensionInThisDimension[s],
188+
Level: level,
189+
'Done%': activityCompletionStatus,
190+
Activity: activity,
191+
};
179192

180-
this.ALL_CARD_DATA.push(cardSchemaData);
193+
this.ALL_CARD_DATA.push(cardSchemaData);
194+
}
181195
}
182196
}
183-
}
184197

185-
console.log('ALL CARD DATA', this.ALL_CARD_DATA);
186-
this.loadState();
187-
this.loadCircularHeatMap(
188-
this.ALL_CARD_DATA,
189-
'#chart',
190-
this.radial_labels,
191-
this.segment_labels
192-
);
193-
this.noActivitytoGrey();
198+
console.log('ALL CARD DATA', this.ALL_CARD_DATA);
199+
this.loadState();
200+
this.loadCircularHeatMap(
201+
this.ALL_CARD_DATA,
202+
'#chart',
203+
this.radial_labels,
204+
this.segment_labels
205+
);
206+
this.noActivitytoGrey();
207+
console.log(
208+
`${this.perfNow()}s: LoadMaturityDataFromGeneratedYaml End`
209+
);
210+
resolve();
211+
});
194212
});
195213
}
196214

@@ -225,28 +243,40 @@ export class CircularHeatmapComponent implements OnInit {
225243
}
226244

227245
private LoadTeamsFromMetaYaml() {
228-
this.yaml.setURI('./assets/YAML/meta.yaml');
229-
this.yaml.getJson().subscribe(data => {
230-
this.YamlObject = data;
231-
232-
this.teamList = this.YamlObject['teams'];
233-
this.teamGroups = this.YamlObject['teamGroups'];
234-
this.teamVisible = [...this.teamList];
246+
return new Promise<void>((resolve, reject) => {
247+
console.log(`${this.perfNow()}s: LoadTeamsFromMetaYaml Fetch`);
248+
this.yaml.setURI('./assets/YAML/meta.yaml');
249+
this.yaml.getJson().subscribe(data => {
250+
console.log(`${this.perfNow()}s: LoadTeamsFromMetaYaml Downloaded`);
251+
this.YamlObject = data;
252+
253+
this.teamList = this.YamlObject['teams'];
254+
this.teamGroups = this.YamlObject['teamGroups'];
255+
this.teamVisible = [...this.teamList];
256+
console.log(`${this.perfNow()}s: LoadTeamsFromMetaYaml End`);
257+
resolve();
258+
});
235259
});
236260
}
237261

238262
private LoadMaturityLevels() {
239-
this.yaml.setURI('./assets/YAML/meta.yaml');
240-
// Function sets column header
241-
this.yaml.getJson().subscribe(data => {
242-
this.YamlObject = data;
243-
244-
// Levels header
245-
for (let x in this.YamlObject['strings']['en']['maturity_levels']) {
246-
var y = parseInt(x) + 1;
247-
this.radial_labels.push('Level ' + y);
248-
this.maxLevelOfActivities = y;
249-
}
263+
return new Promise<void>((resolve, reject) => {
264+
console.log(`${this.perfNow()}s: LoadMaturityLevels Fetch`);
265+
this.yaml.setURI('./assets/YAML/meta.yaml');
266+
// Function sets column header
267+
this.yaml.getJson().subscribe(data => {
268+
console.log(`${this.perfNow()}s: LoadMaturityLevels Downloaded`);
269+
this.YamlObject = data;
270+
271+
// Levels header
272+
for (let x in this.YamlObject['strings']['en']['maturity_levels']) {
273+
var y = parseInt(x) + 1;
274+
this.radial_labels.push('Level ' + y);
275+
this.maxLevelOfActivities = y;
276+
}
277+
console.log(`${this.perfNow()}s: LoadMaturityLevels End`);
278+
resolve();
279+
});
250280
});
251281
}
252282

@@ -702,11 +732,8 @@ export class CircularHeatmapComponent implements OnInit {
702732
}
703733

704734
noActivitytoGrey(): void {
705-
console.log(this.ALL_CARD_DATA);
706735
for (var x = 0; x < this.ALL_CARD_DATA.length; x++) {
707736
if (this.ALL_CARD_DATA[x]['Done%'] == -1) {
708-
console.log(this.ALL_CARD_DATA[x]['SubDimension']);
709-
console.log(this.ALL_CARD_DATA[x]['Level']);
710737
d3.selectAll(
711738
'#segment-' +
712739
this.ALL_CARD_DATA[x]['SubDimension'].replace(/ /g, '-') +
@@ -821,4 +848,8 @@ export class CircularHeatmapComponent implements OnInit {
821848
return JSON.parse(content);
822849
}
823850
}
851+
852+
perfNow(): string {
853+
return (performance.now() / 1000).toFixed(3);
854+
}
824855
}

0 commit comments

Comments
 (0)