diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index bffce5a0c0fe130c2f123b81a08e75b055385677..ff69e27bbcf85ba64426d0606198e398532ee1ab 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -19,7 +19,6 @@
#= require jquery.scrollTo
#= require jquery.turbolinks
#= require d3
-#= require cal-heatmap
#= require turbolinks
#= require autosave
#= require bootstrap/affix
diff --git a/app/assets/javascripts/calendar.js.coffee b/app/assets/javascripts/calendar.js.coffee
index ec153f61c2ab9c38a20c748ed41d27bc98817f42..9c4d529f7e9b6dc07ce80582d9040943e5e84cdb 100644
--- a/app/assets/javascripts/calendar.js.coffee
+++ b/app/assets/javascripts/calendar.js.coffee
@@ -1,52 +1,83 @@
class @Calendar
- constructor: (timestamps, starting_year, starting_month, calendar_activities_path) ->
+ constructor: (timestamps, calendar_activities_path) ->
# Get the highest value from the timestampes
highestValue = 0
_.each timestamps, (count) ->
if count > highestValue
highestValue = count
- timestamps = _.chain(timestamps)
- .map (stamp, key) ->
- {
- count: stamp
- date: key
- }
- .groupBy (stamp, i) ->
- Math.floor i / 7
- .toArray()
- .value()
+ # 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 '#cal-heatmap'
+ svg = d3.select '.js-contrib-calendar'
.append 'svg'
- .attr 'width', 53 * 17
- .attr 'height', 140
+ .attr 'width', 54 * 17
+ .attr 'height', 167
+ .attr 'class', 'contrib-calendar'
# Setup each day box
svg.selectAll 'g'
- .data timestamps
+ .data timestampsTmp
.enter()
.append 'g'
.attr 'transform', (group, i) ->
- _.each group, (stamp) ->
- month = new Date(parseInt(stamp.date) * 1000).getMonth()
- x = 17 * i + 1
- lastMonth = _.last(months)
+ _.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 undefined, push
- if !lastMonth?
- months.push
- month: month
- x: x
- else if lastMonth.x is x
- lastMonth.month = month
- else if lastMonth.month isnt month
+ if !lastMonth?
months.push
month: month
x: x
- "translate(#{17 * i + 1}, 18)"
+ 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
@@ -54,22 +85,20 @@ class @Calendar
.append 'rect'
.attr 'x', '0'
.attr 'y', (stamp, i) ->
- 17 * i
+ (17 * stamp.day)
.attr 'width', 15
.attr 'height', 15
.attr 'title', (stamp) ->
- "#{stamp.count} contributions<br />#{gl.utils.formatDate parseInt(stamp.date) * 1000}"
- .attr 'class', (stamp) ->
- extraClass = ''
+ "#{stamp.count} contributions<br />#{gl.utils.formatDate stamp.date}"
+ .attr 'class', 'user-contrib-cell js-tooltip'
+ .attr 'fill', (stamp) ->
if stamp.count isnt 0
- diff = stamp.count / highestValue
- classNumber = Math.floor (diff / 0.25) + 1
- extraClass += "user-contrib-cell-#{classNumber}"
-
- "user-contrib-cell #{extraClass} js-tooltip"
+ color(stamp.count)
+ else
+ '#ededed'
.attr 'data-container', 'body'
.on 'click', (stamp) ->
- date = new Date(parseInt(stamp.date) * 1000)
+ date = stamp.date
formated_date = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate()
$.ajax
url: calendar_activities_path
@@ -80,6 +109,7 @@ class @Calendar
success: (data) ->
$(".user-calendar-activities").html data
+ # Month titles
svg.append 'g'
.selectAll 'text'
.data months
@@ -92,5 +122,44 @@ class @Calendar
.text (date) ->
monthNames[date.month]
- $('#cal-heatmap .js-tooltip').tooltip
+ # 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
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 69b3b6586de58656806e407dbd96dce82cacf0df..efdb2b06a8c50969fcca027f38a18e5be7fccfc2 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -8,7 +8,6 @@
*= require select2
*= require_self
*= require dropzone/basic
- *= require cal-heatmap
*= require cropper.css
*= require animate
*/
diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss
index da03454d807b811fc162e36bc33b20297c4c178b..5b48801485b2bc19399dabe15c96c18fa3096e2f 100644
--- a/app/assets/stylesheets/framework/calendar.scss
+++ b/app/assets/stylesheets/framework/calendar.scss
@@ -26,75 +26,28 @@
}
}
-/**
-* This overwrites the default values of the cal-heatmap gem
-*/
-.calendar {
- .qi {
- fill: #fff;
- }
-
- .q1 {
- fill: #ededed !important;
- }
-
- .q2 {
- fill: #acd5f2 !important;
- }
-
- .q3 {
- fill: #7fa8d1 !important;
- }
-
- .q4 {
- fill: #49729b !important;
- }
-
- .q5 {
- fill: #254e77 !important;
- }
-
- .future {
- visibility: hidden;
- }
-
- .domain-background {
- fill: none;
- shape-rendering: crispedges;
- }
+.user-calendar {
+ text-align: center;
- .ch-tooltip {
- padding: 3px;
- font-weight: 550;
+ .calendar {
+ display: inline-block;
}
}
.user-contrib-cell {
- fill: #ededed;
- cursor: pointer;
-
&:hover {
+ cursor: pointer;
stroke: #000;
}
}
-.user-contrib-cell-1 {
- fill: #acd5f2;
-}
-
-.user-contrib-cell-3 {
- fill: #7fa8d1;
-}
-
-.user-contrib-cell-4 {
- fill: #49729b;
-}
-
-.user-contrib-cell-5 {
- fill: #254e77;
-}
-
.user-contrib-text {
font-size: 12px;
fill: #959494;
}
+
+.calendar-hint {
+ margin-top: -23px;
+ float: right;
+ font-size: 12px;
+}
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 843379a3f54191f9eb3f94c4383f76075782ee6d..ef375e1386ca653c134d54d99d25e52e99381bff 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -66,12 +66,6 @@
}
}
-.calendar-hint {
- margin-top: -12px;
- float: right;
- font-size: 12px;
-}
-
.profile-link-holder {
display: inline;
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index 799421c185b3bf98389f17f5aeb657c867c66d0b..a99632454d94f354a92b0b607c127b9734ba9158 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -74,8 +74,6 @@ class UsersController < ApplicationController
def calendar
calendar = contributions_calendar
@timestamps = calendar.timestamps
- @starting_year = calendar.starting_year
- @starting_month = calendar.starting_month
render 'calendar', layout: false
end
diff --git a/app/views/users/calendar.html.haml b/app/views/users/calendar.html.haml
index 2abee8be2a631cdb86d6e15bb7eec7b5581e7d95..77f2ddefb1e28bff028e29c1cf807913363b222e 100644
--- a/app/views/users/calendar.html.haml
+++ b/app/views/users/calendar.html.haml
@@ -1,8 +1,9 @@
-#cal-heatmap.calendar
- :javascript
- new Calendar(
- #{@timestamps.to_json},
- #{@starting_year},
- #{@starting_month},
- '#{user_calendar_activities_path}'
- );
+.clearfix.calendar
+ .js-contrib-calendar
+ .calendar-hint
+ Summary of issues, merge requests, and push events
+:javascript
+ new Calendar(
+ #{@timestamps.to_json},
+ '#{user_calendar_activities_path}'
+ );
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 9017fd54fcccdc416ad31c3f227d4f3cac33001e..0c5133083081388bc7acea6c9d56e6996476591e 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -89,10 +89,9 @@
.tab-content
#activity.tab-pane
.row-content-block.calender-block.white.second-block.hidden-xs
- %div{ class: container_class }
- .user-calendar{data: {href: user_calendar_path}}
- %h4.center.light
- %i.fa.fa-spinner.fa-spin
+ .user-calendar{data: {href: user_calendar_path}}
+ %h4.center.light
+ %i.fa.fa-spinner.fa-spin
.user-calendar-activities
.content_list{ data: {href: user_path} }
diff --git a/lib/gitlab/contributions_calendar.rb b/lib/gitlab/contributions_calendar.rb
index 85583dce9eeb75cfa66860ce966fca2c998e71af..9dc2602867e07da8731da1eedb2cb31796a03596 100644
--- a/lib/gitlab/contributions_calendar.rb
+++ b/lib/gitlab/contributions_calendar.rb
@@ -19,7 +19,7 @@ module Gitlab
select('date(created_at) as date, count(id) as total_amount').
map(&:attributes)
- dates = (1.year.ago.to_date..(Date.today + 1.day)).to_a
+ dates = (1.year.ago.to_date..Date.today).to_a
dates.each do |date|
date_id = date.to_time.to_i.to_s