/react-sankey

React sankey diagramm

Primary LanguageJavaScriptMIT LicenseMIT

react-sankey

Sankey diagramm.

screenshot

See more examples in storybook npm run storybook - http://localhost:9001/ .

TODO

  • Add lint

Installation

npm install react-sankey

Usage

import ReactSankey from 'react-sankey';
    
const createNode = (title, value, id) => ({ title, value, id });
const createLink = (sourceId, targetId) => ({ sourceId, targetId });
    
const nodes = {
  '0':  createNode('Brazil', 5091520, 0),
  '1':  createNode('Portugal', 3967612, 1),
  '2':  createNode('Spain', 3948389, 2),
  '3':  createNode('England', 1974194, 3),
  '4':  createNode('France', 1202, 4),
  '5':  createNode('Canada', 1974184, 5),
  '6':  createNode('Conversion', 348, 6),
  '7':  createNode('Mexico', 3936731, 7),
  '8':  createNode('USA', 1983806, 8),
  '9':  createNode('Angola', 661228, 9),
  '10': createNode('Senegal', 199236, 10),
  '11': createNode('Conversion', 348, 11),
  '12': createNode('Morocco', 1983082, 12),
  '13': createNode('South Africa', 1290205, 13),
  '14': createNode('Italy', 348123, 14),
  '15': createNode('Conversion', 123, 15),
  '16': createNode('Mali', 1201, 16),
  '17': createNode('Conversion', 1302, 17),
  '18': createNode('Conversion', 1403, 18),
  '19': createNode('Conversion', 1504, 19),
  '20': createNode('Conversion', 1605, 20),
};
    
const links = [
  createLink(0, 1),
  createLink(1, 2),
  createLink(1, 7),
  createLink(1, 8),
  createLink(2, 3),
  createLink(2, 5),
  createLink(2, 16),
  createLink(3, 4),
  createLink(3, 17),
  createLink(3, 18),
  createLink(3, 19),
  createLink(3, 20),
  createLink(5, 6),
  createLink(7, 12),
  createLink(8, 9),
  createLink(8, 10),
  createLink(9, 11),
  createLink(12, 13),
  createLink(12, 14),
  createLink(13, 15)
];
    
class App extends React.Component {
    
    render() {
        <ReactSankey
          rootID={0}
          nodes={nodes}
          links={links}
          hasArrows
        />
    }
    
}

Props/Options

  • nodes - object. Example:

    {
  0: {
    title: 'Node 1',
    value: 15,
    id: '0'
  },
  1: {
    title: 'Node 2',
    value: 5,
    id: '1'
  },
  2: {
    title: 'Node 3',
    value: 1,
    id: '2'
  }
}

  • links - array. Describes links between nodes. Example:

    [
  { sourceId: 0, targetId: 1 },
  { sourceId: 1, targetId: 2 }
]

  • rootID - number | string. Id of root node of chart

  • hasArrows - boolean. Enable/disable arrows

  • arrowClass - string. Adds custom class for tag path of arrows

  • linkClass - string. Adds custom class for path between nodes

  • chartConfig - object. To configure chart margins, paddings, node sizes. Default value:

    const chartConfig = {
  padding: { top: 10, right: 0, bottom: 10, left: 0 },
  node: {
    width: 150,
    maxHeight: 150,
    minHeight: 55,
    rectMinHeight: 5,
    paddingBottom: 40
  },
  link: {
    width: 100
  }
}

  • customNode - function. Returns custom component for node and has two arguments - chartConfig, node. Example:

    (chartConfig, node) => {
  return (
    <g key={node.id} transform={`translate(${node.x},${node.y})`}>
      <rect 
        height={node.height} 
        width={chartConfig.node.width} 
        style={{ stroke: '#ff5252', fill: 'url(#custom-linear-gradient)', strokeWidth: '1px' }} 
      />
      <text 
        x={chartConfig.node.width / 2} 
        y={node.height / 2} 
        style={{ fontSize: '20px', fill: '#b57272', textAnchor: 'middle', alignmentBaseline: 'central' }}
      >
        {`${node.title}`}
      </text>
    </g>
  )
}

Contributing