github.com/manicqin/nomad@v0.9.5/ui/app/templates/components/freestyle/sg-distribution-bar.hbs (about) 1 {{#freestyle-collection as |collection|}} 2 {{#collection.variant key="standard"}} 3 {{#freestyle-usage 'distribution-bar-standard'}} 4 <div class="block" style="height:50px; width:200px;"> 5 {{distribution-bar data=distributionBarData}} 6 </div> 7 {{/freestyle-usage}} 8 {{#freestyle-annotation}} 9 <div class="block"> 10 The distribution bar chart proportionally show data in a single bar. It includes a tooltip out of the box, assumes the size of the container element, and is designed to be styled with CSS. 11 </div> 12 <div class="boxed-section"> 13 <div class="boxed-section-body is-dark"> 14 {{json-viewer json=distributionBarData}} 15 </div> 16 </div> 17 {{/freestyle-annotation}} 18 {{/collection.variant}} 19 {{#collection.variant key="with classes"}} 20 {{#freestyle-usage 'distribution-bar-with-classes'}} 21 <div class="block" style="height:50px; width:200px;"> 22 {{distribution-bar data=distributionBarDataWithClasses}} 23 </div> 24 {{/freestyle-usage}} 25 {{#freestyle-annotation}} 26 <div class="block"> 27 If a datum provides a <code>className</code> property, it will be assigned to the corresponding <code>rect</code> element, allowing for custom colorization. 28 </div> 29 <div class="boxed-section"> 30 <div class="boxed-section-body is-dark"> 31 {{json-viewer json=distributionBarDataWithClasses}} 32 </div> 33 </div> 34 {{/freestyle-annotation}} 35 {{/collection.variant}} 36 {{#collection.variant key="flexibility"}} 37 {{#freestyle-usage 'distribution-bar-sizing-1'}} 38 <div class="block" style="height:10px; width:600px;"> 39 {{distribution-bar data=distributionBarData}} 40 </div> 41 {{/freestyle-usage}} 42 {{#freestyle-usage 'distribution-bar-sizing-2'}} 43 <div class="block" style="height:200px; width:30px;"> 44 {{distribution-bar data=distributionBarData}} 45 </div> 46 {{/freestyle-usage}} 47 {{#freestyle-annotation}} 48 <div class="block"> 49 Distribution bar assumes the dimensions of the container. 50 </div> 51 {{/freestyle-annotation}} 52 {{/collection.variant}} 53 {{#collection.variant key="live updating"}} 54 {{#freestyle-usage 'distribution-bar-updating'}} 55 <div class="block" style="height:50px; width:600px;"> 56 {{distribution-bar data=distributionBarDataRotating}} 57 </div> 58 {{/freestyle-usage}} 59 {{#freestyle-annotation}} 60 <div class="block"> 61 Distribution bar animates with data changes. 62 </div> 63 <div class="boxed-section"> 64 <div class="boxed-section-body is-dark"> 65 {{json-viewer json=distributionBarDataRotating}} 66 </div> 67 </div> 68 {{/freestyle-annotation}} 69 {{/collection.variant}} 70 {{#collection.variant key="single bar"}} 71 {{#freestyle-usage 'distribution-bar-single'}} 72 <div class="block" style="height:50px; width:600px;"> 73 {{distribution-bar data=distributionBarDatum}} 74 </div> 75 {{/freestyle-usage}} 76 {{/collection.variant}} 77 {{/freestyle-collection}}