ng-hub-ui-graph

Part of the ng-hub-ui family - A collection of standalone Angular component libraries

Angular graph visualization library for network diagrams and data relationships with Angular 21+ support!

About This Fork

ng-hub-ui-graph is a maintained fork of ngx-graph by Swimlane, updated for Angular 21+ compatibility. It's part of the ng-hub-ui family of component libraries, following the same design patterns and integration standards.

What's Different

• Angular 21+ Support: Updated dependencies and compatibility with the latest Angular versions
• ng-hub-ui Integration: Follows ng-hub-ui standards for consistency across the component family
• Maintained: Regular updates and maintenance to support current Angular versions

Original Project

The original and incredible work is by Swimlane. This fork maintains their excellent graph visualization architecture while updating for modern Angular development.

About ng-hub-ui

The ng-hub-ui family provides a collection of standalone, reusable Angular components:

• ng-hub-ui-accordion - Accordion/collapsible components
• ng-hub-ui-action-sheet - Action sheet modal components
• ng-hub-ui-avatar - Avatar display components
• ng-hub-ui-board - Board/kanban layout components
• ng-hub-ui-breadcrumbs - Breadcrumb navigation components
• ng-hub-ui-calendar - Calendar and date picker components
• ng-hub-ui-charts - Charting and data visualization
• ng-hub-ui-graph - This library - Graph visualization and network diagrams
• ng-hub-ui-modal - Modal dialog components
• ng-hub-ui-paginable - Advanced tables and pagination components
• ng-hub-ui-portal - Portal and overlay components
• ng-hub-ui-stepper - Stepper/wizard components
• ng-hub-ui-utils - Utility functions and helpers

All libraries follow consistent patterns and work seamlessly together.

Installation

npm install ng-hub-ui-graph

Quick Start

Import the module in your Angular module:

import { NgxGraphModule } from 'ng-hub-ui-graph';

@NgModule({
  imports: [NgxGraphModule]
})
export class AppModule { }

Usage

Simple Example

<ngx-graph
  class="chart-container"
  [view]="[500, 200]"
  [links]="[
    {
      id: 'a',
      source: 'first',
      target: 'second',
      label: 'is parent of'
    }, {
      id: 'b',
      source: 'first',
      target: 'third',
      label: 'custom label'
    }
  ]"
  [nodes]="[
    {
      id: 'first',
      label: 'A'
    }, {
      id: 'second',
      label: 'B'
    }, {
      id: 'third',
      label: 'C'
    }
  ]"
  (select)="onNodeSelect($event)"
>
</ngx-graph>

Custom Templates

<ngx-graph
  class="chart-container"
  [view]="[500, 550]"
  [links]="[
    {
      id: 'a',
      source: 'first',
      target: 'second',
      label: 'is parent of'
    }, {
      id: 'b',
      source: 'first',
      target: 'c1',
      label: 'custom label'
    }, {
      id: 'd',
      source: 'first',
      target: 'c2',
      label: 'custom label'
    }, {
      id: 'e',
      source: 'c1',
      target: 'd',
      label: 'first link'
    }, {
      id: 'f',
      source: 'c1',
      target: 'd',
      label: 'second link'
    }
  ]"
  [nodes]="[
    {
      id: 'first',
      label: 'A'
    }, {
      id: 'second',
      label: 'B'
    }, {
      id: 'c1',
      label: 'C1'
    }, {
      id: 'c2',
      label: 'C2'
    }, {
      id: 'd',
      label: 'D'
    }
  ]"
  [clusters]="[
    {
      id: 'third',
      label: 'Cluster node',
      childNodeIds: ['c1', 'c2']
    }
  ]"
  layout="dagreCluster"
