I'm currently working on developing a dashboard in Angular that includes a chart feature. Within my Firebase Firestore database, I have two collections: 'mechanicQualifications' and 'mecanicos'. The 'mechanicQualifications' collection contains ratings given to mechanics by users. The specific chart I am trying to create is a bar chart that illustrates the average rating for each mechanic.
However, I have encountered an issue where the chart only displays mechanic IDs instead of their names. I am attempting to retrieve the mechanic names based on their IDs from the 'mechanicQualifications' collection, but it seems to only display '0' rather than the actual mechanic names.
Any suggestions on how I could resolve this problem?
https://i.sstatic.net/5QLzh.png
Here is the relevant code:
mechanicRatings: { mechanicId: string, qualification: number }[] = [];
interface MechanicQualification {
mechanicId: string;
qualification: number;
}
this.firestore.collection<MechanicQualification>('mechanicQualifications')
.valueChanges()
.subscribe(qualifications => {
const mechanicRatingsMap: { [mechanicId: string]: number[] } = {};
qualifications.forEach(qualification => {
if (!mechanicRatingsMap[qualification.mechanicId]) {
mechanicRatingsMap[qualification.mechanicId] = [];
}
mechanicRatingsMap[qualification.mechanicId].push(qualification.qualification);
});
this.mechanicRatings = Object.keys(mechanicRatingsMap).map(mechanicId => {
const ratings = mechanicRatingsMap[mechanicId];
const qualification = ratings.reduce((acc, rating) => acc + rating, 0) / ratings.length;
return { mechanicId, qualification };
});
});
this.firestore.collection('mecanicos').get().subscribe(snapshot => {
const mechanicNames: { [mechanicId: string]: string } = {};
snapshot.forEach(doc => {
const mechanicData = doc.data() as { uid: string, name: string };
mechanicNames[mechanicData.uid] = mechanicData.name;
});
const chartData = this.mechanicRatings.map(item => ({
name: mechanicNames[item.mechanicId],
y: item.qualification
}));
this.createBarChart(chartData);
});
And this is how I go about creating the chart:
createBarChart(chartData: { name: string; y: number }[]) {
const chartOptions: Highcharts.Options = {
chart: {
type: 'bar'
},
title: {
text: 'Average Mechanic Ratings'
},
xAxis: {
type: 'category',
title: {
text: 'Mechanic Name'
}
},
yAxis: {
title: {
text: 'Average Rating'
}
},
series: [{
name: 'Average Rating',
type: 'bar',
data: chartData
}]
};
Highcharts.chart('rating-container', chartOptions);
}