Refactor basic structure

src/App.vue

@@ -1,30 +0,0 @@
-<template>
-  <div class="container">
-    <bar-example></bar-example>
-    <line-example></line-example>
-    <doughnut-example></doughnut-example>
-    <pie-example></pie-example>
-    <radar-example></radar-example>
-    <polar-area-example></polar-area-example>
-  </div>
-</template>
-
-<script>
-  import BarExample from './examples/BarExample'
-  import LineExample from './examples/LineExample'
-  import DoughnutExample from './examples/DoughnutExample'
-  import PieExample from './examples/PieExample'
-  import RadarExample from './examples/RadarExample'
-  import PolarAreaExample from './examples/PolarAreaExample'
-
-  export default {
-    components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample }
-  }
-</script>
-
-<style>
-  .container {
-    max-width: 800px;
-    margin: 0 auto;
-  }
-</style>

src/examples/BarExample.js

@@ -1,16 +0,0 @@
-import BarChart from '../BaseCharts/Bar'
-
-export default BarChart.extend({
-  ready () {
-    this.render({
-      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-      datasets: [
-        {
-          label: 'Data One',
-          backgroundColor: '#f87979',
-          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
-        }
-      ]
-    })
-  }
-})

src/examples/DoughnutExample.js

@@ -1,20 +0,0 @@
-import DoughnutChart from '../BaseCharts/Doughnut'
-
-export default DoughnutChart.extend({
-  ready () {
-    this.render({
-      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
-      datasets: [
-        {
-          backgroundColor: [
-            '#41B883',
-            '#E46651',
-            '#00D8FF',
-            '#DD1B16'
-          ],
-          data: [40, 20, 80, 10]
-        }
-      ]
-    })
-  }
-})

src/examples/LineExample.js

@@ -1,16 +0,0 @@
-import LineChart from '../BaseCharts/Line'
-
-export default LineChart.extend({
-  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]
-        }
-      ]
-    })
-  }
-})

src/examples/PieExample.js

@@ -1,20 +0,0 @@
-import PieChart from '../BaseCharts/Pie'
-
-export default PieChart.extend({
-  ready () {
-    this.render({
-      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
-      datasets: [
-        {
-          backgroundColor: [
-            '#41B883',
-            '#E46651',
-            '#00D8FF',
-            '#DD1B16'
-          ],
-          data: [40, 20, 80, 10]
-        }
-      ]
-    })
-  }
-})

src/examples/PolarAreaExample.js

@@ -1,29 +0,0 @@
-import PolarAreaChart from '../BaseCharts/PolarArea'
-
-export default PolarAreaChart.extend({
-  ready () {
-    this.render({
-      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
-      datasets: [
-        {
-          label: 'My First dataset',
-          backgroundColor: 'rgba(179,181,198,0.2)',
-          pointBackgroundColor: 'rgba(179,181,198,1)',
-          pointBorderColor: '#fff',
-          pointHoverBackgroundColor: '#fff',
-          pointHoverBorderColor: 'rgba(179,181,198,1)',
-          data: [65, 59, 90, 81, 56, 55, 40]
-        },
-        {
-          label: 'My Second dataset',
-          backgroundColor: 'rgba(255,99,132,0.2)',
-          pointBackgroundColor: 'rgba(255,99,132,1)',
-          pointBorderColor: '#fff',
-          pointHoverBackgroundColor: '#fff',
-          pointHoverBorderColor: 'rgba(255,99,132,1)',
-          data: [28, 48, 40, 19, 96, 27, 100]
-        }
-      ]
-    })
-  }
-})

src/examples/RadarExample.js

@@ -1,31 +0,0 @@
-import RadarChart from '../BaseCharts/Radar'
-
-export default RadarChart.extend({
-  ready () {
-    this.render({
-      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
-      datasets: [
-        {
-          label: 'My First dataset',
-          backgroundColor: 'rgba(179,181,198,0.2)',
-          borderColor: 'rgba(179,181,198,1)',
-          pointBackgroundColor: 'rgba(179,181,198,1)',
-          pointBorderColor: '#fff',
-          pointHoverBackgroundColor: '#fff',
-          pointHoverBorderColor: 'rgba(179,181,198,1)',
-          data: [65, 59, 90, 81, 56, 55, 40]
-        },
-        {
-          label: 'My Second dataset',
-          backgroundColor: 'rgba(255,99,132,0.2)',
-          borderColor: 'rgba(255,99,132,1)',
-          pointBackgroundColor: 'rgba(255,99,132,1)',
-          pointBorderColor: '#fff',
-          pointHoverBackgroundColor: '#fff',
-          pointHoverBorderColor: 'rgba(255,99,132,1)',
-          data: [28, 48, 40, 19, 96, 27, 100]
-        }
-      ]
-    })
-  }
-})

src/main.js

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