Как улучшить производительность визуализации данных на диаграммах в React Native?

#javascript #react-native #performance #charts #scichart

Вопрос:

У меня есть линейный график от SciChart https://www.scichart.com/ в приложении React Native. И обычно получаем для него около 3500 объектов из Rest API следующего типа:

 interface ChartItem {
  time: Data;
  value: number;
}
type ChartData = ChartItem[]
 

введите описание изображения здесь

И после того, как я получу данные на передней части, я сделал некоторую карту, потому что мне нужно изменить данные, чтобы они совпадали с moment.js https://momentjs.com/ вот так:

   public get chartData() {
    return this.data.map((el) => ({
      time: moment(el.date).toISOString(true),
      value: el.value,
    }));
  }
 

Данные с сервера обычно поступают быстро, но визуализация диаграммы выполняется очень медленно. Это занимает около 15-30 секунд. И более того, это так медленно и неудобно для компоновки, когда нужно менять ориентацию с портретного на ландшафтный режим и обратно.
Как вы думаете, ребята, какой лучший способ улучшить производительность данных в этой ситуации? Как насчет уменьшения длины данных с сервера и какой наилучшей длины массива будет для линейного графика? И, может быть, внести изменения в данные на внутренней части и отправить их на фронт? Или, может быть, вы знаете, какой способ будет более быстрым для итерации в длинном массиве?