<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>
