// Create the dc.js chart objects & link to div
var dataTable = dc.dataTable("#dc-table-graph");

var tisChart = dc.barChart("#dc-tis-chart");

var ctisChart = dc.barChart("#dc-ctis-chart");

var coreChart = dc.rowChart("#dc-core-chart");

var degreeChart = dc.pieChart("#dc-degree-chart");

var gradeChart = dc.rowChart("#dc-grade-chart");

var majcomChart = dc.rowChart("#dc-majcom-chart");

// load data from a csv file
d3.csv("data.csv", function (data) {
  // format our data
  var tisFormat = d3.format(".0f");
  data.forEach(function(d) {
      d.tis2 = +d.tis;
	  d.tis = +tisFormat(d.tis); 
	  d.ctis = +tisFormat(d.ctis);
	  d.age = +d.age;
  });

  // Run the data through crossfilter and load our 'facts'
  var facts = crossfilter(data);
  var all = facts.groupAll();
  
  // for Time In Service
  var tisValue = facts.dimension(function (d) {
    return d.tis;       // add the magnitude dimension
  });
  var tisValueGroup = tisValue.group();

  // for Commissioned Time in Service
  var ctisValue = facts.dimension(function (d) {
    return d.ctis;
  });
  var ctisValueGroup = ctisValue.group();

  // row chart Core
  var core = facts.dimension(function (d) {
	  return d.core;
  });
  var coreGroup = core.group();

  // Pie Chart for degrees
  var degree = facts.dimension(function (d) {
  	return d.advtype;  
  });
  var degreeGroup = degree.group();

  var grade = facts.dimension(function (d){
	  return d.grade;
  });
  var gradeGroup = grade.group();

  
  var majcom = facts.dimension(function (d){
	  return d.maj_com;
  });
  var majcomGroup = majcom.group();

  // Create datatable dimension
  var timeDimension = facts.dimension(function (d) {
    return d.tis;
  });

  // Setup the charts

  // count all the facts
  dc.dataCount(".dc-data-count")
    .dimension(facts)
    .group(all);
    
  // TIS Bar Graph Counted
  tisChart.width(480)
    .height(150)
    .margins({top: 10, right: 10, bottom: 20, left: 40})
    .dimension(tisValue)
    .group(tisValueGroup)
    .transitionDuration(500)
    .centerBar(true)	
	.gap(5) 
    .x(d3.scale.linear().domain([0, 30]))
	.elasticY(true)
	.xAxis().tickFormat();

  // CTIS bar graph
  ctisChart.width(480)
    .height(150)
    .margins({top: 10, right: 10, bottom: 20, left: 40})
    .dimension(ctisValue)
    .group(ctisValueGroup)
	.transitionDuration(500)
    .centerBar(true)	
	.gap(5)  
    .x(d3.scale.linear().domain([0, 30]))
	.elasticY(true)
	.xAxis().tickFormat(function(v) {return v;});
  
  // row chart core
  coreChart.width(300)
    .height(220)
    .margins({top: 5, left: 10, right: 10, bottom: 20})
    .dimension(core)
    .group(coreGroup)
    .colors(d3.scale.category10())
    .label(function (d){
       return d.key;
    })
    .title(function(d){return d.value;})
    .elasticX(true)
    .xAxis().ticks(4); 
  // degrees pie chart
  degreeChart.width(250)
    .height(220)
    .radius(100)
    .innerRadius(30)
    .dimension(degree)
    .title(function(d){return d.value;})
    .group(degreeGroup);

  // row chart day of week
  gradeChart.width(300)
    .height(220)
    .margins({top: 5, left: 10, right: 10, bottom: 20})
    .dimension(grade)
    .group(gradeGroup)
    .colors(d3.scale.category10())
    .label(function (d){
       return d.key;
    })
    .title(function(d){return d.value;})
    .elasticX(true)
    .xAxis().ticks(4);


  majcomChart.width(960)
    .height(600)
    .margins({top: 5, left: 10, right: 10, bottom: 20})
    .dimension(majcom)
    .group(majcomGroup)
    .colors(d3.scale.category20b())
    .label(function (d){
       return d.key;
    })
    .title(function(d){return d.value;})
    .elasticX(true)
    .xAxis().ticks(10);

  // Table of earthquake data
  dataTable.width(960).height(800)
    .dimension(timeDimension)
	.group(function(d) { return "6X Officers"
	 })
	.size(50)
    .columns([
      function(d) { return d.core; },
      function(d) { return d.maj_com},
      function(d) { return d.highdeg; },
      function(d) { return d.grade; },
      function(d) { return d.duty_t; },
      function(d) { return d3.format("0.1f")(d.tis2); },
    ])
    .sortBy(function(d){ return d.grade; })
    .order(d3.descending);

  // Render the Charts
  dc.renderAll();
  
});