Add latest changes from gitlab-org/gitlab@master

1 files changed, 21 insertions, 9 deletions

diff --git a/app/assets/javascripts/contributors/components/contributors.vue b/app/assets/javascripts/contributors/components/contributors.vue
index fb7000ee9ed..caad2a835fa 100644
--- a/app/assets/javascripts/contributors/components/contributors.vue
+++ b/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>