├── .gitignore
├── LICENSE
├── README.md
├── package.json
└── src
    ├── LinearGauge.vue
    ├── RadialGauge.vue
    └── index.js


/.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 | # Canvas gauges
 2 | 
 3 | Canvas gauges component is based on [canvas-gauges](https://canvas-gauges.com/) for Vue Bulma.
 4 | 
 5 | ## Installation
 6 | 
 7 | ```
 8 | $ npm install vue-canvas-gauges --save
 9 | ```
10 | 
11 | ## Examples
12 | 
13 | ```vue
14 | <template>
15 |   <div>
16 |     <radial-gauge options="{ value: 233 }"></radial-gauge>
17 |     <linear-gauge :value="377"></linear-gauge>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | import { LinearGauge, RadialGauge }  from 'vue-canvas-gauges'
23 | 
24 | export default {
25 |   components: {
26 |     LinearGauge,
27 |     RadialGauge
28 |   }
29 | }
30 | </script>
31 | 
32 | ```
33 | 
34 | 
35 | ## Badges
36 | 
37 | ![](https://img.shields.io/badge/license-MIT-blue.svg)
38 | ![](https://img.shields.io/badge/status-stable-green.svg)
39 | 
40 | ---
41 | 
42 | > [fundon.me](https://fundon.me) &nbsp;&middot;&nbsp;
43 | > GitHub [@fundon](https://github.com/fundon) &nbsp;&middot;&nbsp;
44 | > Twitter [@_fundon](https://twitter.com/_fundon)
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-canvas-gauges",
 3 |   "version": "0.0.0",
 4 |   "description": "Canvas gauges component is based on canvas-gauges for Vue",
 5 |   "main": "src/index.js",
 6 |   "scripts": {},
 7 |   "keywords": [
 8 |     "vue",
 9 |     "canvas-gauges",
10 |     "canvas",
11 |     "gauges",
12 |     "chart"
13 |   ],
14 |   "author": "Fangdun Cai <cfddream@gmail.com>",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "canvas-gauges": "2.0.6"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/LinearGauge.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <canvas class="canvas-gauges"></canvas>
 3 | </template>
 4 | 
 5 | <script>
 6 | import { LinearGauge } from 'canvas-gauges'
 7 | 
 8 | export default {
 9 | 
10 |   props: {
11 |     value: Number,
12 |     options: {
13 |       type: Object,
14 |       default: () => ({})
15 |     }
16 |   },
17 | 
18 |   data () {
19 |     return {
20 |       chart: null
21 |     }
22 |   },
23 | 
24 |   mounted () {
25 |     if (this.value) this.options.value = this.value
26 |     this.options.renderTo = this.$el
27 |     this.chart = new LinearGauge(this.options).draw()
28 |   },
29 | 
30 |   beforeDestroy() {
31 |     this.chart.destroy()
32 |   },
33 | 
34 |   watch: {
35 |     value (val) {
36 |       // has bug
37 |       // this.chart.value = val
38 |     }
39 |   }
40 | 
41 | }
42 | </script>
43 | 


--------------------------------------------------------------------------------
/src/RadialGauge.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <canvas class="canvas-gauges"></canvas>
 3 | </template>
 4 | 
 5 | <script>
 6 | import { RadialGauge } from 'canvas-gauges'
 7 | 
 8 | export default {
 9 | 
10 |   props: {
11 |     value: Number,
12 |     options: {
13 |       type: Object,
14 |       default: () => ({})
15 |     }
16 |   },
17 | 
18 |   data () {
19 |     return {
20 |       chart: null
21 |     }
22 |   },
23 | 
24 |   mounted () {
25 |     if (this.value) this.options.value = this.value
26 |     this.options.renderTo = this.$el
27 |     this.chart = new RadialGauge(this.options).draw()
28 |   },
29 | 
30 |   beforeDestroy() {
31 |     this.chart.destroy()
32 |   },
33 | 
34 |   watch: {
35 |     value (val) {
36 |       // has bug!
37 |       // this.chart.value = val
38 |     }
39 |   }
40 | 
41 | }
42 | </script>
43 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import LinearGauge from './LinearGauge'
2 | import RadialGauge from './RadialGauge'
3 | 
4 | module.exports = {
5 |   LinearGauge,
6 |   RadialGauge
7 | }
8 | 


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