Merge branch 'jivanvl-fix-ci-minute-usage-charts-responsiveness' into 'master'

Add responsive property to area charts in CI minutes

See merge request gitlab-org/gitlab!82741

ee/app/assets/javascripts/analytics/group_ci_cd_analytics/components/shared_runner_usage.vue

@@ -97,6 +97,12 @@ export default {
         />
       </div>
     </div>
-    <gl-area-chart v-if="!isDataEmpty" :data="chartData" :option="chartOptions" />
+    <gl-area-chart
+      v-if="!isDataEmpty"
+      :data="chartData"
+      :option="chartOptions"
+      :width="0"
+      responsive
+    />
   </div>
 </template>

ee/app/assets/javascripts/ci_minutes_usage/components/minutes_usage_month_chart.vue

@@ -54,7 +54,14 @@ export default {
 <template>
   <div>
     <h5>{{ $options.USAGE_BY_MONTH }}</h5>
-    <gl-area-chart v-if="!isDataEmpty" class="gl-mb-3" :data="chartData" :option="chartOptions" />
+    <gl-area-chart
+      v-if="!isDataEmpty"
+      class="gl-mb-3"
+      :data="chartData"
+      :option="chartOptions"
+      responsive
+      :width="0"
+    />
     <gl-alert v-else class="gl-mb-5" :dismissible="false">
       {{ $options.NO_CI_MINUTES_MSG }}
     </gl-alert>

ee/app/assets/javascripts/ci_minutes_usage/components/minutes_usage_project_chart.vue

@@ -107,6 +107,8 @@ export default {
     <gl-column-chart
       v-if="!isDataEmpty"
       class="gl-mb-3"
+      responsive
+      :width="0"
       :bars="chartData"
       :y-axis-title="$options.Y_AXIS_LABEL"
       :x-axis-title="$options.X_AXIS_PROJECT_LABEL"

ee/spec/frontend/analytics/group_ci_cd_analytics/components/shared_runner_usage_spec.js

@@ -65,6 +65,10 @@ describe('Shared runner usage tab', () => {
     it('should display the chart', () => {
       expect(findAreaChart().exists()).toBe(true);
     });
+
+    it('should contain a responsive attribute for the area chart', () => {
+      expect(findAreaChart().attributes('responsive')).toBeDefined();
+    });
   });
 
   describe('when the component is loading data', () => {

ee/spec/frontend/ci_minutes_usage/components/minutes_usage_month_chart_spec.js

@@ -37,6 +37,12 @@ describe('Minutes usage by month chart component', () => {
     expect(findAlert().exists()).toBe(false);
   });
 
+  it('should contain a responsive attribute for the area chart', () => {
+    createComponent();
+
+    expect(findAreaChart().attributes('responsive')).toBeDefined();
+  });
+
   it('renders an alert when no data is available', () => {
     createComponent({ minutesUsageData: [] });
 

ee/spec/frontend/ci_minutes_usage/components/minutes_usage_project_chart_spec.js

@@ -51,6 +51,10 @@ describe('Minutes usage by project chart component', () => {
     it('renders only the months with available minutes data', () => {
       expect(findAllDropdownItems().length).toBe(1);
     });
+
+    it('should contain a responsive attribute for the column chart', () => {
+      expect(findColumnChart().attributes('responsive')).toBeDefined();
+    });
   });
 
   describe('without CI minutes data', () => {