npm package: @hydrographs/common
Description: `npm i @hydrographs/common`
Latest version: 0.4.15
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Common Graph

## Установка

`npm i @hydrographs/common`

## Создание

```ts
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)
```

## Свойства

Название текущей редактируемой кривой безье

```ts
tsgraphElement.editedBezierCurveName
```

Название текущей редактируемой косинусоиды

```ts
graphElement.editedCosineCurveName
```

Элемент подключен к странице и инициализорован

```ts
graphElement.isReady
```

---

## Кривые безье

### Создание неизменяемой

```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.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()
```

### Включение выделения

`selectColor` должен отличаться от `color`

```ts
graphElement.selectBezierCurve('name')
```

### Выключение выделения

`selectColor` должен отличаться от `color`

```ts
graphElement.unselectBezierCurve('name')
```

### Переименование

```ts
graphElement.renameBezierCurve('oldName', 'newName`)
```

---

## Косинусоиды

### Создание

```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')
```

### Включение выделения

`selectColor` должен отличаться от `color`

```ts
graphElement.selectCosineCurve('string')
```

### Выключение выделения

```ts
graphElement.unselectCosineCurve('name')
```

### Получение текущих значений

```ts
graphElement.getCosineCurveData(name)
```

### Переименование косинусоиды

```ts
graphElement.renameCosineCurve('oldName', 'newName')
```

### Проверка на существование косинусоиды

```ts
graphElement.hasCosineCurve('name')
```

### Получение всех названий косинусоид

```ts
graphElement.getAllCosineCurvesNames()
```

---

## Облако точек

### Создание

```ts
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
)
```

### Обновление данных

```ts
graphElement.updatePointCloud('name', [
  {
    id: 0,
    x: 20,
    y: 20,
  },
  {
    id: 1,
    x: 50,
    y: 50,
  },
])
```

### Скрытие

```ts
graphElement.hidePointCloud('name')
```

### Открытие

```ts
graphElement.showPointCloud('name')
```

### Удаление

```ts
graphElement.deletePointCloud('name')
```

### Проверка на существование

```ts
graphElement.hasPointCloud('name')
```

### Получение всех названий

```ts
graphElement.getAllPointCloudsNames()
```

### Отключение одного поинта

```ts
graphElement.disableCloudPoint('cloudName', pointId)
```

### Включение одного поинта

```ts
graphElement.enableCloudPoint('cloudName', pointId)
```

---

## Ограничения

### Включение

```ts
graphElement.enableLimits()
```

### Выключение

```ts
graphElement.disableLimits()
```

### Удаление всех ограничений

```ts
graphElement.clearLimits()
```

### Скрытие всех ограничей

```ts
graphElement.hideLimits()
```

### Открытие всех ограничей

```ts
graphElement.showLimits()
```

## Интервалы

### Создание

```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()
```

---

## События

### Подписка на изменения точек кривой безье

```ts
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 на один день

```ts
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)
```

### Подписка на изменения ограничений

```ts
import { LimitsDataChangeEvent } from '@hydrographs/common'

const limitsDataChangeListener = ((event: LimitsDataChangeEvent) => {
  console.log(event.detail.data)
}) as EventListener

graphElement.addEventListener('limits-data-change', limitsDataChangeListener)
```

### Подписка на отключение поинтов внутри всех облаков точек

```ts
import { PointDisabledEvent } from '@hydrographs/common'

graphElement.addEventListener('cloud-point-disabled', ((e: PointDisabledEvent) => {
  console.log(e.detail)
}) as EventListener)
```

### Подписка на включение поинтов внутри всех облаков точек

```ts
import { PointDisabledEvent } from '@hydrographs/common'

graphElement.addEventListener('cloud-point-enabled', ((e: PointDisabledEvent) => {
  console.log(e.detail)
}) as EventListener)
```

---

## Разное

### Размер шрифта и семейство можно задать в css для x-graph

```css
x-graph {
  width: 100%;
  height: 100%;
  font-size: 1vmin;
  font-family: sans-serif;
}
```

## Рецепты

### Создание таймлайна

```ts
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
```