Commit c4fae77e authored by Mike Greiling's avatar Mike Greiling

remove janky function binding in activity calendar class

parent ffa4ceda
/* eslint-disable func-names, space-before-function-paren, no-var, wrap-iife, camelcase, vars-on-top, object-shorthand, comma-dangle, eqeqeq, no-mixed-operators, no-return-assign, newline-per-chained-call, prefer-arrow-callback, consistent-return, one-var, one-var-declaration-per-line, prefer-template, quotes, no-unused-vars, no-else-return, max-len, class-methods-use-this */ /* eslint-disable no-var, camelcase, vars-on-top, object-shorthand, comma-dangle, eqeqeq, no-mixed-operators, no-return-assign, newline-per-chained-call, prefer-arrow-callback, consistent-return, one-var, one-var-declaration-per-line, prefer-template, quotes, no-unused-vars, no-else-return, max-len, class-methods-use-this */
import d3 from 'd3'; import d3 from 'd3';
const LOADING_HTML = `
<div class="text-center">
<i class="fa fa-spinner fa-spin user-calendar-activities-loading"></i>
</div>
`;
export default class ActivityCalendar { export default class ActivityCalendar {
constructor(timestamps, calendar_activities_path) { constructor(timestamps, calendar_activities_path) {
this.calendar_activities_path = calendar_activities_path; this.calendar_activities_path = calendar_activities_path;
...@@ -79,40 +85,41 @@ export default class ActivityCalendar { ...@@ -79,40 +85,41 @@ export default class ActivityCalendar {
} }
renderDays() { renderDays() {
return this.svg.selectAll('g').data(this.timestampsTmp).enter().append('g').attr('transform', (function(_this) { this.svg.selectAll('g').data(this.timestampsTmp).enter().append('g')
return function(group, i) { .attr('transform', (group, i) => {
_.each(group, function(stamp, a) { _.each(group, (stamp, a) => {
var lastMonth, lastMonthX, month, x; var lastMonth, lastMonthX, month, x;
if (a === 0 && stamp.day === 0) { if (a === 0 && stamp.day === 0) {
month = stamp.date.getMonth(); month = stamp.date.getMonth();
x = (_this.daySizeWithSpace * i + 1) + _this.daySizeWithSpace; x = (this.daySizeWithSpace * i + 1) + this.daySizeWithSpace;
lastMonth = _.last(_this.months); lastMonth = _.last(this.months);
if (lastMonth != null) { if (lastMonth != null) {
lastMonthX = lastMonth.x; lastMonthX = lastMonth.x;
} }
if (lastMonth == null) { if (lastMonth == null) {
return _this.months.push({ return this.months.push({
month: month, month: month,
x: x x: x
}); });
} else if (month !== lastMonth.month && x - _this.daySizeWithSpace !== lastMonthX) { } else if (month !== lastMonth.month && x - this.daySizeWithSpace !== lastMonthX) {
return _this.months.push({ return this.months.push({
month: month, month: month,
x: x x: x
}); });
} }
} }
}); });
return "translate(" + ((_this.daySizeWithSpace * i + 1) + _this.daySizeWithSpace) + ", 18)"; return "translate(" + ((this.daySizeWithSpace * i + 1) + this.daySizeWithSpace) + ", 18)";
}; })
})(this)).selectAll('rect').data(function(stamp) { .selectAll('rect')
return stamp; .data(stamp => stamp)
}).enter().append('rect').attr('x', '0').attr('y', (function(_this) { .enter()
return function(stamp, i) { .append('rect')
return _this.daySizeWithSpace * stamp.day; .attr('x', '0')
}; .attr('y', stamp => this.daySizeWithSpace * stamp.day)
})(this)).attr('width', this.daySize).attr('height', this.daySize).attr('title', (function(_this) { .attr('width', this.daySize)
return function(stamp) { .attr('height', this.daySize)
.attr('title', (stamp) => {
var contribText, date, dateText; var contribText, date, dateText;
date = new Date(stamp.date); date = new Date(stamp.date);
contribText = 'No contributions'; contribText = 'No contributions';
...@@ -121,21 +128,20 @@ export default class ActivityCalendar { ...@@ -121,21 +128,20 @@ export default class ActivityCalendar {
} }
dateText = date.format('mmm d, yyyy'); dateText = date.format('mmm d, yyyy');
return contribText + "<br />" + (gl.utils.getDayName(date)) + " " + dateText; return contribText + "<br />" + (gl.utils.getDayName(date)) + " " + dateText;
}; })
})(this)).attr('class', 'user-contrib-cell js-tooltip').attr('fill', (function(_this) { .attr('class', 'user-contrib-cell js-tooltip').attr('fill', (stamp) => {
return function(stamp) {
if (stamp.count !== 0) { if (stamp.count !== 0) {
return _this.color(Math.min(stamp.count, 40)); return this.color(Math.min(stamp.count, 40));
} else { } else {
return '#ededed'; return '#ededed';
} }
}; })
})(this)).attr('data-container', 'body').on('click', this.clickDay); .attr('data-container', 'body')
.on('click', this.clickDay);
} }
renderDayTitles() { renderDayTitles() {
var days; const days = [
days = [
{ {
text: 'M', text: 'M',
y: 29 + (this.daySizeWithSpace * 1) y: 29 + (this.daySizeWithSpace * 1)
...@@ -147,21 +153,29 @@ export default class ActivityCalendar { ...@@ -147,21 +153,29 @@ export default class ActivityCalendar {
y: 29 + (this.daySizeWithSpace * 5) y: 29 + (this.daySizeWithSpace * 5)
} }
]; ];
return this.svg.append('g').selectAll('text').data(days).enter().append('text').attr('text-anchor', 'middle').attr('x', 8).attr('y', function(day) { this.svg.append('g')
return day.y; .selectAll('text')
}).text(function(day) { .data(days)
return day.text; .enter()
}).attr('class', 'user-contrib-text'); .append('text')
.attr('text-anchor', 'middle')
.attr('x', 8)
.attr('y', day => day.y)
.text(day => day.text)
.attr('class', 'user-contrib-text');
} }
renderMonths() { renderMonths() {
return this.svg.append('g').attr('direction', 'ltr').selectAll('text').data(this.months).enter().append('text').attr('x', function(date) { this.svg.append('g')
return date.x; .attr('direction', 'ltr')
}).attr('y', 10).attr('class', 'user-contrib-text').text((function(_this) { .selectAll('text')
return function(date) { .data(this.months)
return _this.monthNames[date.month]; .enter()
}; .append('text')
})(this)); .attr('x', date => date.x)
.attr('y', 10)
.attr('class', 'user-contrib-text')
.text(date => this.monthNames[date.month]);
} }
renderKey() { renderKey() {
...@@ -206,12 +220,8 @@ export default class ActivityCalendar { ...@@ -206,12 +220,8 @@ export default class ActivityCalendar {
}, },
cache: false, cache: false,
dataType: 'html', dataType: 'html',
beforeSend: function() { beforeSend: () => $('.user-calendar-activities').html(LOADING_HTML),
return $('.user-calendar-activities').html('<div class="text-center"><i class="fa fa-spinner fa-spin user-calendar-activities-loading"></i></div>'); success: data => $('.user-calendar-activities').html(data),
},
success: function(data) {
return $('.user-calendar-activities').html(data);
}
}); });
} else { } else {
this.currentSelectedDate = ''; this.currentSelectedDate = '';
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment