// change to any of the .CSV files (latency, duration, etc)
// e.g. blocked, connected, duration, latency, req_body, res_body, rx, service, tx
var dataPath = "latency.csv";
var heatmap = Heatmap();
var barChart = BarChart()

var parseDate = d3.timeParse("%Y-%m-%d-%H");
var formatDate = d3.timeFormat("%m/%d @ %H");
function coerceTypes(d) {
  d.date = parseDate(d.date);
  d.bucket = +d.bucket;
  d.count = +d.count;
}

d3.csv(dataPath, function(error, rows) { window.rows = rows
  if (error) throw error;

  // Coerce the CSV data to the appropriate types.
  rows.forEach(coerceTypes);

  var keys = {
    bucket: d => d.bucket,
    date: _.flow(d => d.date, formatDate)
  };

  var nest = {
    byBucket: d3.nest().key(keys.bucket),
    byDate: d3.nest().key(keys.date)
  };

  var map = {
    byBucket: nest.byBucket.map(rows, d3.map),
    byDate: nest.byDate.map(rows, d3.map)
  };

	d3.select('.heatmap-container')
    .datum(rows)
    .call(heatmap)
  
  var histoContainer = d3.select('.histogram-container')
  var tooltip = heatmap.svg().append('text')
    .attr("transform", "translate(" + (heatmap.width()+70) + ", 200)")
    .attr("text-anchor", "end")

  heatmap.chart()
    .on('mouseover', function (d, i, all) {
      var histogram = map.byDate.get(keys.date(d))
      var data2 = histogram.map(d => ({x: d.bucket, y: d.count }))

      histoContainer
        .datum(data2)
        .call(barChart);

      var message = d.count + ' of ' + all.length + ' @ ' + d.bucket
      tooltip.text(message); 
    })
    .on('mouseout', function (d) { tooltip.text('') })

});