Sort an alphanumeric array in typescript in angular7

Question

I have to solve 2 problems here.

1. I need to plot a bar chart with 20 data points. The data points are coming from backend API. But the API might not return all 20 points every time (unavailability of data). It can return 7, 0, 1 or 20 data points. But at the UI we will have to make sure that 20 X-axis points are plotted. For the missing data points from API we will have to show 0 at Y-axis.

2. X-axis points are alphanumeric. We need to sort them in ascending order in typescript before plotting it in UI.

For example:

This is how we receive data from Backend API.

0: {levelName: "level7", participantsCount: 42}
1: {levelName: "level1", participantsCount: 13}
2: {levelName: "level11", participantsCount: 62}
3: {levelName: "level3", participantsCount: 73}

At the typescript side we need to manipulate and build it as below.

0: {levelName: "Level 1", participantsCount: 13}
1: {levelName: "Level 2", participantsCount: 0}
2: {levelName: "Level 3", participantsCount: 73}
3: {levelName: "Level 4", participantsCount: 0}
4: {levelName: "Level 5", participantsCount: 0}
5: {levelName: "Level 6", participantsCount: 0}
6: {levelName: "Level 7", participantsCount: 42}
7: {levelName: "Level 8", participantsCount: 0}
8: {levelName: "Level 9", participantsCount: 0}
9: {levelName: "Level 10", participantsCount: 0}
10: {levelName: "Level 11", participantsCount: 62}
11: {levelName: "Level 12", participantsCount: 0}
12: {levelName: "Level 13", participantsCount: 0}
13: {levelName: "Level 14", participantsCount: 0}
14: {levelName: "Level 15", participantsCount: 0}
15: {levelName: "Level 16", participantsCount: 0}
16: {levelName: "Level 17", participantsCount: 0}
17: {levelName: "Level 18", participantsCount: 0}
18: {levelName: "Level 19", participantsCount: 0}
19: {levelName: "Level 20", participantsCount: 0}

So far I have written this code

public formatChartData(chartData){
    let self = this;
    _.each(chartData, function (d) {
      let levelNameSplit = d.levelName.split(/([0-9]+)/)
      let levelName = (levelNameSplit[0].charAt(0).toUpperCase() + levelNameSplit[0].slice(1) + " " + levelNameSplit[1])
      self.finalChartData.push({
        x:levelName,
        y:d.participantsCount
      })
    });
  }

How to add missing data points to the array and sort it?

Answer 1

By creating a new array of the size you want you can map over those values and, finding the Api Data you want and returning the data point at that x value.

const apiData = [
  {levelName: "level7", participantsCount: 42},
  {levelName: "level1", participantsCount: 13},
  {levelName: "level11", participantsCount: 62},
  {levelName: "level3", participantsCount: 73}
];

const result = new Array(20).fill({}).map((_, i) => {
  const levelNum = i + 1;
  const level = apiData.find(d => d.levelName === `level${levelNum}`) || {};
  return {
    levelName: `Level ${levelNum}`,
    participantsCount: level.participantsCount || 0
  }
});

console.log(result);

This code is a little inefficient so you could improve it by looping over the api data and adding it to an object with the levelName being the key. Then you can just key on the level name in the loop instead of doing the find.