add svg example

yyx990803 · yyx990803 · commit baffce42c382 · 2014-09-23T22:07:59.000-04:00
diff --git a/examples/svg/index.html b/examples/svg/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Vue.js SVG example</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="../../dist/vue.js"></script>
+  </head>
+  <body>
+
+    <!-- template for the polygraph component. -->
+    <script type="text/x-template" id="polygraph-template">
+      <svg width="200" height="200">
+        <polygon v-attr="points: points"></polygon>
+        <circle cx="100" cy="100" r="80"></circle>
+        <text v-component="axis-label" v-repeat="stats" v-attr="x:x, y:y">
+          {{label}}
+        </text>
+      </svg>
+    </script>
+
+    <!-- demo root element -->
+    <div id="demo">
+      <!-- Use the component -->
+      <svg v-component="polygraph" v-with="stats:stats"></svg>
+      <!-- controls -->
+      <div v-repeat="stats">
+        <label>{{label}}</label>
+        <input type="range" v-model="value" min="0" max="100">
+        <span>{{value}}</span>
+        <button v-on="click:remove(this)">X</button>
+      </div>
+      <input v-model="newLabel"> <button v-on="click:add">Add a Stat</button>
+      <pre id="raw">{{stats | json}}</pre>
+    </div>
+      
+    <p style="font-size:12px">* input[type="range"] requires IE10 or above.</p>
+
+    <script src="svg.js"></script>
+
+  </body>
+</html>
diff --git a/examples/svg/style.css b/examples/svg/style.css
@@ -0,0 +1,31 @@
+body {
+    font-family: Helvetica Neue, Arial, sans-serif;
+}
+
+polygon {
+    fill: #42b983;
+    opacity: .75;
+}
+
+circle {
+    fill: transparent;
+    stroke: #999;
+}
+
+text {
+    font-family: Helvetica Neue, Arial, sans-serif;
+    font-size: 10px;
+    fill: #666;
+}
+
+label {
+    display: inline-block;
+    margin-left: 10px;
+    width: 20px;
+}
+
+#raw {
+    position: absolute;
+    top: 0;
+    left: 300px;
+}
diff --git a/examples/svg/svg.js b/examples/svg/svg.js
@@ -0,0 +1,84 @@
+// 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', {
+  template: '#polygraph-template',
+  replace: true,
+  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': {
+      computed: {
+        point: function () {
+          return valueToPoint(
+            +this.value + 10,
+            this.$index,
+            this.$parent.stats.length
+          )
+        },
+        x: function () {
+          return this.point.x - 4
+        },
+        y: function () {
+          return this.point.y + 4
+        }
+      }
+    }
+  }
+})
+
+// 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 () {
+      if (!this.newLabel) return
+      this.stats.push({
+        label: this.newLabel,
+        value: 100
+      })
+      this.newLabel = ''
+    },
+    remove: function (stat) {
+      if (this.stats.length > 3) {
+        this.stats.$remove(stat.$data)
+      }
+    }
+  }
+})
