// This is an example Chaism plugin that uses D3 to make a line chart. 
// Draws from this Line Chart example http://bl.ocks.org/curran/60b40877ef898f19aeb8
function LineChart() {

  var my = ChiasmComponent({

    margin: {
      left:   30,
      top:    30,
      right:  30,
      bottom: 30
    },

    yColumn: Model.None,
    xColumn: Model.None,

    fill: "none",
    stroke: "gray",
    strokeWidth: "1px"

  });

  var xScale = d3.time.scale();
  var yScale = d3.scale.linear();
  
  my.el = document.createElement("div");
  var svg = d3.select(my.el).append("svg");
  var g = svg.append("g");
  var path = g.append("path");

  // Respond to changes in size and margin.
  // Inspired by D3 margin convention from http://bl.ocks.org/mbostock/3019563
  my.when(["box", "margin"], function(box, margin){

    my.innerBox = {
      width: box.width - margin.left - margin.right,
      height: box.height - margin.top - margin.bottom
    };

    svg
      .attr("width", box.width)
      .attr("height", box.height);

    g.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  });

  var line = d3.svg.line();

  my.when(["data", "innerBox", "xColumn", "yColumn"],
      function (data, innerBox, xColumn, yColumn){

    if(xColumn !== Model.None){
      xScale.range([0, innerBox.width]);
      xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));
      my.x = function (d){ return xScale(d[xColumn]); };
    }

    if(yColumn !== Model.None){
      yScale.range([innerBox.height, 0]);
      yScale.domain(d3.extent(data, function (d){ return d[yColumn]; }));
      my.y = function (d){ return yScale(d[yColumn]); };
    }
  });

  my.when(["data", "x", "y", "fill", "stroke", "strokeWidth"],
      function (data, x, y, fill, stroke, strokeWidth){
    path
      .attr("d", line.x(x).y(y)(data))
      .attr("fill", fill)
      .attr("stroke", stroke)
      .attr("stroke-width", strokeWidth);
  });

  return my;
}