summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/calendar.js.coffee
blob: 9c4d529f7e9b6dc07ce80582d9040943e5e84cdb (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
class @Calendar
  constructor: (timestamps, calendar_activities_path) ->
    # Get the highest value from the timestampes
    highestValue = 0
    _.each timestamps, (count) ->
      if count > highestValue
        highestValue = count

    # 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
    timestampsTmp = []
    i = 0
    group = 0
    _.each timestamps, (count, date) ->
      newDate = new Date parseInt(date) * 1000
      day = newDate.getDay()

      # Create a new group array if this is the first day of the week
      # or if is first object
      if (day is 0 and i isnt 0) or i is 0
        timestampsTmp.push []
        group++

      innerArray = timestampsTmp[group-1]

      # Push to the inner array the values that will be used to render map
      innerArray.push
        count: count
        date: newDate
        day: day

      i++

    # Color function for chart
    color = d3
      .scale
      .linear()
      .range(['#acd5f2', '#254e77'])
      .domain([0, highestValue])

    # Color function for key
    colorKey = d3
      .scale
      .linear()
      .range(['#acd5f2', '#254e77'])
      .domain([0, 3])
    keyColors = ['#ededed', colorKey(0), colorKey(1), colorKey(2), colorKey(3)]

    monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    months = []
    svg = d3.select '.js-contrib-calendar'
      .append 'svg'
      .attr 'width', 54 * 17
      .attr 'height', 167
      .attr 'class', 'contrib-calendar'

    # Setup each day box
    svg.selectAll 'g'
      .data timestampsTmp
      .enter()
      .append 'g'
      .attr 'transform', (group, i) ->
        _.each group, (stamp, a) ->
          if a is 0 and stamp.day is 0
            month = stamp.date.getMonth()
            x = (17 * i + 1) + 17
            lastMonth = _.last(months)
            if lastMonth?
              lastMonthX = lastMonth.x

            if !lastMonth?
              months.push
                month: month
                x: x
            else if month isnt lastMonth.month and x - 17 isnt lastMonthX
              months.push
                month: month
                x: x

        "translate(#{(17 * i + 1) + 17}, 18)"
      .selectAll 'rect'
      .data (stamp) ->
        stamp
      .enter()
      .append 'rect'
      .attr 'x', '0'
      .attr 'y', (stamp, i) ->
        (17 * stamp.day)
      .attr 'width', 15
      .attr 'height', 15
      .attr 'title', (stamp) ->
        "#{stamp.count} contributions<br />#{gl.utils.formatDate stamp.date}"
      .attr 'class', 'user-contrib-cell js-tooltip'
      .attr 'fill', (stamp) ->
        if stamp.count isnt 0
          color(stamp.count)
        else
          '#ededed'
      .attr 'data-container', 'body'
      .on 'click', (stamp) ->
        date = stamp.date
        formated_date = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate()
        $.ajax
          url: calendar_activities_path
          data:
            date: formated_date
          cache: false
          dataType: "html"
          success: (data) ->
            $(".user-calendar-activities").html data

    # 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 = [{
      text: 'M'
      y: 29 + (17 * 1)
    }, {
      text: 'W'
      y: 29 + (17 * 3)
    }, {
      text: 'F'
      y: 29 + (17 * 5)
    }]
    svg.append 'g'
      .selectAll 'text'
      .data days
      .enter()
      .append 'text'
      .attr 'text-anchor', 'middle'
      .attr 'x', 8
      .attr 'y', (day) ->
        day.y
      .text (day) ->
        day.text
      .attr 'class', 'user-contrib-text'

    # Key with color boxes
    svg.append 'g'
      .attr 'transform', "translate(18, #{17 * 8 + 16})"
      .selectAll 'rect'
      .data keyColors
      .enter()
      .append 'rect'
      .attr 'width', 15
      .attr 'height', 15
      .attr 'x', (color, i) ->
        17 * i
      .attr 'y', 0
      .attr 'fill', (color) ->
        color

    $('.js-contrib-calendar .js-tooltip').tooltip
      html: true