Graph

Установка

npm i @hydro-g/graph

Создание

import { GraphElement, defineGraph } from '@hydro-g/graph'

defineGraph()

const graphElement = new GraphElement({
  // 'x' | 'y' | 'xy' | 'none'
  autoGrid: 'xy',

  // Названия осей
  xName: 'Q, м3/c',
  yName: 'H, см',

  // Названия осей в подсказке движения курсора
  tooltipXName: 'Q',
  tooltipYName: 'H',

  // Ручная настройка сетки
  xValueMin: 0,
  yValueMin: 0,
  xValueMax: 100,
  yValueMax: 100,
  columns: 10,
  rows: 10,
  maxMult: 1.25,
  roundingX: 100,
  roundingY: 100,

  // 'left' | 'right' | 'none'
  yAxisSide: 'left',
  // 'bottom' | 'top' | 'none'
  xAxisSide: 'bottom',

  // Ручные отступы вокруг сетки
  paddingTop: 0,
  paddingRight: 0,
  paddingBottom: 0,
  paddingLeft: 0,
})

document.body.appendChild(graphElement)

Свойства

Название текущей редактируемой кривой безье

graphElement.editedBezierCurveName

Название текущей редактируемой косинусоиды

graphElement.editedCosineCurveName

Методы

Создание статичной кривой безье

graphElement.createStaticBezierCurve('name', {
  // Данные точек
  data: [
    {
      x: 50,
      y: 50,
    },
    {
      x: 100,
      y: 100,
    },
  ],

  // Цвет кривой
  color: 'black',

  // Цвет выделения кривой
  selectColor: 'black',

  // Размер поинта
  pointSize: 0.005,

  // Если указано, разбивает линию на сегменты
  lineDash: 5,
})

Создание изменяемой кривой безье

graphElement.createEditableBezierCurve('name', {
  data: [
    {
      x: 50,
      y: 50,
    },
    {
      x: 100,
      y: 100,
    },
  ],

  // Цвет кривой
  color: 'black',

  // Цвет выделения кривой
  selectColor: 'black',

  // Размер поинта
  pointSize: 0.005,

  // Если указано, разбивает линию на сегменты
  lineDash: 5,

  // Красит кривую в этот цвет если она построена правильно
  goodColor: 'green',

  // Красит кривую в этот цвет если она построена неверно
  badColor: 'red',

  // Показывается ли редактируемая кривая в том положении в котором был включен режим редактирвания
  previousVisible: true,
})

Включение режима редактирования для кривой безье

graphElement.enableBezierCurveEditing('name')

Обновления данных кривой безье

graphElement.updateBezierCurve(
  'name',

  // Новые точки
  [
    {
      x: 60,
      y: 60,
    },
    {
      x: 120,
      y: 120,
    },
  ]
)

Применение изменённых значений кривой безье

graphElement.applyBezierCurveChanges()

Выключение режима редактирования кривой безье

graphElement.disableBezierCurveEditing()

Скрытие кривой безье

graphElement.hideBezierCurve('name')

Открытие кривой безье

graphElement.showBezierCurve('name')

Получение текущих значений кривой безье

graphElement.getBezierCurveData('name')

Удаление кривой безье

graphElement.deleteBezierCurve('name')

Проверка на существование кривой безье

graphElement.hasBezierCurve('name')

Получение всех названий кривых безье

graphElement.getAllBezierCurvesNames()

Включение выделения кривой безье

// selectColor должен отличаться от color
graphElement.selectBezierCurve('name')

Выключение выделения кривой безье

// selectColor должен отличаться от color
graphElement.unselectBezierCurve('name')

Переименование кривой безье

