text: // The raw data to observe
  var stats = [
    { label: 'A', value: 100 },
    { label: 'B', value: 100 },
    { label: 'C', value: 100 },
    { label: 'D', value: 100 },
    { label: 'E', value: 100 },
    { label: 'F', value: 100 }
  ]
  
  // A resusable polygon graph component
  Vue.component('polygraph', {
    props: ['stats'],
    template: '#polygraph-template',
    computed: {
      // a computed property for the polygon's points
      points: function () {
        var total = this.stats.length
        return this.stats.map(function (stat, i) {
          var point = valueToPoint(stat.value, i, total)
          return point.x + ',' + point.y
        }).join(' ')
      }
    },
    components: {
      // a sub component for the labels
      'axis-label': {
        props: {
          stat: Object,
          index: Number,
          total: Number
        },
        template: '#axis-label-template',
        computed: {
          point: function () {
            return valueToPoint(
              +this.stat.value + 10,
              this.index,
              this.total
            )
          }
        }
      }
    }
  })
  
  // math helper...
  function valueToPoint (value, index, total) {
    var x     = 0
    var y     = -value * 0.8
    var angle = Math.PI * 2 / total * index
    var cos   = Math.cos(angle)
    var sin   = Math.sin(angle)
    var tx    = x * cos - y * sin + 100
    var ty    = x * sin + y * cos + 100
    return {
      x: tx,
      y: ty
    }
  }
  
  // bootstrap the demo
  new Vue({
    el: '#demo',
    data: {
      newLabel: '',
      stats: stats
    },
    methods: {
      add: function (e) {
        e.preventDefault()
        if (!this.newLabel) return
        this.stats.push({
          label: this.newLabel,
          value: 100
        })
        this.newLabel = ''
      },
      remove: function (stat) {
        if (this.stats.length > 3) {
          this.stats.splice(this.stats.indexOf(stat), 1)
        } else {
          alert('Can\'t delete more!')
        }
      }
    }
  })
  