From fa5776d6071bfb87063f4c01199072ad8625dc35 Mon Sep 17 00:00:00 2001
From: Miguel Rincon <mrincon@gitlab.com>
Date: Mon, 24 Mar 2025 12:28:15 +0100
Subject: [PATCH] fix(GlChart): Emits update when options are modified

Previously, GlChart would only emit an update when
the chart options were set or replaced, however,
it missed deep checks.

This change allows components to listen on the
`updated` event for deep changes in the chart
options.
---
 src/components/charts/chart/chart.spec.js |  2 ++
 src/components/charts/chart/chart.vue     | 25 +++++++++++++++--------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/charts/chart/chart.spec.js b/src/components/charts/chart/chart.spec.js
index 0093f67a5c..9f4423b409 100644
--- a/src/components/charts/chart/chart.spec.js
+++ b/src/components/charts/chart/chart.spec.js
@@ -123,6 +123,7 @@ describe('chart component', () => {
         });
 
         expect(wrapper.emitted('updated').length).toEqual(1);
+        expect(wrapper.emitted('updated')[0][0]).toBe(mockChartInstance);
       });
 
       it('reacts to options changes by merging options', async () => {
@@ -141,6 +142,7 @@ describe('chart component', () => {
           xAxis: { show: true },
         });
         expect(wrapper.emitted('updated').length).toEqual(2);
+        expect(wrapper.emitted('updated')[1][0]).toBe(mockChartInstance);
       });
     });
 
diff --git a/src/components/charts/chart/chart.vue b/src/components/charts/chart/chart.vue
index 361d22ac81..756a0ef4c3 100644
--- a/src/components/charts/chart/chart.vue
+++ b/src/components/charts/chart/chart.vue
@@ -13,7 +13,7 @@ import { GlResizeObserverDirective } from '../../../directives/resize_observer/r
 import { debounceByAnimationFrame } from '../../../utils/utils';
 
 /**
- * Allowed values by eCharts
+ * Allowed values by ECharts
  * https://echarts.apache.org/en/api.html#echartsInstance.resize
  */
 const sizeValidator = (size) => Number.isFinite(size) || size === 'auto' || size == null;
@@ -74,6 +74,7 @@ export default {
       default: true,
     },
   },
+  emits: ['created', 'updated', 'chartItemClicked'],
   data() {
     return {
       chart: null,
@@ -99,10 +100,11 @@ export default {
     },
   },
   watch: {
-    options() {
-      if (this.chart) {
+    modifiedOptions: {
+      handler() {
         this.draw();
-      }
+      },
+      deep: true,
     },
     width() {
       this.setChartSize();
@@ -145,11 +147,16 @@ export default {
   },
   methods: {
     draw() {
-      this.chart.setOption(this.modifiedOptions);
-      /**
-       * Emitted after calling `echarts.setOption`
-       */
-      this.$emit('updated', this.chart);
+      if (this.chart) {
+        this.chart.setOption(this.modifiedOptions);
+        /**
+         * Emitted when chart is updated via `echartsInstance.setOption`,
+         * emits the chart instance.
+         *
+         * @property {object} chart The chart instance (with updated options).
+         */
+        this.$emit('updated', this.chart);
+      }
     },
     setChartSize() {
       this.chart.resize({
-- 
GitLab