Graph visualization for angular
npm install @kr0san89/ngx-graph




A Graph visualization for angular forked from: https://github.com/swimlane/ngx-graph
Consider as alternative https://www.ngx-vflow.org/ (better maintained)
https://swimlane.github.io/ngx-graph/
1. npm install @kr0san89/ngx-graph --save
2. Import NgxGraphModule into your module
3. Use the ngx-graph component in your components
``html`
[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)"
>
`html
[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"
>
ry="5"
[attr.width]="cluster.dimension.width"
[attr.height]="cluster.dimension.height"
[attr.fill]="cluster.data.color"
/>
(dblclick)="onNodeClick($event)"
class="node"
ngx-tooltip
[tooltipPlacement]="'top'"
[tooltipType]="'tooltip'"
[tooltipTitle]="node.label"
>
[attr.height]="node.dimension.height"
[attr.fill]="node.data.color"
/>
{{node.label}}
[attr.href]="'#' + link.id"
[style.dominant-baseline]="link.dominantBaseline"
startOffset="50%"
>
{{link.label}}
`
`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'
}
];
`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'
}
];
`javascript`
[
{
id: 'cluster0',
label: 'Cluster node',
childNodeIds: ['2', '3']
}
];
To get started with development, clone a fork of the repository and run npm install --legacy-peer-deps.
Run npm run build:lib to build ngx-graph. This must be done prior to building the demo.
Run npm run start to serve the demo at http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
Run npm run test to execute the linter
Checkout master (git checkout master)git pull
Pull master ()npm ci
Refresh node modules ()npm test
Run tests ()git checkout -b release/X.Y.Z
Examine log to determine next version (X.Y.Z)
Run projects/swimlane/ngx-graph/package.json
Update version in .projects/swimlane/ngx-graph/CHANGELOG.md
Update changelog in git commit -am "(release): X.Y.Z"
Run git tag X.Y.Z
Run git push origin HEAD --tags
Run npm run publish:lib
Run
Submit PR
ngx-graph` is a Swimlane open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.
SecOps Hub is an open, product-agnostic, online community for security professionals to share ideas, use cases, best practices, and incident response strategies.