Конструктор графического полотна

Обзор

Файл конфигурации представляет собой своего рода чертёж графического полотна — он описывает структуру, расположение и параметры элементов. Однако сам по себе этот чертёж не даёт возможности взаимодействовать с графиками.

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

Типы данных

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

По формату представления данных

В библиотеке JAGM существует два вида данных:

• Сырые (Raw) данные — данные, поступающие в своих физических величинах и требующие предварительного преобразования в пиксели для отображния на графическом полотне.
• Подготовленные (Prepared) данные — данные, уже преобразованные в пиксели.

По способу поступления данных

В библиотеке JAGM существуте два типа данных:

• Offline данные — заранее подготовленные массивы, доступные целиком до начала визуализации.
• Online данные — поступают в реальном времени, по частям (например, поток с сервера или с устройства).

Варианты конфигурации

Комбинация формата представления и способа поступления данных определяет конкретный тип конфигурации конструктора. Всего в библиотеке JAGM предусмотрено четыре таких конфигурации — по одной для каждой возможной комбинации.

Объявление конструктора

Для работы с сырыми (Raw) потоковыми (Online) данными

  import { 
    JagmRootProvider 
  } from "@incartdev/jagm-core";                 // Импорт объекта конструктороа
  import { 
    RawOnlineVisualizatorConfigJsUnpacker 
  } from "@incartdev/jagm-visualizator";         // Импорт объекта конфигурации для работы с сырыми (Raw) потоковыми (Online) данными

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

  const constructor = new JagmRootProvider(new RawOnlineVisualizatorConfigJsUnpacker());

Для работы с подготовленными (Prepared) потоковыми (Online) данными

  import { 
    JagmRootProvider 
  } from "@incartdev/jagm-core";                 // Импорт объекта конструктороа
  import { 
    PreparedOnlineVisualizatorConfigJsUnpacker  
  } from "@incartdev/jagm-visualizator";         // Импорт объекта конфигурации для работы с подготовленными (Prepared) потоковыми (Online) данными

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

  const constructor = new JagmRootProvider(new PreparedOnlineVisualizatorConfigJsUnpacker());

Для работы с сырыми (Raw) статическими (Offline) данными

  import { 
    JagmRootProvider 
  } from "@incartdev/jagm-core";                 // Импорт объекта конструктороа
  import { 
    RawOfflineVisualizatorConfigJsUnpacker 
  } from "@incartdev/jagm-visualizator";         // Импорт объекта конфигурации для работы с сырыми (Raw) статическими (Offline) данными

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

  const constructor = new JagmRootProvider(new RawOfflineVisualizatorConfigJsUnpacker());

Для работы с подготовленными (Prepared) статическими (Offline) данными

  import { 
    JagmRootProvider 
  } from "@incartdev/jagm-core";                 // Импорт объекта конструктороа
  import { 
    PreparedOfflineVisualizatorConfigJsUnpacker 
  } from "@incartdev/jagm-visualizator";         // Импорт объекта конфигурации для работы с подготовленными (Prepared) статическими (Offline) данными

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

  const constructor = new JagmRootProvider(new PreparedOfflineVisualizatorConfigJsUnpacker());

Создание графического полотна

Графическое полотно размещается внутри заранее подготовленного div-элемента в DOM-дереве.

  import VisualSettings from "./VisualSettings.json" // Импорт файла конфигурации

  constructor.create({
    settings: VisualSettings,
    rootHtml: document.querrySelect(".canvas-wrap")
  });

Метод create используется для создания и инициализации графического полотна на основе переданного файла конфигурации. Он является основным методом конструктора JagmRootProvider и отвечает за генерацию визуальных компонентов, их размещение и привязку к DOM-элементу.

Пример