Компонент Measurer

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

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

{
  "name": "measurer",
  "sector": "central",
  "layerZ": -1,
  "settings": {
    "cursors": [{...}, {...}]
  }
}

Настройки

Свойство mode определяет вид отображаемого измерителя. На данный момент компонент measurer поддерживает два вида измерителей:

Вид single

Вид single использулетя по-умолчанию. Измеритель отображается в виде курсора, позволяющего зафиксировать значение в конкретной точке графика.

{
  "settings": {
    "cursors": [
      {
        "mode": "single",
        "name": "",
        "startPosition": 0,
        "touchLineAreaWidth": 8,
        "lineWidth": 1,
        "minSpaceToAnother": 1,
        "focusedAreaColor": "#28bbff",
        "lineColor": "#3d64ae",
        "label": {
          "title": "",
          "color": "#3d64ae",
          "fontFamily": "Roboto",
          "fontSize": "16px",
          "stroke": "#ffffff",
          "strokeWidth": "0.4", 
          "isBold": false
        },
      }
    ]
  }
}

Вид double

Измеритель с режимом double отображается как область между двумя границами. Пользователь может изменять как положение всей области, так и её ширину. Такой тип измерителя удобно использовать для выделения интервалов на графике.

{
  "settings": {
    "cursors": [
      {
        "mode": "double",
        "name": "",
        "startPosition": 0,
        "startWidth": 200,
        "leftLineColor": "#3d64ae",
        "rightLineColor": "#3d64ae",
        "focusedAreaColor": "#28bbff",
        "intermediateAreaColor": "#00a3d540",
        "intermediateAreaOpacity": "-",
        "touchLineAreaWidth": 8,
        "minLinesSpace": 10,
        "minSpaceToAnother": 1,
        "rounded": false,
        "label": {
          "title": "",
          "color": "#3d64ae",
          "fontFamily": "Roboto",
          "fontSize": "16px",
          "stroke": "#ffffff",
          "strokeWidth": "0.4", 
          "isBold": false
        },
      }
    ]
  }
}

Контроллер

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

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);

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

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

Прогрмаммное взаимодействие с компонентом

Объект измерителя предоставляет интерфейс для програмнного управленя и взаимодействия с компонентом.

Интерфейс измерителей имеет общую структуру для обоих режимов — single и double, однако поведение некоторых методов может отличаться в зависимости от выбранного режима.

Метод move(...)

Метод move используется для изменения положения измерителя на графике. Его сигнатура зависит от типа измерителя:

• single

  move(x: number): void
  

• double

  move({ leftLinePosition?: number, rightLinePosition?: number }): void
  

Метод moveWithoutEvent(...)

Метод moveWithoutEvent используется для изменения положения измерителя на графике без инициализации события. Его сигнатура зависит от типа измерителя:

• single

  moveWithoutEvent(x: number): void
  

• double

  moveWithoutEvent({ leftLinePosition?: number, rightLinePosition?: number }): void
  

Обработка событий

Подерживаемые события:

Событие PositionChanged срабатывает при каждом перемещении измерителя и передаёт слушателям объект с информацией о типе сдвинутой линии и её новой позиции.

const target: MeasurerCallback = {
  lineType: "center", // или "left", "right" в зависимости от режима
  position: x,        // число в режиме single, объект { x, width } в режиме double
};

• В режиме single всегда передаётся lineType: "center" и position, представляющий координату x.

  Код примера

• В режиме double поле lineType принимает значения "left", "right" или "center" в зависимости от перемещённой границы, а position содержит объект { x, width }.

  Код примера

Примеры

single

double