>
  <ng-template #defsTemplate>
    <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
      <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
    </svg:marker>
  </ng-template>

  <ng-template #clusterTemplate let-cluster>
    <svg:g class="node cluster">
      <svg:rect
        rx="5"
        ry="5"
        [attr.width]="cluster.dimension.width"
        [attr.height]="cluster.dimension.height"
        [attr.fill]="cluster.data.color"
      />
    </svg:g>
  </ng-template>

  <ng-template #nodeTemplate let-node>
    <svg:g
      (click)="onNodeClick($event)"
      (dblclick)="onNodeClick($event)"
      class="node"
      ngx-tooltip
      [tooltipPlacement]="'top'"
      [tooltipType]="'tooltip'"
      [tooltipTitle]="node.label"
    >
      <svg:rect
        [attr.width]="node.dimension.width"
        [attr.height]="node.dimension.height"
        [attr.fill]="node.data.color"
      />
      <svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">
        {{node.label}}
      </svg:text>
    </svg:g>
  </ng-template>

  <ng-template #linkTemplate let-link>
    <svg:g class="edge">
      <svg:path class="line" stroke-width="2" marker-end="url(#arrow)"></svg:path>
      <svg:text class="edge-label" text-anchor="middle">
        <textPath
          class="text-path"
          [attr.href]="'#' + link.id"
          [style.dominant-baseline]="link.dominantBaseline"
          startOffset="50%"
        >
          {{link.label}}
        </textPath>
      </svg:text>
    </svg:g>
  </ng-template>
</ngx-graph>

Data Structure

Nodes

[
  {
    id: '1',
    label: 'Node A'
  },
  {
    id: '2',
    label: 'Node B'
  },
  {
    id: '3',
    label: 'Node C'
  },
  {
    id: '4',
    label: 'Node D'
  },
  {
    id: '5',
    label: 'Node E'
  },
  {
    id: '6',
    label: 'Node F'
  }
]

Edges (Links)

[
  {
    id: 'a',
    source: '1',
    target: '2'
  },
  {
    id: 'b',
    source: '1',
    target: '3'
  },
  {
    id: 'c',
    source: '3',
    target: '4'
  },
  {
    id: 'd',
    source: '3',
    target: '5'
  },
  {
    id: 'e',
    source: '4',
    target: '5'
  },
  {
    id: 'f',
    source: '2',
    target: '6'
  }
]

Clusters

[
  {
    id: 'cluster0',
    label: 'Cluster node',
    childNodeIds: ['2', '3']
  }
]

Layouts

Supported layout algorithms:

• dagre - Directed acyclic graph layout (default)
• dagreCluster - DAG layout with cluster support
• cola - Cola.js force-directed layout
• d3Force - D3 force-directed layout

Requirements

• Angular 21+
• RxJS 7.8+
• TypeScript 5.9+
• Node.js 22.16+

Documentation

• Original ngx-graph Docs: https://swimlane.github.io/ngx-graph/
• GitHub Repository: https://github.com/carlos-morcillo/ng-hub-ui-graph

🤝 Contributing

We welcome contributions! Whether you've found a bug, want to improve the documentation, or add new features, your help is appreciated.

Getting Started

1. Fork the repository
2. Clone your fork: git clone https://github.com/your-username/ng-hub-ui-graph.git
3. Install dependencies: yarn install
4. Create a branch: git checkout -b feature/your-feature-name

Development

# Start Storybook development server
yarn start

# Run tests/linter
yarn test

# Build the library
yarn build:lib

# Build Storybook
yarn build:storybook

Submitting Changes

1. Code Style: Ensure your code follows the project's style
2. Tests: Add tests for new features or bug fixes
3. Commit: Use clear, descriptive commit messages
4. Push: Push to your fork
5. Create a Pull Request: Open a PR with a clear description of your changes

Issues

Found a bug? Please create an issue with:

• Clear description of the problem
• Steps to reproduce
• Expected vs actual behavior
• Angular and library versions

License

MIT - See LICENSE for details

Credits & Attribution

Original Project: ngx-graph by Swimlane

Swimlane is an automated cyber security operations platform. Learn more at swimlane.com

Current Maintainer: Carlos Morcillo Package: ng-hub-ui-graph Part of: ng-hub-ui family