swimlane / Ngx Graph
Licence: mit
Graph visualization library for angular
Stars: ✭ 704
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ngx Graph
X6
🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
Stars: ✭ 2,686 (+281.53%)
Mutual labels: dag, svg, chart
Ngx Charts
📊 Declarative Charting Framework for Angular
Stars: ✭ 4,057 (+476.28%)
Mutual labels: svg, chart, angular2
Amcharts4
The most advanced amCharts charting library for JavaScript and TypeScript apps.
Stars: ✭ 907 (+28.84%)
Mutual labels: svg, chart, data-viz
Argo Workflows
Workflow engine for Kubernetes
Stars: ✭ 10,024 (+1323.86%)
Mutual labels: dag, workflow
Xene
A distributed workflow runner focusing on performance and simplicity.
Stars: ✭ 56 (-92.05%)
Mutual labels: dag, workflow
Cwl Airflow
Python package to extend Airflow functionality with CWL1.1 support
Stars: ✭ 130 (-81.53%)
Mutual labels: dag, workflow
datart
Datart is a next generation Data Visualization Open Platform
Stars: ✭ 1,042 (+48.01%)
Mutual labels: chart, data-viz
a2d3
Flexible and extensible D3 directives for Angular 2
Stars: ✭ 22 (-96.87%)
Mutual labels: chart, angular2
Rumble Charts
React components for building composable and flexible charts
Stars: ✭ 293 (-58.38%)
Mutual labels: svg, chart
Britecharts
Client-side reusable Charting Library based on D3.js v5 that allows easy and intuitive use of charts and components that can be composed together creating amazing visualizations.
Stars: ✭ 3,688 (+423.86%)
Mutual labels: svg, chart
Cyclone
Powerful workflow engine and end-to-end pipeline solutions implemented with native Kubernetes resources. https://cyclone.dev
Stars: ✭ 978 (+38.92%)
Mutual labels: dag, workflow
Airflow Maintenance Dags
A series of DAGs/Workflows to help maintain the operation of Airflow
Stars: ✭ 914 (+29.83%)
Mutual labels: dag, workflow
Butterfly
🦋Butterfly,A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件)
Stars: ✭ 2,343 (+232.81%)
Mutual labels: dag, svg
Charts
Simple, responsive, modern SVG Charts with zero dependencies
Stars: ✭ 14,112 (+1904.55%)
Mutual labels: svg, chart
Billboard.js
📊 Re-usable, easy interface JavaScript chart library based on D3.js
Stars: ✭ 5,032 (+614.77%)
Mutual labels: svg, chart
Picasso.js
A charting library streamlined for building interactive visualizations for the Qlik product suites.
Stars: ✭ 175 (-75.14%)
Mutual labels: svg, chart
Go Chart
go chart is a basic charting library in go.
Stars: ✭ 3,254 (+362.22%)
Mutual labels: svg, chart
ngx-graph
A Graph visualization for angular
Documentation & Demos
https://swimlane.github.io/ngx-graph/
Installation
npm install @swimlane/ngx-graph --save
- Import
NgxGraphModule
into your module - Use the
ngx-graph
component in your components
Usage
Simple
<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
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
[
{
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']
}
];
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].