kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

resolve remaining eslint violations

Browse source
This commit is contained in:
Mike Greiling 2017-07-27 16:36:48 -05:00
parent 17b43cd4a1
commit 288e8ea1e7
2 changed files with 58 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
app/assets/javascripts/users/activity_calendar.js
View file

@ -1,5 +1,3 @@
/* eslint-disable no-var, vars-on-top, one-var, one-var-declaration-per-line, max-len, class-methods-use-this */
import d3 from 'd3';
const LOADING_HTML = `
@ -8,8 +6,22 @@ const LOADING_HTML = `
</div>
`;
function formatTooltipText({ date, count }) {
const dateObject = new Date(date);
const dateDayName = gl.utils.getDayName(dateObject);
const dateText = dateObject.format('mmm d, yyyy');
let contribText = 'No contributions';
if (count > 0) {
contribText = `${count} contribution${count > 1 ? 's' : ''}`;
}
return `${contribText}<br />${dateDayName} ${dateText}`;
}
const initColorKey = () => d3.scale.linear().range(['#acd5f2', '#254e77']).domain([0, 3]);
export default class ActivityCalendar {
constructor(timestamps, calendarActivitiesPath) {
constructor(container, timestamps, calendarActivitiesPath) {
this.calendarActivitiesPath = calendarActivitiesPath;
this.clickDay = this.clickDay.bind(this);
this.currentSelectedDate = '';
@ -22,22 +34,22 @@ export default class ActivityCalendar {
// Loop through the timestamps to create a group of objects
// The group of objects will be grouped based on the day of the week they are
this.timestampsTmp = [];
var group = 0;
let group = 0;
var today = new Date();
const today = new Date();
today.setHours(0, 0, 0, 0, 0);
var oneYearAgo = new Date(today);
const oneYearAgo = new Date(today);
oneYearAgo.setFullYear(today.getFullYear() - 1);
var days = gl.utils.getDayDifference(oneYearAgo, today);
const days = gl.utils.getDayDifference(oneYearAgo, today);
for (var i = 0; i <= days; i += 1) {
var date = new Date(oneYearAgo);
for (let i = 0; i <= days; i += 1) {
const date = new Date(oneYearAgo);
date.setDate(date.getDate() + i);
var day = date.getDay();
var count = timestamps[date.format('yyyy-mm-dd')] || 0;
const day = date.getDay();
const count = timestamps[date.format('yyyy-mm-dd')] || 0;
// Create a new group array if this is the first day of the week
// or if is first object
@ -47,28 +59,30 @@ export default class ActivityCalendar {
}
// Push to the inner array the values that will be used to render map
var innerArray = this.timestampsTmp[group - 1];
const innerArray = this.timestampsTmp[group - 1];
innerArray.push({ count, date, day });
}
// Init color functions
this.colorKey = this.initColorKey();
this.colorKey = initColorKey();
this.color = this.initColor();
// Init the svg element
this.renderSvg(group);
this.svg = this.renderSvg(container, group);
this.renderDays();
this.renderMonths();
this.renderDayTitles();
this.renderKey();
this.initTooltips();
// Init tooltips
$(`${container} .js-tooltip`).tooltip({ html: true });
}
// Add extra padding for the last month label if it is also the last column
getExtraWidthPadding(group) {
var extraWidthPadding = 0;
var lastColMonth = this.timestampsTmp[group - 1][0].date.getMonth();
var secondLastColMonth = this.timestampsTmp[group - 2][0].date.getMonth();
let extraWidthPadding = 0;
const lastColMonth = this.timestampsTmp[group - 1][0].date.getMonth();
const secondLastColMonth = this.timestampsTmp[group - 2][0].date.getMonth();
if (lastColMonth !== secondLastColMonth) {
extraWidthPadding = 3;
@ -77,9 +91,9 @@ export default class ActivityCalendar {
return extraWidthPadding;
}
renderSvg(group) {
var width = ((group + 1) * this.daySizeWithSpace) + this.getExtraWidthPadding(group);
this.svg = d3.select('.js-contrib-calendar')
renderSvg(container, group) {
const width = ((group + 1) * this.daySizeWithSpace) + this.getExtraWidthPadding(group);
return d3.select(container)
.append('svg')
.attr('width', width)
.attr('height', 167)
@ -90,15 +104,14 @@ export default class ActivityCalendar {
this.svg.selectAll('g').data(this.timestampsTmp).enter().append('g')
.attr('transform', (group, i) => {
_.each(group, (stamp, a) => {
var lastMonth, lastMonthX, month, x;
if (a === 0 && stamp.day === 0) {
month = stamp.date.getMonth();
x = (this.daySizeWithSpace * i) + 1 + this.daySizeWithSpace;
lastMonth = _.last(this.months);
if (lastMonth != null) {
lastMonthX = lastMonth.x;
}
if (lastMonth == null || (month !== lastMonth.month && x - this.daySizeWithSpace !== lastMonthX)) {
const month = stamp.date.getMonth();
const x = (this.daySizeWithSpace * i) + 1 + this.daySizeWithSpace;
const lastMonth = _.last(this.months);
if (
lastMonth == null ||
(month !== lastMonth.month && x - this.daySizeWithSpace !== lastMonth.x)
) {
this.months.push({ month, x });
}
}
@ -113,20 +126,11 @@ export default class ActivityCalendar {
.attr('y', stamp => this.daySizeWithSpace * stamp.day)
.attr('width', this.daySize)
.attr('height', this.daySize)
.attr('title', (stamp) => {
var contribText, date, dateText;
date = new Date(stamp.date);
contribText = 'No contributions';
if (stamp.count > 0) {
contribText = `${stamp.count} contribution${stamp.count > 1 ? 's' : ''}`;
}
dateText = date.format('mmm d, yyyy');
return `${contribText}<br />${gl.utils.getDayName(date)} ${dateText}`;
})
.attr('class', 'user-contrib-cell js-tooltip')
.attr('fill', stamp => (
stamp.count !== 0 ? this.color(Math.min(stamp.count, 40)) : '#ededed'
))
.attr('title', stamp => formatTooltipText(stamp))
.attr('class', 'user-contrib-cell js-tooltip')
.attr('data-container', 'body')
.on('click', this.clickDay);
}
@ -190,15 +194,10 @@ export default class ActivityCalendar {
}
initColor() {
var colorRange;
colorRange = ['#ededed', this.colorKey(0), this.colorKey(1), this.colorKey(2), this.colorKey(3)];
const colorRange = ['#ededed', this.colorKey(0), this.colorKey(1), this.colorKey(2), this.colorKey(3)];
return d3.scale.threshold().domain([0, 10, 20, 30]).range(colorRange);
}
initColorKey() {
return d3.scale.linear().range(['#acd5f2', '#254e77']).domain([0, 3]);
}
clickDay(stamp) {
if (this.currentSelectedDate !== stamp.date) {
this.currentSelectedDate = stamp.date;
@ -222,8 +221,4 @@ export default class ActivityCalendar {
$('.user-calendar-activities').html('');
}
}
initTooltips() {
$('.js-contrib-calendar .js-tooltip').tooltip({ html: true });
}
}

2
app/assets/javascripts/users/user_tabs.js
View file

@ -158,7 +158,7 @@ export default class UserTabs {
$calendarWrap.html(CALENDAR_TEMPLATE);
// eslint-disable-next-line no-new
new ActivityCalendar(activityData, calendarActivitiesPath);
new ActivityCalendar('.js-contrib-calendar', activityData, calendarActivitiesPath);
},
});