GUI -- Fixed intent perf GUI styling.

Change-Id: I552d3a50f7f4dd5bb1df7115c15eb6a04f538378
diff --git a/apps/test/intent-perf/src/main/resources/app/view/intentPerf/Xdata.csv b/apps/test/intent-perf/src/main/resources/app/view/intentPerf/Xdata.csv
deleted file mode 100644
index 1673d26..0000000
--- a/apps/test/intent-perf/src/main/resources/app/view/intentPerf/Xdata.csv
+++ /dev/null
@@ -1,19 +0,0 @@
-date,value,node
-00:55:15,68.38,node1
-00:55:15,55.61,node2
-00:55:15,74.00,node3
-00:55:30,74.20,node1
-00:55:30,77.60,node2
-00:55:30,74.80,node3
-00:55:45,74.60,node1
-00:55:45,72.80,node2
-00:55:45,77.00,node3
-00:56:00,73.60,node1
-00:56:00,75.00,node2
-00:56:00,76.98,node3
-00:56:15,75.82,node1
-00:56:15,75.40,node2
-00:56:15,76.00,node3
-00:56:30,75.60,node1
-00:56:30,74.59,node2
-00:56:30,74.01,node3
\ No newline at end of file
diff --git a/apps/test/intent-perf/src/main/resources/app/view/intentPerf/data.csv b/apps/test/intent-perf/src/main/resources/app/view/intentPerf/data.csv
deleted file mode 100644
index f8f9938..0000000
--- a/apps/test/intent-perf/src/main/resources/app/view/intentPerf/data.csv
+++ /dev/null
@@ -1,19 +0,0 @@
-key,value,date
-Group1,37,00:23:00
-Group2,12,00:23:00
-Group3,46,00:23:00
-Group1,32,00:23:05
-Group2,19,00:23:05
-Group3,42,00:23:05
-Group1,45,00:23:10
-Group2,16,00:23:10
-Group3,44,00:23:10
-Group1,24,00:23:15
-Group2,52,00:23:15
-Group3,64,00:23:15
-Group1,34,00:23:20
-Group2,62,00:23:20
-Group3,74,00:23:20
-Group1,34,00:23:25
-Group2,62,00:23:25
-Group3,74,00:23:25
\ No newline at end of file
diff --git a/apps/test/intent-perf/src/main/resources/app/view/intentPerf/intentPerf.css b/apps/test/intent-perf/src/main/resources/app/view/intentPerf/intentPerf.css
index d98b620..15e95d5 100644
--- a/apps/test/intent-perf/src/main/resources/app/view/intentPerf/intentPerf.css
+++ b/apps/test/intent-perf/src/main/resources/app/view/intentPerf/intentPerf.css
@@ -22,9 +22,8 @@
     font: 12px sans-serif;
 }
 
-.line {
+.line,.lineTotal {
     fill: none;
-    stroke: #000;
     stroke-width: 2px;
 }
 
@@ -37,16 +36,20 @@
 
 .light .axis path,
 .light .axis line,
+.light .lineTotal {
+    stroke: #333;
+}
+
 .light .axis text {
-    stroke: #999;
+    fill: #333;
 }
 
 .dark .axis path,
 .dark .axis line,
-.dark .axis text {
+.dark .lineTotal {
     stroke: #eee;
 }
 
-.axis text {
-    stroke-width: 0.3;
-}
\ No newline at end of file
+.dark .axis text {
+    fill: #eee;
+}
diff --git a/apps/test/intent-perf/src/main/resources/app/view/intentPerf/intentPerf.js b/apps/test/intent-perf/src/main/resources/app/view/intentPerf/intentPerf.js
index b578163..94304c7 100644
--- a/apps/test/intent-perf/src/main/resources/app/view/intentPerf/intentPerf.js
+++ b/apps/test/intent-perf/src/main/resources/app/view/intentPerf/intentPerf.js
@@ -31,7 +31,7 @@
 
     // ==========================
 
-    function createGraph(h) {
+    function createGraph(h, samples) {
         var stopped = false,
             n = 243,
             duration = 750,
@@ -75,7 +75,27 @@
         headers.forEach(function (h, li) {
             // Prime the data to match the headers and zero it out.
             data[li] = d3.range(n).map(function() { return 0 });
-            theSample[li] = 0;
+
+            if (li < headers.length - 1) {
+                samples.forEach(function (s, i) {
+                    var di = dataIndex(s.time);
+                    if (di >= 0) {
+                        data[li][di] = s.data[li];
+                    }
+                });
+
+                data[li].forEach(function (d, i) {
+                    if (!d && i > 0) {
+                        data[li][i] = data[li][i - 1];
+                    }
+                });
+            } else {
+                data[li].forEach(function (t, i) {
+                    for (var si = 0; si < headers.length - 1; si++) {
+                        data[li][i] = data[si][i];
+                    }
+                });
+            }
 
             // Create the lines
             lines[li] = d3.svg.line()
@@ -88,15 +108,24 @@
                 .attr("clip-path", "url(#intent-perf-clip)")
                 .append("path")
                 .datum(function () { return data[li]; })
-                .attr("id", "line" + li)
-                .style("stroke", lineColor(li))
-                .attr("class", "line");
+                .attr("id", "line" + li);
+
+            if (li < headers.length - 1) {
+                paths[li].attr("class", "line").style("stroke", lineColor(li));
+            } else {
+                paths[li].attr("class", "lineTotal");
+            }
         });
 
+        function dataIndex(time) {
+            var delta = now.getTime() - time;
+            var di = Math.round(n - 2 - (delta / duration));
+            // $log.info('now=' + now.getTime() + '; then=' + time + '; delta=' + delta + '; di=' + di + ';');
+            return di >= n || di < 0 ? -1 : di;
+        }
+
         function lineColor(li) {
-            return li < headers.length - 1 ?
-                sus.cat7().getColor(li, false, ts.theme()) :
-                ts.theme() === 'light' ? '#333' : '#eee';
+            return sus.cat7().getColor(li, false, ts.theme());
         }
 
         function tick() {
@@ -130,13 +159,17 @@
         function start() {
             stopped = false;
             headers.forEach(function (h, li) {
-                theSample[li] = 0;
+                theSample[li] = data[li][n-1];
             });
             tick();
         }
 
         function stop() {
-            stopped = true;
+            headers.forEach(function (h, li) {
+                theSample[li] = 0;
+            });
+            // Schedule delayed stop to allow 0s to render.
+            setTimeout(function () { stopped = true; }, 1000);
         }
 
         function resize(dim) {
@@ -190,7 +223,7 @@
     function createAndInitGraph(d) {
         if (!graph) {
             d.headers.push("total");
-            graph = createGraph(d.headers);
+            graph = createGraph(d.headers, d.samples);
         }
         graph.start();
     }
@@ -213,7 +246,7 @@
 
     function createHandlerMap() {
         handlerMap = {
-            intentPerfHeaders: createAndInitGraph,
+            intentPerfInit: createAndInitGraph,
             intentPerfSample: recordSample
         };
     }