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