Diagnostics: Add moving plot with data snapshots

https://screenshot.googleplex.com/4Cu2NuqTLYKXMpM

Bug: 1125150
Change-Id: I6211f47c2d05405bfad0e935325622caede41fbb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2472202Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Commit-Queue: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#817306}

chromeos/components/diagnostics_ui/resources/realtime_cpu_chart.js

@@ -7,6 +7,7 @@ import './diagnostics_shared_css.js';
 
 import './d3.min.js';
 
+import {assert} from 'chrome://resources/js/assert.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 /**
@@ -34,6 +35,12 @@ Polymer({
   /** @private {!Array<Object>} */
   data_: [],
 
+  /**
+   * Unix timestamp in milliseconds of last data update.
+   * @private {number}
+   */
+  dataLastUpdated_: 0,
+
   properties: {
     user: {
       type: Number,
@@ -51,6 +58,12 @@ Polymer({
       value: 50,
     },
 
+    /** @private */
+    refreshInterval_: {
+      type: Number,
+      value: 200,  // in milliseconds.
+    },
+
     /** @private */
     width_: {
       type: Number,
@@ -86,10 +99,9 @@ Polymer({
 
   /** @override */
   created() {
-    // TODO(joonbug): Remove this when chart is ready.
-    // Initialize entire data array with a random data for now.
+    // Initialize the data array with 0s initially.
     for (var i = 0; i < this.numDataPoints_; ++i) {
-      this.data_.push({user: 25, system: 65});
+      this.data_.push({user: 0, system: 0});
     }
   },
 
@@ -97,8 +109,6 @@ Polymer({
   ready() {
     this.setScaling_();
     this.initializeChart_();
-    this.drawChartLine_('user-line');
-    this.drawChartLine_('system-line');
   },
 
   /**
@@ -122,10 +132,12 @@ Polymer({
     this.yAxisScaleFn_ =
         d3.scaleLinear().domain([0, 100]).range([this.graphHeight_, 0]);
 
-    // Map x-values [0, numDataPoints] to [0, graphWidth] linearly.
-    // Data value of 0 will map to 0, and numDataPoints maps to graphWidth.
+    // Map x-values [0, numDataPoints - 3] to [0, graphWidth] linearly.
+    // Data value of 0 maps to 0, and (numDataPoints - 3) maps to graphWidth.
+    // numDataPoints is subtracted since 1) data array is zero based, and
+    // 2) to smooth out the curve function.
     this.xAxisScaleFn_ =
-        d3.scaleLinear().domain([0, this.numDataPoints_]).range([
+        d3.scaleLinear().domain([0, this.numDataPoints_ - 3]).range([
           0, this.graphWidth_
         ]);
   },
@@ -148,6 +160,25 @@ Polymer({
                 .tickSize(-this.graphWidth_)  // Extend the ticks into the
                                               // entire graph as gridlines.
         );
+
+    const plotGroup = d3.select(this.$$('#plotGroup'));
+
+    // Feed data array to the plot group.
+    plotGroup.datum(this.data_);
+
+    // Select each line and configure the transition for animation.
+    // d3.transition API @ https://github.com/d3/d3-transition#d3-transition.
+    // d3.easing API @ https://github.com/d3/d3-ease#api-reference.
+    plotGroup.select('.user-line')
+        .transition()
+        .duration(this.refreshInterval_)
+        .ease(d3.easeLinear)  // Linear transition
+        .on('start', this.drawChartLine_.bind(this, 'user-line'));
+    plotGroup.select('.system-line')
+        .transition()
+        .duration(this.refreshInterval_)
+        .ease(d3.easeLinear)  // Linear transition
+        .on('start', this.drawChartLine_.bind(this, 'system-line'));
   },
 
   /**
@@ -167,16 +198,45 @@ Polymer({
                lineClass === 'user-line' ? data.user : data.system));
   },
 
+  /**
+   * Takes a snapshot of current CPU readings and appends to the data array.
+   * This method is called by each line after each transition.
+   * @private
+   */
+  appendDataSnapshot_() {
+    const now = new Date().getTime();
+
+    // We only want to append the data once per refreshInterval cycle even with
+    // multiple lines. Roughly limit the call so that at least half of the
+    // refreshInterval has elapsed since the last update.
+    if (now - this.dataLastUpdated_ > this.refreshInterval_ / 2) {
+      this.dataLastUpdated_ = now;
+      this.data_.push({user: this.user, system: this.system});
+      this.data_.shift();
+    }
+  },
+
   /**
    * @param {string} lineClass class string for <path> element.
    * @private
    */
   drawChartLine_(lineClass) {
-    const lineElement = this.$$(`path.${lineClass}`);
+    this.appendDataSnapshot_();
+
+    const lineElement = assert(this.$$(`path.${lineClass}`));
 
-    // Attach data array and draw the line
+    // Reset the animation (transform) and redraw the line with new data.
+    // this.data_ is already associated with the plotGroup, so no need to
+    // specify it directly here.
     d3.select(lineElement)
-        .datum(this.data_)
-        .attr('d', this.getLineDefinition_(lineClass));
+        .attr('d', this.getLineDefinition_(lineClass))
+        .attr('transform', null);
+
+    // Start animation of the line towards left by one tick outside the chart
+    // boundary, then repeat the process.
+    d3.active(lineElement)
+        .attr('transform', 'translate(' + this.xAxisScaleFn_(-1) + ', 0)')
+        .transition()
+        .on('start', this.drawChartLine_.bind(this, lineClass));
   },
 });