/*
*    main.js
*    Mastering Data Visualization with D3.js
*    Project 1 - Star Break Coffee
*/

var margin = {left: 100, right: 10, top: 10, bottom: 100};

var width = 1200 * 0.8 - margin.left - margin.right;
var height = window.innerHeight * 0.8 - margin.top - margin.bottom;

var g = d3.select('#chart-area')
  .append('svg')
  .attr('width', 1200 + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
    .append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

// X Label
g.append('text')
  .attr('class', 'x axis-label')
  .attr('x', width / 2)
  .attr('y', height + 80)
  .attr('font-size', '20px')
  .attr('text-anchor', 'middle')
  .text('Month');

// Y Label
g.append('text')
  .attr('class', 'y axis-label')
  .attr('x', -(height / 2))
  .attr('y', -60)
  .attr('font-size', '20px')
  .attr('text-anchor', 'middle')
  .attr('transform', 'rotate(-90)')
  .text('Revenue ($)');


d3.json('data/revenues.json', function(data){
  data.forEach(function(data){
    data.revenue = +data.revenue;
    data.profit = +data.profit;
  });

  var x = d3.scaleBand()
    .domain(data.map(function(d){
      return d.month;
    }))
    .range([0, width])
    .paddingInner(0.3)
    .paddingOuter(0.3)

  var y = d3.scaleLinear()
    .domain([0, d3.max(data, function(d){
      return d.revenue;
    })])
    .range([height, 0])

    // X i Y call
    var xAxisCall = d3.axisBottom(x);
    g.append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0, ' + height + ')')
      .call(xAxisCall)
      .selectAll('text')
        .attr('x', '-5')
        .attr('y', '10')
        .attr('text-anchor', 'end')
        .attr('transform', 'rotate(-40)')

    var yAxisCall = d3.axisLeft(y)
      .ticks(10)
      .tickFormat(function(d){
        return d + '$';
      });
    g.append('g')
      .attr('class', 'y-axis')
      .call(yAxisCall);

    var rects = g.selectAll('rect')
      .data(data)

    rects.enter()
      .append('rect')
        .attr('x', (d, i) => {
          return x(d.month);
        })
        .attr('y', (d, i) => {
          return y(d.revenue);
        })
        .attr('width', x.bandwidth)
        .attr('height', (d) => {
          return height - y(d.revenue);
        })
        .attr('fill', (d, i) =>{
          console.log(i)
          if (i % 2 == 0){
            return 'grey';
          }
          else {
            return 'black';
          }
        });


})