Refactor stats-time-series to allow for multiple series

ui/app/components/stats-time-series.js

@@ -15,6 +15,10 @@ export default class StatsTimeSeries extends Component {
     return d3Format.format('.1~%');
   }
 
+  get useDefaults() {
+    return this.args.useDefaults != null ? this.args.useDefaults : true;
+  }
+
   // Specific a11y descriptors
   get description() {
     const data = this.args.data;
@@ -44,7 +48,7 @@ export default class StatsTimeSeries extends Component {
   }
 
   yScale(data, xAxisOffset) {
-    const yValues = (data || []).mapBy('percent');
+    const yValues = (data || []).mapBy(this.args.dataProp ? 'percentStack' : 'percent');
 
     let [low, high] = [0, 1];
     if (yValues.compact().length) {

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

@@ -1,26 +1,31 @@
 <LineChart
   @data={{@data}}
+  @dataProp={{@dataProp}}
   @xProp="timestamp"
-  @yProp="percent"
+  @yProp={{if @dataProp "percentStack" "percent"}}
   @chartClass={{@chartClass}}
   @timeseries={{true}}
   @title="Stats Time Series Chart"
   @description={{this.description}}
-  @xScale={{this.xScale}}
-  @yScale={{this.yScale}}
+  @xScale={{bind this.xScale this}}
+  @yScale={{bind this.yScale this}}
   @xFormat={{this.xFormat}}
   @yFormat={{this.yFormat}}>
   <:svg as |c|>
-    <c.Area @data={{@data}} @colorClass={{@chartClass}} />
+    {{#if this.useDefaults}}
+      <c.Area @data={{@data}} @colorClass={{@chartClass}} />
+    {{/if}}
     {{yield c to="svg"}}
   </:svg>
   <:after as |c|>
-    <c.Tooltip class="is-snappy" as |series datum|>
-      <li>
-        <span class="label"><span class="color-swatch {{@chartClass}}" />{{datum.formattedX}}</span>
-        <span class="value">{{datum.formattedY}}</span>
-      </li>
-    </c.Tooltip>
+    {{#if this.useDefaults}}
+      <c.Tooltip class="is-snappy" as |series datum|>
+        <li>
+          <span class="label"><span class="color-swatch {{@chartClass}}" />{{datum.formattedX}}</span>
+          <span class="value">{{datum.formattedY}}</span>
+        </li>
+      </c.Tooltip>
+    {{/if}}
     {{yield c to="after"}}
   </:after>
 </LineChart>