VoidVolker

На изображении — таблица. Поэтому верстать это таблицей правильно.

Сети организации и сети провайдеров имеют свои особенности. (вряд ли в обычной организации найдутся в большом количестве OLT).

Если смотреть симуляторы, то вот тут неплохой обзор: https://habr.com/ru/articles/494504/

Если курсы/книги - то классикой стали курсы от Cisco..

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

https://habr.com/ru/articles/462179/

2й для старого разъема питания для HDD дисков
3й для floppy или для кард-ридера(который в корпус монтируется)

Ненужные провода в корпусе лучше заизолировать. Или вообще убрать. Пока болтаются - есть риск что будет
контакт с корпусом или какими-то деталями. Да по врешнему виду один из кабелей похож
на дисковод.

Самый что ни на есть обычнейший разьем для питания жесткого диска (второй) и флопа/ридера, который ставится в отсек 3.5".
Если держать его как на фото - слева +5V, справа +12V, средние провода - земля.

Выкинуть все анимации, нарисовать все графики на канвасе который не видно один раз и сохранить в dataurl или objecturl png (можно с помощью chartjs) и выводить картинками, убрать у них реактивность (это уже опционально)

добавить virtualscroll для таблицы

Как можно побороть проблему, оптимизировать может быть что-то?

Открыть DevTools на вкладке Performance и затрейсить рендеринг. Смотреть в получившиеся графики, искать, куда уходит время и ресурсы.
Но вообще, эту задачу скорее надо решать через UX - вряд ли кому-то вообще нужны разом эти 1000 графиков.

https://codepen.io/kapysta-xxl/pen/NWemamB

Посмотрите на результат выполнения следующего кода с [Symbol.iterator]() { return this; } и без:

const iter = new Range(1, 5)[Symbol.iterator]();
console.log(iter.next().value);
console.log(iter.next().value);
console.log([...iter]);