BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 527d6446 by Phil Hughes
Options

Moved into class methods

parent b54ea9de
Showing with 105 additions and 90 deletions
app/assets/javascripts/calendar.js.coffee
class @Calendar class @Calendar
constructor: (timestamps, calendar_activities_path) -> constructor: (timestamps, @calendar_activities_path) ->
currentSelectedDate = '' @currentSelectedDate = ''
daySpace = 1 @daySpace = 1
daySize = 15 @daySize = 15
daySizeWithSpace = daySize + (daySpace * 2) @daySizeWithSpace = @daySize + (@daySpace * 2)
@monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
@months = []
@highestValue = 0
# Get the highest value from the timestampes # Get the highest value from the timestampes
highestValue = 0 _.each timestamps, (count) =>
_.each timestamps, (count) -> if count > @highestValue
if count > highestValue @highestValue = count
highestValue = count
# 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
timestampsTmp = [] @timestampsTmp = []
i = 0 i = 0
group = 0 group = 0
_.each timestamps, (count, date) -> _.each timestamps, (count, date) =>
newDate = new Date parseInt(date) * 1000 newDate = new Date parseInt(date) * 1000
day = newDate.getDay() day = newDate.getDay()
# 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
if (day is 0 and i isnt 0) or i is 0 if (day is 0 and i isnt 0) or i is 0
timestampsTmp.push [] @timestampsTmp.push []
group++ group++
innerArray = timestampsTmp[group-1] innerArray = @timestampsTmp[group-1]
# 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
innerArray.push innerArray.push
...@@ -36,64 +38,61 @@ class @Calendar ...@@ -36,64 +38,61 @@ class @Calendar
i++ i++
# Color function for chart # Init color functions
color = d3 @color = @initColor()
.scale @colorKey = @initColorKey()
.linear()
.range(['#acd5f2', '#254e77'])
.domain([0, highestValue])
# Color function for key # Init the svg element
colorKey = d3 @renderSvg(group)
.scale @renderDays()
.linear() @renderMonths()
.range(['#acd5f2', '#254e77']) @renderDayTitles()
.domain([0, 3]) @renderKey()
keyColors = ['#ededed', colorKey(0), colorKey(1), colorKey(2), colorKey(3)]
@initTooltips()
monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] renderSvg: (group) ->
months = [] @svg = d3.select '.js-contrib-calendar'
svg = d3.select '.js-contrib-calendar'
.append 'svg' .append 'svg'
.attr 'width', 54 * daySizeWithSpace .attr 'width', (group + 1) * @daySizeWithSpace
.attr 'height', 167 .attr 'height', 167
.attr 'class', 'contrib-calendar' .attr 'class', 'contrib-calendar'
# Setup each day box renderDays: ->
svg.selectAll 'g' @svg.selectAll 'g'
.data timestampsTmp .data @timestampsTmp
.enter() .enter()
.append 'g' .append 'g'
.attr 'transform', (group, i) -> .attr 'transform', (group, i) =>
_.each group, (stamp, a) -> _.each group, (stamp, a) =>
if a is 0 and stamp.day is 0 if a is 0 and stamp.day is 0
month = stamp.date.getMonth() month = stamp.date.getMonth()
x = (daySizeWithSpace * i + 1) + daySizeWithSpace x = (@daySizeWithSpace * i + 1) + @daySizeWithSpace
lastMonth = _.last(months) lastMonth = _.last(@months)
if lastMonth? if lastMonth?
lastMonthX = lastMonth.x lastMonthX = lastMonth.x
if !lastMonth? if !lastMonth?
months.push @months.push
month: month month: month
x: x x: x
else if month isnt lastMonth.month and x - daySizeWithSpace isnt lastMonthX else if month isnt lastMonth.month and x - @daySizeWithSpace isnt lastMonthX
months.push @months.push
month: month month: month
x: x x: x
"translate(#{(daySizeWithSpace * i + 1) + daySizeWithSpace}, 18)" "translate(#{(@daySizeWithSpace * i + 1) + @daySizeWithSpace}, 18)"
.selectAll 'rect' .selectAll 'rect'
.data (stamp) -> .data (stamp) ->
stamp stamp
.enter() .enter()
.append 'rect' .append 'rect'
.attr 'x', '0' .attr 'x', '0'
.attr 'y', (stamp, i) -> .attr 'y', (stamp, i) =>
(daySizeWithSpace * stamp.day) (@daySizeWithSpace * stamp.day)
.attr 'width', daySize .attr 'width', @daySize
.attr 'height', daySize .attr 'height', @daySize
.attr 'title', (stamp) -> .attr 'title', (stamp) =>
contribText = 'No contributions' contribText = 'No contributions'
if stamp.count > 0 if stamp.count > 0
...@@ -103,55 +102,26 @@ class @Calendar ...@@ -103,55 +102,26 @@ class @Calendar
"#{contribText}<br />#{date}" "#{contribText}<br />#{date}"
.attr 'class', 'user-contrib-cell js-tooltip' .attr 'class', 'user-contrib-cell js-tooltip'
.attr 'fill', (stamp) -> .attr 'fill', (stamp) =>
if stamp.count isnt 0 if stamp.count isnt 0
color(stamp.count) @color(stamp.count)
else else
'#ededed' '#ededed'
.attr 'data-container', 'body' .attr 'data-container', 'body'
.on 'click', (stamp) -> .on 'click', @clickDay
if currentSelectedDate isnt stamp.date
currentSelectedDate = stamp.date
formatted_date = currentSelectedDate.getFullYear() + "-" + (currentSelectedDate.getMonth()+1) + "-" + currentSelectedDate.getDate()
$.ajax renderDayTitles: ->
url: calendar_activities_path
data:
date: formatted_date
cache: false
dataType: 'html'
beforeSend: ->
$('.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
else
$('.user-calendar-activities').html ''
# Month titles
svg.append 'g'
.selectAll 'text'
.data months
.enter()
.append 'text'
.attr 'x', (date) ->
date.x
.attr 'y', 10
.attr 'class', 'user-contrib-text'
.text (date) ->
monthNames[date.month]
# Day titles
days = [{ days = [{
text: 'M' text: 'M'
y: 29 + (daySizeWithSpace * 1) y: 29 + (@daySizeWithSpace * 1)
}, { }, {
text: 'W' text: 'W'
y: 29 + (daySizeWithSpace * 3) y: 29 + (@daySizeWithSpace * 3)
}, { }, {
text: 'F' text: 'F'
y: 29 + (daySizeWithSpace * 5) y: 29 + (@daySizeWithSpace * 5)
}] }]
svg.append 'g' @svg.append 'g'
.selectAll 'text' .selectAll 'text'
.data days .data days
.enter() .enter()
...@@ -164,20 +134,65 @@ class @Calendar ...@@ -164,20 +134,65 @@ class @Calendar
day.text day.text
.attr 'class', 'user-contrib-text' .attr 'class', 'user-contrib-text'
# Key with color boxes renderMonths: ->
svg.append 'g' @svg.append 'g'
.attr 'transform', "translate(18, #{daySizeWithSpace * 8 + 16})" .selectAll 'text'
.data @months
.enter()
.append 'text'
.attr 'x', (date) ->
date.x
.attr 'y', 10
.attr 'class', 'user-contrib-text'
.text (date) =>
@monthNames[date.month]
renderKey: ->
keyColors = ['#ededed', @colorKey(0), @colorKey(1), @colorKey(2), @colorKey(3)]
@svg.append 'g'
.attr 'transform', "translate(18, #{@daySizeWithSpace * 8 + 16})"
.selectAll 'rect' .selectAll 'rect'
.data keyColors .data keyColors
.enter() .enter()
.append 'rect' .append 'rect'
.attr 'width', daySize .attr 'width', @daySize
.attr 'height', daySize .attr 'height', @daySize
.attr 'x', (color, i) -> .attr 'x', (color, i) =>
daySizeWithSpace * i @daySizeWithSpace * i
.attr 'y', 0 .attr 'y', 0
.attr 'fill', (color) -> .attr 'fill', (color) ->
color color
initColor: ->
d3.scale
.linear()
.range(['#acd5f2', '#254e77'])
.domain([0, @highestValue])
initColorKey: ->
d3.scale
.linear()
.range(['#acd5f2', '#254e77'])
.domain([0, 3])
clickDay: (stamp) ->
if @currentSelectedDate isnt stamp.date
@currentSelectedDate = stamp.date
formatted_date = @currentSelectedDate.getFullYear() + "-" + (@currentSelectedDate.getMonth()+1) + "-" + @currentSelectedDate.getDate()
$.ajax
url: @calendar_activities_path
data:
date: formatted_date
cache: false
dataType: 'html'
beforeSend: ->
$('.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
else
$('.user-calendar-activities').html ''
initTooltips: ->
$('.js-contrib-calendar .js-tooltip').tooltip $('.js-contrib-calendar .js-tooltip').tooltip
html: true html: true
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