<h1 class="bx--graph-header">Gauge Graph</h1>
<div class="container">
	<svg></svg>
	<div class="text">
		<p class="amount"></p>
		<p class="total"></p>
	</div>
</div>

body {
	padding: 1rem 3%;
	background-color: #fff;
}

.bx--graph-header {
	font-weight: 300;
	font-size: 24px;
}

.container {
	position: relative;
	width: 220px;
}

.text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: right;
}

.amount {
	opacity: 0;
	font-size: 30px;
	font-weight: 300;
}

.total {
	opacity: 0;
	font-size: 14px;
}

.amount, .total {
	margin: 0;
}

// Based on this great Demo: http://bl.ocks.org/mbostock/5100636
const tau = 2 * Math.PI;
const radius = 80;
const padding = 30;
const boxSize = (radius + padding) * 2;
const amount = 75;
const total = 100;
const ratio = amount / total;

const arc = d3.arc()
	.innerRadius(radius)
	.outerRadius(radius - 10)
	.startAngle(0);

const svg = d3.select('svg')
	.attr('width', boxSize)
	.attr('height', boxSize);

const g = svg
	.append('g')
	.attr('transform', `translate(${boxSize / 2}, ${boxSize / 2})`);

// Background Arc
const background = g.append('path')
	.datum({ endAngle: tau })
	.style('fill', '#dfe3e6')
	.attr('d', arc)

// Foreground Arc
const foreground = g.append('path')
	.datum({ endAngle: 0 })
	.style('fill', '#00a68f')
	.transition()
	.duration(1000)
	.delay(1000)
	.attrTween('d', arcTween(ratio * tau));

// Text Labels
const amountText = d3.select('.amount');
const totalText = d3.select('.total');
amountText
	.style('opacity', 0)
	.transition()
	.duration(1000)
	.delay(1500)
	.style('opacity', 1)
	.text(`${amount}GB`);

totalText
	.style('opacity', 0)
	.transition()
	.duration(1000)
	.delay(1700)
	.style('opacity', 1)
	.text(`/${total}GB`);

// Animation function
function arcTween(newAngle) {
	return function(d) {
		const interpolate = d3.interpolate(d.endAngle, newAngle);
		return function(t) {
			d.endAngle = interpolate(t);
			
			return arc(d)
		}
	}
}