npm i ngx-graph
npm i ngx-charts
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { HelloComponent } from './hello.component'; import { NgxGraphModule } from '@swimlane/ngx-graph'; import { NgxChartsModule } from '@swimlane/ngx-charts'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ imports: [ BrowserModule, FormsModule, NgxGraphModule, NgxChartsModule,BrowserAnimationsModule ], declarations: [ AppComponent, HelloComponent ], schemas: [CUSTOM_ELEMENTS_SCHEMA], bootstrap: [ AppComponent ] }) export class AppModule { } |
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
import { Component } from '@angular/core'; import * as shape from 'd3-shape'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { name = 'Angular 5'; hierarchialGraph = { nodes: [], links: [] }; curve = shape.curveBundle.beta(1); // curve = shape.curveLinear; public ngOnInit(): void { this.showGraph(); } showGraph() { this.hierarchialGraph.nodes = [ { id: 'start', label: 'scan', position: 'x0', }, { id: '1', label: 'Event#a', position: 'x1', }, { id: '2', label: 'Event#x', position: 'x2', }, { id: '3', label: 'Event#b', position: 'x3', }, { id: '4', label: 'Event#c', position: 'x4', }, { id: '5', label: 'Event#y', position: 'x5', }, { id: '6', label: 'Event#z', position: 'x6', }, ]; this.hierarchialGraph.links = [ { source: 'start', target: '1', label: 'Process#1', }, { source: 'start', target: '2', label: 'Process#2', }, { source: '1', target: '3', label: 'Process#3', }, { source: '2', target: '4', label: 'Process#4', }, { source: '2', target: '6', label: 'Process#6', }, { source: '3', target: '5', }, ]; } } |
app.component.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<ngx-graph class="chart-container" [links]="hierarchialGraph.links" [nodes]="hierarchialGraph.nodes" [legend]="true" [curve]="curve" [draggingEnabled]="false" > <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.position" > <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 class="line" stroke-width="2" marker-end="url(#arrow)" > </svg:path> <svg:text class="edge-label" text-anchor="middle"> <textPath style="fill: #666;" [attr.href]="'#' + link.id" startOffset="60%"> {{link.label}} </textPath> </svg:text> </svg:g> </ng-template> </ngx-graph> <hello name="{{ name }}"></hello> |
FULL SOURCE CODE
