Creates a graph from an array of objects. Colors bars rainbow of colors.

makeBars

makeBars() {
  // Get an array of timers tiemr.time is a utc
  const timers = this.props.timers
  // use reduce to get the max value to normalize times
  const max = timers.reduce((acc, timer) => {
    return Math.max(acc, timer.time)
  }, 0)
  // generate an array of bars
  return this.props.timers.map((timer, index) => {
    const h = timer.time / max * 100 // normalize the times to 0 to 100
    const c = 360 / timers.length    // Cycle through all colors
    const color = `hsl(${c * index}, 100%, 50%)`  // Use HSL to set the color
    return <TimeGraphBar key={index} width={10} height={h} backgroundColor={color} />
  })
}