diagrama-react v1.1.2

Getting Started

Installation

To install and set up the library, run:

$ npm install diagrama-react

Usage

Importing

Import diagram component with

$ import { Diagram } from "diagrama-react"

Params

A two-dimensional Array. Every array on it represents a column

Param values

Node

Node object represent every single cell on the diagram.

Note: <0, >5, null, undefined or NaN values will display icon (if provided) or id`

Example:

const data = [
    //First column
    [
    { id: "11",
      value: "1",
      label: "John Q. Public",
      description: "john@mail.com",
      type: 0,
      route: ["21", "31", "33"],
      actions = [
        ...actions
      ]
    },
    { id: "12",
      value: "2",
      label: "Jane Doe",
      description: "jane@mail.com",
      type: 0,
      route: ["21", "32"],
      actions = [
        ...actions
      ]
    },
    { id: "13",
      value: "3",
      label: "Petter B. P.",
      description: "petter@mail.com",
      type: 0,
      route: ["21", "31", "32"],
      actions = [
        ...actions
      ]
    },
  ],
  //Second column
  [
    {
      id: "21",
      value: "1",
      label: "Awesome Company",
      type: 1,
      actions: [
        ...actions
      ]
    },
  ]//Third Column
    [
    { id: "31",
      value: "1",
      label: "H.R.",
      description: "5th Floor",
      actions: [
        ...actions
      ]
    },
    { id: "32",
      value: "2",
      label: "I.T.",
      description: "6th Floor",
      actions: [
        ...actions
      ]
    },
    { id: "33",
      value: "3",
      label: "Sales",
      description: "2ndFloor",
      actions: [
        ...actions
      ]
    },
  ],
]

Arrows

Arrow object represent every single relation on the diagram.

Example:

const arrows = [
    {startID: "11", endID: "21"},
    {startID: "12", endID: "21"},
    {startID: "13", endID: "21"},
    {startID: "21", endID: "31"},
    {startID: "21", endID: "32"},
    {startID: "21", endID: "33"},
]

Actions

Actions that will be displayed on node click. returns an <HTMLDivElement>

Example:

const action = (e: any) => {
  console.log("Action for", e.target.id, "option");
};

const actions = [
  { id: "print-action", label: "More details", onClick: action },
  { id: "print-action-2", label: "Another print details", onClick: action, }
];