Постановка задачи
Требуется создать веб-страницу с отображением нескольких графиков, которые должны обновляться по мере поступления новых данных. Изначально предполагается шесть графиков, но решение должно предполагать возможность увеличить это число до 20 без внесения существенных изменений в исходный код страницы. Данные поступают через WebSocket endpoint.

Данные:

Источник
ws://signal.mmr.systems/ws/stream

Формат
{ “time”: 1688977456, “values”: [0.01, 0.02, 0.03, 0.04, ...] }

Значение “time” является временной меткой, содержит значение времени в формате UNIX timestamp, отображается по горизонтали и является общим для всех графиков. Размер вектора значений может изменяться. При увеличении количества элементов новых график должен добавляться. При уменьшении количества данных нужно использовать старые данных вместо недостающих значений.

По горизонтали
Отображать значение “time” в формате “HH:mm”, значение формата должно быть легко заменяемым.
Чтобы избежать наложения текста, только каждая N-ая метка должна быть отображена, значение N - должно быть легко изменяемым.

По вертикали
Отображать значения “values” по одному на каждый график.
Предусмотреть возможность добавлять вертикальную шкалу одновременно слева и справа.
Предусмотреть возможность отображать графики с разными диапазонами значений так, чтобы при наложении друг на друга положения значений масштабировались по вертикали относительно текущих минимума и максимума для каждого отдельного графика. Например, значения графика 1 до настоящего времени укладывались в диапазон [-5; 5], а значения графика 2 — в диапазон [0; 20]. В этом случае оба графика должны быть расположены примерно на одной вертикали и визуально выглядеть так, как если бы значения второго графика были уменьшены вдвое и сдвинуты на -5 вниз. За разъяснениями этого пункта рекомендуется обратиться к автору ТЗ.

Внешний вид
Без особых усилий должно быть возможно изменить в коде страницы следующие цвета и стили:
Задний фон
Цвета и прозрачность линий графиков
Параметры шрифта для всех текстовых меток: заголовок, легенда, метки, ...
Цвет сетки
Цвета главных рисок
Цвета цвета дополнительных рисок

Алгоритм работы
При открытии страницы на всю ширину области видимости страницы отображается область графика с теми элементами, которые не требуют значений данных: заголовок (константа), легенда (константа), сетка (шаг сетки - константа).
Страница подключается к указанному адресу.
Приходит новая порция данных.
Добавляется (если нужно, см. выше) метка по горизонтали.
Для каждого графика новое значение добавляется в список значений.
Каждый график перерисовывается исходя из текущих значений своего минимума и максимума так, чтобы максимально занимать области видимости.

Требования к коду
Исходный код должен быть простым и понятным, включение сторонних компонентов должно быть обосновано. Без предварительного согласия допускается использовать библиотеку jQuery и любую открытую библиотеку построения графиков. Каждая библиотека должна быть скомпилирована в отдельный файл, включаемый в страницу HTML через использование тега . Допускается разделение исходного кода JavaScript на отдельные модули, которые также включаются в страницу через тег. Все модули должны загружаться с учётом зависимостей так, чтобы не существовало вероятности загрузить модули в неправильном порядке, получив некорректно работающую страницу. Конечное решение должно работать без сервера HTTP и не должно обращаться к каким-либо сторонним ресурсам.