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