Фильтруйте огромные записи (30k-50k) + в angular, используя loda sh в angular 8

Question

Сценарий: я получаю записи около 50 тыс. Через API. Каждая запись в этом имеет поле Datetime, подобное этому.

{
    "ID": 7,
    "CaseID": 7,
    "Name": "ABC",
    "DateTime": "2020-02-25 00:00:00.000",
  },
  {
    "ID": 8,
    "CaseID": 8,
    "Name": "Skin",
    "DateTime": "2020-03-12 00:00:00.000",
  }

В пользовательском интерфейсе у меня есть раскрывающийся список, который фильтрует данные на основе текущего квартала, последнего квартала, этого месяца, прошлого года, прошлого месяца и т. Д. c и настраиваемый указатель даты диапазона.

При выборе любого параметра у меня есть функция фильтра, которая фильтрует эту огромную запись на основе даты начала и окончания выбранного параметра. Например, «Текущий квартал», «Дата начала квартала» и «Дата окончания квартала».

Функция фильтра просто проверяет, попадает ли дата записи в диапазон выбранного параметра. Мой код:

const filteredData = _.filter(hugeRecords, record => {
      const visualDate = moment(record.DateTime).format('YYYY-MM-DD');
      return moment(visualDate).isBetween(this.periodTitleStartDate, this.periodTitleEndDate);
    });

, где periodTitleStartDate и periodTitleEndDate - это диапазон параметров раскрывающегося списка, выбранный в формате «ГГГГ-ММ-ДД».

Теперь проблема заключается в том, что у меня есть записи размером около 10 тыс. тогда нет проблем. Если записи около 20 КБ, пользовательский интерфейс немного зависает. Если записи 30k-50k, пользовательский интерфейс браузера зависает дольше. Кроме того, я буду использовать этот отфильтрованный массив для перехода к старшим диаграммам для создания диаграмм в представлении панели управления.

Я пробовал много терминов и других вопросов / проблем StackOverflow и Github, но не смог решить мою проблему. Как я могу улучшить производительность фильтрации? Примечание. Передача выпадающего меню в API отдыха и выборка только отфильтрованных записей пока недоступна. Заранее спасибо.

Answer 1

Ну, вы можете предварительно обработать массив, чтобы получить вычисленную метку времени. Это нужно сделать только один раз.

Тогда фильтр будет сравнивать только числа (временные метки) и значительно ускорить процесс.

Также вы можете отсортировать массив по временным меткам и, таким образом, выполнить множество улучшений при поиске между датами.

// Preprocess

const processed = Records.map( record =>{
record.timestamp = moment(record.DateTime).format('YYYY-MM-DD').unix();

возврат записи; });

// Filter assuming you have converted the boundary Dates to timestamps with moment and unix().

const filtered = processed.filter( record => {
 return !(this.periodTitleStartDate < record.timestamp &&  this.periodTitleEndDate > record.timestamp
});