Merge branch 'fix/contributors-graph-width' into 'master'

Fix contributors graph width

Closes #22647

See merge request gitlab-org/gitlab-ce!18639

1 files changed, 36 insertions, 18 deletions

diff --git a/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors_graph.js b/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors_graph.js
index a99ce0f1c36..5316d3e9f3c 100644
--- a/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors_graph.js
+++ b/app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors_graph.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, max-len, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, comma-dangle, no-return-assign, prefer-arrow-callback, quotes, prefer-template, newline-per-chained-call, no-else-return, no-shadow */
+/* eslint-disable func-names, space-before-function-paren, prefer-rest-params, max-len, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, comma-dangle, no-return-assign, prefer-arrow-callback, quotes, prefer-template, newline-per-chained-call, no-else-return, no-shadow */
 
 import $ from 'jquery';
 import _ from 'underscore';
@@ -13,17 +13,17 @@ import { dateTickFormat } from '~/lib/utils/tick_formats';
 
 const d3 = { extent, max, select, scaleTime, scaleLinear, axisLeft, axisBottom, area, brushX, timeParse };
 
-const extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 const hasProp = {}.hasOwnProperty;
+const extend = function(child, parent) { for (const key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
 export const ContributorsGraph = (function() {
   function ContributorsGraph() {}
 
   ContributorsGraph.prototype.MARGIN = {
     top: 20,
-    right: 20,
+    right: 10,
     bottom: 30,
-    left: 50
+    left: 40
   };
 
   ContributorsGraph.prototype.x_domain = null;
@@ -32,6 +32,12 @@ export const ContributorsGraph = (function() {
 
   ContributorsGraph.prototype.dates = [];
 
+  ContributorsGraph.prototype.determine_width = function(baseWidth, $parentElement) {
+    const parentPaddingWidth = parseFloat($parentElement.css('padding-left')) + parseFloat($parentElement.css('padding-right'));
+    const marginWidth = this.MARGIN.left + this.MARGIN.right;
+    return baseWidth - parentPaddingWidth - marginWidth;
+  };
+
   ContributorsGraph.set_x_domain = function(data) {
     return ContributorsGraph.prototype.x_domain = data;
   };
@@ -105,11 +111,10 @@ export const ContributorsMasterGraph = (function(superClass) {
 
   function ContributorsMasterGraph(data1) {
     const $parentElement = $('#contributors-master');
-    const parentPadding = parseFloat($parentElement.css('padding-left')) + parseFloat($parentElement.css('padding-right'));
 
     this.data = data1;
     this.update_content = this.update_content.bind(this);
-    this.width = $('.content').width() - parentPadding - (this.MARGIN.left + this.MARGIN.right);
+    this.width = this.determine_width($('.js-graphs-show').width(), $parentElement);
     this.height = 200;
     this.x = null;
     this.y = null;
@@ -122,8 +127,7 @@ export const ContributorsMasterGraph = (function(superClass) {
   }
 
   ContributorsMasterGraph.prototype.process_dates = function(data) {
-    var dates;
-    dates = this.get_dates(data);
+    const dates = this.get_dates(data);
     this.parse_dates(data);
     return ContributorsGraph.set_dates(dates);
   };
@@ -133,8 +137,7 @@ export const ContributorsMasterGraph = (function(superClass) {
   };
 
   ContributorsMasterGraph.prototype.parse_dates = function(data) {
-    var parseDate;
-    parseDate = d3.timeParse("%Y-%m-%d");
+    const parseDate = d3.timeParse("%Y-%m-%d");
     return data.forEach(function(d) {
       return d.date = parseDate(d.date);
     });
@@ -152,7 +155,14 @@ export const ContributorsMasterGraph = (function(superClass) {
   };
 
   ContributorsMasterGraph.prototype.create_svg = function() {
-    return this.svg = d3.select("#contributors-master").append("svg").attr("width", this.width + this.MARGIN.left + this.MARGIN.right).attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom).attr("class", "tint-box").append("g").attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
+    this.svg = d3.select("#contributors-master")
+      .append("svg")
+      .attr("width", this.width + this.MARGIN.left + this.MARGIN.right)
+      .attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom)
+      .attr("class", "tint-box")
+      .append("g")
+      .attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
+    return this.svg;
   };
 
   ContributorsMasterGraph.prototype.create_area = function(x, y) {
@@ -218,12 +228,14 @@ export const ContributorsAuthorGraph = (function(superClass) {
   extend(ContributorsAuthorGraph, superClass);
 
   function ContributorsAuthorGraph(data1) {
+    const $parentElements = $('.person');
+
     this.data = data1;
     // Don't split graph size in half for mobile devices.
-    if ($(window).width() < 768) {
-      this.width = $('.content').width() - 80;
+    if ($(window).width() < 790) {
+      this.width = this.determine_width($('.js-graphs-show').width(), $parentElements);
     } else {
-      this.width = ($('.content').width() / 2) - 100;
+      this.width = this.determine_width($('.js-graphs-show').width() / 2, $parentElements);
     }
     this.height = 200;
     this.x = null;
@@ -249,8 +261,7 @@ export const ContributorsAuthorGraph = (function(superClass) {
 
   ContributorsAuthorGraph.prototype.create_area = function(x, y) {
     return this.area = d3.area().x(function(d) {
-      var parseDate;
-      parseDate = d3.timeParse("%Y-%m-%d");
+      const parseDate = d3.timeParse("%Y-%m-%d");
       return x(parseDate(d));
     }).y0(this.height).y1((function(_this) {
       return function(d) {
@@ -264,9 +275,16 @@ export const ContributorsAuthorGraph = (function(superClass) {
   };
 
   ContributorsAuthorGraph.prototype.create_svg = function() {
-    var persons = document.querySelectorAll('.person');
+    const persons = document.querySelectorAll('.person');
     this.list_item = persons[persons.length - 1];
-    return this.svg = d3.select(this.list_item).append("svg").attr("width", this.width + this.MARGIN.left + this.MARGIN.right).attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom).attr("class", "spark").append("g").attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
+    this.svg = d3.select(this.list_item)
+      .append("svg")
+      .attr("width", this.width + this.MARGIN.left + this.MARGIN.right)
+      .attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom)
+      .attr("class", "spark")
+      .append("g")
+      .attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
+    return this.svg;
   };
 
   ContributorsAuthorGraph.prototype.draw_path = function(data) {