Initiated Chart Component

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016-2018 PrimeTek
+Copyright (c) 2016-2019 PrimeTek
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -30,8 +30,9 @@
     "vue-template-compiler": "^2.5.17",
     "primeicons": "1.0.0",
     "primeflex": "1.0.0-rc.1",
-    "quill": "1.3.3",
     "axios": "^0.15.3",
-    "fullcalendar": "4.0.0-alpha.2"
+    "quill": "1.3.3",
+    "fullcalendar": "4.0.0-alpha.2",
+    "chart.js": "2.7.3"
   }
 }

src/AppMenu.vue

@@ -107,7 +107,8 @@
             </a>
             <div :class="{'submenuhide': activeMenuIndex !== 7, 'submenushow': activeMenuIndex === 7}">
                 <div>
-                    <router-link to="/">&#9679; Link</router-link>
+                    <router-link to="/chart">&#9679; ChartModel</router-link>
+                    <router-link to="/chart/pie">&#9679; Pie</router-link>
                 </div>
             </div>
 

src/components/chart/Chart.vue

@@ -0,0 +1,72 @@
+<template>
+    <div class="p-chart">
+        <canvas ref="canvas" :width="width" :height="height"></canvas>
+    </div>
+</template>
+
+<script>
+import ChartJS from 'chart.js/src/chart.js';
+
+export default {
+    props: {
+        type: String,
+        data: null,
+        options: null,
+        width: Number,
+        height: Number
+    },
+    chart: null,
+    mounted() {
+        this.initChart();
+    },
+    beforeDestroy() {
+        if (this.chart) {
+            this.chart.destroy();
+            this.chart = null;
+        }
+    },
+    watch: {
+        data() {
+            this.reinit();
+        },
+        type() {
+            this.reinit();
+        },
+        options() {
+            this.reinit();
+        }
+    },
+    methods: {
+        initChart() {
+            this.chart = new ChartJS(this.$refs.canvas, {
+                type: this.type,
+                data: this.data,
+                options: this.options
+            });
+        },
+        getCanvas() {
+            return this.$canvas;
+        },
+        getBase64Image() {
+            return this.chart.toBase64Image();
+        },
+        refresh() {
+            if (this.chart) {
+                this.chart.update();
+            }
+        },
+        reinit() {
+            if (this.chart) {
+                this.chart.destroy();
+                this.initChart();
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.p-chart {
+    position: relative;
+}
+</style>

src/main.js

@@ -5,6 +5,7 @@ import Accordion from './components/accordion/Accordion';
 import AccordionTab from './components/accordion/AccordionTab';
 import Button from './components/button/Button';
 import Card from './components/card/Card';
+import Chart from './components/chart/Chart';
 import Checkbox from './components/checkbox/Checkbox';
 import Chips from './components/chips/Chips';
 import Dropdown from './components/dropdown/Dropdown';
@@ -40,6 +41,7 @@ Vue.component('Accordion', Accordion);
 Vue.component('AccordionTab', AccordionTab);
 Vue.component('Button', Button);
 Vue.component('Card', Card);
+Vue.component('Chart', Chart);
 Vue.component('Checkbox', Checkbox);
 Vue.component('Chips', Chips);
 Vue.component('Dropdown', Dropdown);

src/router.js

@@ -26,6 +26,16 @@ export default new Router({
         name: 'card',
         component: () => import('./views/card/CardDemo.vue')
     },
+    {
+        path: '/chart',
+        name: 'chart',
+        component: () => import('./views/chart/ChartDemo.vue')
+    },
+    {
+        path: '/chart/pie',
+        name: 'piechart',
+        component: () => import('./views/chart/PieChartDemo.vue')
+    },
     {
         path: '/checkbox',
         name: 'checkbox',

src/views/chart/ChartDemo.vue

@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>ChartModel</h1>
+                <p>Chart components are based on <a href="https://www.chartjs.org/">Charts.js</a>, an open source HTML5 based charting library.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            chartModel: {
+                labels: ['A','B','C'],
+                datasets: [
+                    {
+                        data: [300, 50, 100],
+                        backgroundColor: [
+                            "#FF6384",
+                            "#36A2EB",
+                            "#FFCE56"
+                        ],
+                        hoverBackgroundColor: [
+                            "#FF6384",
+                            "#36A2EB",
+                            "#FFCE56"
+                        ]
+                    }
+                ]    
+            }
+        }
+    }
+}
+</script>

src/views/chart/PieChartDemo.vue

@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>PieChart</h1>
+                <p>A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <Chart type="pie" :data="chartModel" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            chartModel: {
+                labels: ['A','B','C'],
+                datasets: [
+                    {
+                        data: [300, 50, 100],
+                        backgroundColor: [
+                            "#FF6384",
+                            "#36A2EB",
+                            "#FFCE56"
+                        ],
+                        hoverBackgroundColor: [
+                            "#FF6384",
+                            "#36A2EB",
+                            "#FFCE56"
+                        ]
+                    }
+                ]    
+            }
+        }
+    }
+}
+</script>