Add Reactive Data to charts (epicmaxco#184)

* make charts data reactive
* fixing footer
* test
* reactive prop
* footer

src/components/statistics/charts/Charts.vue

@@ -3,20 +3,20 @@
     <div class="row">
       <div class="col-md-6">
         <vuestic-widget class="chart-widget" :headerText="'charts.verticalBarChart' | translate">
-          <vuestic-chart v-bind:data="verticalBarChartData" type="vertical-bar"></vuestic-chart>
+          <vuestic-chart :data="verticalBarChartData" type="vertical-bar"></vuestic-chart>
         </vuestic-widget>
       </div>
       <div class="col-md-6">
         <vuestic-widget class="chart-widget" :headerText="'charts.horizontalBarChart' | translate">
-          <vuestic-chart v-bind:data="horizontalBarChartData" type="horizontal-bar"></vuestic-chart>
+          <vuestic-chart :data="horizontalBarChartData" type="horizontal-bar"></vuestic-chart>
         </vuestic-widget>
       </div>
     </div>
 
     <div class="row">
       <div class="col-md-12">
         <vuestic-widget class="chart-widget" :headerText="'charts.lineChart' | translate">
-          <vuestic-chart v-bind:data="lineChartData" type="line"></vuestic-chart>
+          <vuestic-chart :data="lineChartData" type="line"></vuestic-chart>
         </vuestic-widget>
       </div>
     </div>
@@ -29,15 +29,15 @@
       </div>
       <div class="col-md-6">
         <vuestic-widget class="chart-widget" :headerText="'charts.donutChart' | translate">
-          <vuestic-chart v-bind:data="donutChartData" type="donut"></vuestic-chart>
+          <vuestic-chart :data="donutChartData" type="donut"></vuestic-chart>
         </vuestic-widget>
       </div>
     </div>
 
     <div class="row">
       <div class="col-md-12">
         <vuestic-widget class="chart-widget" :headerText="'charts.bubbleChart' | translate">
-          <vuestic-chart v-bind:data="bubbleChartData" type="bubble"></vuestic-chart>
+          <vuestic-chart :data="bubbleChartData" type="bubble"></vuestic-chart>
         </vuestic-widget>
       </div>
     </div>
@@ -65,11 +65,6 @@
         horizontalBarChartData: HorizontalBarChartData
       }
     },
-   // created () {
-     // setInterval(() => {
-       // this.data.datasets.x[0] += 10
-     // }, 4000)
-   // }
   }
 </script>
 

src/data/charts/LineChartData.js

@@ -18,5 +18,5 @@ export default {
       borderColor: palette.transparent,
       data: [50, 20, 70, 30, 10, 5, 70]
     }
-  ]
+  ],
 }

src/data/charts/VerticalBarChartData.js

@@ -9,7 +9,7 @@ export default {
       label: 'USA',
       backgroundColor: palette.primary,
       borderColor: palette.transparent,
-      data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+      data: [50, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
     },
     {
       label: 'USSR',

src/vuestic-theme/vuestic-components/vuestic-chart/VuesticChart.vue

@@ -1,11 +1,11 @@
 <template>
   <div class='vuestic-chart'>
-    <pie-chart :options="options" :data="data" v-if="type === 'pie'"></pie-chart>
-    <donut-chart :options="options" :data="data" v-if="type === 'donut'"></donut-chart>
-    <bubble-chart :options="options" :data="data" v-if="type === 'bubble'"></bubble-chart>
-    <line-chart :options="options" :data="data" v-if="type === 'line'"></line-chart>
-    <horizontal-bar-chart :options="options" :data="data" v-if="type === 'horizontal-bar'"></horizontal-bar-chart>
-    <vertical-bar-chart :options="options" :data="data" v-if="type === 'vertical-bar'"></vertical-bar-chart>
+    <pie-chart :options="options" :chart-data="data" v-if="type === 'pie'"></pie-chart>
+    <donut-chart :options="options" :chart-data="data" v-if="type === 'donut'"></donut-chart>
+    <bubble-chart :options="options" :chart-data="data" v-if="type === 'bubble'"></bubble-chart>
+    <line-chart :options="options" :chart-data="data" v-if="type === 'line'"></line-chart>
+    <horizontal-bar-chart :options="options" :chart-data="data" v-if="type === 'horizontal-bar'"></horizontal-bar-chart>
+    <vertical-bar-chart :options="options" :chart-data="data" v-if="type === 'vertical-bar'"></vertical-bar-chart>
   </div>
 </template>
 
@@ -27,7 +27,7 @@
       HorizontalBarChart,
       DonutChart,
       BubbleChart
-    }
+    },
   }
 </script>
 

