ajout exo tp5

R4.01_R4.A.10/td_tp/tp5/src/ex2/components/polygraph.riot

@@ -0,0 +1,31 @@
+<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>

R4.01_R4.A.10/td_tp/tp5/src/ex2/components/text.riot

@@ -0,0 +1,25 @@
+<text x={ state.point.x } y={ state.point.y }>
+{ props.stat.label }
+
+  <script>
+    export default {
+      state: {
+        point: ''
+      },
+      onBeforeMount(props, state) {
+        state.point = valueToPoint(
+          +props.stat.value + 10,
+          props.index,
+          props.total
+        )
+      },
+      onBeforeUpdate(props, state) {
+        state.point = valueToPoint(
+          +props.stat.value + 10,
+          props.index,
+          props.total
+        )
+      }
+    }
+  </script>
+</text>