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.

$3

- 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

$3

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

``bash
npm install ng-hub-ui-graph
`

Quick Start

Import the module in your Angular module:

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

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

Usage

$3

`html
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)"
>

`

$3

`html
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"
>








rx="5"
ry="5"
[attr.width]="cluster.dimension.width"
[attr.height]="cluster.dimension.height"
[attr.fill]="cluster.data.color"
/>




(click)="onNodeClick($event)"
(dblclick)="onNodeClick($event)"
class="node"
ngx-tooltip
[tooltipPlacement]="'top'"
[tooltipType]="'tooltip'"
[tooltipTitle]="node.label"
>
[attr.width]="node.dimension.width"
[attr.height]="node.dimension.height"
[attr.fill]="node.data.color"
/>

{{node.label}}








class="text-path"
[attr.href]="'#' + link.id"
[style.dominant-baseline]="link.dominantBaseline"
startOffset="50%"
>
{{link.label}}





`

Data Structure

$3

`javascript
[
{
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'
}
]
`

$3

`javascript
[
{
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'
}
]
`

$3

`javascript
[
{
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.

$3

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

$3

`bash


Start Storybook development server

yarn start

Run tests/linter

yarn test

Build the library

yarn build:lib

Build Storybook

yarn build:storybook
``

$3

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

$3

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