graphElement.renameBezierCurve('oldName', 'newName`)

Создание косинусоиды

graphElement.createCosineCurve('name', {
  // 'symmetrical-left' | 'symmetrical-right' | 'two-branches'
  type: 'two-branches',

  // Цвет кривой
  color: 'black',

  // Цвет выделения кривой
  selectColor: 'black',

  // Размер поинта
  pointSize: 0.005,

  // Если указано, разбивает линию на сегменты
  lineDash: undefined,
})

Удаление косинусоиды

graphElement.deleteCosineCurve('name')

Включение режима редактирования косинусоиды

graphElement.enableCosineCurveEditing('name')

Выключение режима редактирования косинусоиды

graphElement.disableCosineCurveEditing()

Скрытие косинусоиды

graphElement.hideCosineCurve('name')

Открытие косинусоиды

graphElement.showCosineCurve('name')

Включение выделения косинусоиды

// selectColor должен отличаться от color
graphElement.selectCosineCurve('string')

Выключение выделения косинусоиды

graphElement.unselectCosineCurve('name')

Получение текущих значений косинусоиды

graphElement.getCosineCurveData(name)

Переименование косинусоиды

graphElement.renameCosineCurve('oldName', 'newName')

Проверка на существование косинусоиды

graphElement.hasCosineCurve('name')

Получение всех названий косинусоид

graphElement.getAllCosineCurvesNames()

Создание облака точек

graphElement.createPointCloud(
  'name',
  {
    // Массив точек.
    // Если для точки указано свойство info,
    // то при наведении на неё будет показываться подсказка
    // !Значениями x и y могут быть Date
    data: [
      { x: 20, y: 20, info: ['x: 20', 'y: 20'] },
      { x: 40, y: 50 },
      { x: 80, y: 80 },
    ],

    // Форма поинта. 'circle' | 'square' | 'triangle' | 'star'
    pointShapeType: 'circle',

    // Цвет закрашивая поинта
    pointFill: 'lightblue',

    // Цвет обводки поинта
    pointStroke: 'red',

    // Размер поинта
    pointSize: 0.005,
  },
  // Участвует ли облако в поиске ближайшей точки при добавлении ограничений
  false
)

Обновление данных облака точек

graphElement.updatePointCloud('name', [
  {
    x: 20,
    y: 20,
  },
  {
    x: 50,
    y: 50,
  },
])

Скрытие облака точек

graphElement.hidePointCloud('name')

Открытие облака точек

graphElement.showPointCloud('name')

Удаление облака точек

graphElement.deletePointCloud('name')

Проверка на существование облака точек

graphElement.hasPointCloud('name')

Получение всех названий облаков точек

graphElement.getAllPointCloudsNames()

Включение возможности добавлять ограничения

graphElement.enableLimits()

Выключение возможности добавлять ограничения

graphElement.disableLimits()

Удаление все ограничения

graphElement.clearLimits()

Скрытие всех ограничей(не отрисывываются на канвасе)

graphElement.hideLimits()

Открытие всех ограничей

graphElement.showLimits()

Создание интервалов

graphElement.createRanges('name', {
  data: [
    {
      // Дата стартовой линии
      from: new Date('2021-04-15'),

      // Дата конечной линии
      to: new Date('2021-06-15'),

      // Если указано, показывается при наведении
      fromInfo: ['2021-04-15'],

      // Если указано, показывается при наведении
      toInfo: ['2021-06-15'],
    },
    {
      ...
    },
    {
      ...
    },
  ],

  // Цвет между промежутками при наведении
  fillColor: '#4c6ef5',

  // Цвет стартовой линии
  fromColor: '#37A31D',

  // Цвет конечной линии
  toColor: '#9F6205',
})

Удаление интервалов

graphElement.removeRanges('name')

Обновление интервалов

graphElement.updateRanges('name', [
  {
    // Дата стартовой линии
    from: new Date('2021-04-15'),

    // Дата конечной линии
    to: new Date('2021-06-15'),

    // Если указано, показывается при наведении
    fromInfo: ['2021-04-15'],

    // Если указано, показывается при наведении
    toInfo: ['2021-06-15'],
  },
  {
    ...
  },
  {
    ...
  },
])

Скрытие интервалов

graphElement.hideRanges('name')

Открытие интервалов

graphElement.showRanges('name')

Проверка на существование интервалов

graphElement.hasRanges('name')

Получение всех названий интервалов

graphElement.getAllRangesNames()

Events

Подписка на изменения точек кривой безье

const curveDataChangeListener = ((event: CurveDataChangeEvent) => {
  console.log(event.detail.curveName, event.detail.data)
}) as EventListener

graphElement.addEventListener('curve-data-change', curveDataChangeListener)

Подписка на изменения точек косинусоиды

Тоже самое что и у кривой безье, но нужно сдвинуть данные по оси X на один день

import { shiftDataByOneDay } from '@hydro-g/graph'

const curveDataChangeListener = ((event: CurveDataChangeEvent) => {
  console.log(event.detail.curveName, shiftDataByOneDay(event.detail.data))
}) as EventListener

graphElement.addEventListener('curve-data-change', curveDataChangeListener)

Подписка на изменения ограничений

const limitsDataChangeListener = ((event: LimitsDataChangeEvent) => {
  console.log(event.detail.data)
}) as EventListener

graphElement.addEventListener('limits-data-change', limitsDataChangeListener)

Разное

Размер шрифта и семейство можно задать в css для x-graph

x-graph {
  width: 100%;
  height: 100%;
  font-size: 1vmin;
  font-family: sans-serif;
}

Создание таймлайна

import { getTimelineAxisParts, GraphElement } from '@hydro-g/graph'

const timelineAxisParts = getTimelineAxisParts(
  // Нужен ли январь или нет
  false
)

const graphElement = new GraphElement({
  ...timelineAxisParts.graphParameters,
  yName: 'y',
})

graphElement._isDrawXMark = timelineAxisParts.isDrawXMark
graphElement._getXMarkValue = timelineAxisParts.getXMarkValue
graphElement._getXPointerValue = timelineAxisParts.getXPointerValue