0.0.1 • Published 5 months ago

sankey_d3 v0.0.1

Weekly downloads
-
License
-
Repository
-
Last release
5 months ago

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

Обзор

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

SankeyChart

Установка

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

СвойствоТипПо умолчаниюОписание
datumОбъектОбязательноДанные Sankey-диаграммы с полями nodes и links.
settingОбъектНе обязательноПользовательские настройки графика и тултипа
widthЧисло900Ширина диаграммы
heightЧисло500Высота диаграммы.

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

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

  • массив 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, являются не обязательными. В случае отсутствия настроек диаграмма будет учитывать дефолтные значения, указанные ниже

СвойствоТипПо умолчаниюОписание
colorMode'source' | 'target'sourceОпределяет режим цвета линий связей. 'source' - цвет определяется цветом источником, 'target' - целью
lang'ru' | 'en' | 'de' | 'tr','ru'Язык интерфейса для отображения надписей на графике
nodeAlign'sankeyLeft' | 'sankeyRight' |'sankeyCenter' |'sankeyJustify''sankeyJustify'Определяет выравнивание узлов
needTooltipЛогическийfalseВключает/отключает тултип.
nodesSortingType'withoutSorting' | 'ascending' | 'descending''withoutSorting'Определяет порядок сортировки узлов.
linksSortingType'withoutSorting' | 'ascending' | 'descending''withoutSorting'Определяет порядок сортировки связей.
showLinkTooltipОбъектСм. нижеНастройки тултипов для связей.
showNodeTooltipОбъектСм. нижеНастройки тултипов для узлов.
tooltipColorsОбъектСм. нижеЦвета тултипов.
textОбъектСм. нижеНастройки отображения текста.
numberFormatterФункцияСм. нижеПреобразует числа в пользовательское представление

showLinkTooltip

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

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

linkTooltip

СвойствоТипПо умолчаниюОписание
valueЛогическийfalseПоказывать значение связи.
sourceNameЛогическийfalseПоказывать имя источника.
sourcePercentageЛогическийfalseПоказывать процент источника.
linkNameЛогическийfalseПоказывать имя связи.
linkPercentageЛогическийfalseПоказывать процент связи.

showNodeTooltip

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

nodeTooltip

СвойствоТипПо умолчаниюОписание
nameЛогическийfalseПоказывать имя узла.
valueЛогическийfalseПоказывать значение узла.
incomeNameЛогическийfalseПоказывать имя входящих узлов.
incomeValueЛогическийfalseПоказывать значение входящих узлов.
incomePercentageЛогическийfalseПоказывать процент входящих узлов.
outgoingNameЛогическийfalseПоказывать имя исходящих узлов.
outgoingValueЛогическийfalseПоказывать значение исходящих узлов.
outgoingPercentageЛогическийfalseПоказывать процент исходящих узлов.

tooltipColors

СвойствоТипПо умолчаниюОписание
labelsстрока#010409Цвет основного значения тултипа узла
linkTextстрока#212121Цвет основного значения тултипа связи
decrementColorстрока#B22222Цвет входящих исходящих тултипа связи
incrementColorстрока#228B22Цвет входящих значений тултипа связи

text

СвойствоТипПо умолчаниюОписание
showNameЛогическийfalseПоказывать имя узла.
showValueЛогическийfalseПоказывать значение узла.

numberFormatter

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

numberFormatte: (value: number) => string

formatter