// Variables
var topColor = '';
var barColor = '#D3D3D3';
var bkgColor = '#f2f2f2';
var title = 'AIR QUALITY';
var width = 500;
var height = 200;
var aqcolor = 'yellow';

var fake_cat = 'Moderate'; // most recent cat
var fake_aqi = [52, 14, 54, 86, 2, 1, 12, 24, 11, 97, 54, 42]; // max 500 for US

// Make top div
var div = d3.select('body')
  .append('div')
  .style('height','50px')
  .style('width','100%')
  .style('position','absolute')
  .style('background-color', barColor)
  .text(title);

// Make colored rect
var div = d3.select('body')
  .append('div')
  .style('height','2px')
  .style('width','100%')
  .style('position','absolute')
  .style('background-color', 'yellow');

// svg.selectAll('div')
//   .enter().append('div')
//   //.attr('class', function (d) { return d.class; })
//   .style('position','absolute')
//   .style('top', '10')
//   .style('left', '10')
//   .style('width', '500px')
//   .style('height', '200px')



//   .attr('height','100')
//   .attr('width','100')
//   .attr('fill', barColor)
//   .attr('x','20')
//   .attr('y','200')


// Feel free to change or delete any of the code you see in this editor!
var svg = d3
.select('body')
.append('svg')
.attr('height','100%')
.attr('width','100%')
.style('background-color', bkgColor);

// Make rectangles for barchart
svg
.selectAll('rect')
.data(fake_aqi)
.enter().append('rect')
.attr('height',function(d,i){return d*15;})
.attr('width','50')
.attr('fill',barColor) // Color Sequential Scale
.attr('x',function(d,i){return 60*i;}) // d=datapoint, i=index
.attr('y',function(d,i){return 300-(d*15)}); // invert y position, shift it downwards



// Add text
// svg.append('text').selectAll('tspan')
//   .data(this.fake_cat)
//   .attr('x',23)
//   .attr('y',function(d,i){return 150+(i*50)});

var textArray = [fake_aqi[0], 'Air Quality Index', fake_cat];

// AQI
svg.append('text')
    .attr('x',50)
    .attr('y',50)
    .attr('font-size',50)
    .attr('text-anchor','start') // Text Horizontal alignment
    .attr('dominant-baseline','middle') // Text Vertical alignment
    .text(fake_aqi[0]) // TODO: REPLACE
    .style('fill', aqcolor);
// 'Air Quality Index'
  svg.append('text')
    .attr('x',50)
    .attr('y',100)
    .attr('font-size',18)
    .attr('text-anchor','start') // Text Horizontal alignment
    .attr('dominant-baseline','middle') // Text Vertical alignment
    .text('Air Quality Index'); 
// 'Moderate'
  svg.append('text')
    .attr('x',50)
    .attr('y',150)
    .attr('font-size',30)
    .attr('text-anchor','start') // Text Horizontal alignment
    .attr('dominant-baseline','middle') // Text Vertical alignment
    .text(fake_cat) // TODO: REPLACE
    .style('fill', 'yellow');



// Cons: const font size, const position
//     svg.append('text').selectAll('tspan')
//         .data(textArray)
//         .enter().append('tspan')
//         .attr('x',50)
//         .attr('y',function(d,i){return 150+(i*30)})
//         .attr('font-size',30)
//         .attr('text-anchor','start') // Text Horizontal alignment
//         .attr('dominant-baseline','middle') // Text Vertical alignment
//         .text(function(d){return d;});

// AQI
//     svg.append('text')
//         .attr('x',50)
//         .attr('y',50)
//         .attr('font-size',50)
//         .attr('text-anchor','start') // Text Horizontal alignment
//         .attr('dominant-baseline','middle') // Text Vertical alignment
//         .text(fake_aqi[0]);	
// 'Air Quality Index'
//       svg.append('text')
//         .attr('x',50)
//         .attr('y',100)
//         .attr('font-size',18)
//         .attr('text-anchor','start') // Text Horizontal alignment
//         .attr('dominant-baseline','middle') // Text Vertical alignment
//         .text('Air Quality Index');	
// 'Moderate'
//       svg.append('text')
//         .attr('x',50)
//         .attr('y',150)
//         .attr('font-size',30)
//         .attr('text-anchor','start') // Text Horizontal alignment
//         .attr('dominant-baseline','middle') // Text Vertical alignment
//         .text(fake_cat);