Allow Fact app to draw charts

Summary: For any count fact, allow a chart to be drawn. INCREDIBLY POWERFUL DATA ANALYSIS PLATFORM.

Test Plan: Drew a chart of object counts. Drew the Maniphest burn chart.

Reviewers: vrana, btrahan

Reviewed By: btrahan

CC: aran

Maniphest Tasks: T1562

Differential Revision: https://secure.phabricator.com/D3099

webroot/rsrc/js/application/maniphest/behavior-burn-chart.js

@@ -1,79 +0,0 @@
-/**
- * @provides javelin-behavior-burn-chart
- * @requires javelin-behavior
- *           javelin-dom
- *           javelin-vector
- */
-
-JX.behavior('burn-chart', function(config) {
-
-
-  var h = JX.$(config.hardpoint);
-  var p = JX.$V(h);
-  var d = JX.Vector.getDim(h);
-  var mx = 60;
-  var my = 30;
-
-  var r = Raphael(p.x, p.y, d.x, d.y);
-
-  var l = r.linechart(
-    mx, my,
-    d.x - (2 * mx), d.y - (2 * my),
-    config.x,
-    config.y,
-    {
-      nostroke: false,
-      axis: "0 0 1 1",
-      shade: true,
-      gutter: 1,
-      colors: ['#d06']
-    });
-
-
-  // Convert the epoch timestamps on the X axis into readable dates.
-
-  var n = 2;
-  var ii = 0;
-  var text = l.axis[0].text.items;
-  for (var k in text) {
-    if (ii++ % n) {
-      text[k].attr({text: ''});
-    } else {
-      var cur = text[k].attr('text');
-      var date = new Date(parseInt(cur, 10) * 1000);
-      var str = date.toLocaleDateString();
-      text[k].attr({text: str});
-    }
-  }
-
-  l.hoverColumn(function() {
-
-    var open = 0;
-    for (var ii = 0; ii < config.x[0].length; ii++) {
-      if (config.x[0][ii] > this.axis) {
-        break;
-      }
-      open = config.y[0][ii];
-    }
-
-    var date  = new Date(parseInt(this.axis, 10) * 1000).toLocaleDateString();
-    var total = open + " Open Tasks";
-
-    var tag = r.tag(
-      this.x,
-      this.y[0],
-      [date, total].join("\n"),
-      180,
-      24);
-    tag
-      .insertBefore(this)
-      .attr([{fill : '#fff'}, {fill: '#000'}]);
-
-    this.tags = r.set();
-    this.tags.push(tag);
-  }, function() {
-    this.tags && this.tags.remove();
-  });
-
-});
-

webroot/rsrc/js/application/maniphest/behavior-line-chart.js

@@ -0,0 +1,89 @@
+/**
+ * @provides javelin-behavior-line-chart
+ * @requires javelin-behavior
+ *           javelin-dom
+ *           javelin-vector
+ */
+
+JX.behavior('line-chart', function(config) {
+
+  var h = JX.$(config.hardpoint);
+  var p = JX.$V(h);
+  var d = JX.Vector.getDim(h);
+  var mx = 60;
+  var my = 30;
+
+  var r = Raphael(p.x, p.y, d.x, d.y);
+
+  var l = r.linechart(
+    mx, my,
+    d.x - (2 * mx), d.y - (2 * my),
+    config.x,
+    config.y,
+    {
+      nostroke: false,
+      axis: "0 0 1 1",
+      shade: true,
+      gutter: 1,
+      colors: config.colors || ['#d06']
+    });
+
+  function format(value, type) {
+    switch (type) {
+      case 'epoch':
+        return new Date(parseInt(value, 10) * 1000).toLocaleDateString();
+      case 'int':
+        return parseInt(value, 10);
+      default:
+        return value;
+    }
+  }
+
+  // Format the X axis.
+
+  var n = 2;
+  var ii = 0;
+  var text = l.axis[0].text.items;
+  for (var k in text) {
+    if (ii++ % n) {
+      text[k].attr({text: ''});
+    } else {
+      var cur = text[k].attr('text');
+      str = format(cur, config.xformat);
+      text[k].attr({text: str});
+    }
+  }
+
+  // Show values on hover.
+
+  l.hoverColumn(function() {
+    this.tags = r.set();
+    for (var yy = 0; yy < config.y.length; yy++) {
+      var yvalue = 0;
+      for (var ii = 0; ii < config.x[0].length; ii++) {
+        if (config.x[0][ii] > this.axis) {
+          break;
+        }
+        yvalue = format(config.y[yy][ii], (config.yformat || [])[yy]);
+      }
+
+      var xvalue = format(this.axis, config.xformat);
+
+      var tag = r.tag(
+        this.x,
+        this.y[yy],
+        [xvalue, yvalue].join("\n"),
+        180,
+        24);
+      tag
+        .insertBefore(this)
+        .attr([{fill : '#fff'}, {fill: '#000'}]);
+
+      this.tags.push(tag);
+    }
+  }, function() {
+    this.tags && this.tags.remove();
+  });
+
+});
+