feat: upgrade vue-chartjs to 3.0.0

Author: clarkdo

client/components/charts/BarDemo.vue

@@ -2,8 +2,10 @@
 import Component from 'class-component'
 import { Bar } from 'vue-chartjs'
 
-@Component
-export default class BarDemo extends Bar {
+@Component({
+  extends: Bar
+})
+export default class BarDemo {
   mounted () {
     this.renderChart({
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],

client/components/charts/DoughnutDemo.vue

@@ -2,8 +2,10 @@
 import Component from 'class-component'
 import { Doughnut } from 'vue-chartjs'
 
-@Component
-export default class DoughnutDemo extends Doughnut {
+@Component({
+  extends: Doughnut
+})
+export default class DoughnutDemo {
   mounted () {
     this.renderChart({
       labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],

client/components/charts/LineDemo.vue

@@ -1,9 +1,16 @@
 <script>
+import Vue from 'vue'
 import Component from 'class-component'
 import { Line } from 'vue-chartjs'
 
-@Component
-export default class LineDemo extends Line {
+/*
+  Component class must inherit Vue or its descendant class
+  when class property is used.
+*/
+@Component({
+  extends: Line
+})
+export default class LineDemo extends Vue {
   chartData = {
     labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
     datasets: [

client/components/charts/PieDemo.vue

@@ -2,8 +2,10 @@
 import Component from 'class-component'
 import { Pie } from 'vue-chartjs'
 
-@Component
-export default class PieDemo extends Pie {
+@Component({
+  extends: Pie
+})
+export default class PieDemo {
   mounted () {
     this.renderChart({
       labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],

client/components/charts/ReactiveDemo.vue

@@ -1,11 +1,13 @@
 <script>
+import Vue from 'vue'
 import Component from 'class-component'
 import { Bar, mixins } from 'vue-chartjs'
 
 @Component({
+  extends: Bar,
   mixins: [mixins.reactiveData]
 })
-export default class ReactiveDemo extends Bar {
+export default class ReactiveDemo extends Vue {
   chartData = ''
   created () {
     this.fillData()

client/components/charts/ScatterDemo.vue

@@ -1,9 +1,12 @@
 <script>
+import Vue from 'vue'
 import Component from 'class-component'
 import { Scatter } from 'vue-chartjs'
 
-@Component
-export default class ScatterDemo extends Scatter {
+@Component({
+  extends: Scatter
+})
+export default class ScatterDemo extends Vue {
   chartData = {
     datasets: [{
       label: 'Alibaba',

package.json

@@ -62,7 +62,7 @@
     "normalize.css": "^7.0.0",
     "nuxt": "^1.0.0-rc11",
     "svg-captcha": "^1.3.11",
-    "vue-chartjs": "^2.8.2",
+    "vue-chartjs": "^3.0.0",
     "vue-class-component": "^5.0.1",
     "vue-clipboards": "^1.1.0",
     "vue-i18n": "^7.2.0",

yarn.lock

@@ -8590,9 +8590,9 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
-vue-chartjs@^2.8.2:
-  version "2.8.7"
-  resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-2.8.7.tgz#bcd1cda1a1ef8ed80581638a02cf88182d437d09"
+vue-chartjs@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-3.0.0.tgz#a94f79072ed9a6d51b62c23269d874af0bc48718"
   dependencies:
     lodash.merge "^4.6.0"