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 });