src/vuestic-theme/vuestic-components/vuestic-chart/chart-types/BubbleChart.js

@@ -1,8 +1,9 @@
-import { Bubble } from 'vue-chartjs'
+import { Bubble, mixins } from 'vue-chartjs'
 import DefaultOptions from '../DefaultOptions'
 
 export default Bubble.extend({
-  props: ['data', 'options'],
+  mixins: [mixins.reactiveProp],
+  props: ['chartData', 'options'],
 
   data () {
     return {
@@ -14,6 +15,6 @@ export default Bubble.extend({
 
   mounted () {
     let options = Object.assign({}, DefaultOptions, this.defaultOptions, this.options)
-    this.renderChart(this.data, options)
+    this.renderChart(this.chartData, options)
   }
 })

src/vuestic-theme/vuestic-components/vuestic-chart/chart-types/DonutChart.js

@@ -1,8 +1,9 @@
-import { Doughnut } from 'vue-chartjs'
+import { Doughnut, mixins } from 'vue-chartjs'
 import DefaultOptions from '../DefaultOptions'
 
 export default Doughnut.extend({
-  props: ['data', 'options'],
+  mixins: [mixins.reactiveProp],
+  props: ['chartData', 'options'],
 
   data () {
     return {
@@ -14,6 +15,6 @@ export default Doughnut.extend({
 
   mounted () {
     let options = Object.assign({}, DefaultOptions, this.defaultOptions, this.options)
-    this.renderChart(this.data, options)
+    this.renderChart(this.chartData, options)
   }
 })

src/vuestic-theme/vuestic-components/vuestic-chart/chart-types/HorizontalBarChart.js

@@ -1,7 +1,8 @@
-import { HorizontalBar } from 'vue-chartjs'
+import { HorizontalBar, mixins } from 'vue-chartjs'
 import DefaultOptions from '../DefaultOptions'
 
 export default HorizontalBar.extend({
+  mixins: [mixins.reactiveProp],
   props: ['data', 'options'],
 
   data () {
@@ -14,6 +15,6 @@ export default HorizontalBar.extend({
 
   mounted () {
     let options = Object.assign({}, DefaultOptions, this.defaultOptions, this.options)
-    this.renderChart(this.data, options)
+    this.renderChart(this.chartData, options)
   }
 })

src/vuestic-theme/vuestic-components/vuestic-chart/chart-types/LineChart.js

@@ -1,19 +1,18 @@
-import { Line } from 'vue-chartjs'
+import {Line, mixins} from 'vue-chartjs'
 import DefaultOptions from '../DefaultOptions'
 
 export default Line.extend({
-  props: ['data', 'options'],
-
+  props: ['chartData', 'options'],
+  mixins: [mixins.reactiveProp],
   data () {
     return {
-      defaultOptions: {
-
-      }
+      defaultOptions: {}
     }
   },
 
+
   mounted () {
     let options = Object.assign({}, DefaultOptions, this.defaultOptions, this.options)
-    this.renderChart(this.data, options)
+    this.renderChart(this.chartData, options)
   }
 })

src/vuestic-theme/vuestic-components/vuestic-chart/chart-types/PieChart.js

@@ -1,8 +1,9 @@
-import {Pie} from 'vue-chartjs'
+import {Pie, mixins} from 'vue-chartjs'
 import DefaultOptions from '../DefaultOptions'
 
 export default Pie.extend({
-  props: ['data', 'options'],
+  mixins: [mixins.reactiveProp],
+  props: ['chartData', 'options'],
 
   data () {
     return {
@@ -12,6 +13,6 @@ export default Pie.extend({
 
   mounted () {
     let options = Object.assign({}, DefaultOptions, this.defaultOptions, this.options)
-    this.renderChart(this.data, options)
+    this.renderChart(this.chartData, options)
   }
 })

src/vuestic-theme/vuestic-components/vuestic-chart/chart-types/VerticalBarChart.js

@@ -1,19 +1,18 @@
-import { Bar } from 'vue-chartjs'
+import {Bar, mixins} from 'vue-chartjs'
 import DefaultOptions from '../DefaultOptions'
 
 export default Bar.extend({
-  props: ['data', 'options'],
+  mixins: [mixins.reactiveProp],
+  props: ['chartData', 'options'],
 
   data () {
     return {
-      defaultOptions: {
-
-      }
+      defaultOptions: {}
     }
   },
 
   mounted () {
     let options = Object.assign({}, DefaultOptions, this.defaultOptions, this.options)
-    this.renderChart(this.data, options)
+    this.renderChart(this.chartData, options)
   }
 })