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

/**
 * @provides javelin-behavior-line-chart
 * @requires javelin-behavior
 *           javelin-dom
 *           javelin-vector
 *           phui-chart-css
 */

JX.behavior('line-chart', function(config) {

  function fn(n) {
    return n + '(' + JX.$A(arguments).slice(1).join(', ') + ')';
  }

  var h = JX.$(config.hardpoint);
  var d = JX.Vector.getDim(h);

  var padding = {
    top: 24,
    left: 48,
    bottom: 48,
    right: 32
  };

  var size = {
    frameWidth: d.x,
    frameHeight: d.y,
  };

  size.width = size.frameWidth - padding.left - padding.right;
  size.height = size.frameHeight - padding.top - padding.bottom;

  var x = d3.time.scale()
    .range([0, size.width]);

  var y = d3.scale.linear()
    .range([size.height, 0]);

  var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom');

  var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left');

  var svg = d3.select('#' + config.hardpoint).append('svg')
    .attr('width', size.frameWidth)
    .attr('height', size.frameHeight)
    .attr('class', 'chart');

  var g = svg.append('g')
      .attr('transform', fn('translate', padding.left, padding.top));

  g.append('rect')
      .attr('class', 'inner')
      .attr('width', size.width)
      .attr('height', size.height);

  var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.count); });

  var data = [];
  for (var ii = 0; ii < config.x[0].length; ii++) {
    data.push(
      {
        date: new Date(config.x[0][ii] * 1000),
        count: +config.y[0][ii]
      });
  }

  x.domain(d3.extent(data, function(d) { return d.date; }));

  var yex = d3.extent(data, function(d) { return d.count; });
  yex[0] = 0;
  yex[1] = yex[1] * 1.05;
  y.domain(yex);

  g.append('path')
    .datum(data)
    .attr('class', 'line')
    .attr('d', line);

  g.append('g')
    .attr('class', 'x axis')
    .attr('transform', fn('translate', 0, size.height))
    .call(xAxis);

  g.append('g')
    .attr('class', 'y axis')
    .attr('transform', fn('translate', 0, 0))
    .call(yAxis);

  var div = d3.select('body')
    .append('div')
    .attr('class', 'chart-tooltip')
    .style('opacity', 0);

  g.selectAll('dot')
    .data(data)
    .enter()
    .append('circle')
    .attr('class', 'point')
    .attr('r', 3)
    .attr('cx', function(d) { return x(d.date); })
    .attr('cy', function(d) { return y(d.count); })
    .on('mouseover', function(d) {
      var d_y = d.date.getFullYear();
      var d_m = d.date.getMonth();
      var d_d = d.date.getDate();

      div
        .html(d_y + '-' + d_m + '-' + d_d + ': ' + d.count)
        .style('opacity', 0.9)
        .style('left', (d3.event.pageX - 60) + 'px')
        .style('top', (d3.event.pageY - 38) + 'px');
      })
    .on('mouseout', function() {
      div.style('opacity', 0);
    });

});