github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/stories/charts/distribution-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  import DelayedTruth from '../utils/delayed-truth';
     7  
     8  export default {
     9    title: 'Charts|Distribution Bar',
    10  };
    11  
    12  export let Standard = () => {
    13    return {
    14      template: hbs`
    15        <h5 class="title is-5">Distribution Bar</h5>
    16        <div class="block" style="height:50px; width:200px;">
    17          {{#if delayedTruth.complete}}
    18            <DistributionBar @data={{distributionBarData}} />
    19          {{/if}}
    20        </div>
    21        <p class="annotation">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.</p>
    22        `,
    23      context: {
    24        delayedTruth: DelayedTruth.create(),
    25        distributionBarData: [
    26          { label: 'one', value: 10 },
    27          { label: 'two', value: 20 },
    28          { label: 'three', value: 30 },
    29        ],
    30      },
    31    };
    32  };
    33  
    34  export let WithClasses = () => {
    35    return {
    36      template: hbs`
    37        <h5 class="title is-5">Distribution Bar with classes</h5>
    38        <div class="block" style="height:50px; width:200px;">
    39          {{#if delayedTruth.complete}}
    40            <DistributionBar @data={{distributionBarDataWithClasses}} />
    41          {{/if}}
    42        </div>
    43        <p class="annotation">If a datum provides a <code>className</code> property, it will be assigned to the corresponding <code>rect</code> element, allowing for custom colorization.</p>
    44        `,
    45      context: {
    46        delayedTruth: DelayedTruth.create(),
    47        distributionBarDataWithClasses: [
    48          { label: 'Queued', value: 10, className: 'queued' },
    49          { label: 'Complete', value: 20, className: 'complete' },
    50          { label: 'Failed', value: 30, className: 'failed' },
    51        ],
    52      },
    53    };
    54  };
    55  
    56  export let Flexibility = () => {
    57    return {
    58      template: hbs`
    59        <h5 class="title is-5">Distribution Bar flexibility</h5>
    60        <div class="block" style="height:10px; width:600px;">
    61          {{#if delayedTruth.complete}}
    62            <DistributionBar @data={{distributionBarData}} />
    63          {{/if}}
    64        </div>
    65        <div class="block" style="height:200px; width:30px;">
    66          {{#if delayedTruth.complete}}
    67            <DistributionBar @data={{distributionBarData}} />
    68          {{/if}}
    69        </div>
    70        <p class="annotation">Distribution bar assumes the dimensions of the container.</p>
    71        `,
    72      context: {
    73        delayedTruth: DelayedTruth.create(),
    74        distributionBarData: [
    75          { label: 'one', value: 10 },
    76          { label: 'two', value: 20 },
    77          { label: 'three', value: 30 },
    78        ],
    79      },
    80    };
    81  };
    82  
    83  export let LiveUpdating = () => {
    84    return {
    85      template: hbs`
    86        <h5 class="title is-5">Live-updating Distribution Bar</h5>
    87        <div class="block" style="height:50px; width:600px;">
    88          <DistributionBar @data={{controller.distributionBarDataRotating}} />
    89        </div>
    90        <p class="annotation">Distribution bar animates with data changes.</p>
    91        <div class="boxed-section">
    92          <div class="boxed-section-body is-dark">
    93            <JsonViewer @json={{controller.distributionBarDataRotating}} />
    94          </div>
    95        </div>
    96        `,
    97      context: {
    98        controller: EmberObject.extend({
    99          timerTicks: 0,
   100  
   101          startTimer: on('init', function() {
   102            this.set(
   103              'timer',
   104              setInterval(() => {
   105                this.incrementProperty('timerTicks');
   106              }, 500)
   107            );
   108          }),
   109  
   110          willDestroy() {
   111            clearInterval(this.timer);
   112          },
   113  
   114          distributionBarDataRotating: computed('timerTicks', () => {
   115            return [
   116              { label: 'one', value: Math.round(Math.random() * 50) },
   117              { label: 'two', value: Math.round(Math.random() * 50) },
   118              { label: 'three', value: Math.round(Math.random() * 50) },
   119            ];
   120          }),
   121        }).create(),
   122      },
   123    };
   124  };
   125  
   126  export let SingleBar = () => {
   127    return {
   128      template: hbs`
   129        <h5 class="title is-5">Distribution Bar with single bar</h5>
   130        <div class="block" style="height:50px; width:600px;">
   131          {{#if delayedTruth.complete}}
   132            <DistributionBar @data={{distributionBarDatum}} />
   133          {{/if}}
   134        </div>
   135        `,
   136      context: {
   137        delayedTruth: DelayedTruth.create(),
   138        distributionBarDatum: [{ label: 'one', value: 10 }],
   139      },
   140    };
   141  };
   142  
   143  export let Jumbo = () => {
   144    return {
   145      template: hbs`
   146        <h5 class="title is-5">Jumbo Distribution Bar</h5>
   147        {{#if delayedTruth.complete}}
   148          <DistributionBar @data={{distributionBarData}} @class="split-view" as |chart|>
   149            <ol class="legend">
   150              {{#each chart.data as |datum index|}}
   151                <li class="{{datum.className}} {{if (eq datum.index chart.activeDatum.index) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
   152                  <span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
   153                  <span class="value" data-test-legend-value="{{datum.className}}">{{datum.value}}</span>
   154                  <span class="label">
   155                    {{datum.label}}
   156                  </span>
   157                </li>
   158              {{/each}}
   159            </ol>
   160          </DistributionBar>
   161        {{/if}}
   162        <p class="annotation">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.</p>
   163        `,
   164      context: {
   165        delayedTruth: DelayedTruth.create(),
   166        distributionBarData: [
   167          { label: 'one', value: 10 },
   168          { label: 'two', value: 20 },
   169          { label: 'three', value: 0 },
   170          { label: 'four', value: 35 },
   171        ],
   172      },
   173    };
   174  };