Skip to content

Fix #338 by ensuring correct load order of yaml files #339

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wurstbrot merged 5 commits into from
Dec 5, 2024
Merged

Fix #338 by ensuring correct load order of yaml files #339

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2246ca0
Add deliberate delays to emulate what happens when the files arrive i…
vbakke Nov 28, 2024
3aa694c
Ensure correct load order, using promises
vbakke Nov 28, 2024
1022247
Remove deliberate delays
vbakke Nov 28, 2024
b7ba406
Confirm with ESLint
vbakke Nov 28, 2024
3d32dbd
More linting
vbakke Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
277 changes: 154 additions & 123 deletions src/app/component/circular-heatmap/circular-heatmap.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,131 +66,149 @@ export class CircularHeatmapComponent implements OnInit {
}

ngOnInit(): void {
this.LoadMaturityLevels();
this.LoadTeamsFromMetaYaml();
this.LoadMaturityDataFromGeneratedYaml();
// Ensure that Levels and Teams load before MaturityData
// using promises, since ngOnInit does not support async/await
this.LoadMaturityLevels()
.then(() => this.LoadTeamsFromMetaYaml())
.then(() => this.LoadMaturityDataFromGeneratedYaml());
}

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

private LoadMaturityDataFromGeneratedYaml() {
this.yaml.setURI('./assets/YAML/generated/generated.yaml');

this.yaml.getJson().subscribe(data => {
this.YamlObject = data;
var allDimensionNames = Object.keys(this.YamlObject);
var totalTeamsImplemented: number = 0;
var totalActivityTeams: number = 0;

this.AddSegmentLabels(allDimensionNames);

for (var l = 0; l < this.maxLevelOfActivities; l++) {
for (var d = 0; d < allDimensionNames.length; d++) {
var allSubDimensionInThisDimension = Object.keys(
this.YamlObject[allDimensionNames[d]]
);
for (var s = 0; s < allSubDimensionInThisDimension.length; s++) {
var allActivityInThisSubDimension = Object.keys(
this.YamlObject[allDimensionNames[d]][
allSubDimensionInThisDimension[s]
]
return new Promise<void>((resolve, reject) => {
console.log(
`${this.perfNow()}s: LoadMaturityDataFromGeneratedYaml Fetch`
);
this.yaml.setURI('./assets/YAML/generated/generated.yaml');

this.yaml.getJson().subscribe(data => {
console.log(
`${this.perfNow()}s: LoadMaturityDataFromGeneratedYaml Downloaded`
);
this.YamlObject = data;
var allDimensionNames = Object.keys(this.YamlObject);
var totalTeamsImplemented: number = 0;
var totalActivityTeams: number = 0;

this.AddSegmentLabels(allDimensionNames);

for (var l = 0; l < this.maxLevelOfActivities; l++) {
for (var d = 0; d < allDimensionNames.length; d++) {
var allSubDimensionInThisDimension = Object.keys(
this.YamlObject[allDimensionNames[d]]
);
var level = 'Level ' + (l + 1);
var activity: activitySchema[] = [];
var activityCompletionStatus: number = -1;

for (var a = 0; a < allActivityInThisSubDimension.length; a++) {
try {
var uuid =
this.YamlObject[allDimensionNames[d]][
allSubDimensionInThisDimension[s]
][allActivityInThisSubDimension[a]]['uuid'];

var lvlOfCurrentActivity =
this.YamlObject[allDimensionNames[d]][
allSubDimensionInThisDimension[s]
][allActivityInThisSubDimension[a]]['level'];

if (lvlOfCurrentActivity == l + 1) {
var nameOfActivity: string = allActivityInThisSubDimension[a];
var teamStatus: { [key: string]: boolean } = {};
const teams = this.teamList;

totalActivityTeams += 1;

teams.forEach((singleTeam: any) => {
teamStatus[singleTeam] = false;
});

var teamsImplemented: any =
for (var s = 0; s < allSubDimensionInThisDimension.length; s++) {
var allActivityInThisSubDimension = Object.keys(
this.YamlObject[allDimensionNames[d]][
allSubDimensionInThisDimension[s]
]
);
var level = 'Level ' + (l + 1);
var activity: activitySchema[] = [];
var activityCompletionStatus: number = -1;

for (var a = 0; a < allActivityInThisSubDimension.length; a++) {
try {
var uuid =
this.YamlObject[allDimensionNames[d]][
allSubDimensionInThisDimension[s]
][allActivityInThisSubDimension[a]]['teamsImplemented'];

if (teamsImplemented) {
teamStatus = teamsImplemented;
}

var localStorageData = this.getFromBrowserState();
][allActivityInThisSubDimension[a]]['uuid'];

if (localStorageData != null && localStorageData.length > 0) {
var lvlOfCurrentActivity =
this.YamlObject[allDimensionNames[d]][
allSubDimensionInThisDimension[s]
][allActivityInThisSubDimension[a]]['teamsImplemented'] =
this.getTeamImplementedFromJson(
localStorageData,
allActivityInThisSubDimension[a]
);
}
][allActivityInThisSubDimension[a]]['level'];

if (lvlOfCurrentActivity == l + 1) {
var nameOfActivity: string =
allActivityInThisSubDimension[a];
var teamStatus: { [key: string]: boolean } = {};
const teams = this.teamList;

(
Object.keys(teamStatus) as (keyof typeof teamStatus)[]
).forEach((key, index) => {
totalActivityTeams += 1;
if (teamStatus[key] === true) {
totalTeamsImplemented += 1;

teams.forEach((singleTeam: any) => {
teamStatus[singleTeam] = false;
});

var teamsImplemented: any =
this.YamlObject[allDimensionNames[d]][
allSubDimensionInThisDimension[s]
][allActivityInThisSubDimension[a]]['teamsImplemented'];

if (teamsImplemented) {
teamStatus = teamsImplemented;
}
});

activity.push({
uuid: uuid,
activityName: nameOfActivity,
teamsImplemented: teamStatus,
});
}
var localStorageData = this.getFromBrowserState();

if (
localStorageData != null &&
localStorageData.length > 0
) {
this.YamlObject[allDimensionNames[d]][
allSubDimensionInThisDimension[s]
][allActivityInThisSubDimension[a]]['teamsImplemented'] =
this.getTeamImplementedFromJson(
localStorageData,
allActivityInThisSubDimension[a]
);
}

if (totalActivityTeams > 0) {
activityCompletionStatus =
totalTeamsImplemented / totalActivityTeams;
(
Object.keys(teamStatus) as (keyof typeof teamStatus)[]
).forEach((key, index) => {
totalActivityTeams += 1;
if (teamStatus[key] === true) {
totalTeamsImplemented += 1;
}
});

activity.push({
uuid: uuid,
activityName: nameOfActivity,
teamsImplemented: teamStatus,
});
}

if (totalActivityTeams > 0) {
activityCompletionStatus =
totalTeamsImplemented / totalActivityTeams;
}
} catch {
console.log('level for activity does not exist');
}
} catch {
console.log('level for activity does not exist');
}
}

var cardSchemaData: cardSchema = {
Dimension: allDimensionNames[d],
SubDimension: allSubDimensionInThisDimension[s],
Level: level,
'Done%': activityCompletionStatus,
Activity: activity,
};
var cardSchemaData: cardSchema = {
Dimension: allDimensionNames[d],
SubDimension: allSubDimensionInThisDimension[s],
Level: level,
'Done%': activityCompletionStatus,
Activity: activity,
};

this.ALL_CARD_DATA.push(cardSchemaData);
this.ALL_CARD_DATA.push(cardSchemaData);
}
}
}
}

console.log('ALL CARD DATA', this.ALL_CARD_DATA);
this.loadState();
this.loadCircularHeatMap(
this.ALL_CARD_DATA,
'#chart',
this.radial_labels,
this.segment_labels
);
this.noActivitytoGrey();
console.log('ALL CARD DATA', this.ALL_CARD_DATA);
this.loadState();
this.loadCircularHeatMap(
this.ALL_CARD_DATA,
'#chart',
this.radial_labels,
this.segment_labels
);
this.noActivitytoGrey();
console.log(
`${this.perfNow()}s: LoadMaturityDataFromGeneratedYaml End`
);
resolve();
});
});
}

Expand Down Expand Up @@ -225,28 +243,40 @@ export class CircularHeatmapComponent implements OnInit {
}

private LoadTeamsFromMetaYaml() {
this.yaml.setURI('./assets/YAML/meta.yaml');
this.yaml.getJson().subscribe(data => {
this.YamlObject = data;

this.teamList = this.YamlObject['teams'];
this.teamGroups = this.YamlObject['teamGroups'];
this.teamVisible = [...this.teamList];
return new Promise<void>((resolve, reject) => {
console.log(`${this.perfNow()}s: LoadTeamsFromMetaYaml Fetch`);
this.yaml.setURI('./assets/YAML/meta.yaml');
this.yaml.getJson().subscribe(data => {
console.log(`${this.perfNow()}s: LoadTeamsFromMetaYaml Downloaded`);
this.YamlObject = data;

this.teamList = this.YamlObject['teams'];
this.teamGroups = this.YamlObject['teamGroups'];
this.teamVisible = [...this.teamList];
console.log(`${this.perfNow()}s: LoadTeamsFromMetaYaml End`);
resolve();
});
});
}

private LoadMaturityLevels() {
this.yaml.setURI('./assets/YAML/meta.yaml');
// Function sets column header
this.yaml.getJson().subscribe(data => {
this.YamlObject = data;

// Levels header
for (let x in this.YamlObject['strings']['en']['maturity_levels']) {
var y = parseInt(x) + 1;
this.radial_labels.push('Level ' + y);
this.maxLevelOfActivities = y;
}
return new Promise<void>((resolve, reject) => {
console.log(`${this.perfNow()}s: LoadMaturityLevels Fetch`);
this.yaml.setURI('./assets/YAML/meta.yaml');
// Function sets column header
this.yaml.getJson().subscribe(data => {
console.log(`${this.perfNow()}s: LoadMaturityLevels Downloaded`);
this.YamlObject = data;

// Levels header
for (let x in this.YamlObject['strings']['en']['maturity_levels']) {
var y = parseInt(x) + 1;
this.radial_labels.push('Level ' + y);
this.maxLevelOfActivities = y;
}
console.log(`${this.perfNow()}s: LoadMaturityLevels End`);
resolve();
});
});
}

Expand Down Expand Up @@ -398,7 +428,7 @@ export class CircularHeatmapComponent implements OnInit {
.append('svg')
.attr('width', '60%') // 70% forces the heatmap down
.attr('height', 'auto')
.attr('viewBox', '0 0 1150 1150')
.attr('viewBox', '0 0 1150 1150')
.append('g')
.attr(
'transform',
Expand Down Expand Up @@ -702,11 +732,8 @@ export class CircularHeatmapComponent implements OnInit {
}

noActivitytoGrey(): void {
console.log(this.ALL_CARD_DATA);
for (var x = 0; x < this.ALL_CARD_DATA.length; x++) {
if (this.ALL_CARD_DATA[x]['Done%'] == -1) {
console.log(this.ALL_CARD_DATA[x]['SubDimension']);
console.log(this.ALL_CARD_DATA[x]['Level']);
d3.selectAll(
'#segment-' +
this.ALL_CARD_DATA[x]['SubDimension'].replace(/ /g, '-') +
Expand Down Expand Up @@ -821,4 +848,8 @@ export class CircularHeatmapComponent implements OnInit {
return JSON.parse(content);
}
}

perfNow(): string {
return (performance.now() / 1000).toFixed(3);
}
}