import { csv } from 'd3';//importing csv from d3
import {
  select,
  json,
  pie,
  arc,
  scaleOrdinal,
  format
} from 'd3';//importing select,json,pie,arc,scaleOrdinal,format

const sectionColors = [
  		'blue', 'pink', 'yellow', 'lightgreen', 'orange', 'red', 'brown', 'lightblue', 'violet', 'lavender','green','teal',
		  ];//Colors for sections

const csvUrl = 'https://gist.githubusercontent.com/INDU1998-GIT/5ceb8e0f3624a51ff9d00604b25289b1/raw/688ea6800c8dbeefc4a6ef97febec560ecb4f051/courses.csv'; //dataset url

const fetchData = async () => {
  const data = await csv(csvUrl);
  return data;
};//fetching data 

const svg = select("svg");
const width = + svg.attr('width');//add width to svg
const height = + svg.attr('height');//add height to svg

const xAxisTickFormat = number =>
  	format('.4~g')(number);//format for x-axis tick

const render = (data, total) => {
  const pieData = pie().value(d=>d.Students)(data);//pie chart data
  const colors = scaleOrdinal()
  	.domain(data)
  	.range(sectionColors);
  
  const arcGenerator = d3.arc()
  .innerRadius(0)
  .outerRadius(250);//generating arc inner and outer Radius

  
	const segments = arc()
  	.innerRadius(0)
  	.outerRadius(175)
  	.padAngle(0)
  	.padRadius(0);//arc padangle and padradius
  
  const sections = svg.append("g")
  	.attr("transform", `translate(250,250)`)
  	.selectAll("path").data(pieData);//position of the pie chart
  
  sections.enter()
    .append("path")
    .attr("d", segments)
  	.attr("fill", d => colors(d.data.Students));
  
  sections
    .enter()
    .append('text')
    .text(d => xAxisTickFormat((d.data.Students/1000))+"K")
    .attr("transform", function(d) { return "translate(" + arcGenerator.centroid(d) + ")";  })
    .style("text-anchor", "middle")
  	.style('fill', 'black')
    .style("font-size", 13);//styling the values inside piechart sections
  
  const legends = svg.append("g")
  	.attr("transform", "translate(500,100)")
    .selectAll(".legends").data(pieData);//aligning legends
  
  const legend = legends.enter().append("g").classed(".legends",true)
  	.attr("transform", (d,i)=>{
      return `translate(0,${(i+1)*30})`;
    });
  
  legend.append("rect").attr("width",20).attr("height",20)
  	.attr("fill", d => colors(d.data.Students));
  legend.append("text")
  	.attr("x", 25)
  	.attr("y", 15)
  	.attr("class","legend_text")
  	.text(d => d.data.Major);//using legend to depict different Major
  legend.append("text")
  	.attr("x", 250)
  	.attr("y", 15)
  	.attr("class","legend_value")
  	.text(d=>xAxisTickFormat((d.data.Students/1000))+"K");//using legend to show no.of students
}

const run = async () => {
  let data = await fetchData()
  let total = 0
  data.forEach(d=>{
    d.Students = +d.Students;
    total += d.Students
  });
	render(data,total);
};
run();//running