feat: make chart update automatically...

...for any property change. Disables ts-ignore rule as a workaround for vuejs/vetur#1707 (comment)
DeepSourceCorp · Mar 6, 2023 · ba37fe8 · ba37fe8
1 parent f6c7b3b
commit ba37fe8
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 44 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -23,7 +23,9 @@ module.exports = {
           requireLast: false
         }
       }
-    ]
+    ],
+    // ? Need to use @ts-ignore for working around https://github.com/vuejs/vetur/issues/1707#issuecomment-686851677
+    '@typescript-eslint/ban-ts-ignore': 'off'
   },
 
   overrides: [

diff --git a/src/components/ZChart/ZChart.vue b/src/components/ZChart/ZChart.vue
@@ -93,7 +93,7 @@ export default Vue.extend({
     type: {
       type: String,
       default: 'axis-mixed',
-      validator: function (value: string): boolean {
+      validator: function(value: string): boolean {
         return ['bar', 'line', 'percentage', 'heatmap', 'donut', 'pie', 'axis-mixed'].includes(value)
       }
     },
@@ -173,50 +173,17 @@ export default Vue.extend({
     this.themeColors = this.getThemeColors(baseColors)
   },
   watch: {
-    chartType() {
-      this.initChart()
-    },
-    labels() {
-      this.updateChart()
-    },
-    dataSets() {
-      this.updateChart()
-    },
-    yMarkers() {
-      this.updateChart()
+    chartData: {
+      handler: function() {
+        this.updateChart()
+      }
+      // deep: true
     }
   },
   methods: {
     initChart() {
-      const chartOptions = {
-        data: {
-          labels: this.labels,
-          datasets: this.dataSets,
-          yMarkers: this.yMarkers ? this.markers : undefined,
-          yRegions: this.yRegions ? this.regions : undefined
-        },
-        tooltipOptions: this.tooltipOptions,
-        barOptions: this.barOptions,
-        lineOptions: Object.assign(DEFAULT_LINE_OPTIONS, this.lineOptions),
-        axisOptions: {
-          ...Object.assign(DEFAULT_AXIS_OPTIONS, this.axisOptions),
-          yAxisRange: {
-            min: this.yAxisMin,
-            max: this.yAxisMax
-          }
-        },
-        maxSlices: this.maxSlices,
-        showLegend: this.showLegend,
-        animate: this.animate,
-        disableEntryAnimation: !this.animate,
-        maxLegendPoints: this.maxLegendPoints
-      }
       this.chart = new Chart(this.$refs[this.wrapperName], {
-        type: this.chartType,
-        colors: this.palette,
-        height: this.height,
-        title: this.title,
-        ...chartOptions
+        ...this.chartData
       }) as ChartInterface
     },
     updateChart() {
@@ -254,14 +221,15 @@ export default Vue.extend({
   computed: {
     palette(): Array<string> {
       if (this.colors) {
-        return (this.colors as Array<string>).map((token) => {
+        return (this.colors as Array<string>).map(token => {
           return this.themeColors[token] || token
         })
       }
       return []
     },
+    /** @return {Array<Marker>} */
     markers(): Array<Marker> {
-      return (this.yMarkers as Array<Marker>).map((marker) => {
+      return (this.yMarkers as Array<Marker>).map(marker => {
         if (!marker.options) {
           marker.options = {}
         }
@@ -273,7 +241,7 @@ export default Vue.extend({
       })
     },
     regions(): Array<Region> {
-      return (this.yRegions as Array<Region>).map((region) => {
+      return (this.yRegions as Array<Region>).map(region => {
         if (!region.options) {
           region.options = {}
         }
@@ -288,6 +256,39 @@ export default Vue.extend({
     },
     chartType(): string {
       return this.type
+    },
+    chartData() {
+      return {
+        // @ts-ignore ref https://github.com/vuejs/vetur/issues/1707#issuecomment-686851677
+        type: this.chartType,
+        // @ts-ignore ref https://github.com/vuejs/vetur/issues/1707#issuecomment-686851677
+        colors: this.palette,
+        height: this.height,
+        title: this.title,
+        data: {
+          labels: this.labels,
+          datasets: this.dataSets,
+          // @ts-ignore ref https://github.com/vuejs/vetur/issues/1707#issuecomment-686851677
+          yMarkers: this.yMarkers ? this.markers : undefined,
+          // @ts-ignore ref https://github.com/vuejs/vetur/issues/1707#issuecomment-686851677
+          yRegions: this.yRegions ? this.regions : undefined
+        },
+        tooltipOptions: this.tooltipOptions,
+        barOptions: this.barOptions,
+        lineOptions: Object.assign(DEFAULT_LINE_OPTIONS, this.lineOptions),
+        axisOptions: {
+          ...Object.assign(DEFAULT_AXIS_OPTIONS, this.axisOptions),
+          yAxisRange: {
+            min: this.yAxisMin,
+            max: this.yAxisMax
+          }
+        },
+        maxSlices: this.maxSlices,
+        showLegend: this.showLegend,
+        animate: this.animate,
+        disableEntryAnimation: !this.animate,
+        maxLegendPoints: this.maxLegendPoints
+      }
     }
   },
   mounted() {