@hydrographs/common NPM

Common Graph

Установка

npm i @hydrographs/common

Создание

import { GraphElement } from '@hydrographs/common'

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,

  // Зумирование по оси X
  zoom: true,
})

document.body.appendChild(graphElement)

Свойства

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

tsgraphElement.editedBezierCurveName

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

graphElement.editedCosineCurveName

Элемент подключен к странице и инициализорован

graphElement.isReady

Кривые безье

Создание неизменяемой

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.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: [
      { id: 0, x: 20, y: 20, info: ['x: 20', 'y: 20'] },
      { id: 1, x: 40, y: 50 },
      { id: 2, x: 80, y: 80 },
    ],

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

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

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

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

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

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

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

Скрытие

graphElement.hidePointCloud('name')

Открытие

graphElement.showPointCloud('name')

Удаление

graphElement.deletePointCloud('name')

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

graphElement.hasPointCloud('name')

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

graphElement.getAllPointCloudsNames()

Отключение одного поинта

graphElement.disableCloudPoint('cloudName', pointId)

Включение одного поинта

graphElement.enableCloudPoint('cloudName', pointId)

Ограничения

Включение

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

События

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

import { CurveDataChangeEvent } from '@hydrographs/common'

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

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

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

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

import { shiftDataByOneDay, CurveDataChangeEvent } from '@hydrographs/common'

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

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

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

import { LimitsDataChangeEvent } from '@hydrographs/common'

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

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

Подписка на отключение поинтов внутри всех облаков точек

import { PointDisabledEvent } from '@hydrographs/common'

graphElement.addEventListener('cloud-point-disabled', ((e: PointDisabledEvent) => {
  console.log(e.detail)
}) as EventListener)

Подписка на включение поинтов внутри всех облаков точек

import { PointDisabledEvent } from '@hydrographs/common'

graphElement.addEventListener('cloud-point-enabled', ((e: PointDisabledEvent) => {
  console.log(e.detail)
}) as EventListener)

Разное

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

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

Рецепты

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

import { getTimelineAxisParts, GraphElement } from '@hydrographs/common'

const timelineAxisParts = getTimelineAxisParts()

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

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

@everything-registry/sub-chunk-407

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago