/* Statistics */
const stats = [
 {
    name: 'Moving',
    value: 122,
    goal: 350,
    perc: 0.35,
    unit: 'kcal',
    color: 'hotpink'
  }, {
    name: 'Exercising',
    value: 40,
    goal: 40,
    perc: 1.00,
    unit: 'min',
    color: 'limegreen'
  }, {
    name: 'Standing',
    value: 9,
    goal: 12,
    perc: 0.75,
    unit: 'h',
    color: 'turquoise'
  }
];

/* Chart configuration. */
const width = 450;
const height = 450;
const margin = 40;
const circleStroke = 50;
const circleSpace = 2;

/* Define Math.PI * 2 because I don't like typing it out. */
const fullCircle = Math.PI * 2;

/* Generate the description. */
const generateDescription = () => {
  return stats.map((stat) => {
    return `${stat.name}: ${stat.perc * 100}%.`;
  }).join(' ');
}

/* Create the chart. */
const chart = d3.select('#activity').append('svg')
  .attr('width', width)
  .attr('height', height)
  .attr('role', 'img') // SR support
  .attr('aria-label', generateDescription()); // SR support


/* Draw a ring with a given radius and angle. */
const drawRing = (parent, arc, color, opacity) => {
  return parent.append('path')
    .attr('d', d3.arc()
      .innerRadius(arc.inner)
      .outerRadius(arc.outer)
      .startAngle(arc.start)
      .endAngle(arc.end)
     )
    .attr('fill', color)
    .attr('opacity', opacity);
}

/* Set the radius. */
const radius = (width - margin) / 2;


/* Draw 3 rings */
stats.forEach((stat, index) => {
  const arc = {
    inner: radius - circleStroke * (index + 1) - circleSpace * index,
    outer: radius - circleStroke * index - circleSpace * index,
    start: 0,
    end: fullCircle
  };
    
  chart.append('g')
    .attr('class', stat.name)
    .attr('transform', `translate(${width / 2}, ${height / 2})`);
  
  drawRing(
    d3.select(`.${stat.name}`),
    {...arc, start: fullCircle * stat.perc },
    stat.color,
    0.25
  );
  
  drawRing(
    d3.select(`.${stat.name}`),
    {...arc, end: fullCircle * stat.perc},
    stat.color,
    1
  );
});