├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── src
    └── Chartjs.vue
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | (The MIT License)
 2 | 
 3 | Copyright (c) 2016 fundon <cfddream@gmail.com<
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Chartjs
 2 | 
 3 | Chartjs component is based on [chart.js](http://www.chartjs.org) for Vue Bulma.
 4 | 
 5 | ## Installation
 6 | 
 7 | ```
 8 | $ npm install vue-bulma-chartjs
 9 | ```
10 | 
11 | ## Examples
12 | 
13 | ```vue
14 | <template>
15 |   <chart :type="'pie'" :data="data" :options="options"></chart>
16 | </template>
17 | 
18 | <script>
19 | import Chart from 'vue-bulma-chartjs'
20 | 
21 | export default {
22 |   components: {
23 |     Chart
24 |   },
25 | 
26 |   data () {
27 |     return {
28 |       data: {
29 |         labels: ['Sleeping', 'Designing', 'Coding', 'Cycling'],
30 |           datasets: [{
31 |           data: [20, 40, 5, 35],
32 |           backgroundColor: [
33 |             '#1fc8db',
34 |             '#fce473',
35 |             '#42afe3',
36 |             '#ed6c63',
37 |             '#97cd76'
38 |           ]
39 |         }]
40 |       },
41 |       options: {
42 |         segmentShowStroke: false
43 |       }
44 |     }
45 |   }
46 | }
47 | </script>
48 | ```
49 | 
50 | ## Badges
51 | 
52 | ![](https://img.shields.io/badge/license-MIT-blue.svg)
53 | ![](https://img.shields.io/badge/status-stable-green.svg)
54 | 
55 | ---
56 | 
57 | > [fundon.me](https://fundon.me) &nbsp;&middot;&nbsp;
58 | > GitHub [@fundon](https://github.com/fundon) &nbsp;&middot;&nbsp;
59 | > Twitter [@_fundon](https://twitter.com/_fundon)
60 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-bulma-chartjs",
 3 |   "version": "1.0.5",
 4 |   "description": "Chartjs component for Vue Bulma",
 5 |   "main": "src/Chartjs.vue",
 6 |   "peerDependencies": {
 7 |     "bulma": ">=0.2",
 8 |     "vue": ">=2"
 9 |   },
10 |   "scripts": {},
11 |   "repository": "vue-bulma/chartjs",
12 |   "keywords": [
13 |     "vue",
14 |     "bulma",
15 |     "vue-bulma",
16 |     "vue-bulma-component",
17 |     "vue-bulma-chartjs",
18 |     "chart.js",
19 |     "chartjs",
20 |     "chart"
21 |   ],
22 |   "author": "Fangdun Cai <cfddream@gmail.com>",
23 |   "license": "MIT",
24 |   "dependencies": {
25 |     "chart.js": "2.6.0"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/Chartjs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <canvas class="chartjs" :width="width" :height="height"></canvas>
 3 | </template>
 4 | 
 5 | <script>
 6 | import Chart from 'chart.js' // With moment.js
 7 | 
 8 | const types = ['line', 'bar', 'radar', 'polarArea', 'pie', 'doughnut', 'bubble', 'scatter']
 9 | 
10 | export default {
11 | 
12 |   props: {
13 |     width: Number,
14 |     height: Number,
15 |     type: {
16 |       type: String,
17 |       required: true,
18 |       validator: val => types.includes(val)
19 |     },
20 |     data: {
21 |       type: Object,
22 |       required: true,
23 |       default: () => ({})
24 |     },
25 |     options: {
26 |       type: Object,
27 |       default: () => ({})
28 |     },
29 |     plugins: {
30 |       type: [Object, Array],
31 |       default: () => ({})
32 |     }
33 |   },
34 | 
35 |   mounted () {
36 |     this.resetChart()
37 |   },
38 | 
39 |   data () {
40 |     return {
41 |       chart: null
42 |     }
43 |   },
44 | 
45 |   methods: {
46 |     resetChart () {
47 |       if (this.chart)
48 |         this.chart.destroy()
49 | 
50 |       this.chart = new Chart(this.$el, {
51 |         type: this.type,
52 |         data: this.data,
53 |         options: this.options,
54 |         plugins: this.plugins
55 |       })
56 |     }
57 |   },
58 | 
59 |   watch: {
60 |     type () {
61 |       this.$nextTick(() => this.resetChart())
62 |     },
63 |     data () {
64 |       this.chart.update()
65 |     },
66 |     options () {
67 |       this.$nextTick(() => this.resetChart())
68 |     }
69 |   }
70 | }
71 | </script>
72 | 
73 | <style lang="scss">
74 |   canvas.chartjs {
75 |     max-width: 100%;
76 |   }
77 | </style>
78 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 2 | # yarn lockfile v1
 3 | 
 4 | 
 5 | chart.js@2.6.0:
 6 |   version "2.6.0"
 7 |   resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.6.0.tgz#308f9a4b0bfed5a154c14f5deb1d9470d22abe71"
 8 |   dependencies:
 9 |     chartjs-color "^2.1.0"
10 |     moment "^2.10.6"
11 | 
12 | chartjs-color-string@^0.4.0:
13 |   version "0.4.0"
14 |   resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.4.0.tgz#57748d4530ae28d8db0a5492182ba06dfdf2f468"
15 |   dependencies:
16 |     color-name "^1.0.0"
17 | 
18 | chartjs-color@^2.1.0:
19 |   version "2.1.0"
20 |   resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.1.0.tgz#9c39ac830ccd98996ae80c9f11086ff12c98a756"
21 |   dependencies:
22 |     chartjs-color-string "^0.4.0"
23 |     color-convert "^0.5.3"
24 | 
25 | color-convert@^0.5.3:
26 |   version "0.5.3"
27 |   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
28 | 
29 | color-name@^1.0.0:
30 |   version "1.1.1"
31 |   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
32 | 
33 | moment@^2.10.6:
34 |   version "2.17.1"
35 |   resolved "https://registry.yarnpkg.com/moment/-/moment-2.17.1.tgz#fed9506063f36b10f066c8b59a144d7faebe1d82"
36 | 


--------------------------------------------------------------------------------