Vue 2.0 Pie Chart

A cake diagram with SVG.

by Arve Seljebu

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input type="range" v-model="percent" min="0" max="100">
  <p>{{arc}}</p>
  <svg height=200 width=200 xmlns="http://www.w3.org/2000/svg">
  <path :d="`
    M 100 0` +
    arc + `
    L 100 100 Z
  `"/>
  </svg>
</div>

CSS

input {
  display: block;
}
svg {
  background-color:white;
}
svg path {
  stroke: black;
  fill: blue;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    percent: 10
  },
  computed: {
  	arc: function () {
    	let r = 99
      let deg = 2 * Math.PI * this.percent / 100
      let x = r + r * Math.sin(deg)
      let y = r - r * Math.cos(deg)
      let large = this.percent > 50 ? 1 : 0
    	return `A ${r} ${r} 0 ${large} 1 ${x} ${y}`
    }
  }
})