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>
+          <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,6 +40,7 @@ exports[`Contributors charts should render charts when loading completed and the
           2 commits (jawnnypoo@gmail.com)
         </p>
          
+        <div>
           <glareachart-stub
             data="[object Object]"
             height="216"
@@ -47,9 +49,11 @@ exports[`Contributors charts should render charts when loading completed and the
             legendmaxtext="Max"
             option="[object Object]"
             thresholds=""
+            width="0"
           />
         </div>
       </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,