// This is the main program that sets up a bar chart to visualize data from the Data Canvas - Sense Your City API.
// Curran Kelleher March 2015
require(["getLatestData", "barChart", "model"], function (getLatestData, BarChart, Model) {

  // Initialize the bar chart.
  var barChart = BarChart({
    
    // Bar identity.
    xAttribute: "city",
    xAxisLabel: "City",

    // Bar height.
    yAttribute: "temperature",
    yAxisLabel: "Temperature (°C)",

    // Bar ordering.
    sortField: "temperature",
    sortOrder: "descending",

    // Use a fixed value of 0 for the temperature axis.
    yDomainMin: 0,

    // Spacing between bars.
    barPadding: 0.1,

    // Tell the chart which DOM element to insert itself into.
    container: d3.select("#container").node(),

    // Specify the margin and text label offsets.
    margin: {
      top: 10,
      right: 10,
      bottom: 60,
      left: 70
    },
    yAxisLabelOffset: 1.4, // Unit is CSS "em"s
    xAxisLabelOffset: 1.9,
    titleOffset: -0.2
  });

  // Pass the latest data into the bar chart.
  function update(){
    getLatestData(function(err, data){
      barChart.data = data;
    });
  }

  // Initialize the data.
  update();

  // Update the data every 5 minutes.
  setInterval(update, 1000 * 60 * 5);

  // Sets the `box` model property
  // based on the size of the container,
  function computeBox(){
    barChart.box = {
      width: container.clientWidth,
      height: container.clientHeight
    };
  }

  // once to initialize `model.box`, and
  computeBox();

  // whenever the browser window resizes in the future.
  window.addEventListener("resize", computeBox);

  // Output the data flow graph data.
  setTimeout(function(){
    console.log(JSON.stringify(Model.getFlowGraph()));
  }, 1000);
});