npm package: @hydro-g/graph
Description: ``` npm i @hydro-g/graph ```
Latest version: 0.3.13

# Graph

## Установка

```
npm i @hydro-g/graph
```

## Создание

```ts
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)
```

<br>
<br>

## Свойства

### Название текущей редактируемой кривой безье

```ts
graphElement.editedBezierCurveName
```

### Название текущей редактируемой косинусоиды

```ts
graphElement.editedCosineCurveName
```

<br>
<br>

## Методы

### Создание статичной кривой безье

```ts
graphElement.createStaticBezierCurve('name', {
  // Данные точек
  data: [
    {
      x: 50,
      y: 50,
    },
    {
      x: 100,
      y: 100,
    },
  ],

  // Цвет кривой
  color: 'black',

  // Цвет выделения кривой
  selectColor: 'black',

  // Размер поинта
  pointSize: 0.005,

  // Если указано, разбивает линию на сегменты
  lineDash: 5,
})
```

### Создание изменяемой кривой безье

```ts
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,
})
```

### Включение режима редактирования для кривой безье

```ts
graphElement.enableBezierCurveEditing('name')
```

### Обновления данных кривой безье

```ts
graphElement.updateBezierCurve(
  'name',

  // Новые точки
  [
    {
      x: 60,
      y: 60,
    },
    {
      x: 120,
      y: 120,
    },
  ]
)
```

### Применение изменённых значений кривой безье

```ts
graphElement.applyBezierCurveChanges()
```

### Выключение режима редактирования кривой безье

```ts
graphElement.disableBezierCurveEditing()
```

### Скрытие кривой безье

```ts
graphElement.hideBezierCurve('name')
```

### Открытие кривой безье

```ts
graphElement.showBezierCurve('name')
```

### Получение текущих значений кривой безье

```ts
graphElement.getBezierCurveData('name')
```

### Удаление кривой безье

```ts
graphElement.deleteBezierCurve('name')
```

### Проверка на существование кривой безье

```ts
graphElement.hasBezierCurve('name')
```

### Получение всех названий кривых безье

```ts
graphElement.getAllBezierCurvesNames()
```

### Включение выделения кривой безье

```ts
// selectColor должен отличаться от color
graphElement.selectBezierCurve('name')
```

### Выключение выделения кривой безье

```ts
// selectColor должен отличаться от color
graphElement.unselectBezierCurve('name')
```

### Переименование кривой безье

```ts
graphElement.renameBezierCurve('oldName', 'newName`)
```

<br>
<br>

### Создание косинусоиды

```ts
graphElement.createCosineCurve('name', {
  // 'symmetrical-left' | 'symmetrical-right' | 'two-branches'
  type: 'two-branches',

  // Цвет кривой
  color: 'black',

  // Цвет выделения кривой
  selectColor: 'black',

  // Размер поинта
  pointSize: 0.005,

  // Если указано, разбивает линию на сегменты
  lineDash: undefined,
})
```

### Удаление косинусоиды

```ts
graphElement.deleteCosineCurve('name')
```

### Включение режима редактирования косинусоиды

```ts
graphElement.enableCosineCurveEditing('name')
```

### Выключение режима редактирования косинусоиды

```ts
graphElement.disableCosineCurveEditing()
```

### Скрытие косинусоиды

```ts
graphElement.hideCosineCurve('name')
```

### Открытие косинусоиды

```ts
graphElement.showCosineCurve('name')
```

### Включение выделения косинусоиды

```ts
// selectColor должен отличаться от color
graphElement.selectCosineCurve('string')
```

### Выключение выделения косинусоиды

```ts
graphElement.unselectCosineCurve('name')
```

### Получение текущих значений косинусоиды

```ts
graphElement.getCosineCurveData(name)
```

### Переименование косинусоиды

```ts
graphElement.renameCosineCurve('oldName', 'newName')
```

### Проверка на существование косинусоиды

```ts
graphElement.hasCosineCurve('name')
```

### Получение всех названий косинусоид

```ts
graphElement.getAllCosineCurvesNames()
```

<br>
<br>

### Создание облака точек

```ts
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
)
```

### Обновление данных облака точек

```ts
graphElement.updatePointCloud('name', [
  {
    x: 20,
    y: 20,
  },
  {
    x: 50,
    y: 50,
  },
])
```

### Скрытие облака точек

```ts
graphElement.hidePointCloud('name')
```

### Открытие облака точек

```ts
graphElement.showPointCloud('name')
```

### Удаление облака точек

```ts
graphElement.deletePointCloud('name')
```

### Проверка на существование облака точек

```ts
graphElement.hasPointCloud('name')
```

### Получение всех названий облаков точек

```ts
graphElement.getAllPointCloudsNames()
```

<br>
<br>

### Включение возможности добавлять ограничения

```ts
graphElement.enableLimits()
```

### Выключение возможности добавлять ограничения

```ts
graphElement.disableLimits()
```

### Удаление все ограничения

```ts
graphElement.clearLimits()
```

### Скрытие всех ограничей(не отрисывываются на канвасе)

```ts
graphElement.hideLimits()
```

### Открытие всех ограничей

```ts
graphElement.showLimits()
```

<br>
<br>

### Создание интервалов

```ts
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',
})
```

### Удаление интервалов

```ts
graphElement.removeRanges('name')
```

### Обновление интервалов

```ts
graphElement.updateRanges('name', [
  {
    // Дата стартовой линии
    from: new Date('2021-04-15'),

    // Дата конечной линии
    to: new Date('2021-06-15'),

    // Если указано, показывается при наведении
    fromInfo: ['2021-04-15'],

    // Если указано, показывается при наведении
    toInfo: ['2021-06-15'],
  },
  {
    ...
  },
  {
    ...
  },
])
```

### Скрытие интервалов

```ts
graphElement.hideRanges('name')
```

### Открытие интервалов

```ts
graphElement.showRanges('name')
```

### Проверка на существование интервалов

```ts
graphElement.hasRanges('name')
```

### Получение всех названий интервалов

```ts
graphElement.getAllRangesNames()
```

<br>
<br>

## Events

### Подписка на изменения точек кривой безье

```ts
const curveDataChangeListener = ((event: CurveDataChangeEvent) => {
  console.log(event.detail.curveName, event.detail.data)
}) as EventListener

graphElement.addEventListener('curve-data-change', curveDataChangeListener)
```

### Подписка на изменения точек косинусоиды

Тоже самое что и у кривой безье, но нужно сдвинуть данные по оси X на один день

```ts
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)
```

### Подписка на изменения ограничений

```ts
const limitsDataChangeListener = ((event: LimitsDataChangeEvent) => {
  console.log(event.detail.data)
}) as EventListener

graphElement.addEventListener('limits-data-change', limitsDataChangeListener)
```

<br>
<br>

## Разное

### Размер шрифта и семейство можно задать в css для x-graph

```css
x-graph {
  width: 100%;
  height: 100%;
  font-size: 1vmin;
  font-family: sans-serif;
}
```

### Создание таймлайна

```ts
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
```