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