sankey_d3 v0.0.1

Диаграмма Сэнкей / Sankey

Обзор

om_charts_sankey — это React-компонент для создания диаграмм Сэнкей. Этот пакет предоставляет простую интеграцию диаграммы в React-приложениях, работающих в эко системе Оптимакрос.

Установка

npm install om_charts_sankey

или с помощью Yarn:

yarn add om_charts_sankey

Использование

Импортируйте и используйте компонент Sankey в своем React-приложении:

import { Sankey } from 'om_charts_sankey';

const data: SankeyDatum = {
  nodes: [
    { name: 'Источник A', color: "#79a4d2" },
    { name: 'Цель B', color: "#40bf4d" },
    { name: 'Цель С', color: "#3a7872" },
    { name: 'Цель D', color: "#40b5bf" }
  ],
  links: [
    { source: 'Источник A', target: 'Цель B', value: 30 },
    { source: 'Цель B', target: 'Цель С', value: 20 },
    { source: 'Цель B', target: 'Цель D', value: 10 },
  ]
}

const setting: Settings = {
  ...
  needTooltip: true,
}

const App = () => {
  return (
    <Sankey
	  datum={data}
	  setting={setting}
	  width={600}
	  height={400}
    />
  )
}

export default App;

Свойства компонента Sankey

Данные для диаграммы

Данные для построения для диаграммы Сэнкей имеют свои особенности и должны состоять из двух массивов:

• массив nodes содержит список уникальных узлов. Цвета узлов являются не обязательными, если Вы их не укажете, то диаграмма построится на дефолтных для нее цветах
• массив links содержит указания на источник линии связи (source) и цель (target), а также значение потока (value)

Важно: В случае если массив links будет содержать циклические ссылки на источник и связи, то диаграмма не будет построена и Вы получите пустой холст

const data = {
  nodes: [
    { name: 'Источник A' },
    { name: 'Цель B' },
  ],
  links: [
    { source: 'Источник A', target: 'Цель B', value: 30 },
    { source: 'Цель B', target: 'Источник A', value: 20 }, 
  ]
}

Если значения value в links будут меньше или равны 0, или иметь не числовой формат, то они будут игнорироваться

const data = {
  nodes: [
    { name: 'Источник A', color: "#79a4d2" },
    { name: 'Цель B', color: "#40bf4d" },
    { name: 'Цель С', color: "#3a7872" },
    { name: 'Цель D', color: "#40b5bf" }
  ],
  links: [
    { source: 'Источник A', target: 'Цель B', value: -30 }, // игнорируется
    { source: 'Цель B', target: 'Цель С', value: 0 }, // игнорируется
    { source: 'Цель B', target: 'Цель D', value: false }, // игнорируется
  ]
}

Свойства объекта настроек settings

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

showLinkTooltip

Данная настройка определяет внешний вид тултипа при наведении на линии связи между узлами

Внешний вид тултипа

showNodeTooltip

Данная настройка определяет внешний вид тултипа при наведении на узлы

tooltipColors

text

numberFormatter

Функция пользовательского форматирования чисел, которые будут отражаться на графике и тултипах. Дефолтно значения будут отображаться без разделителей тысячных и каких либо префиксов

numberFormatte: (value: number) => string