Base

Базовый online-график предназначен для отображения непрерывно поступающих данных во времени. Он оптимален для задач мониторинга, потокового анализа и визуализации динамически изменяющихся сигналов в реальном времени.

Конфигурация конструктора

Конфигурация конструктора зависит от формата представления данных.

Подробнее о конфигурациях конструктора в разделе Конструктор графического полотна

Поддерживаемые конфигурации:

RawOnlineVisualizatorConfigJsUnpacker
PreparedOnlineVisualizatorConfigJsUnpacker

Использование

Объявление графика `base`

Чтобы использовать базовый график, необходимо указать его в поле type конфигурационного файла.

{
  "type": "chart:online:base"
}

Подробнее о файле конфигурации в разделе Файл конфигурации

Bизуализация данных

Детали работы с методами жизненного цикла опущены. (см. код примера)

Для визуализации графика применяется генератор тестовых сигналов. Подробнее об использовании генератора можно проичтать в разделе Генератор сигналов.

import { JagmRootProvider } from "@incartdev/jagm-core";
import { JagmRawSignalsChartProvider, JagmRawVisScreenDataParser } from "@incartdev/jagm-chart";
import { RawOnlineVisualizatorConfigJsUnpacker } from "@incartdev/jagm-visualizator";
import { ContinuousRawSignalGenerator, ContinuousGeneratorSettingsParser } from "@incartdev/signal-generator-js-core";

import signalGeneratorSettings from "./SignalGeneratorSettings.json";
import VisualConfig from "./VisualConfig.json";

// Получение ссылок на DOM элементы контейнера
const canvasRef = document.querySelector(".canvas-wrap");

// Создание экземпляра класса-конструктора графического полотна
const visProvider = new JagmRootProvider(new RawOnlineVisualizatorConfigJsUnpacker());

// Создание экземпляра класса генератора сигнала
const generator = new ContinuousRawSignalGenerator();

// Преобразование конфигурации генератора сигналов в объект настроек
const generatorSettings = ContinuousGeneratorSettingsParser.parse(generatorConfig);
if (generatorSettings === undefined) {
  return;
}

// Инициализация генератора сигналов
generator.init(generatorSettings);

// Инициализация создания графических элементов
await visProvider.create({
  settings: VisualConfig,
  rootHtml: canvasRef
});

// Создание контроллера графических элементов библиотеки
const chartProvider = new JagmRawSignalsChartProvider(visProvider.builder);
// Установка калибровки для сигнала ЭКГ
chartProvider.setCalibration(undefined, "ecg", [0], [1000], [0]);

// Установка коллбэка, передающего занчения с генератора сигналов на графическое полотно
generator.addListener(async message => {

    // Преобразование данных в типизированный формат
    const typedMessage = JagmRawVisScreenDataParser.parse(message);
    if (typedMessage === undefined) {
      return;
    }

    // Добавление данных на графическое полотно
    await chartProvider.pushVisMessage(typedMessage);
});

// Запуск генератора сигналов
generator.start();

Дополнительные возможности

Режимы рисования

Базовый график позволяет задавать режим рисования сигнала.
В настоящее время доступны два режима:

Roll (используется по-умолчанию) — при достижении конца графического окна сигнал начинает отрисовываться заново с его начала, создавая эффект «бегущей строки».
Scroll — сигнал продолжает отрисовываться от текущего положения, сдвигая содержимое окна влево по мере поступления новых данных.

Режим отображения задаётся через свойство drawMode в конфигурации блока view внутри блока signals.

Примеры

Roll

Код примера

Scroll