Change pass-fail graph to multi bar chart

This commit changes the pass-fail graph on test page to multi bar chart
graph. I think this is better than the historical bar chart. But the
header of the tooltip is not correct when the flag of
chart.useInteractiveGudeline(true) due to this issue[1]. So I just set
it false as a workaround. We may need to set it true if we want to see
in one tooltip for each data.

[1] https://github.com/novus/nvd3/pull/1722

Closes-Bug: #1611105
Change-Id: I9e418b77eb03956be16de45df701ae94ea762cde

app/js/directives/chart-multi-bar.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var directivesModule = require('./_index.js');
+
+var d3 = require('d3');
+var nv = require('nvd3');
+
+/**
+ * @ngInject
+ */
+function chartMultiBar() {
+  var link = function(scope, el, attrs) {
+    scope.$on('loading-started', function() {
+      el.css({'display' : 'none'});
+    });
+
+    scope.$on('loading-complete', function() {
+      el.css({'display' : 'block'});
+    });
+
+    var chart = null;
+
+    var svg = d3.select(el[0]).append('svg')
+    .attr('width', attrs.width)
+    .attr('height', attrs.height);
+
+    var update = function(data) {
+      if (typeof data === 'undefined') {
+        return;
+      }
+      chart = nv.models.multiBarChart()
+        .margin({right: 100})
+        .x(function(d) { return d.x; })
+        .y(function(d) { return d.y; })
+        // FIXME: workaround for this issue: https://github.com/novus/nvd3/pull/1722
+        .useInteractiveGuideline(false)
+        .stacked(true)
+        .rightAlignYAxis(true);
+      chart.xAxis.tickFormat(function(d, i) { return d3.time.format('%m/%d %H:%M')(new Date(d)); });
+
+      chart.yAxis.tickFormat(d3.format(',.2f'));
+      svg.datum(data).call(chart);
+    };
+
+    scope.$on('windowResize', function() {
+      if (chart !== null) {
+        chart.update();
+      }
+    });
+
+    scope.$watch('data', update);
+  };
+
+  return {
+    restrict: 'EA',
+    scope: {
+      'data': '=',
+      'width': '@',
+      'height': '@'
+    },
+    link: link
+  };
+}
+
+directivesModule.directive('chartMultiBar', chartMultiBar);

app/views/test.html

@@ -33,7 +33,7 @@
                     <h3 class="panel-title">Passes and Failures</h3>
                 </div>
                 <div class="panel-body">
-                    <chart-stack-area data="testCtrl.statusData" width="100%" height="450"></chart-stack-area>
+                    <chart-multi-bar data="testCtrl.statusData" width="100%" height="450"></chart-multi-bar>
                 </div>
             </div>
         </div>