feat: make chart reactive to all properties

.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: [

src/components/ZChart/ZChart.stories.ts

@@ -4,9 +4,8 @@ import '../../assets/css/layout.css'
 import '../../assets/css/chart.css'
 import ZChart from './ZChart.vue'
 
-const issueData = {
-  labels: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
-  datasets: [
+function getRandomDatasets() {
+  return [
     {
       name: 'Active Issues',
       values: Array.from({ length: 12 }, () => Math.floor(10 + Math.random() * 80))
@@ -15,9 +14,24 @@ const issueData = {
       name: 'Resolved Issues',
       values: Array.from({ length: 12 }, () => Math.floor(10 + Math.random() * 75))
     }
-  ],
+  ]
+}
+
+function getRandomMarkers() {
+  return [
+    {
+      label: 'Another Threshold',
+      value: Math.floor(10 + Math.random() * 80),
+      options: { stroke: 'vanilla-400', lineType: 'dashed' }
+    }
+  ]
+}
+
+const issueData = {
+  labels: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
+  datasets: getRandomDatasets(),
   yRegions: [{ label: 'Threshold', start: 0, end: 35, options: { fill: 'ink-300' } }],
-  yMarkers: [{ label: 'Another Threshold', value: 45, options: { stroke: 'vanilla-400', lineType: 'dashed' } }]
+  yMarkers: getRandomMarkers()
 }
 
 export default {
@@ -36,9 +50,22 @@ export const LineChart = () => ({
       yMarkers: issueData.yMarkers
     }
   },
-  template: `<div class="padding-container">
-    <z-chart :dataSets="dataSets" :labels="labels" :yRegions=yRegions :yMarkers=yMarkers type="line" :yAxisMax="100" :yAxisMin="0"></z-chart>
-  </div>`
+  methods: {
+    changeData() {
+      // skipcq JS-0295
+      // @ts-ignore ref https://github.com/vuejs/vetur/issues/1707#issuecomment-686851677
+      this.dataSets = getRandomDatasets()
+      // skipcq JS-0295
+      // @ts-ignore ref https://github.com/vuejs/vetur/issues/1707#issuecomment-686851677
+      this.yMarkers = getRandomMarkers()
+    }
+  },
+  template: `
+    <div class="padding-container">
+      <z-chart :dataSets="dataSets" :labels="labels" :yRegions=yRegions :yMarkers=yMarkers type="line" :yAxisMax="100" :yAxisMin="0" />
+      <button class="text-vanilla-100 bg-ink-200 rounded-md px-2 py-1" @click="changeData">Change data</button>
+    </div>
+  `
 })
 
 export const CustomColors = () => ({

src/components/ZChart/ZChart.vue

@@ -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() {
@@ -260,6 +227,7 @@ export default Vue.extend({
       }
       return []
     },
+    /** @return {Array<Marker>} */
     markers(): Array<Marker> {
       return (this.yMarkers as Array<Marker>).map((marker) => {
         if (!marker.options) {
@@ -288,6 +256,43 @@ export default Vue.extend({
     },
     chartType(): string {
       return this.type
+    },
+    chartData() {
+      return {
+        // skipcq JS-0295
+        // @ts-ignore ref https://github.com/vuejs/vetur/issues/1707#issuecomment-686851677
+        type: this.chartType,
+        // skipcq JS-0295
+        // @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,
+          // skipcq JS-0295
+          // @ts-ignore ref https://github.com/vuejs/vetur/issues/1707#issuecomment-686851677
+          yMarkers: this.yMarkers ? this.markers : undefined,
+          // skipcq JS-0295
+          // @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() {