open-consul/ui/packages/consul-ui/app/components/consul/tomography/graph/index.hbs

<div
  class="tomography-graph"
  ...attributes
>
  <svg width={{this.size}} height={{this.size}}>
      <g transform="translate({{div this.size 2}}, {{div this.size 2}})">
          <g>
              <circle class="background" r={{this.circle.[0]}} />
              <circle class="axis" r={{this.circle.[1]}} />
              <circle class="axis" r={{this.circle.[2]}} />
              <circle class="axis" r={{this.circle.[3]}} />
              <circle class="border" r={{this.circle.[4]}} />
          </g>
          <g class="lines">
      {{#each this.distances as |item|}}
          <rect
            {{tooltip
              (concat item.node ' - ' (format-number item.distance maximumFractionDigits=2) 'ms'
            (if item.segment (concat '<br />(Segment: ' item.segment ')'))
              )
              options=(hash
                followCursor=true
                allowHTML=true
              )
            }}
            transform="rotate({{item.rotate}})"
            width={{item.y2}}
            height="1"
          />
      {{/each}}
          </g>
          <g class="labels">
              <circle class="point" r="5" />
              <g class="tick" transform="translate(0, {{this.labels.[0]}})">
                  <line x2="70" />
                  <text x="75" y="0" dy=".32em">{{format-number this.milliseconds.[0] maximumFractionDigits=2}}ms</text>
              </g>
              <g class="tick" transform="translate(0, {{this.labels.[1]}})">
                  <line x2="70" />
                  <text x="75" y="0" dy=".32em">{{format-number this.milliseconds.[1] maximumFractionDigits=2}}ms</text>
              </g>
              <g class="tick" transform="translate(0, {{this.labels.[2]}})">
                  <line x2="70" />
                  <text x="75" y="0" dy=".32em">{{format-number this.milliseconds.[2] maximumFractionDigits=2}}ms</text>
              </g>
              <g class="tick" transform="translate(0, {{this.labels.[3]}})">
                  <line x2="70" />
                  <text x="75" y="0" dy=".32em">{{format-number this.milliseconds.[3] maximumFractionDigits=2}}ms</text>
              </g>
          </g>
      </g>
  </svg>
</div>