//CSS used in this example:
//
// .line {
//   fill: none;
//   stroke: steelblue;
//   stroke-width: 2px;
//  }
//
// .area {
//   fill: lightsteelblue;
// }


//generateChart is a required function which will be called to generate your Javascript chart
generateChart = function(options) {

   // This will trigger a breakpoint in your browser debugger so you can debug your javascript
   debugger;

   // This is the div you draw your chart into
   var $chartDrawDiv = $(options.divSelector);

   // To stop scrollbars in any portlets regardless of your javascript, use this css class
   $chartDrawDiv.addClass('jsChartNoOverflow');

   // This gets the height and width from the dataset. Use these when creating your chart so that
   // it will fit the dashboard, canvas and storyboard correctly
   var height = options.dataset.chart_information.height;
   var width = options.dataset.chart_information.width;

   // Convert the raw data JSON to the format required for the chart if required.
   var processedData = processData(options.dataset.data);
    scatter_data=processedData[0]
    line_data=processedData[1]
   // Do the actual drawing of the chart into $chartDiv.
   doDrawing(scatter_data, $chartDrawDiv, height, width, options.errorCallback, line_data);
},

processData = function(dataset) {
    scatter_data=[];
    line_data=[[]]
    x_labels=[]
    for (i=0;i<dataset['camp_region'].length;i++){
        scatter_data.push({
            x1:i,
            y1:dataset['invoiced_amount'][i].raw_data,});
        line_data[0].push({
            x1:i,
            y1:dataset['invoice_estimate'][i].raw_data});
        x_labels.push(dataset['camp_region'][i].formatted_data)
    }
    return [scatter_data, line_data];
},

doDrawing = function(scatter_data, $chartDiv, height, width, errorFunction, line_data) {

  require(['https://d3js.org/d3.v4.min.js'], function(d3) {

    var margin = {top: 20, right: 15, bottom: 60, left: 100}
      , width = 600 - margin.left - margin.right
      , height = 500 - margin.top - margin.bottom;
    
    var x = d3.scaleLinear()
              .domain([0, d3.max(scatter_data, function(d) { return d.x1; })])
              .range([ 0, width ]);
    
    var y = d3.scaleLinear()
    	      .domain([0, d3.max(scatter_data, function(d) { return d.y1; })])
    	      .range([ height, 0 ]);
 
    var chart = d3.select($chartDiv[0])
	.append('svg:svg')
	.attr('width', width + margin.right + margin.left)
	.attr('height', height + margin.top + margin.bottom)
	.attr('class', 'chart')
    //var color = d3.scaleOrdinal(d3.schemeCategory10);
    
    var main = chart.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
	.attr('width', width)
	.attr('height', height)
	.attr('class', 'main')   
        
    // draw the x axis
    var xAxis = d3.axisBottom()
        .scale(x)
        .tickFormat(function(d) {return x_labels[d]; })

    main.append('g')
	.attr('transform', 'translate(0,' + height + ')')
	.attr('class', 'main axis date')
	.call(xAxis);

    // draw the y axis
    var yAxis = d3.axisLeft()
	.scale(y);
    
    main.append('g')
	.attr('transform', 'translate(0,0)')
	.attr('class', 'main axis date')
	.call(yAxis);

    var g = main.append("svg:g"); 
    
    var line = d3.line()
        .curve(d3.curveBasis)
        .x(function(d) {return x(d.x1); })
        .y(function(d) {return y(d.y1); });    

  //create line plot  
    g.selectAll(".line")
      .data(line_data)
      .enter().append("path")
      .attr("class", "line")
      .attr("d", line);
 
    //create scatter plot
    g.selectAll("scatter-dots")
      .data(scatter_data)
      .enter()
      .append("svg:circle")
      .attr("r", 3)
      .attr("cx", function(d) { return x(d.x1); })
      .attr("cy", function(d) { return y(d.y1); })

    g.append("text")             
      .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (height + margin.top + 20) + ")")
      .style("text-anchor", "middle")
      .text("Region");
    g.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x",0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("Invoice Amount");      



   });
}