diff --git a/ui/app/components/freestyle/sg-line-chart.js b/ui/app/components/freestyle/sg-line-chart.js
index a149830e0..145bcbabe 100644
--- a/ui/app/components/freestyle/sg-line-chart.js
+++ b/ui/app/components/freestyle/sg-line-chart.js
@@ -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');
},
diff --git a/ui/app/components/freestyle/sg-stats-time-series.js b/ui/app/components/freestyle/sg-stats-time-series.js
new file mode 100644
index 000000000..ac2a44597
--- /dev/null
+++ b/ui/app/components/freestyle/sg-stats-time-series.js
@@ -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');
+ },
+});
diff --git a/ui/app/templates/components/freestyle/sg-line-chart.hbs b/ui/app/templates/components/freestyle/sg-line-chart.hbs
index cdb7d081a..67dd939b0 100644
--- a/ui/app/templates/components/freestyle/sg-line-chart.hbs
+++ b/ui/app/templates/components/freestyle/sg-line-chart.hbs
@@ -30,14 +30,3 @@
xFormat=secondsFormat}}
{{/freestyle-usage}}
-
-{{#freestyle-usage "stats-chart"}}
-
-
- {{stats-time-series data=metrics chartClass="is-info"}}
-
-
- {{stats-time-series data=metrics2 chartClass="is-info"}}
-
-
+ {{stats-time-series data=staticMetrics chartClass="is-primary"}}
+
+{{/freestyle-usage}}
+
+{{#freestyle-usage "stats-time-series-comparison" title="Stats Time Series High/Low Comparison"}}
+
+
+ {{stats-time-series data=metricsHigh chartClass="is-info"}}
+
+
+ {{stats-time-series data=metricsLow chartClass="is-info"}}
+
+
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.
+ This is used to great effect with stats charts since they all have a y-axis domain of 0-100%.
+{{/freestyle-annotation}}
diff --git a/ui/app/templates/freestyle.hbs b/ui/app/templates/freestyle.hbs
index 5f9c9489c..87bdb7c76 100644
--- a/ui/app/templates/freestyle.hbs
+++ b/ui/app/templates/freestyle.hbs
@@ -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}}