github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/stories/charts/gauge-chart.stories.js (about)

     1  import hbs from 'htmlbars-inline-precompile';
     2  import DelayedArray from '../utils/delayed-array';
     3  import DelayedTruth from '../utils/delayed-truth';
     4  
     5  export default {
     6    title: 'Charts/Gauge Chart',
     7  };
     8  
     9  let totalVariations = [
    10    { value: 0, total: 10 },
    11    { value: 1, total: 10 },
    12    { value: 2, total: 10 },
    13    { value: 3, total: 10 },
    14    { value: 4, total: 10 },
    15    { value: 5, total: 10 },
    16    { value: 6, total: 10 },
    17    { value: 7, total: 10 },
    18    { value: 8, total: 10 },
    19    { value: 9, total: 10 },
    20    { value: 10, total: 10 },
    21  ];
    22  
    23  let complementVariations = [
    24    { value: 0, complement: 10 },
    25    { value: 1, complement: 9 },
    26    { value: 2, complement: 8 },
    27    { value: 3, complement: 7 },
    28    { value: 4, complement: 6 },
    29    { value: 5, complement: 5 },
    30    { value: 6, complement: 4 },
    31    { value: 7, complement: 3 },
    32    { value: 8, complement: 2 },
    33    { value: 9, complement: 1 },
    34    { value: 10, complement: 0 },
    35  ];
    36  
    37  let colorVariations = ['is-info', 'is-warning', 'is-success', 'is-danger'];
    38  
    39  export let Total = () => {
    40    return {
    41      template: hbs`
    42        <div class="multiples">
    43          {{#each variations as |v|}}
    44            <div class="chart-container">
    45              <GaugeChart @value={{v.value}} @total={{v.total}} @label="Total" @chartClass="is-info" />
    46            </div>
    47          {{/each}}
    48        </div>
    49      `,
    50      context: {
    51        variations: DelayedArray.create(totalVariations),
    52      },
    53    };
    54  };
    55  
    56  export let Complement = () => {
    57    return {
    58      template: hbs`
    59        <div class="multiples">
    60          {{#each variations as |v|}}
    61            <div class="chart-container">
    62              <GaugeChart @value={{v.value}} @complement={{v.complement}} @label="Complement" @chartClass="is-info" />
    63            </div>
    64          {{/each}}
    65        </div>
    66      `,
    67      context: {
    68        variations: DelayedArray.create(complementVariations),
    69      },
    70    };
    71  };
    72  
    73  export let Colors = () => {
    74    return {
    75      template: hbs`
    76        <div class="multiples">
    77          {{#each variations as |color|}}
    78            <div class="chart-container">
    79              <GaugeChart @value={{7}} @total={{10}} @label={{color}} @chartClass={{color}} />
    80            </div>
    81          {{/each}}
    82        </div>
    83      `,
    84      context: {
    85        variations: DelayedArray.create(colorVariations),
    86      },
    87    };
    88  };
    89  
    90  export let Sizing = () => {
    91    return {
    92      template: hbs`
    93        {{#if delayedTruth.complete}}
    94          <div class="multiples">
    95            <div class="chart-container is-small">
    96              <GaugeChart @value={{7}} @total={{10}} @label="Small" />
    97            </div>
    98            <div class="chart-container">
    99              <GaugeChart @value={{7}} @total={{10}} @label="Regular" />
   100            </div>
   101            <div class="chart-container is-large">
   102              <GaugeChart @value={{7}} @total={{10}} @label="Large" />
   103            </div>
   104            <div class="chart-container is-xlarge">
   105              <GaugeChart @value={{7}} @total={{10}} @label="X-Large" />
   106            </div>
   107          </div>
   108        {{/if}}
   109        <p class="annotation">GaugeCharts fill the width of their container and have a dynamic height according to the height of the arc. However, the text within a gauge chart is fixed. This can create unsightly overlap or whitespace, so be careful about responsiveness when using this chart type.</p>
   110      `,
   111      context: {
   112        delayedTruth: DelayedTruth.create(),
   113      },
   114    };
   115  };