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

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