in src/app/components/app-node-utilizations/app-node-utilizations.component.ts [94:134]
fetchBarChartData(nodeUtilizations: NodeUtilization[]) {
let barChartDataSets = new Array<BarChartDataSet>();
if (nodeUtilizations.length === 0) {
// clean bar chart data
this.barChartDataSets = barChartDataSets;
return;
}
let colorMapping = this.generateColorMapping(
nodeUtilizations.map((nodeUtilization) => (nodeUtilization.type))
);
for (let i = 0; i < nodeUtilizations.length; i++) {
let type = nodeUtilizations[i].type;
let utilization = nodeUtilizations[i].utilization
let borderWidth = 1
if (i === 0) {
// get bucketList only from the first type of node utilization
// should always be 10 buckets. (ranging from 0% to 100%).
this.bucketList = utilization.map((item) => item.bucketName);
}
let bucketValues = utilization.map((item) => item.numOfNodes);
barChartDataSets.push(new BarChartDataSet(
type,
bucketValues,
this.calculateAvgUtilization(bucketValues),
colorMapping.get(type) ?? DEFAULT_BAR_COLOR,
borderWidth,
utilization.map((item) => this.getBarDescription(item.nodeNames))
))
}
// sort by resource type first, then sort by avg utilization rate
barChartDataSets.sort((a, b) => CommonUtil.resourcesCompareFn(a.label, b.label));
barChartDataSets.sort((a, b) => b.avgUtilizationRate - a.avgUtilizationRate);
barChartDataSets = barChartDataSets.slice(0, 10); // only show top 10 resources
// refresh bar chart data
this.barChartDataSets = barChartDataSets;
}