| <!-- |
| ~ Licensed to the Apache Software Foundation (ASF) under one |
| ~ or more contributor license agreements. See the NOTICE file |
| ~ distributed with this work for additional information |
| ~ regarding copyright ownership. The ASF licenses this file |
| ~ to you under the Apache License, Version 2.0 (the |
| ~ "License"); you may not use this file except in compliance |
| ~ with the License. You may obtain a copy of the License at |
| ~ |
| ~ http://www.apache.org/licenses/LICENSE-2.0 |
| ~ |
| ~ Unless required by applicable law or agreed to in writing, |
| ~ software distributed under the License is distributed on an |
| ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| ~ KIND, either express or implied. See the License for the |
| ~ specific language governing permissions and limitations |
| ~ under the License. |
| --> |
| |
| <ngx-graph |
| #graph |
| class="chart-container" |
| [view]="[(graph.graphDims.width * 2) / 3, graph.graphDims.height]" |
| [links]="data.links" |
| [nodes]="data.nodes" |
| [curve]="curve" |
| orientation="TB" |
| [autoZoom]="false" |
| [panningEnabled]="false" |
| [draggingEnabled]="false" |
| [minZoomLevel]="1" |
| [maxZoomLevel]="1" |
| > |
| <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.description" |
| > |
| <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:text |
| alignment-baseline="hanging" |
| [attr.x]="node.width - 100" |
| [attr.y]="node.height + 10" |
| [ngClass]="'state-default state-' + node.state" |
| > |
| {{ node.state }} |
| </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> |
