Компонент Marks

Компонент для отображения графических и текстовых меток на графике.

Компонент marks может использоваться в графиках, работающих как с online-, так и с offline-типами данных

Объявление компонента `marks`

{
  "name": "marks",
  "sector": "central",
  "layerZ": 2,
  "settings": {...}
}

Свойство	Тип	Значение поумолчанию	Описание
`sector`	string	"central"	Сектор, в котором будет распологаться компонент `marks`.
`layerZ`	number	2	Определяет положение компонента по оси Z. Перекрывающие элементы с большим значением `layerZ` будут накладываться поверх элементов с меньшим `layerZ`.

Настройки

{
  "settings": {
    "groups": [{...}, {...}]
  }
}

Массив groups описывает типы меток, отображаемых на графике. В текущей версии библиотеки JAGM доступны два типа меток:

Метка `line`

{
  "groups": [
    {
      "type": "line",
      "markDataId": 1,
      "markViewId": 1,
      "area": {
        "x_axis": "left-right",
        "y_axis": "bottom-top",
        "x": "0px",
        "y": "0px",
        "width": "0px",
        "height": "0px",
      },
      "item": {
        "axisX": "left",
        "axisY": "down",
        "x": "0px",
        "y": "-10px",
        "height": "20px",
        "min_x_space": "0px",
        "min_y_space": "0px",
        "color": "#FF0000",
        "xSignalDependency": "signalPoint",
        "ySignalDependency": "signalPoint"
      }
    }
  ]
}

Свойство	Тип	Значение поумолчанию	Описание
`type`	string	ОБЯЗАТЕЛЬНОЕ	Тип метки.
`markDataId`	number	ОБЯЗАТЕЛЬНОЕ	Идентификатор метки в блоке `marks` структуры `data`. См. раздел Блок marks
`markViewId`	number	ОБЯЗАТЕЛЬНОЕ	Идентификатор визуального представления метки. Используется для привязки к сигналу. См. раздел Привязка метки к сигналу
Блок `area` — область отрисовки.
`area.x_axis`	string	"left-right"	Направление оси X: `left-right` — слева направа, `right-left` — спарава налево.
`area.y_axis`	string	"bottom-top"	Направление оси Y: `top-bottom` — сверху вниз, `bottom-top` — снизу вверх.
`area.x`	string	0	Позиция левого нижнего края области по оси X в пикселях или в процентах.
`area.y`	string	0	Позиция левого нижнего края области по оси Y в пикселях или в процентах.
`area.width`	string	0	Ширина области в пикселях или в процентах.
`area.height`	string	0	Высота области в пикселях или в процентах.
Блок `item` — параметры отображения метки.
`item.axisX`	string	"left"	Направление оси X: `left` — слева направа, `right` — спарава налево
`item.axisY`	string	"down"	Направление оси Y: `down` — сверху вниз, `top` — снизу вверх
`item.x`	string	0	Позиция метки по оси X в пикселях или в процентах.
`item.y`	string	"-10px"	Позиция метки по оси Y в пикселях или в процентах.
`item.height`	string	"20px"	Высота метки в пикселях или в процентах.
`item.min_x_space`	string	0	Минимальное расстояние между метками по оси X в пикселях или в процентах.
`item.min_y_space`	string	0	Минимальное расстояние между метками по оси Y в пикселях или в процентах.
`item.color`	string	#FF0000	Цвет метки в формате RGBA или HEXA.
`item.xSignalDependency`	string	"signalPoint"	Привязка к сигналу по X: `signalPoint` — к точке сигнала, `none` — без привязки.
`item.ySignalDependency`	string	"signalPoint"	Привязка к сигналу по Y: `signalPoint` — к точке сигнала, `isoline` — к изолинии сигнала, `none` — без привязки.

Код примера

Метка `text`

{
  "groups": [
    {
      "type": "text",
      "markDataId": 1,
      "markViewId": 1,
      "area": {
        "x_axis": "left-right",
        "y_axis": "bottom-top",
        "x": "0px",
        "y": "0px",
        "width": "0px",
        "height": "0px",
      },
      "item": {
        "axisX": "left",
        "axisY": "down",
        "x": "0px",
        "y": "0px",
        "width": "30px",
        "height": "20px",
        "min_x_space": "60px",
        "min_y_space": "0px",
        "color": "#000000",
        "xSignalDependency": "signalPoint",
        "ySignalDependency": "isoline",
        "fontFamily": "Arial, sans-serif",
        "fontSize": "10px",
        "isCentered": true,
      }
    }
  ]
}

