JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js"></script>

CSS

body {
  background: white;
  text-align: center;
}

JavaScript

const t1 = {
  checked: {
    from: '00:00:00',
    to: '23:59:59',
  },
  downtimes: [
    {
      from: '08:50:53',
      to: '09:05:20',
    },
    {
      from: '09:26:01',
      to: '09:30:30',
    },
  ],
};

const t2 = {
  checked: {
    from: '00:00:00',
    to: '14:50:04',
  },
  downtimes: [
    {
      from: '09:26:01',
      to: '09:30:30',
    },
  ],
};

const t3 = {
  checked: {
    from: '08:50:53',
    to: '14:50:04',
  },
  downtimes: [
    {
      from: '08:50:53',
      to: '09:30:30',
    },
  ],
};

const t = t1;

const data = [t.checked]
  .map(x => Object.assign({}, x, {fill: 'red'}))
  .concat(t.downtimes.map(x => Object.assign({}, x, {fill: 'green'})));

const svg = d3
  .select('body')
  .append('svg')
  .attr('width', 400)
  .attr('height', 400);

const angle = time => {
  const matches = time.match(/\d+/g);
  const seconds = +matches[0] * 3600 + +matches[1] * 60 + +matches[2];
  return 2 * Math.PI * seconds / 86400;
};

const arc = d3
  .arc()
  .innerRadius(0)
  .outerRadius(150)
  .startAngle(d => angle(d.from))
  .endAngle(d => angle(d.to));

svg
  .append('g')
  .attr('transform', 'translate(200, 200)')
  .selectAll('path')
  .data(data)
  .enter()
  .append('path')
  .attr('fill', d => d.fill)
  .attr('d', arc);