svg.html — vue Source File

Source Code

<script src="../../dist/vue.min.js"></script>
<script>
  const { ref, computed, createApp } = Vue

  // 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
    }
  }

  const AxisLabel = {
    template: '<text :x="point.x" :y="point.y">{{stat.label}}</text>',
    props: {
      stat: Object,
      index: Number,
      total: Number
    },
    setup(props) {
      return {
        point: computed(() =>
          valueToPoint(+props.stat.value + 10, props.index, props.total)
        )
      }
    }
  }
</script>

<!-- template for the polygraph component. -->
<script type="text/x-template" id="polygraph-template">
  <g>
    <polygon :points="points"></polygon>
    <circle cx="100" cy="100" r="80"></circle>
    <axis-label
      v-for="(stat, index) in stats"
      :stat="stat"
      :index="index"
      :total="stats.length">
    </axis-label>
  </g>
</script>

<script>
  const Polygraph = {
    props: ['stats'],
    template: '#polygraph-template',
    setup(props) {
      return {
        points: computed(() => {
          const total = props.stats.length
          return props.stats
            .map((stat, i) => {
// ... (113 more lines)