Merge branch '351907-time-series-chart-responsiveness' into 'master'

Refactored time series chart responsiveness

See merge request gitlab-org/gitlab!81454

app/assets/javascripts/monitoring/components/charts/time_series.vue

 <script>
-import { GlLink, GlTooltip, GlResizeObserverDirective, GlIcon } from '@gitlab/ui';
+import { GlLink, GlTooltip, GlIcon } from '@gitlab/ui';
 import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import { isEmpty, omit, throttle } from 'lodash';
 import { makeDataSeries } from '~/helpers/monitor_helper';
@@ -28,9 +28,6 @@ export default {
     GlLink,
     GlIcon,
   },
-  directives: {
-    GlResizeObserverDirective,
-  },
   inheritAttrs: false,
   props: {
     graphData: {
@@ -366,21 +363,16 @@ export default {
       eChart.off('datazoom');
       eChart.on('datazoom', this.throttledDatazoom);
     },
-    onResize() {
-      if (!this.$refs.chart) return;
-      const { width } = this.$refs.chart.$el.getBoundingClientRect();
-      this.width = width;
-    },
   },
 };
 </script>
 
 <template>
-  <div v-gl-resize-observer-directive="onResize">
   <component
     :is="glChartComponent"
     ref="chart"
     v-bind="$attrs"
+    :responsive="true"
     :group-id="groupId"
     :data="chartData"
     :option="chartOptions"
@@ -425,5 +417,4 @@ export default {
       </template>
     </template>
   </component>
-  </div>
 </template>

spec/frontend/monitoring/components/charts/time_series_spec.js

@@ -335,21 +335,6 @@ describe('Time series component', () => {
             expect(formattedTooltipData.content).toBe(annotationsMetadata.tooltipData.content);
           });
         });
-
-        describe('onResize', () => {
-          const mockWidth = 233;
-
-          beforeEach(() => {
-            jest.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(() => ({
-              width: mockWidth,
-            }));
-            wrapper.vm.onResize();
-          });
-
-          it('sets area chart width', () => {
-            expect(wrapper.vm.width).toBe(mockWidth);
-          });
-        });
       });
 
       describe('computed', () => {