Skip to content
Snippets Groups Projects
Commit 527d6446 authored by Phil Hughes's avatar Phil Hughes
Browse files

Moved into class methods

parent b54ea9de
No related branches found
No related tags found
1 merge request!425CE upstream
Hide whitespace changes
Inline Side-by-side
app/assets/javascripts/calendar.js.coffee
+ 105
− 90
View file @ 527d6446
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
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 renderDayTitles: ->
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
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