Merge branch 'mw-responsive-contributors-charts' into 'master'

Contributors charts: Resize charts when screen size changes

Closes #20488

See merge request gitlab-org/gitlab!24794

app/assets/javascripts/contributors/components/contributors.vue

@@ -7,11 +7,13 @@ import { __ } from '~/locale';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import { getDatesInRange } from '~/lib/utils/datetime_utility';
 import { xAxisLabelFormatter, dateFormatter } from '../utils';
+import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
 
 export default {
   components: {
     GlAreaChart,
     GlLoadingIcon,
+    ResizableChartContainer,
   },
   props: {
     endpoint: {
@@ -201,25 +203,35 @@ export default {
     <div v-else-if="showChart" class="contributors-charts">
       <h4>{{ __('Commits to') }} {{ branch }}</h4>
       <span>{{ __('Excluding merge commits. Limited to 6,000 commits.') }}</span>
-      <div>
+      <resizable-chart-container>
         <gl-area-chart
+          slot-scope="{ width }"
+          :width="width"
           :data="masterChartData"
           :option="masterChartOptions"
           :height="masterChartHeight"
           @created="onMasterChartCreated"
         />
-      </div>
+      </resizable-chart-container>
 
       <div class="row">
-        <div v-for="contributor in individualChartsData" :key="contributor.name" class="col-6">
+        <div
+          v-for="(contributor, index) in individualChartsData"
+          :key="index"
+          class="col-lg-6 col-12"
+        >
           <h4>{{ contributor.name }}</h4>
           <p>{{ n__('%d commit', '%d commits', contributor.commits) }} ({{ contributor.email }})</p>
-          <gl-area-chart
-            :data="contributor.dates"
-            :option="individualChartOptions"
-            :height="individualChartHeight"
-            @created="onIndividualChartCreated"
-          />
+          <resizable-chart-container>
+            <gl-area-chart
+              slot-scope="{ width }"
+              :width="width"
+              :data="contributor.dates"
+              :option="individualChartOptions"
+              :height="individualChartHeight"
+              @created="onIndividualChartCreated"
+            />
+          </resizable-chart-container>
         </div>
       </div>
     </div>

spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap

@@ -22,6 +22,7 @@ exports[`Contributors charts should render charts when loading completed and the
         legendmaxtext="Max"
         option="[object Object]"
         thresholds=""
+        width="0"
       />
     </div>
      
@@ -29,7 +30,7 @@ exports[`Contributors charts should render charts when loading completed and the
       class="row"
     >
       <div
-        class="col-6"
+        class="col-lg-6 col-12"
       >
         <h4>
           John
@@ -39,15 +40,18 @@ exports[`Contributors charts should render charts when loading completed and the
           2 commits (jawnnypoo@gmail.com)
         </p>
          
-        <glareachart-stub
-          data="[object Object]"
-          height="216"
-          includelegendavgmax="true"
-          legendaveragetext="Avg"
-          legendmaxtext="Max"
-          option="[object Object]"
-          thresholds=""
-        />
+        <div>
+          <glareachart-stub
+            data="[object Object]"
+            height="216"
+            includelegendavgmax="true"
+            legendaveragetext="Avg"
+            legendmaxtext="Max"
+            option="[object Object]"
+            thresholds=""
+            width="0"
+          />
+        </div>
       </div>
     </div>
   </div>

spec/frontend/contributors/component/contributors_spec.js

 import Vue from 'vue';
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { createStore } from '~/contributors/stores';
 import axios from '~/lib/utils/axios_utils';
@@ -22,7 +22,7 @@ function factory() {
   mock.onGet().reply(200, chartData);
   store = createStore();
 
-  wrapper = shallowMount(Component, {
+  wrapper = mount(Component, {
     propsData: {
       endpoint,
       branch,