github.com/outbrain/consul@v1.4.5/ui-v2/app/templates/components/tomography-graph.hbs (about) 1 <svg width="{{size}}" height="{{size}}"> 2 <g class="tomography" transform="translate({{div size 2}}, {{div size 2}})"> 3 <g> 4 <circle class="background" r="{{circle.[0]}}"/> 5 <circle class="axis" r="{{circle.[1]}}"/> 6 <circle class="axis" r="{{circle.[2]}}"/> 7 <circle class="axis" r="{{circle.[3]}}"/> 8 <circle class="border" r="{{circle.[4]}}"/> 9 </g> 10 <g class="lines"> 11 {{#each distances as |item|}} 12 <line transform="rotate({{item.rotate}})" y2="{{item.y2}}" data-node="{{item.d}}" data-distance="{{item.distance}}" data-segment="{{item.segment}}"/> 13 {{/each}} 14 </g> 15 <g class="labels"> 16 <circle class="point" r="5"/> 17 <g class="tick" transform="translate(0, {{labels.[0]}})"> 18 <line x2="70"/> 19 <text x="75" y="0" dy=".32em">{{format-number milliseconds.[0] maximumFractionDigits=2}}ms</text> 20 </g> 21 <g class="tick" transform="translate(0, {{labels.[1]}})"> 22 <line x2="70"/> 23 <text x="75" y="0" dy=".32em">{{format-number milliseconds.[1] maximumFractionDigits=2}}ms</text> 24 </g> 25 <g class="tick" transform="translate(0, {{labels.[2]}})"> 26 <line x2="70"/> 27 <text x="75" y="0" dy=".32em">{{format-number milliseconds.[2] maximumFractionDigits=2}}ms</text> 28 </g> 29 <g class="tick" transform="translate(0, {{labels.[3]}})"> 30 <line x2="70"/> 31 <text x="75" y="0" dy=".32em">{{format-number milliseconds.[3] maximumFractionDigits=2}}ms</text> 32 </g> 33 </g> 34 </g> 35 </svg>