Свойство	Тип	Значение поумолчанию	Описание
`type`	string	ОБЯЗАТЕЛЬНОЕ	Тип метки.
`markDataId`	number	ОБЯЗАТЕЛЬНОЕ	Идентификатор метки в блоке `marks` структуры `data`. См. раздел Блок marks
`markViewId`	number	ОБЯЗАТЕЛЬНОЕ	Идентификатор визуального представления метки. Используется для привязки к сигналу. См. раздел Привязка метки к сигналу
Блок `area` — область отрисовки.
`area.x_axis`	string	"left-right"	Направление оси X: `left-right` — слева направа, `right-left` — спарава налево.
`area.y_axis`	string	"bottom-top"	Направление оси Y: `top-bottom` — сверху вниз, `bottom-top` — снизу вверх.
`area.x`	string	0	Позиция левого нижнего края области по оси X в пикселях или в процентах.
`area.y`	string	0	Позиция левого нижнего края области по оси Y в пикселях или в процентах.
`area.width`	string	0	Ширина области в пикселях или в процентах.
`area.height`	string	0	Высота области в пикселях или в процентах.
Блок `item` — параметры отображения метки.
`item.axisX`	string	"left"	Направление оси X: `left` — слева направа, `right` — спарава налево
`item.axisY`	string	"down"	Направление оси Y: `down` — сверху вниз, `top` — снизу вверх
`item.x`	string	0	Позиция метки по оси X в пикселях или в процентах.
`item.y`	string	"-10px"	Позиция метки по оси Y в пикселях или в процентах.
`item.height`	string	"20px"	Высота метки в пикселях или в процентах.
`item.min_x_space`	string	0	Минимальное расстояние между метками по оси X в пикселях или в процентах.
`item.min_y_space`	string	0	Минимальное расстояние между метками по оси Y в пикселях или в процентах.
`item.color`	string	#000000	Цвет метки в формате RGBA или HEXA.
`item.xSignalDependency`	string	"signalPoint"	Привязка к сигналу по X: `signalPoint` — к точке сигнала, `none` — без привязки.
`item.ySignalDependency`	string	"isoline"	Привязка к сигналу по Y: `signalPoint` — к точке сигнала, `isoline` — к изолинии сигнала, `none` — без привязки.
`item.fontSize`	string	"10px"	Размер шрифта.
`item.fontFamily`	string	"Arial, sans-serif"	Шрифт метки.
`item.isCentered`	string	true	Центрирование метки относительно позиции.

Код примера

Настройка отображения меток на сигналах

На данный момент в библиотеке JAGM реализовано два варианта настройки отображения меток на сигналах:

Настройка отображения меток через свойство marks в блоке channles. См. раздел Блок channels.
Настройка отображения меток через свойство markViewId в блоке signals. См. раздел Блок signals.

Одновременно можно использовать только один из вариантов. Если в конфигурации заданы оба, приоритет имеет описание через блок channels.

Пример настройки отображения через свойство marks

  // Для краткости определение некоторых частей файла конфигурации опущено.
  ...
  {
    "name": "marks",
    "settings": {
      "groups": [
        {
          "type": "text",
          "markDataId": 0,
          "markViewId": 0,
        },
        {
          "type": "line",
          "markDataId": 1,
          "markViewId": 1,
        }
      ]
    }
  },
  // Для краткости определение некоторых частей файла конфигурации опущено.
  ...
  {
    "channels": [
      {
        "marks": [ { "markViewId": 0, "signalIds": [] }, { "markViewId": 1, "signalId": [1, 2] } ],
        "isolines": [{ "y": "83%" }, { "y": "50%" }, { "y": "17%" }],
      }
    ]
  }

Пример настройки отображения через свойство markViewId

