Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dappsnation/ng-antv
Angular wrapper around the antv libraries
https://github.com/dappsnation/ng-antv
Last synced: 2 months ago
JSON representation
Angular wrapper around the antv libraries
- Host: GitHub
- URL: https://github.com/dappsnation/ng-antv
- Owner: dappsnation
- License: mit
- Created: 2020-09-21T17:07:30.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-07T10:55:23.000Z (almost 2 years ago)
- Last Synced: 2024-08-01T05:15:55.183Z (5 months ago)
- Language: TypeScript
- Size: 1.49 MB
- Stars: 12
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-canvas - ng-antv - Angular wrapper around the antv libraries.   (Libraries / Graph Editing)
README
Angular antv
A repository for Angular helpers around the [@antv vision](https://antv.vision/) libraries.
## [G6](https://g6.antv.vision/)
[](LICENSE)
[](https://www.npmjs.com/package/ng-antv-g6)
[](https://www.npmjs.com/package/ng-antv-g6)
[Documentation](https://ng-antv.netlify.app/doc)
```
npm install @antv/g6 ng-antv-g6
```
### Graph
[Online Editor](https://ng-antv.netlify.app/graph)
Create a module with your default config:
`g6.module.ts`
```typescript
import { G6GraphModule, G6_GRAPH_OPTIONS } from 'ng-antv-g6';
@NgModule({
exports: [ G6GraphModule ],
providers: [
{
provide: G6_GRAPH_OPTIONS,
useValue: {
modes: { default: ['drag-canvas', 'zoom-canvas'] },
layout: {
type: 'dagre',
ranksep: 10,
},
defaultNode: {
type: 'rect',
anchorPoints: [[ 0.5, 0 ], [ 0.5, 1 ]],
},
}
},
]
})
export class G6Module {}
```
Import it into you `AppModule`:
`app.module.ts`:
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { G6Module } from './g6.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
G6Module // <-- Here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
Now you can use it in your template :
```html
```
The canvas will have the same size as the `g6-graph` tag so don't forget to set its height :
```scss
g6-graph {
height: 500px;
width: 500px;
}
```
### G6TreeGraph
`G6TreeGraph` can have default config.
`g6.module.ts`
```typescript
import { G6TreeGraphModule, G6_TREE_GRAPH_OPTIONS } from 'ng-antv-g6';
@NgModule({
exports: [ G6TreeGraphModule ],
providers: [
{
provide: G6_TREE_GRAPH_OPTIONS,
useValue: {
modes: { default: ['zoom-canvas', 'drag-node'] },
layout: {
type: 'dendrogram',
direction: 'LR',
},
}
},
]
})
export class G6Module {}
```
Now you can use it in your template :
```html
```
⚠️ Due to an [angular issue](https://github.com/angular/angular/issues/14842), the tree graph won't work with dynamic node.
The example below **won't** work : ⚠️
```html
```
### Menu
The Menu uses `@angular/cdk` for the overlay :
```
npm install @angular/cdk
```
And you need to import the style in
`styles.scss`
```scss
@import '~@angular/cdk/overlay-prebuilt.css';
```
> If you're using @angular/material, you don't need to import it.
```html
Delete
```