github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/stories/charts/progress-bar.stories.js (about)

     1  import hbs from 'htmlbars-inline-precompile';
     2  
     3  import EmberObject, { computed } from '@ember/object';
     4  import { on } from '@ember/object/evented';
     5  
     6  export default {
     7    title: 'Charts|Progress Bar',
     8  };
     9  
    10  export let Standard = () => {
    11    return {
    12      template: hbs`
    13        <h5 class="title is-5">Progress Bar</h5>
    14        <div class="inline-chart tooltip" role="tooltip" aria-label="5 / 15">
    15          <progress
    16            class="progress is-primary is-small"
    17            value="0.33"
    18            max="1">
    19            0.33
    20          </progress>
    21        </div>
    22        `,
    23    };
    24  };
    25  
    26  export let Colors = () => {
    27    return {
    28      template: hbs`
    29        <h5 class="title is-5">Progress Bar colors</h5>
    30        <div class="columns">
    31          <div class="column">
    32            <div class="inline-chart tooltip" role="tooltip" aria-label="5 / 15">
    33              <progress
    34                class="progress is-info is-small"
    35                value="0.33"
    36                max="1">
    37                0.33
    38              </progress>
    39            </div>
    40          </div>
    41          <div class="column">
    42            <div class="inline-chart tooltip" role="tooltip" aria-label="5 / 15">
    43              <progress
    44                class="progress is-success is-small"
    45                value="0.33"
    46                max="1">
    47                0.33
    48              </progress>
    49            </div>
    50          </div>
    51          <div class="column">
    52            <div class="inline-chart tooltip" role="tooltip" aria-label="5 / 15">
    53              <progress
    54                class="progress is-warning is-small"
    55                value="0.33"
    56                max="1">
    57                0.33
    58              </progress>
    59            </div>
    60          </div>
    61          <div class="column">
    62            <div class="inline-chart tooltip" role="tooltip" aria-label="5 / 15">
    63              <progress
    64                class="progress is-danger is-small"
    65                value="0.33"
    66                max="1">
    67                0.33
    68              </progress>
    69            </div>
    70          </div>
    71        </div>
    72        `,
    73    };
    74  };
    75  
    76  export let LiveUpdates = () => {
    77    return {
    78      template: hbs`
    79        <h5 class="title is-5">Progress Bar with live updates</h5>
    80        <div class="columns">
    81          <div class="column is-one-third">
    82            <div class="inline-chart tooltip" role="tooltip" aria-label="{{data.numerator}} / {{data.denominator}}">
    83              <progress
    84                class="progress is-primary is-small"
    85                value="{{data.percentage}}"
    86                max="1">
    87                {{data.percentage}}
    88              </progress>
    89            </div>
    90          </div>
    91        </div>
    92        <p class="annotation">
    93          <div class="boxed-section">
    94            <div class="boxed-section-body is-dark">
    95              <JsonViewer @json={{data.liveDetails}} />
    96            </div>
    97          </div>
    98        </p>
    99        `,
   100      context: {
   101        data: EmberObject.extend({
   102          timerTicks: 0,
   103  
   104          startTimer: on('init', function() {
   105            this.set(
   106              'timer',
   107              setInterval(() => {
   108                this.incrementProperty('timerTicks');
   109              }, 1000)
   110            );
   111          }),
   112  
   113          willDestroy() {
   114            clearInterval(this.timer);
   115          },
   116  
   117          denominator: computed('timerTicks', function() {
   118            return Math.round(Math.random() * 1000);
   119          }),
   120  
   121          percentage: computed('timerTicks', function() {
   122            return Math.round(Math.random() * 100) / 100;
   123          }),
   124  
   125          numerator: computed('denominator', 'percentage', function() {
   126            return Math.round(this.denominator * this.percentage * 100) / 100;
   127          }),
   128  
   129          liveDetails: computed('denominator', 'numerator', 'percentage', function() {
   130            return this.getProperties('denominator', 'numerator', 'percentage');
   131          }),
   132        }).create(),
   133      },
   134    };
   135  };