🎉 Initial commit

src/App.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="container">
+    <test-chart :width="100" :height="200" :player={wins:'12'} :opponent={wins:'23'}></test-chart>
+  </div>
+</template>
+
+<script>
+  import TestChart from './components/TestChart'
+
+  export default {
+    components: { TestChart }
+  }
+</script>
+
+<style>
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+</style>

src/components/BaseCharts/Bar.js

@@ -0,0 +1,58 @@
+import Vue from 'vue'
+import Chart from 'chart.js'
+
+export default Vue.extend({
+  template: `
+    <div>
+      <canvas id="bar-chart" width=width height=height v-el:canvas></canvas>
+    </div>
+  `,
+
+  props: {
+    width: {
+      default: 400,
+      type: Number
+    },
+    height: {
+      default: 400,
+      type: Number
+    }
+  },
+
+  data () {
+    return {
+      options: {
+        scales: {
+          yAxes: [{
+            ticks: {
+              beginAtZero: true
+            },
+            gridLines: {
+              display: false
+            }
+          }],
+          xAxes: [ {
+            gridLines: {
+              display: false
+            },
+            categoryPercentage: 0.5,
+            barPercentage: 0.2
+          }]
+        }
+      }
+    }
+  },
+
+  methods: {
+    render (data, options = this.options) {
+      const chart = new Chart(
+        this.$els.canvas.getContext('2d'), {
+          type: 'bar',
+          data: data,
+          options: options
+        }
+      )
+      chart.generateLegend()
+    }
+  }
+})

src/components/BaseCharts/Line.js

@@ -0,0 +1,56 @@
+import Vue from 'vue'
+import Chart from 'chart.js'
+
+export default Vue.extend({
+  template: `
+    <div>
+      <canvas id="line-chart" width=width height=height v-el:canvas></canvas>
+    </div>
+  `,
+
+  props: {
+    width: {
+      default: 400,
+      type: Number
+    },
+    height: {
+      default: 400,
+      type: Number
+    }
+  },
+
+  data () {
+    return {
+      options: {
+        scales: {
+          yAxes: [{
+            ticks: {
+              beginAtZero: true
+            },
+            gridLines: {
+              display: false
+            }
+          }],
+          xAxes: [ {
+            gridLines: {
+              display: false
+            }
+          }]
+        }
+      }
+    }
+  },
+
+  methods: {
+    render (data, options = this.options) {
+      const chart = new Chart(
+        this.$els.canvas.getContext('2d'), {
+          type: 'line',
+          data: data,
+          options: options
+        }
+      )
+      chart.generateLegend()
+    }
+  }
+})

src/components/TestChart.js

@@ -0,0 +1,24 @@
+// import BarChart from './BaseCharts/Bar'
+import BarChart from './BaseCharts/Line'
+
+export default BarChart.extend({
+  props: ['player', 'opponent'],
+
+  ready () {
+    this.render({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+      datasets: [
+        {
+          label: 'Data One',
+          backgroundColor: '#f87979',
+          data: [40, 39, 10, 40, 39, 80, 40]
+        },
+        {
+          label: 'Data Two',
+          backgroundColor: '#f87979',
+          data: [0, 0, 0, 39.30, 39.30, 39.30]
+        }
+      ]
+    })
+  }
+})

src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App'
+
+/* eslint-disable no-new */
+new Vue({
+  el: 'body',
+  components: { App }
+})