let url = 'https://api.github.com/users/mandymichael/events';

const fetchData = async function(url) {
  /* Fetch raw data from GH API*/
  const response = await fetch(url);
  const rawData = await response.json();

  /* Reduce raw array in a count of commits by day */
  const simpleData = rawData
  .filter(function(item) {
    return item.type === "PushEvent";
  })
  .map(function(item) {
    return {
      created_at: item.created_at.substr(0,10),
      type: item.type
    }
  });

  const groupedData = _.chain(simpleData)
  .groupBy('created_at')
  .value();

  /* Create a data array identical to the one required in the below demo code */
  let data = [];
  for (const date in groupedData) {
    data.push({
      name: date,
      value: groupedData[date].length
    })
  }
  console.log(data);
  /* The following code was taken directly from this tutorial:
          https://www.pluralsight.com/guides/guide-getting-started-with-d3
      */

  /* Original demo data */
  /*
      var data = [
        {name: "A", value: "0.08167"},
        {name: "B", value: "0.01492"},
        {name: "C", value: "0.02782"},
        {name: "D", value: "0.04253"},
        {name: "E", value: "0.12702"},
        {name: "F", value: "0.02288"},
        {name: "G", value: "0.02015"},
        {name: "H", value: "0.06094"},
        {name: "I", value: "0.06966"},
        {name: "J", value: "0.00153"},
        {name: "K", value: "0.00772"},
        {name: "L", value: "0.04025"},
        {name: "M", value: "0.02406"},
        {name: "N", value: "0.06749"},
        {name: "O", value: "0.07507"},
        {name: "P", value: "0.01929"},
        {name: "Q", value: "0.00095"},
        {name: "R", value: "0.05987"},
        {name: "S", value: "0.06327"},
        {name: "T", value: "0.09056"},
        {name: "U", value: "0.02758"},
        {name: "V", value: "0.00978"},
        {name: "W", value: "0.0236"},
        {name: "X", value: "0.0015"},
        {name: "Y", value: "0.01974"},
        {name: "Z", value: "0.00074"}
      ];
      */

  var height = 400;
  var width = 550;
  var margin = ({top: 20, right: 20, bottom: 20, left: 20});

  var x = d3.scaleBand()
  .domain(data.map(d => d.name))
  .range([margin.left, width - margin.right])
  .padding(0.1);
  var y = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .range([height - margin.bottom, margin.top]);

  var xAxis = g => g
  .attr("transform", `translate(0,${height - margin.bottom})`)
  .call(d3.axisBottom(x));
  var yAxis = g => g
  .attr("transform", `translate(${margin.left},0)`)
  .call(d3.axisLeft(y));

  var svg = d3.select('svg');
  var g = svg.append("g").attr("fill", "orange");

  g.selectAll("rect")
    .data(data)
    .join("rect")
    .attr("x", d => x(d.name))
    .attr("y", d => y(d.value))
    .attr("height", d => y(0) - y(d.value))
    .attr("width", x.bandwidth());

  svg.append("g").call(xAxis);

  svg.append("g").call(yAxis);

}
fetchData(url);