Split the line-chart and stats-time-series freestyle entries

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

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');
+  },
+});

ui/app/templates/components/freestyle/sg-line-chart.hbs

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

ui/app/templates/components/freestyle/sg-stats-time-series.hbs

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

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}}
 </div>