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

| Name | Type | Description | --- | --- | --- | | data | Array[ ][ ] | Matrix of Nodes | arrows | Array[ ] | Array of Arrows

Param values

Node

Node object represent every single cell on the diagram.

| Name | Type | Description | --- | --- | --- | | id | string | Identificator of the node. must be unique | value | string | Value that represents the node (Optional) | label | string | Label asociated to the node (Optional) | description | string | Description asociated to the node (Optional) | route | Array[ ] | Array of id's that will be highlighted on hover. If not provided, hover will map every related node (Optional) | icon | image | Image that will be displayed as node cover | type | '0', '1', '2', '3', '4', '5' | Type of node (If type is provided, icon is not displayed) (Optional) | actions | Array[ ] | Array of Actions

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: "[email protected]",
      type: 0,
      route: ["21", "31", "33"],
      actions = [
        ...actions
      ]
    },
    { id: "12",
      value: "2",
      label: "Jane Doe",
      description: "[email protected]",
      type: 0,
      route: ["21", "32"],
      actions = [
        ...actions
      ]
    },
    { id: "13",
      value: "3",
      label: "Petter B. P.",
      description: "[email protected]",
      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.

| Name | Type | Description | --- | --- | --- | | startID | string | Identificator of the node at the left. | endID | string | Identificator of the node at the left.

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>

| Name | Type | Description | --- | --- | --- | | id | string | Identificator of the action. must be unique | label | string | Label that will be shown on dropdown menu | onClick | React.MouseEventHandler | Action that will be executed.

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, }
];