const margin = {top: 0, right: 60, bottom: 30, left: 60};
width = 960 - margin.left - margin.right;
height = 540 - margin.top - margin.bottom;


	const parseTime = d3.timeParse("%d/%m/%Y");
	const dateFormat = d3.timeFormat("%d/%m/%Y");

	const x = d3.scaleTime()
		.range([0, width]);

	const y = d3.scaleLinear()
		.range([height, 0]);
		
	const line = d3.line()
		.x(d => x(d.date))
		.y(d => y(d.close));

	const area = d3.area()
		.x(d => x(d.date))
		.y0(height)
		.y1(d => y(d.close));
		
	const svg = d3.select("#graph").append("svg")
		.attr("id", "svg")
// 		.attr("width", width + margin.left + margin.right)
// 		.attr("height", height + margin.top + margin.bottom)
		.attr("viewBox", "0 0 "+(width + margin.left + margin.right)+" "+(height + margin.top + margin.bottom))
		.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	
	// Graphic title
// 	svg.append("text")
//         .attr("x", (width / 2))             
//         .attr("y", 0 - (margin.top / 2))
//         .attr("text-anchor", "middle")
// 		.style("fill", "#5a5a5a")
//         .style("font-family", "Raleway")
//         .style("font-weight", "300")
//         .style("font-size", "24px")
//         .text("Cours journalier de l'or depuis 2001");

	d3.tsv(window.location.origin+"/storage/datas/61a7bf23e6023-cours_or_2001.tsv").then(function(data) {
		data.forEach(d => {
			d.date = parseTime(d.date);
			d.close = +d.close;
		});
		
		data.sort((a, b) => a.date - b.date);
		
		x.domain(d3.extent(data, d => d.date));
		y.domain(d3.extent(data, d => d.close));
		
		svg.append("g")
			.attr("transform", "translate(0," + height + ")")
			.call(d3.axisBottom(x));

		svg.append("g")
			.call(d3.axisLeft(y))
			.append("text")
			.attr("fill", "#000")
			.attr("transform", "rotate(-90)")
			.attr("y", 6)
			.attr("dy", "0.71em")
			.style("text-anchor", "end")
			.text("$");
	  
		svg.selectAll("y axis").data(y.ticks(10)).enter()
			.append("line")
			.attr("class", "horizontalGrid")
			.attr("x1", 0)
			.attr("x2", width)
			.attr("y1", d => y(d))
			.attr("y2", d => y(d));
			
		var linePath = svg.append("path")
			.datum(data)
			.style("fill", "none")
			.style("stroke", "#2326dd")
			.style("stroke-width", "1px")
			.style("opacity", "0.8")
			.attr("d", line);
	
		// The linear gradient is directly referred in the area CSS
		svg.append("linearGradient")
			.attr("id", "areachart-gradient")
			.attr("gradientUnits", "userSpaceOnUse")
			.attr("x1", 0)
			.attr("x2", 0)
			.attr("y1", y(d3.min(data, d => d.close)))
			.attr("y2", y(d3.max(data, d => d.close)))
			.selectAll("stop")
				.data([
					{offset: "0%", color: "#F7FBFE"},
					{offset: "100%", color: "#2326dd"}
				])
			.enter().append("stop")
				.attr("offset", d => d.offset)
				.attr("stop-color", d => d.color);

		var areaPath = svg.append("path")
			.datum(data)
			.style("fill", "url(#areachart-gradient)")
			.style("opacity", "0.6")
			.attr("d", area);
			
		// Used to retrieve the closer date for a cursor position
		var bisectDate = d3.bisector(d => d.date).left;
		
		// Add the two circle and the tooltip box
		var tooltip = addTooltip();
		
		// append the rectangle to capture mouse
		svg.append("rect")
			.attr("class", "overlay")
			.attr("width", width)
			.attr("height", height)
			.on("mouseover", function(event) { 
				tooltip.style("display", null);
			})
			.on("mouseout", function(event) {
				tooltip.style("display", "none");
			})
			.on("mousemove", mousemove);
		
		function mousemove(event) {
			var x0 = x.invert(d3.pointer(event)[0]),
				i = bisectDate(data, x0),
				d = data[i];
			
			tooltip.attr("transform", "translate(" + x(d.date) + "," + y(d.close) + ")");
			
			d3.select('#tooltip-date')
				.text(dateFormat(d.date));
			d3.select('#tooltip-close')
				.text(d.close + "$");
		}
	});
	
	function addTooltip() {
		var tooltip = svg.append("g")
			.attr("id", "tooltip")
			.style("display", "none");
		
		tooltip.append("circle")
			.attr("fill", "#CCE5F6")
			.attr("r", 10);

		tooltip.append("circle")
			.attr("fill", "#3498db")
			.attr("stroke", "#fff")
			.attr("stroke-width", "1.5px")
			.attr("r", 4);
			
		// The tooltip "container"
		tooltip.append("polyline")
			.attr("points","0,0 0,40 55,40 60,45 65,40 120,40 120,0 0,0")
			.style("fill", "#fafafa")
			.style("stroke","#3498db")
			.style("opacity","0.9")
			.style("stroke-width","1")
			.attr("transform", "translate(-60, -55)");
		
		var text = tooltip.append("text")
			.style("font-size", "13px")
			.style("font-family", "Segoe UI")
			.style("color", "#333333")
			.style("fill", "#333333")
			.attr("transform", "translate(-50, -40)");
		
		text.append("tspan")
			.attr("dx", "-5")
			.attr("id", "tooltip-date");
		
		text.append("tspan")
			.style("fill", "#3498db")
			.attr("dx", "-60")
			.attr("dy", "15")
			.text("●");
		
		text.append("tspan")
			.attr("dx", "5")
			.text("Cours : ");
		
		text.append("tspan")
			.attr("id", "tooltip-close")
			.style("font-weight", "bold");
		
		return tooltip;
	}