26 lines
1.1 KiB
Handlebars
26 lines
1.1 KiB
Handlebars
{{#freestyle-usage "jumbo-distribution-bar"}}
|
|
{{#distribution-bar data=distributionBarData class="split-view" as |chart|}}
|
|
<ol class="legend">
|
|
{{#each chart.data as |datum index|}}
|
|
<li class="{{datum.className}} {{if (eq datum.index chart.activeDatum.index) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
|
|
<span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
|
|
<span class="value" data-test-legend-value="{{datum.className}}">{{datum.value}}</span>
|
|
<span class="label">
|
|
{{datum.label}}
|
|
</span>
|
|
</li>
|
|
{{/each}}
|
|
</ol>
|
|
{{/distribution-bar}}
|
|
{{/freestyle-usage}}
|
|
{{#freestyle-annotation}}
|
|
<div class="block">
|
|
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.
|
|
</div>
|
|
<div class="boxed-section">
|
|
<div class="boxed-section-body is-dark">
|
|
{{json-viewer json=distributionBarData}}
|
|
</div>
|
|
</div>
|
|
{{/freestyle-annotation}}
|