Package Exports

hawk-graph

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hawk-graph) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

hawk

A react library for rendering graph vitalizations to show relationships

IDEA:

Hawk Graph Preview

Installation

npm install hawk-graph --save

Usage

import React from 'react';
import Hawk from 'hawk-graph';
import 'hawk-graph/lib/styles.css';

const data = {
  nodes: [
    {
      nid: 1,
      type: 'Users',
      x: 200,
      y: 100,
      fields: {
        in: [
          { name: 'user_id' },
          { name: 'role_id' },
        ],
        out: [{ name: 'out' }]
      }
    },
    {
      nid: 2,
      type: 'Photos',
      x: 800,
      y: 100,
      fields: {
        in: [
          { name: 'user_id' },
          { name: 'photo' },
        ],
        out: [{ name: 'out' }]
      }
    },
    {
      nid: 3,
      type: 'Role',
      x: 400,
      y: 500,
      fields: {
        in: [
          { name: 'user_id' },
          { name: 'role' },
        ],
        out: [{ name: 'out' }]
      }
    }
  ],
  connections: [
    { from_node: 1, from: 'out', to_node: 2, to: 'user_id' },
    { from_node: 2, from: 'out', to_node: 3, to: 'user_id' },
  ]
};

function Graph() {
  return (
    <Hawk
      data={data}
      onNodeMove={(nodeId, pos) => {}}
      onNodeStartMove={nodeId => {}}
      onNewConnector={(node1, o, node2, index) => {}}
      onRemoveConnector={connector => {}}
      onNodeSelect={nodeId => {}}
      onNodeDeselect={nodeId => {}}
    />
  );
}