consul/ui-v2/app/templates/components/tomography-graph.hbs
John Cowen 99c51c9f86
UI: Reduce in-development deprecations (also use toLocaleString) (#4677)
Various ember addons produced deprecation messages, some in the browser
console and some in terminal. Upgrading and replacing some of these has
reduced this.

Upgrades:

- ember-collection
- ember-computed-style

Replacements:

- ember-pluralize replaced with ember-inflector
- ember-cli-format-number replaced with custom helper using standard
`toLocaleString`

Removing ember-cli-format-number also meant some further changes related
to decimal places in the tomography graph, done using `toFixed`

The ExternalSources background-images have also now been escaped
correctly preventing in-development `console` warnings.

The only deprecation warnings are now from ember-block-slots, only in
terminal, making for a better development experience overall, especially now we
have an empty browser console

Also adds a `callIfType` 'helper util' which is a util specifically for helpers (it conforms to a helper argument signature) to be expanded upon later.
2018-10-01 13:42:42 +01:00

36 lines
1.7 KiB
Handlebars

<svg width="{{size}}" height="{{size}}">
<g class="tomography" transform="translate({{div size 2}}, {{div size 2}})">
<g>
<circle class="background" r="{{circle.[0]}}"/>
<circle class="axis" r="{{circle.[1]}}"/>
<circle class="axis" r="{{circle.[2]}}"/>
<circle class="axis" r="{{circle.[3]}}"/>
<circle class="border" r="{{circle.[4]}}"/>
</g>
<g class="lines">
{{#each distances as |item|}}
<line transform="rotate({{item.rotate}})" y2="{{item.y2}}" data-node="{{item.d}}" data-distance="{{item.distance}}" data-segment="{{item.segment}}"/>
{{/each}}
</g>
<g class="labels">
<circle class="point" r="5"/>
<g class="tick" transform="translate(0, {{labels.[0]}})">
<line x2="70"/>
<text x="75" y="0" dy=".32em">{{format-number milliseconds.[0] maximumFractionDigits=2}}ms</text>
</g>
<g class="tick" transform="translate(0, {{labels.[1]}})">
<line x2="70"/>
<text x="75" y="0" dy=".32em">{{format-number milliseconds.[1] maximumFractionDigits=2}}ms</text>
</g>
<g class="tick" transform="translate(0, {{labels.[2]}})">
<line x2="70"/>
<text x="75" y="0" dy=".32em">{{format-number milliseconds.[2] maximumFractionDigits=2}}ms</text>
</g>
<g class="tick" transform="translate(0, {{labels.[3]}})">
<line x2="70"/>
<text x="75" y="0" dy=".32em">{{format-number milliseconds.[3] maximumFractionDigits=2}}ms</text>
</g>
</g>
</g>
</svg>