Data & Schema

all4one is designed to be flexible with your data source. It expects a simple input shape and keeps mapping straightforward through the JsonData interface.

Node Schema

A node is the fundamental building block of your chart.

interface Node {
  id: string;          // Required: Unique identifier
  pid?: string | null; // Optional: Parent Node ID
  data: {
    label: string;     // Required: The name or title
    positionName?: string; // Optional: Job title or role
    organization?: string; // Optional: Department
    photo?: string;    // Optional: URL to avatar
    [key: string]: any; // Any other custom data fields
  }
}

The pid Relationship

The hierarchy is built by matching the pid of a node to the id of another node.

• If a node has no pid (or pid is null), it is considered a Root node.
• Multiple root nodes are supported.

Custom Edges (Advanced)

While all4one automatically generates edges based on pid, you can also provide explicit edge definitions for special connections (e.g., dotted lines for dotted-line reporting).

const data = {
  nodes: [...],
  edges: [
    { 
      id: 'special-edge-1', 
      source: 'node-a', 
      target: 'node-b', 
      type: 'straight-edge' 
    }
  ]
}

Performance Tips

Large Datasets

For charts with more than 500 nodes, we recommend:

1. Enabling collapsible: This allows users to focus on specific branches.
2. Using tree-offset layouts: These are generally more space-efficient for deep hierarchies.
3. Disabling edgeAnimated: Constant animations can impact browser performance on very large canvases.