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