github.com/manicqin/nomad@v0.9.5/ui/app/components/freestyle/sg-line-chart.js (about)

     1  import Component from '@ember/component';
     2  import { computed } from '@ember/object';
     3  import { on } from '@ember/object/evented';
     4  import d3TimeFormat from 'd3-time-format';
     5  
     6  export default Component.extend({
     7    timerTicks: 0,
     8  
     9    startTimer: on('init', function() {
    10      this.set(
    11        'timer',
    12        setInterval(() => {
    13          this.incrementProperty('timerTicks');
    14  
    15          const ref = this.lineChartLive;
    16          ref.addObject({ ts: Date.now(), val: Math.random() * 30 + 20 });
    17          if (ref.length > 60) {
    18            ref.splice(0, ref.length - 60);
    19          }
    20        }, 500)
    21      );
    22    }),
    23  
    24    willDestroy() {
    25      clearInterval(this.timer);
    26    },
    27  
    28    lineChartData: computed(() => {
    29      return [
    30        { year: 2010, value: 10 },
    31        { year: 2011, value: 10 },
    32        { year: 2012, value: 20 },
    33        { year: 2013, value: 30 },
    34        { year: 2014, value: 50 },
    35        { year: 2015, value: 80 },
    36        { year: 2016, value: 130 },
    37        { year: 2017, value: 210 },
    38        { year: 2018, value: 340 },
    39      ];
    40    }),
    41  
    42    lineChartMild: computed(() => {
    43      return [
    44        { year: 2010, value: 100 },
    45        { year: 2011, value: 90 },
    46        { year: 2012, value: 120 },
    47        { year: 2013, value: 130 },
    48        { year: 2014, value: 115 },
    49        { year: 2015, value: 105 },
    50        { year: 2016, value: 90 },
    51        { year: 2017, value: 85 },
    52        { year: 2018, value: 90 },
    53      ];
    54    }),
    55  
    56    lineChartGapData: computed(() => {
    57      return [
    58        { year: 2010, value: 10 },
    59        { year: 2011, value: 10 },
    60        { year: 2012, value: null },
    61        { year: 2013, value: 30 },
    62        { year: 2014, value: 50 },
    63        { year: 2015, value: 80 },
    64        { year: 2016, value: null },
    65        { year: 2017, value: 210 },
    66        { year: 2018, value: 340 },
    67      ];
    68    }),
    69  
    70    lineChartLive: computed(() => {
    71      return [];
    72    }),
    73  
    74    secondsFormat() {
    75      return d3TimeFormat.timeFormat('%H:%M:%S');
    76    },
    77  });