# ngx-graph-charts

> Personal modify

Latest version **5.0.1** (published 2019-02-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-graph-charts
pnpm add ngx-graph-charts
yarn add ngx-graph-charts
bun add ngx-graph-charts
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.1 |
| Published | 2019-02-11 |
| First published | 2019-02-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 3.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | arthur.novaes |
| Keywords | angular2, angularjs, charts, charting, angular, d3, viz, graph, svg, dataviz, viz, graph, d3.js, d3js, angular4, dag, directed acyclic graph, visualization, tree |

## Links

- npm: https://www.npmjs.com/package/ngx-graph-charts
- Repository: https://github.com/swimlane/ngx-graph-charts
- Homepage: https://github.com/swimlane/ngx-graph-charts#readme
- Issues: https://github.com/swimlane/ngx-graph-charts/issues
- npm.io page: https://npm.io/package/ngx-graph-charts

## Dependencies (7)

- [dagre](https://npm.io/package/dagre.md) ^0.7.4
- [d3-shape](https://npm.io/package/d3-shape.md) ^1.2.0
- [d3-selection](https://npm.io/package/d3-selection.md) ^1.2.0
- [ngx-charts-8](https://npm.io/package/ngx-charts-8.md) ^8.1.1
- [d3-transition](https://npm.io/package/d3-transition.md) ^1.1.1
- [@types/d3-transition](https://npm.io/package/@types/d3-transition.md) ^1.1.1
- [transformation-matrix](https://npm.io/package/transformation-matrix.md) ^1.7.0

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 5.0.1 (latest) — 2019-02-11
- 5.0.0 — 2019-02-11

## README

# ngx-graph

[![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&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

A Graph visualization for angular

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

## Features
* Custom templates for nodes and edges
* Automatic layout using [Dagre](https://github.com/cpettitt/dagre)
* Animations

### How is it different from `ngx-charts`?
This library is focused on handling graph data (anything with nodes and edges) rather than chart data.  Currently the only visualization uses the Dagre layout, which is specialized for directed graphs.  The plan is to implement multiple visualisations for graph data within this same library.  Eventually, `ngx-charts-force-directed-graph` may be imported into this library as another option to visualize your graph data.

## Installation
1. `npm install @swimlane/ngx-graph --save`
2. Make sure the peer dependencies are installed (d3)
3. Import `NgxGraphModule` into your module
4. Use the `ngx-graph` component in your components
```
<ngx-graph
  class="chart-container"
  [view]="view"
  [legend]="showLegend"
  [links]="hierarchialGraph.links"
  (legendLabelClick)="onLegendLabelClick($event)"
  [nodes]="hierarchialGraph.nodes"
  [scheme]="colorScheme"
  [orientation]="orientation"
  [curve]="curve"
  (select)="select($event)">

  <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 #nodeTemplate let-node>
    <svg:g class="node"
      ngx-tooltip
      [tooltipPlacement]="'top'"
      [tooltipType]="'tooltip'"
      [tooltipTitle]="node.label">
      <svg:rect [attr.width]="node.width" [attr.height]="node.height" [attr.fill]="node.options.color" />
      <svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.height / 2">{{node.label}}</svg:text>
    </svg:g>
  </ng-template>

  <ng-template #linkTemplate let-link>
    <svg:g class="edge">
      <svg:path
        stroke-width="2"
        marker-end="url(#arrow)" >
      </svg:path>
    </svg:g>
  </ng-template>

</ngx-graph>
```

## Data

### Nodes
```
[
  {
    id: 'start',
    label: 'start'
  }, {
    id: '1',
    label: 'Query ThreatConnect',
  }, {
    id: '2',
    label: 'Query XForce',
  }, {
    id: '3',
    label: 'Format Results'
  }, {
    id: '4',
    label: 'Search Splunk'
  }, {
    id: '5',
    label: 'Block LDAP'
  }, {
    id: '6',
    label: 'Email Results'
  }
]
```

### Links
```
[
  {
    source: 'start',
    target: '1',
    label: 'links to'
  }, {
    source: 'start',
    target: '2'
  }, {
    source: '1',
    target: '3',
    label: 'related to'
  }, {
    source: '2',
    target: '4'
  }, {
    source: '2',
    target: '6'
  }, {
    source: '3',
    target: '5'
  }
]
```


## Credits
`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.

---
_Source: https://npm.io/package/ngx-graph-charts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._