support for SSR

README.md

@@ -2,14 +2,58 @@
 
 Chartjs component is based on [chart.js](http://www.chartjs.org) for Vue Bulma.
 
+## Installation
+
+```
+$ npm install vue-bulma-chartjs
+```
+
+## Examples
+
+```vue
+<template>
+  <chart :type="'pie'" :data="data" :options="options"></chart>
+</template>
+
+<script>
+import Chart from 'vue-bulma-chartjs'
+
+export default {
+  components: {
+    Chart
+  },
+
+  data () {
+    return {
+      data: {
+        labels: ['Sleeping', 'Designing', 'Coding', 'Cycling'],
+          datasets: [{
+          data: [20, 40, 5, 35],
+          backgroundColor: [
+            '#1fc8db',
+            '#fce473',
+            '#42afe3',
+            '#ed6c63',
+            '#97cd76'
+          ]
+        }]
+      },
+      options: {
+        segmentShowStroke: false
+      }
+    }
+  }
+}
+</script>
+```
+
 ## Badges
 
 ![](https://img.shields.io/badge/license-MIT-blue.svg)
 ![](https://img.shields.io/badge/status-stable-green.svg)
 
 ---
 
-> [fundon.me](https://fundun.me) &nbsp;&middot;&nbsp;
+> [fundon.me](https://fundon.me) &nbsp;&middot;&nbsp;
 > GitHub [@fundon](https://github.com/fundon) &nbsp;&middot;&nbsp;
 > Twitter [@_fundon](https://twitter.com/_fundon)
-

package.json

@@ -1,14 +1,14 @@
 {
   "name": "vue-bulma-chartjs",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "description": "Chartjs component for Vue Bulma",
   "main": "src/Chartjs.vue",
-  "devDependencies": {
-    "bulma": "0.1.0",
-    "vue": "1.0.26"
+  "peerDependencies": {
+    "bulma": ">=0.2",
+    "vue": ">=2"
   },
   "scripts": {},
-  "repository": "git+https://github.com/vue-bulma/chartjs.git",
+  "repository": "vue-bulma/chartjs",
   "keywords": [
     "vue",
     "bulma",
@@ -22,6 +22,6 @@
   "author": "Fangdun Cai <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "chart.js": "2.2.0-rc.1"
+    "chart.js": "2.5.0"
   }
 }

src/Chartjs.vue

@@ -1,11 +1,8 @@
 <template>
-  <canvas class="chartjs" :width="width" :height="height"></canvas>
+  <canvas v-if="componentDidMount" class="chartjs" :width="width" :height="height"></canvas>
 </template>
 
 <script>
-// import Chart from 'chart.js' // With moment.js
-import Chart from 'chart.js/dist/Chart' // Without moment.js
-
 const types = ['line', 'bar', 'radar', 'polarArea', 'pie', 'doughnut']
 
 export default {
@@ -16,48 +13,65 @@ export default {
     type: {
       type: String,
       required: true,
-      validator (value) {
-        return types.indexOf(value) > -1
-      }
+      validator: val => types.includes(val)
     },
     data: {
       type: Object,
       required: true,
-      default () {
-        return {}
-      }
+      default: () => ({})
     },
     options: {
       type: Object,
-      default () {
-        return {}
-      }
+      default: () => ({})
     }
   },
+
+  beforeMount() {
+    // needed for SSR
+    this.ChartJS = require('chart.js') // With moment.js
+  },
 
-  ready () {
-    const $el = this.$el
-    this.chart = new Chart($el, {
+  mounted () {
+    this.chart = new this.ChartJS(this.$el, {
       type: this.type,
       data: this.data,
       options: this.options
     })
+
+    this.componentDidMount = true
   },
 
   data () {
     return {
+      componentDidMount: false,
+      ChartJS: null,
       chart: null
     }
   },
 
-  watch: {
-    data (val) {
+  methods: {
+    resetChart () {
       this.$nextTick(() => {
-        // this.chart.data.datasets = val.datasets
-        // this.chart.data.labels = val.labels
-        this.chart.update()
+        this.chart.destroy()
+        this.chart = new this.ChartJS(this.$el, {
+          type: this.type,
+          data: this.data,
+          options: this.options
+        })
       })
     }
+  },
+
+  watch: {
+    type () {
+      this.resetChart()
+    },
+    data () {
+      this.chart.update()
+    },
+    options () {
+      this.resetChart()
+    }
   }
 }
 </script>

yarn.lock

@@ -0,0 +1,35 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+[email protected]:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.5.0.tgz#fe6e751a893769f56e72bee5ad91207e1c592957"
+  dependencies:
+    chartjs-color "^2.0.0"
+    moment "^2.10.6"
+
+chartjs-color-string@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.4.0.tgz#57748d4530ae28d8db0a5492182ba06dfdf2f468"
+  dependencies:
+    color-name "^1.0.0"
+
+chartjs-color@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.1.0.tgz#9c39ac830ccd98996ae80c9f11086ff12c98a756"
+  dependencies:
+    chartjs-color-string "^0.4.0"
+    color-convert "^0.5.3"
+
+color-convert@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
+
+color-name@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
+
+moment@^2.10.6:
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.17.1.tgz#fed9506063f36b10f066c8b59a144d7faebe1d82"