{
  // Для краткости определение некоторых частей файла конфигурации опущено.
  ...
  {
    "name": "marks",
    "settings": {
      "groups": [
        {
          "type": "text",
          "markDataId": 0,
          "markViewId": 0,
        },
        {
          "type": "line",
          "markDataId": 1,
          "markViewId": 1,
        }
      ]
    }
  },

  // Для краткости определение некоторых частей файла конфигурации опущено.
  ...
  {
    "channels": [
      {
        "isolines": [{ "y": "83%" }, { "y": "50%" }, { "y": "17%" }],
        "signals": [
          { "color": "#026ce5", "markViewId": [0] },
          { "color": "#026ce5", "markViewId": [0, 1] },
          { "color": "#026ce5", "markViewId": [0, 1] }
        ]
      }
    ]
  }
}

Контроллер

Доступ к описанным меткам возможно получить через их контроллер.

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

import { JagmRootProvider } from "@incartdev/jagm-core";
import { JagmRawLineSignalData, JagmRawSignalsChartProvider } from "@incartdev/jagm-chart";
import { RawOfflineVisualizatorConfigJsUnpacker } from "@incartdev/jagm-visualizator";
import VisualConfig from "./VisualConfig.json";

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

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

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

// Создание контроллера графических элементов библиотеки
const chartProvider = new JagmRawSignalsChartProvider(visProvider.builder);

// Получение контроллера компонента marks (для одного графика)
const measurerGroup = chartProvider.charts[0].findContentGroup("marks");

API Контроллера

Свойство	Тип	Описание
`addMark`(message: RawDataEventMessage, sourceId: number = 0)	Функция	Добавляет метку на график. Принимает сообщение с данными и, опционально, идентификатор источника. RawDataEventMessage имеет следующую структуру: `type RawEventData = { type: string, // Название метки из блока data data: unknown, // Данные метки (для "text") x?: number, // Позиция метки по X y?: number // Позиция метки по Y } type RawDataEventMessage = { type: "event", data: RawEventData[]; }`
`clearMark()`	Функция	Удаляет все метки с графического полотна.
`getMarkArea`(markName: string, markType: string, sourceId: number = 0)	Функция	Возвращает объект области меток по имени, типу и, при необходимости, идентификатору источника. Возвращаемый объект содержит методы `addDataConverter`, позволяющие настраивать отображение текстовых значений для меток типа `text`.

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

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

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

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

import { JagmRootProvider } from "@incartdev/jagm-core";
import { JagmRawLineSignalData, JagmRawSignalsChartProvider } from "@incartdev/jagm-chart";
import { RawOfflineVisualizatorConfigJsUnpacker } from "@incartdev/jagm-visualizator";
import VisualConfig from "./VisualConfig.json";

// Создание тестовых меток для отображения
const marks = {
  type: "event",
  data: [
    {
      type: "RR", // Метка типа text
      data: 1000,
      x: 40
    },
    {
      type: "QRS", // Метка типа line
      data: 1000,
      x: 10
    }
  ]
};

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

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

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

// Создание контроллера графических элементов библиотеки
const chartProvider = new JagmRawSignalsChartProvider(visProvider.builder);

// Получение контроллера компонента marks (для одного графика)
const marksGroup = chartProvider.charts[0].findContentGroup("marks");

// Получение объекта области меток
const markAreas = marksGroup.getMarkArea("RR", "text");

// Настройка отображения текстровых меток
markAreas.forEach(area => {
  area.addDataConverter("RR", (data) => {
    if (data !== undefined && typeof data === "number") {
      return `${data}`;
    }
    return "";
  });
});

// Добавление меток на график
marksGroup.addMark(marks);

Пример

Online-график с метками `text`

Код примера

Online-график с метками `line`

Код примера

Online-график с совмещением меток

Код примера

Была ли статья полезна?

scaleXLabel

label

Компонент Marks

Объявление компонента marks

Настройки

Метка line

Метка text

Настройка отображения меток на сигналах

Пример настройки отображения через свойство marks

Пример настройки отображения через свойство markViewId

Контроллер

API Контроллера

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

Пример

Online-график с метками text

Online-график с метками line

Online-график с совмещением меток

Была ли статья полезна?

Объявление компонента `marks`

Метка `line`

Метка `text`

Online-график с метками `text`

Online-график с метками `line`