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