Split the line-chart and stats-time-series freestyle entries
This commit is contained in:
Michael Lange
parent
569ba3c48a
commit
63b89904f3
|
|
@ -16,28 +16,6 @@ export default Component.extend({
|
|||
if (ref.length > 60) {
|
||||
ref.splice(0, ref.length - 60);
|
||||
}
|
||||
|
||||
if (this.get('timerTicks') % 2 === 0) {
|
||||
const ref2 = this.get('metrics');
|
||||
const prev = ref2.length ? ref2[ref2.length - 1].value : 0.9;
|
||||
ref2.addObject({
|
||||
timestamp: Date.now(),
|
||||
value: Math.min(Math.max(prev + Math.random() * 0.05 - 0.025, 0), 1),
|
||||
});
|
||||
if (ref2.length > 300) {
|
||||
ref2.splice(0, ref2.length - 300);
|
||||
}
|
||||
|
||||
const ref3 = this.get('metrics2');
|
||||
const prev2 = ref3.length ? ref3[ref3.length - 1].value : 0.1;
|
||||
ref3.addObject({
|
||||
timestamp: Date.now(),
|
||||
value: Math.min(Math.max(prev2 + Math.random() * 0.05 - 0.025, 0), 1),
|
||||
});
|
||||
if (ref3.length > 300) {
|
||||
ref3.splice(0, ref3.length - 300);
|
||||
}
|
||||
}
|
||||
}, 500)
|
||||
);
|
||||
}.on('init'),
|
||||
|
|
@ -78,14 +56,6 @@ export default Component.extend({
|
|||
return [];
|
||||
}),
|
||||
|
||||
metrics: computed(() => {
|
||||
return [];
|
||||
}),
|
||||
|
||||
metrics2: computed(() => {
|
||||
return [];
|
||||
}),
|
||||
|
||||
secondsFormat() {
|
||||
return d3TimeFormat.timeFormat('%H:%M:%S');
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
import Component from '@ember/component';
|
||||
import { computed } from '@ember/object';
|
||||
import d3TimeFormat from 'd3-time-format';
|
||||
import moment from 'moment';
|
||||
|
||||
export default Component.extend({
|
||||
timerTicks: 0,
|
||||
|
||||
startTimer: function() {
|
||||
this.set(
|
||||
'timer',
|
||||
setInterval(() => {
|
||||
const metricsHigh = this.get('metricsHigh');
|
||||
const prev = metricsHigh.length ? metricsHigh[metricsHigh.length - 1].value : 0.9;
|
||||
this.appendTSValue(
|
||||
metricsHigh,
|
||||
Math.min(Math.max(prev + Math.random() * 0.05 - 0.025, 0.5), 1)
|
||||
);
|
||||
|
||||
const metricsLow = this.get('metricsLow');
|
||||
const prev2 = metricsLow.length ? metricsLow[metricsLow.length - 1].value : 0.1;
|
||||
this.appendTSValue(
|
||||
metricsLow,
|
||||
Math.min(Math.max(prev2 + Math.random() * 0.05 - 0.025, 0), 0.5)
|
||||
);
|
||||
}, 1000)
|
||||
);
|
||||
}.on('init'),
|
||||
|
||||
appendTSValue(array, value, maxLength = 300) {
|
||||
array.addObject({
|
||||
timestamp: Date.now(),
|
||||
value,
|
||||
});
|
||||
|
||||
if (array.length > maxLength) {
|
||||
array.splice(0, array.length - maxLength);
|
||||
}
|
||||
},
|
||||
|
||||
willDestroy() {
|
||||
clearInterval(this.get('timer'));
|
||||
},
|
||||
|
||||
metricsHigh: computed(() => {
|
||||
return [];
|
||||
}),
|
||||
|
||||
metricsLow: computed(() => {
|
||||
return [];
|
||||
}),
|
||||
|
||||
staticMetrics: computed(() => {
|
||||
const ts = offset =>
|
||||
moment()
|
||||
.subtract(offset, 'm')
|
||||
.toDate();
|
||||
return [
|
||||
{ timestamp: ts(20), value: 0.5 },
|
||||
{ timestamp: ts(18), value: 0.5 },
|
||||
{ timestamp: ts(16), value: 0.4 },
|
||||
{ timestamp: ts(14), value: 0.3 },
|
||||
{ timestamp: ts(12), value: 0.9 },
|
||||
{ timestamp: ts(10), value: 0.3 },
|
||||
{ timestamp: ts(8), value: 0.3 },
|
||||
{ timestamp: ts(6), value: 0.4 },
|
||||
{ timestamp: ts(4), value: 0.5 },
|
||||
{ timestamp: ts(2), value: 0.6 },
|
||||
{ timestamp: ts(0), value: 0.6 },
|
||||
];
|
||||
}),
|
||||
|
||||
secondsFormat() {
|
||||
return d3TimeFormat.timeFormat('%H:%M:%S');
|
||||
},
|
||||
});
|
||||
|
|
@ -30,14 +30,3 @@
|
|||
xFormat=secondsFormat}}
|
||||
</div>
|
||||
{{/freestyle-usage}}
|
||||
|
||||
{{#freestyle-usage "stats-chart"}}
|
||||
<div class="columns">
|
||||
<div class="block column" style="height:200px; width:400px">
|
||||
{{stats-time-series data=metrics chartClass="is-info"}}
|
||||
</div>
|
||||
<div class="block column" style="height:200px; width:400px">
|
||||
{{stats-time-series data=metrics2 chartClass="is-info"}}
|
||||
</div>
|
||||
</div>
|
||||
{{/freestyle-usage}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
{{#freestyle-usage "stats-time-series-standard" title="Stats Time Series"}}
|
||||
<div class="block" style="height:100px; width: 400px;">
|
||||
{{stats-time-series data=staticMetrics chartClass="is-primary"}}
|
||||
</div>
|
||||
{{/freestyle-usage}}
|
||||
|
||||
{{#freestyle-usage "stats-time-series-comparison" title="Stats Time Series High/Low Comparison"}}
|
||||
<div class="columns">
|
||||
<div class="block column" style="height:200px; width:400px">
|
||||
{{stats-time-series data=metricsHigh chartClass="is-info"}}
|
||||
</div>
|
||||
<div class="block column" style="height:200px; width:400px">
|
||||
{{stats-time-series data=metricsLow chartClass="is-info"}}
|
||||
</div>
|
||||
</div>
|
||||
{{/freestyle-usage}}
|
||||
{{#freestyle-annotation}}
|
||||
<p>Line charts, and therefore stats time series charts, use a constant 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>
|
||||
<p>This is used to great effect with stats charts since they all have a y-axis domain of 0-100%.</p>
|
||||
{{/freestyle-annotation}}
|
||||
|
|
@ -115,6 +115,10 @@
|
|||
{{#section.subsection name="Progress Bar"}}
|
||||
{{freestyle/sg-progress-bar}}
|
||||
{{/section.subsection}}
|
||||
|
||||
{{#section.subsection name="Stats Time Series"}}
|
||||
{{freestyle/sg-stats-time-series}}
|
||||
{{/section.subsection}}
|
||||
{{/freestyle-section}}
|
||||
{{/freestyle-guide}}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue