Improve charts and dynamic chart updates with gradients

src/components/Charts/BarChart.js

@@ -21,37 +21,34 @@ export default {
       }
     }
   },
+  data() {
+    return {
+      ctx: null
+    };
+  },
   methods: {
-    updateGradients() {
+    updateGradients(chartData) {
-      const ctx = document.getElementById(this.chartId).getContext('2d');
+      if(!chartData) return;
+      const ctx = this.ctx || document.getElementById(this.chartId).getContext('2d');
       const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
 
       gradientStroke.addColorStop(this.gradientStops[0], this.gradientColors[0]);
       gradientStroke.addColorStop(this.gradientStops[1], this.gradientColors[1]);
       gradientStroke.addColorStop(this.gradientStops[2], this.gradientColors[2]);
-      if(this.chartData){
+      chartData.datasets.forEach(set => {
-        this.chartData.datasets.forEach(set => {
         set.backgroundColor = gradientStroke;
       });
     }
-    }
   },
   mounted() {
-    this.updateGradients();
+    this.$watch('chartData', (newVal, oldVal) => {
-    this.renderChart(
+      this.updateGradients(this.chartData);
-      this.chartData,
+      if (oldVal === null) {
-      this.extraOptions
-    );
-  },
-  watch: {
-    chartData(newVal, oldVal) {
-      this.updateGradients();
-      if(oldVal === null) {
         this.renderChart(
           this.chartData,
           this.extraOptions
         );
       }
-    }
+    }, { immediate: true });
   }
 };

src/components/Charts/LineChart.js

@@ -9,49 +9,46 @@ export default {
     gradientColors: {
       type: Array,
       default: () => ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
-      validator: val =>{
+      validator: val => {
         return val.length > 2;
       }
     },
     gradientStops: {
       type: Array,
       default: () => [1, 0.4, 0],
-      validator: val =>{
+      validator: val => {
         return val.length > 2;
       }
     }
   },
+  data() {
+    return {
+      ctx: null
+    };
+  },
   methods: {
-    updateGradients() {
+    updateGradients(chartData) {
-      const ctx = document.getElementById(this.chartId).getContext('2d');
+      if(!chartData) return;
+      const ctx = this.ctx || document.getElementById(this.chartId).getContext('2d');
       const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
 
       gradientStroke.addColorStop(this.gradientStops[0], this.gradientColors[0]);
       gradientStroke.addColorStop(this.gradientStops[1], this.gradientColors[1]);
       gradientStroke.addColorStop(this.gradientStops[2], this.gradientColors[2]);
-      if(this.chartData){
+      chartData.datasets.forEach(set => {
-        this.chartData.datasets.forEach(set => {
         set.backgroundColor = gradientStroke;
       });
     }
-    }
   },
   mounted() {
-    this.updateGradients();
+    this.$watch('chartData', (newVal, oldVal) => {
-    this.renderChart(
+      this.updateGradients(this.chartData);
-      this.chartData,
+      if (oldVal === null) {
-      this.extraOptions
-    );
-  },
-  watch: {
-    chartData(newVal, oldVal) {
-      this.updateGradients();
-      if(oldVal === null) {
         this.renderChart(
           this.chartData,
           this.extraOptions
         );
       }
-    }
+    }, { immediate: true });
   }
 };

src/pages/Dashboard.vue

@@ -29,6 +29,7 @@
           </template>
           <div class="chart-area">
             <line-chart style="height: 100%"
+                        ref="bigChart"
                         :chart-data="bigLineChart.chartData"
                         :gradient-color="bigLineChart.gradientColors"
                         :gradient-stops="bigLineChart.gradientStops"
@@ -223,7 +224,7 @@
     },
     methods: {
       initBigChart(index) {
-        this.bigLineChart.chartData = {
+        let chartData = {
           datasets: [{
             label: "My First dataset",
             fill: true,
@@ -242,6 +243,8 @@
           }],
           labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
         }
+        this.$refs.bigChart.updateGradients(chartData);
+        this.bigLineChart.chartData = chartData;
         this.bigLineChart.activeIndex = index;
       }
     },