github.com/manicqin/nomad@v0.9.5/ui/app/templates/components/freestyle/sg-distribution-bar-jumbo.hbs (about) 1 {{#freestyle-usage "jumbo-distribution-bar"}} 2 {{#distribution-bar data=distributionBarData class="split-view" as |chart|}} 3 <ol class="legend"> 4 {{#each chart.data as |datum index|}} 5 <li class="{{datum.className}} {{if (eq datum.index chart.activeDatum.index) "is-active"}} {{if (eq datum.value 0) "is-empty"}}"> 6 <span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" /> 7 <span class="value" data-test-legend-value="{{datum.className}}">{{datum.value}}</span> 8 <span class="label"> 9 {{datum.label}} 10 </span> 11 </li> 12 {{/each}} 13 </ol> 14 {{/distribution-bar}} 15 {{/freestyle-usage}} 16 {{#freestyle-annotation}} 17 <div class="block"> 18 A variation of the Distribution Bar component for when the distribution bar is the central component of the page. It's a larger format that requires no interaction to see the data labels and values. 19 </div> 20 <div class="boxed-section"> 21 <div class="boxed-section-body is-dark"> 22 {{json-viewer json=distributionBarData}} 23 </div> 24 </div> 25 {{/freestyle-annotation}}