fetchBarChartData()

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;
  }