github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/stories/charts/stats-time-series.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  import moment from 'moment';
     6  
     7  import DelayedArray from '../utils/delayed-array';
     8  
     9  export default {
    10    title: 'Charts|Stats Time Series',
    11  };
    12  
    13  let ts = offset =>
    14    moment()
    15      .subtract(offset, 'm')
    16      .toDate();
    17  
    18  export let Standard = () => {
    19    return {
    20      template: hbs`
    21        <h5 class="title is-5">Stats Time Series</h5>
    22        <div class="block" style="height:100px; width: 400px;">
    23          {{#if staticMetrics}}
    24            <StatsTimeSeries @data={{staticMetrics}} @chartClass="is-primary" />
    25          {{/if}}
    26        </div>
    27        `,
    28      context: {
    29        staticMetrics: DelayedArray.create([
    30          { timestamp: ts(20), percent: 0.5 },
    31          { timestamp: ts(18), percent: 0.5 },
    32          { timestamp: ts(16), percent: 0.4 },
    33          { timestamp: ts(14), percent: 0.3 },
    34          { timestamp: ts(12), percent: 0.9 },
    35          { timestamp: ts(10), percent: 0.3 },
    36          { timestamp: ts(8), percent: 0.3 },
    37          { timestamp: ts(6), percent: 0.4 },
    38          { timestamp: ts(4), percent: 0.5 },
    39          { timestamp: ts(2), percent: 0.6 },
    40          { timestamp: ts(0), percent: 0.6 },
    41        ]),
    42      },
    43    };
    44  };
    45  
    46  export let HighLowComparison = () => {
    47    return {
    48      template: hbs`
    49        <h5 class="title is-5">Stats Time Series high/low comparison</h5>
    50        <div class="columns">
    51          <div class="block column" style="height:200px; width:400px">
    52            {{#if data.metricsHigh}}
    53              <StatsTimeSeries @data={{data.metricsHigh}} @chartClass="is-info" />
    54            {{/if}}
    55          </div>
    56          <div class="block column" style="height:200px; width:400px">
    57            {{#if data.metricsLow}}
    58              <StatsTimeSeries @data={{data.metricsLow}} @chartClass="is-info" />
    59            {{/if}}
    60          </div>
    61        </div>
    62        <p class="annotation">Line charts, and therefore stats time series charts, use a letant linear gradient with a height equal to the canvas. This makes the color intensity of the gradient at values consistent across charts as long as those charts have the same y-axis domain.</p>
    63        <p class="annotation">This is used to great effect with stats charts since they all have a y-axis domain of 0-100%.</p>
    64        `,
    65      context: {
    66        data: EmberObject.extend({
    67          timerTicks: 0,
    68  
    69          startTimer: on('init', function() {
    70            this.set(
    71              'timer',
    72              setInterval(() => {
    73                let metricsHigh = this.metricsHigh;
    74                let prev = metricsHigh.length ? metricsHigh[metricsHigh.length - 1].percent : 0.9;
    75                this.appendTSValue(
    76                  metricsHigh,
    77                  Math.min(Math.max(prev + Math.random() * 0.05 - 0.025, 0.5), 1)
    78                );
    79  
    80                let metricsLow = this.metricsLow;
    81                let prev2 = metricsLow.length ? metricsLow[metricsLow.length - 1].percent : 0.1;
    82                this.appendTSValue(
    83                  metricsLow,
    84                  Math.min(Math.max(prev2 + Math.random() * 0.05 - 0.025, 0), 0.5)
    85                );
    86              }, 1000)
    87            );
    88          }),
    89  
    90          appendTSValue(array, percent, maxLength = 300) {
    91            array.addObject({
    92              timestamp: Date.now(),
    93              percent,
    94            });
    95  
    96            if (array.length > maxLength) {
    97              array.splice(0, array.length - maxLength);
    98            }
    99          },
   100  
   101          willDestroy() {
   102            clearInterval(this.timer);
   103          },
   104  
   105          metricsHigh: computed(() => {
   106            return [];
   107          }),
   108  
   109          metricsLow: computed(() => {
   110            return [];
   111          }),
   112  
   113          secondsFormat() {
   114            return date => moment(date).format('HH:mm:ss');
   115          },
   116        }).create(),
   117      },
   118    };
   119  };