From 9d447589765322030d0baa22f3c34de84e17657a Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Sun, 2 Jul 2017 16:14:03 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=BA=20Add=20reactive-prop=20example?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/examples/App.vue | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/examples/App.vue b/src/examples/App.vue
index 3882ffa..57fb517 100644
--- a/src/examples/App.vue
+++ b/src/examples/App.vue
@@ -4,6 +4,8 @@
     <bar-example></bar-example>
     <h1 style="text-align:center;margin:40px 0;">Barchart with reactive mixing for live data</h1>
     <reactive-example></reactive-example>
+    <h1 style="text-align:center;margin:40px 0;">Barchart with reactive mixing for live data as props</h1>
+    <reactive-prop-example :chart-data="dataPoints"></reactive-prop-example>
     <h1 style="text-align:center;margin:40px 0;">Linechart</h1>
     <line-example></line-example>
     <h1 style="text-align:center;margin:40px 0;">Doughnutchart</h1>
@@ -41,6 +43,31 @@
       BubbleExample,
       ReactiveExample,
       ReactivePropExample
+    },
+    data () {
+      return {
+        dataPoints: null
+      }
+    },
+    mounted () {
+      this.fillData()
+    },
+    methods: {
+      getRandomInt () {
+        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+      },
+      fillData () {
+        this.dataPoints = {
+          labels: ['January' + this.getRandomInt(), 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+          datasets: [
+            {
+              label: 'Data One',
+              backgroundColor: '#f87979',
+              data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
+            }
+          ]
+        }
+      }
     }
   }
 </script>