ngx-graph

A Graph visualization for angular

Documentation & Demos

https://swimlane.github.io/ngx-graph/

Installation

1. npm install @swimlane/ngx-graph --save
2. Import NgxGraphModule into your module
3. Use the ngx-graph component in your components

Usage

Simple

1<ngx-graph
2  class="chart-container"
3  [view]="[500, 200]"
4  [links]="[
5    {
6      id: 'a',
7      source: 'first',
8    target: 'second',
9      label: 'is parent of'
10    }, {
11      id: 'b',
12      source: 'first',
13      target: 'third',
14      label: 'custom label'
15    }
16  ]"
17  [nodes]="[
18    {
19      id: 'first',
20      label: 'A'
21    }, {
22      id: 'second',
23      label: 'B'
24    }, {
25      id: 'third',
26      label: 'C'
27    }
28  ]"
29  (select)="onNodeSelect($event)"
30>
31</ngx-graph>

Custom Templates

1<ngx-graph
2  class="chart-container"
3  [view]="[500, 550]"
4  [links]="[
5    {
6      id: 'a',
7      source: 'first',
8      target: 'second',
9      label: 'is parent of'
10    }, {
11      id: 'b',
12      source: 'first',
13      target: 'c1',
14      label: 'custom label'
15    }, {
16      id: 'd',
17      source: 'first',
18      target: 'c2',
19      label: 'custom label'
20    }, {
21      id: 'e',
22      source: 'c1',
23      target: 'd',
24      label: 'first link'
25    }, {
26      id: 'f',
27      source: 'c1',
28      target: 'd',
29      label: 'second link'
30    }
31  ]"
32  [nodes]="[
33    {
34      id: 'first',
35      label: 'A'
36    }, {
37      id: 'second',
38      label: 'B'
39    }, {
40      id: 'c1',
41      label: 'C1'
42    }, {
43      id: 'c2',
44      label: 'C2'
45    }, {
46      id: 'd',
47      label: 'D'
48    }
49  ]"
50  [clusters]="[
51    {
52      id: 'third',
53      label: 'Cluster node',
54      childNodeIds: ['c1', 'c2']
55    }
56  ]"
57  layout="dagreCluster"
58>
59  <ng-template #defsTemplate>
60    <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
61      <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
62    </svg:marker>
63  </ng-template>
64
65  <ng-template #clusterTemplate let-cluster>
66    <svg:g class="node cluster">
67      <svg:rect
68        rx="5"
69        ry="5"
70        [attr.width]="cluster.dimension.width"
71        [attr.height]="cluster.dimension.height"
72        [attr.fill]="cluster.data.color"
73      />
74    </svg:g>
75  </ng-template>
76
77  <ng-template #nodeTemplate let-node>
78    <svg:g
79      (click)="onNodeClick($event)"
80      (dblclick)="onNodeClick($event)"
81      class="node"
82      ngx-tooltip
83      [tooltipPlacement]="'top'"
84      [tooltipType]="'tooltip'"
85      [tooltipTitle]="node.label"
86    >
87      <svg:rect
88        [attr.width]="node.dimension.width"
89        [attr.height]="node.dimension.height"
90        [attr.fill]="node.data.color"
91      />
92      <svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">
93        {{node.label}}
94      </svg:text>
95    </svg:g>
96  </ng-template>
97
98  <ng-template #linkTemplate let-link>
99    <svg:g class="edge">
100      <svg:path class="line" stroke-width="2" marker-end="url(#arrow)"></svg:path>
101      <svg:text class="edge-label" text-anchor="middle">
102        <textPath
103          class="text-path"
104          [attr.href]="'#' + link.id"
105          [style.dominant-baseline]="link.dominantBaseline"
106          startOffset="50%"
107        >
108          {{link.label}}
109        </textPath>
110      </svg:text>
111    </svg:g>
112  </ng-template>
113</ngx-graph>

Data

Nodes

1[
2  {
3    id: '1',
4    label: 'Node A'
5  },
6  {
7    id: '2',
8    label: 'Node B'
9  },
10  {
11    id: '3',
12    label: 'Node C'
13  },
14  {
15    id: '4',
16    label: 'Node D'
17  },
18  {
19    id: '5',
20    label: 'Node E'
21  },
22  {
23    id: '6',
24    label: 'Node F'
25  }
26];

Edges

1[
2  {
3    id: 'a',
4    source: '1',
5    target: '2'
6  },
7  {
8    id: 'b',
9    source: '1',
10    target: '3'
11  },
12  {
13    id: 'c',
14    source: '3',
15    target: '4'
16  },
17  {
18    id: 'd',
19    source: '3',
20    target: '5'
21  },
22  {
23    id: 'e',
24    source: '4',
25    target: '5'
26  },
27  {
28    id: 'f',
29    source: '2',
30    target: '6'
31  }
32];

Clusters

1[
2  {
3    id: 'cluster0',
4    label: 'Cluster node',
5    childNodeIds: ['2', '3']
6  }
7];

Building ngx-graph

To get started with development, clone a fork of the repository and run yarn.

Development server

Run yarn start to serve Storybook at http://localhost:6006/. Storybook serves as the development and test environment for ngx-graph.

Building

Run yarn build:storybook to build Storybook to check for production issues. The build artifacts will be stored in the dist/ directory.

Run yarn build:lib to build ngx-graph.

Running tests

Run yarn test to execute the linter.

Release

• Checkout master (git checkout master)
• Pull master (git pull)
• Run tests (yarn ci)
• Examine log to determine next version (X.Y.Z)
• Run git checkout -b release/X.Y.Z
• Update version in projects/swimlane/ngx-graph/package.json.
• Update changelog in CHANGELOG.md
• Run yarn package to check the package format
• Run git commit -am "(release): X.Y.Z"
• Run git tag X.Y.Z
• Run git push origin HEAD --tags
• Run yarn publish:lib
• Submit PR

Credits

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.