Сортировать массив alphanumeri c в машинописи в angular7

Question

Я должен решить 2 проблемы здесь.

1. Мне нужно построить гистограмму с 20 точками данных. Точки данных поступают из внутреннего API. Но API может не возвращать все 20 баллов каждый раз (недоступность данных). Может возвращать 7, 0, 1 или 20 точек данных. Но в пользовательском интерфейсе мы должны убедиться, что построены 20 точек по оси X. Для отсутствующих точек данных из API нам нужно будет показать 0 по оси Y.

2. Точки по оси X являются alphanumeri c. Нам нужно отсортировать их в порядке возрастания в машинописном тексте, прежде чем выводить его в UI.

Например:

Так мы получаем данные из Backend API.

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

На стороне машинописного текста нам нужно манипулировать и построить его, как показано ниже.

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}

Пока что я написал этот код

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

Как добавить отсутствующие данные указывает на массив и сортирует его?

Answer 1

Создавая новый массив нужного вам размера, вы можете отобразить эти значения и найти необходимые данные API и вернуть точку данных с этим значением x.

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

Этот код является Немного неэффективно, так что вы можете улучшить его, зацикливая данные API и добавляя его к объекту с ключом levelName. Тогда вы можете просто ввести имя уровня в l oop вместо того, чтобы делать find.

Answer 2

Одним из способов может быть просто обновление при получении новых данных,

public formatChartData(chartData){
    let self = this;
    _.each(chartData, function (d) {
      let level = number(d.levelName.replace('level', ''));
      self.finalChartData[level - 1].y = d.participantsCount;
    });
}

Если вам необходимо выполнить сброс на новые данные, вы просто пересекаете массив и назначаете 0 (или любое другое значение).

Для инициализации массива вам просто нужно простое значение,

for (let i = 1; i <= 20; i++) {
  self.finalChartData[i] = {
    x: 'level ' + i,
    y: 0
  };
}