Как отделить поток данных в реальном времени от компонента LightningChart JS React ⇐ Javascript

[Anonymous]

Мой вариант использования — визуализация потока данных в реальном времени, включающего несколько различных диаграмм. Для диаграмм я использую LightningChart JS.
Сейчас у меня есть такой компонент React:

Код: Выделить всё

export function Chart() {
const id = useId();
const lc = useContext(LCContext);

useEffect(() => {
const container = document.getElementById(id) as HTMLDivElement;
if (!container || !lc) {
return;
}
const chart = lc.ChartXY({
container,
});
const lineSeries = chart
.addLineSeries({
schema: {
x: { pattern: "progressive" },
y: { pattern: null },
},
})
.setMaxSampleCount(100_000);

const ws = new WebSocket(wsUrl);
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
lineSeries.appendJSON(data);
};

return () => {
chart.dispose();
ws.close();
};
}, [id, lc]);

return ;
}

До сих пор это работало отлично, поскольку в моем приложении была только одна диаграмма. Но теперь мне нужно даже до 10 графиков. Тот же подход по-прежнему работает (я могу добавить некоторые дополнительные метаданные к сообщениям JSON и отфильтровать нужный пакет данных для конкретной диаграммы), но я думаю, что это действительно неэффективно.
В идеале я хотел бы использовать только одно соединение с веб-сокетом из внешнего интерфейса и разделить его на множество диаграмм, но я не знаю, как реализовать это с помощью React. Ищете какие-либо рекомендации по этому поводу, особенно с учетом производительности.
Чтобы быть более ясным, цель — это информационная панель с большим количеством отдельных диаграмм, каждая из которых показывает прокручиваемые линейные диаграммы. Данные x — это время, а y могут представлять собой различные измерения. Вот документы в библиотеке диаграмм: https://lightningchart.com/js-charts/docs/

Подробнее здесь: https://stackoverflow.com/questions/798 ... -component