<polygraph>
  <g>
    <polygon points={ points() }></polygon>
    <circle cx="200" cy="200" r="160"></circle>
    <text
      each={ (stat, index) in state.stats }
      index={ index }
      stat={ stat }
      total={ state.stats.length }
      is="text" />
  </g>

  <script>
    export default {
      state: {
        stats: []
      },
      onBeforeMount(props, state) {
        state.stats = props.stats
      },
      // a computed property for the polygon's points
      points() {
        const total = this.state.stats.length
        return this.state.stats.map((stat, i) => {
          const point = valueToPoint(stat.value, i, total)
          return point.x + ',' + point.y
        }).join(' ')
      }
    }
  </script>
</polygraph>
