{"id":13406625,"url":"https://github.com/swimlane/ngx-graph","last_synced_at":"2025-05-13T21:12:16.393Z","repository":{"id":38340597,"uuid":"82952002","full_name":"swimlane/ngx-graph","owner":"swimlane","description":"Graph visualization library for angular","archived":false,"fork":false,"pushed_at":"2025-05-06T22:13:44.000Z","size":42109,"stargazers_count":957,"open_issues_count":100,"forks_count":295,"subscribers_count":55,"default_branch":"master","last_synced_at":"2025-05-06T22:19:27.647Z","etag":null,"topics":["angular","angular2","chart","dag","data-viz","directed-graph","svg","workflow"],"latest_commit_sha":null,"homepage":"https://swimlane.github.io/ngx-graph","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/swimlane.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-02-23T17:18:33.000Z","updated_at":"2025-05-06T22:11:58.000Z","dependencies_parsed_at":"2024-01-04T19:41:56.121Z","dependency_job_id":"321406f0-fa61-4a02-81ec-528aabea554e","html_url":"https://github.com/swimlane/ngx-graph","commit_stats":{"total_commits":296,"total_committers":45,"mean_commits":"6.5777777777777775","dds":0.5912162162162162,"last_synced_commit":"863fafc8b9931ecf6ac1cd4ea232195b8471ffbf"},"previous_names":["swimlane/ngx-charts-dag"],"tags_count":60,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swimlane%2Fngx-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swimlane%2Fngx-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swimlane%2Fngx-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swimlane%2Fngx-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/swimlane","download_url":"https://codeload.github.com/swimlane/ngx-graph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254029008,"owners_count":22002284,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","chart","dag","data-viz","directed-graph","svg","workflow"],"created_at":"2024-07-30T19:02:35.076Z","updated_at":"2025-05-13T21:12:11.373Z","avatar_url":"https://github.com/swimlane.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Javascript Libraries","Third Party Components"],"sub_categories":["Renderers","Charts"],"readme":"# ngx-graph\n\n[![Join the chat at https://gitter.im/swimlane/ngx-graph](https://badges.gitter.im/swimlane/ngx-graph.svg)](https://gitter.im/swimlane/ngx-graph?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nA Graph visualization for angular\n\n## Documentation \u0026 Demos\n\nhttps://swimlane.github.io/ngx-graph/\n\n## Installation\n\n1. `npm install @swimlane/ngx-graph --save`\n2. Import `NgxGraphModule` into your module\n3. Use the `ngx-graph` component in your components\n\n## Usage\n\n### Simple\n\n```html\n\u003cngx-graph\n  class=\"chart-container\"\n  [view]=\"[500, 200]\"\n  [links]=\"[\n    {\n      id: 'a',\n      source: 'first',\n    target: 'second',\n      label: 'is parent of'\n    }, {\n      id: 'b',\n      source: 'first',\n      target: 'third',\n      label: 'custom label'\n    }\n  ]\"\n  [nodes]=\"[\n    {\n      id: 'first',\n      label: 'A'\n    }, {\n      id: 'second',\n      label: 'B'\n    }, {\n      id: 'third',\n      label: 'C'\n    }\n  ]\"\n  (select)=\"onNodeSelect($event)\"\n\u003e\n\u003c/ngx-graph\u003e\n```\n\n### Custom Templates\n\n```html\n\u003cngx-graph\n  class=\"chart-container\"\n  [view]=\"[500, 550]\"\n  [links]=\"[\n    {\n      id: 'a',\n      source: 'first',\n      target: 'second',\n      label: 'is parent of'\n    }, {\n      id: 'b',\n      source: 'first',\n      target: 'c1',\n      label: 'custom label'\n    }, {\n      id: 'd',\n      source: 'first',\n      target: 'c2',\n      label: 'custom label'\n    }, {\n      id: 'e',\n      source: 'c1',\n      target: 'd',\n      label: 'first link'\n    }, {\n      id: 'f',\n      source: 'c1',\n      target: 'd',\n      label: 'second link'\n    }\n  ]\"\n  [nodes]=\"[\n    {\n      id: 'first',\n      label: 'A'\n    }, {\n      id: 'second',\n      label: 'B'\n    }, {\n      id: 'c1',\n      label: 'C1'\n    }, {\n      id: 'c2',\n      label: 'C2'\n    }, {\n      id: 'd',\n      label: 'D'\n    }\n  ]\"\n  [clusters]=\"[\n    {\n      id: 'third',\n      label: 'Cluster node',\n      childNodeIds: ['c1', 'c2']\n    }\n  ]\"\n  layout=\"dagreCluster\"\n\u003e\n  \u003cng-template #defsTemplate\u003e\n    \u003csvg:marker id=\"arrow\" viewBox=\"0 -5 10 10\" refX=\"8\" refY=\"0\" markerWidth=\"4\" markerHeight=\"4\" orient=\"auto\"\u003e\n      \u003csvg:path d=\"M0,-5L10,0L0,5\" class=\"arrow-head\" /\u003e\n    \u003c/svg:marker\u003e\n  \u003c/ng-template\u003e\n\n  \u003cng-template #clusterTemplate let-cluster\u003e\n    \u003csvg:g class=\"node cluster\"\u003e\n      \u003csvg:rect\n        rx=\"5\"\n        ry=\"5\"\n        [attr.width]=\"cluster.dimension.width\"\n        [attr.height]=\"cluster.dimension.height\"\n        [attr.fill]=\"cluster.data.color\"\n      /\u003e\n    \u003c/svg:g\u003e\n  \u003c/ng-template\u003e\n\n  \u003cng-template #nodeTemplate let-node\u003e\n    \u003csvg:g\n      (click)=\"onNodeClick($event)\"\n      (dblclick)=\"onNodeClick($event)\"\n      class=\"node\"\n      ngx-tooltip\n      [tooltipPlacement]=\"'top'\"\n      [tooltipType]=\"'tooltip'\"\n      [tooltipTitle]=\"node.label\"\n    \u003e\n      \u003csvg:rect\n        [attr.width]=\"node.dimension.width\"\n        [attr.height]=\"node.dimension.height\"\n        [attr.fill]=\"node.data.color\"\n      /\u003e\n      \u003csvg:text alignment-baseline=\"central\" [attr.x]=\"10\" [attr.y]=\"node.dimension.height / 2\"\u003e\n        {{node.label}}\n      \u003c/svg:text\u003e\n    \u003c/svg:g\u003e\n  \u003c/ng-template\u003e\n\n  \u003cng-template #linkTemplate let-link\u003e\n    \u003csvg:g class=\"edge\"\u003e\n      \u003csvg:path class=\"line\" stroke-width=\"2\" marker-end=\"url(#arrow)\"\u003e\u003c/svg:path\u003e\n      \u003csvg:text class=\"edge-label\" text-anchor=\"middle\"\u003e\n        \u003ctextPath\n          class=\"text-path\"\n          [attr.href]=\"'#' + link.id\"\n          [style.dominant-baseline]=\"link.dominantBaseline\"\n          startOffset=\"50%\"\n        \u003e\n          {{link.label}}\n        \u003c/textPath\u003e\n      \u003c/svg:text\u003e\n    \u003c/svg:g\u003e\n  \u003c/ng-template\u003e\n\u003c/ngx-graph\u003e\n```\n\n## Data\n\n### Nodes\n\n```javascript\n[\n  {\n    id: '1',\n    label: 'Node A'\n  },\n  {\n    id: '2',\n    label: 'Node B'\n  },\n  {\n    id: '3',\n    label: 'Node C'\n  },\n  {\n    id: '4',\n    label: 'Node D'\n  },\n  {\n    id: '5',\n    label: 'Node E'\n  },\n  {\n    id: '6',\n    label: 'Node F'\n  }\n];\n```\n\n### Edges\n\n```javascript\n[\n  {\n    id: 'a',\n    source: '1',\n    target: '2'\n  },\n  {\n    id: 'b',\n    source: '1',\n    target: '3'\n  },\n  {\n    id: 'c',\n    source: '3',\n    target: '4'\n  },\n  {\n    id: 'd',\n    source: '3',\n    target: '5'\n  },\n  {\n    id: 'e',\n    source: '4',\n    target: '5'\n  },\n  {\n    id: 'f',\n    source: '2',\n    target: '6'\n  }\n];\n```\n\n### Clusters\n\n```javascript\n[\n  {\n    id: 'cluster0',\n    label: 'Cluster node',\n    childNodeIds: ['2', '3']\n  }\n];\n```\n\n## Building ngx-graph\n\nTo get started with development, clone a fork of the repository and run `yarn`.\n\n## Development server\n\nRun `yarn start` to serve Storybook at `http://localhost:6006/`. Storybook serves as the development and test environment for ngx-graph.\n\n## Building\n\nRun `yarn build:storybook` to build Storybook to check for production issues. The build artifacts will be stored in the `dist/` directory.\n\nRun `yarn build:lib` to build ngx-graph.\n\n## Running tests\n\nRun `yarn test` to execute the linter.\n\n## Release\n\n- Checkout master (`git checkout master`)\n- Pull master (`git pull`)\n- Run tests (`yarn ci`)\n- Examine log to determine next version (X.Y.Z)\n- Run `git checkout -b release/X.Y.Z`\n- Update version in `projects/swimlane/ngx-graph/package.json`.\n- Update changelog in `CHANGELOG.md`\n- Run `yarn package` to check the package format\n- Run `git commit -am \"(release): X.Y.Z\"`\n- Run `git tag X.Y.Z`\n- Run `git push origin HEAD --tags`\n- Run `yarn publish:lib`\n- Submit PR\n\n## Credits\n\n`ngx-graph` is a [Swimlane](http://swimlane.com) 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.\n\n[SecOps Hub](http://secopshub.com) is an open, product-agnostic, online community for security professionals to share ideas, use cases, best practices, and incident response strategies.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswimlane%2Fngx-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswimlane%2Fngx-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswimlane%2Fngx-graph/lists"}