From 36fdbc6edb1c0884f68c1267902b33a78d7be6ae Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 26 Apr 2016 13:21:48 +0100 Subject: Updated contrib map away from cal heat map --- app/assets/javascripts/calendar.js.coffee | 106 ++++++++++++++++++++----- app/assets/stylesheets/framework/calendar.scss | 30 +++++++ app/views/users/calendar.html.haml | 2 - 3 files changed, 114 insertions(+), 24 deletions(-) diff --git a/app/assets/javascripts/calendar.js.coffee b/app/assets/javascripts/calendar.js.coffee index d80e0e716ce..ec153f61c2a 100644 --- a/app/assets/javascripts/calendar.js.coffee +++ b/app/assets/javascripts/calendar.js.coffee @@ -1,27 +1,75 @@ class @Calendar constructor: (timestamps, starting_year, starting_month, calendar_activities_path) -> - cal = new CalHeatMap() - cal.init - itemName: ["contribution"] - data: timestamps - start: new Date(starting_year, starting_month) - domainLabelFormat: "%b" - id: "cal-heatmap" - domain: "month" - subDomain: "day" - range: 12 - tooltip: true - label: - position: "top" - legend: [ - 0 - 10 - 20 - 30 - ] - legendCellPadding: 3 - cellSize: $('.user-calendar').width() / 73 - onClick: (date, count) -> + # 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() + + monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] + months = [] + svg = d3.select '#cal-heatmap' + .append 'svg' + .attr 'width', 53 * 17 + .attr 'height', 140 + + # Setup each day box + svg.selectAll 'g' + .data timestamps + .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) + + # 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 + months.push + month: month + x: x + "translate(#{17 * i + 1}, 18)" + .selectAll 'rect' + .data (stamp) -> + stamp + .enter() + .append 'rect' + .attr 'x', '0' + .attr 'y', (stamp, i) -> + 17 * i + .attr 'width', 15 + .attr 'height', 15 + .attr 'title', (stamp) -> + "#{stamp.count} contributions
#{gl.utils.formatDate parseInt(stamp.date) * 1000}" + .attr 'class', (stamp) -> + extraClass = '' + 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" + .attr 'data-container', 'body' + .on 'click', (stamp) -> + date = new Date(parseInt(stamp.date) * 1000) formated_date = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate() $.ajax url: calendar_activities_path @@ -32,3 +80,17 @@ class @Calendar success: (data) -> $(".user-calendar-activities").html data + 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] + + $('#cal-heatmap .js-tooltip').tooltip + html: true diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss index 11f39d583bd..da03454d807 100644 --- a/app/assets/stylesheets/framework/calendar.scss +++ b/app/assets/stylesheets/framework/calendar.scss @@ -68,3 +68,33 @@ font-weight: 550; } } + +.user-contrib-cell { + fill: #ededed; + cursor: pointer; + + &:hover { + 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; +} diff --git a/app/views/users/calendar.html.haml b/app/views/users/calendar.html.haml index 1de71f37d1a..2abee8be2a6 100644 --- a/app/views/users/calendar.html.haml +++ b/app/views/users/calendar.html.haml @@ -6,5 +6,3 @@ #{@starting_month}, '#{user_calendar_activities_path}' ); - -.calendar-hint Summary of issues, merge requests, and push events -- cgit v1.2.1 From 18b361cf809251dd633e31d3dd6d877b31d8db7f Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 27 Apr 2016 11:07:46 +0100 Subject: Group the contributing calendar by day This aligns the boxes correctly with the day on the left side of the calendar --- app/assets/javascripts/application.js.coffee | 1 - app/assets/javascripts/calendar.js.coffee | 147 ++++++++++++++++++------- app/assets/stylesheets/application.scss | 1 - app/assets/stylesheets/framework/calendar.scss | 69 ++---------- app/assets/stylesheets/pages/profile.scss | 6 - app/controllers/users_controller.rb | 2 - app/views/users/calendar.html.haml | 17 +-- app/views/users/show.html.haml | 7 +- lib/gitlab/contributions_calendar.rb | 2 +- 9 files changed, 132 insertions(+), 120 deletions(-) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index bffce5a0c0f..ff69e27bbcf 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 ec153f61c2a..9c4d529f7e9 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
#{gl.utils.formatDate parseInt(stamp.date) * 1000}" - .attr 'class', (stamp) -> - extraClass = '' + "#{stamp.count} contributions
#{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 69b3b6586de..efdb2b06a8c 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 da03454d807..5b48801485b 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 843379a3f54..ef375e1386c 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 799421c185b..a99632454d9 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 2abee8be2a6..77f2ddefb1e 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 9017fd54fcc..0c513308308 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 85583dce9ee..9dc2602867e 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 -- cgit v1.2.1 From c3de94404099193c0ca6551ef149da1522adacd1 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 27 Apr 2016 11:09:40 +0100 Subject: Removed cal heatmap from gemfile --- Gemfile | 3 --- Gemfile.lock | 2 -- 2 files changed, 5 deletions(-) diff --git a/Gemfile b/Gemfile index 6949c16e966..ba1ae9cf900 100644 --- a/Gemfile +++ b/Gemfile @@ -177,9 +177,6 @@ gem 'ruby-fogbugz', '~> 0.2.1' # d3 gem 'd3_rails', '~> 3.5.0' -#cal-heatmap -gem 'cal-heatmap-rails', '~> 3.6.0' - # underscore-rails gem "underscore-rails", "~> 1.8.0" diff --git a/Gemfile.lock b/Gemfile.lock index 4b51bf58bba..b1cd5ab4b17 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -99,7 +99,6 @@ GEM bundler (~> 1.2) thor (~> 0.18) byebug (8.2.1) - cal-heatmap-rails (3.6.0) capybara (2.6.2) addressable mime-types (>= 1.16) @@ -902,7 +901,6 @@ DEPENDENCIES bullet bundler-audit byebug - cal-heatmap-rails (~> 3.6.0) capybara (~> 2.6.2) capybara-screenshot (~> 1.0.0) carrierwave (~> 0.10.0) -- cgit v1.2.1 From 1c9440c2cf171e919f3e7317e9a9827576f9aafd Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 27 Apr 2016 12:45:14 +0100 Subject: tests update --- features/steps/user.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/steps/user.rb b/features/steps/user.rb index b1d088f07f9..59385a6ab59 100644 --- a/features/steps/user.rb +++ b/features/steps/user.rb @@ -34,7 +34,7 @@ class Spinach::Features::User < Spinach::FeatureSteps end step 'I should see contributions calendar' do - expect(page).to have_css('.cal-heatmap-container') + expect(page).to have_css('.js-contrib-calendar') end def contributed_project -- cgit v1.2.1 From bef5695a81af7a0afbb7ebe30d8ce344afe824f5 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 27 Apr 2016 17:38:22 +0100 Subject: Formats tooltip title & date correctly Correctly changes the activity when clicking a date - will also revert back to old data when clicking date again --- app/assets/javascripts/calendar.js.coffee | 36 +++++++++++++++++++++---------- 1 file changed, 25 insertions(+), 11 deletions(-) diff --git a/app/assets/javascripts/calendar.js.coffee b/app/assets/javascripts/calendar.js.coffee index 9c4d529f7e9..dd6adfe978f 100644 --- a/app/assets/javascripts/calendar.js.coffee +++ b/app/assets/javascripts/calendar.js.coffee @@ -1,5 +1,6 @@ class @Calendar constructor: (timestamps, calendar_activities_path) -> + currentSelectedDate = '' # Get the highest value from the timestampes highestValue = 0 _.each timestamps, (count) -> @@ -89,7 +90,14 @@ class @Calendar .attr 'width', 15 .attr 'height', 15 .attr 'title', (stamp) -> - "#{stamp.count} contributions
#{gl.utils.formatDate stamp.date}" + contribText = 'No contributions' + + if stamp.count > 0 + contribText = "#{stamp.count} contribution#{if stamp.count > 1 then 's' else ''}" + + date = dateFormat(stamp.date, 'mmm d, yyyy') + + "#{contribText}
#{date}" .attr 'class', 'user-contrib-cell js-tooltip' .attr 'fill', (stamp) -> if stamp.count isnt 0 @@ -98,16 +106,22 @@ class @Calendar '#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 + if currentSelectedDate is '' + currentSelectedDate = stamp.date + formated_date = currentSelectedDate.getFullYear() + "-" + (currentSelectedDate.getMonth()+1) + "-" + currentSelectedDate.getDate() + + $.ajax + url: calendar_activities_path + data: + date: formated_date + cache: false + dataType: 'html' + success: (data) -> + $('.user-calendar-activities').html data + else + currentSelectedDate = '' + $('.user-calendar-activities, .content_list').html '' + Pager.getOld() # Month titles svg.append 'g' -- cgit v1.2.1 From 93c0bb8041963d6677cc9c169a0e1e22221dd0cb Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Thu, 28 Apr 2016 11:03:14 +0100 Subject: Fixed issue with selected date not loading correctly Added loading icon to selected date box --- app/assets/javascripts/calendar.js.coffee | 44 ++++++++++++++------------ app/assets/stylesheets/framework/calendar.scss | 16 ++-------- app/views/users/calendar_activities.html.haml | 42 +++++++++++++----------- 3 files changed, 49 insertions(+), 53 deletions(-) diff --git a/app/assets/javascripts/calendar.js.coffee b/app/assets/javascripts/calendar.js.coffee index dd6adfe978f..701117747d5 100644 --- a/app/assets/javascripts/calendar.js.coffee +++ b/app/assets/javascripts/calendar.js.coffee @@ -1,6 +1,10 @@ class @Calendar constructor: (timestamps, calendar_activities_path) -> currentSelectedDate = '' + daySpace = 1 + daySize = 15 + daySizeWithSpace = daySize + (daySpace * 2) + # Get the highest value from the timestampes highestValue = 0 _.each timestamps, (count) -> @@ -51,7 +55,7 @@ class @Calendar months = [] svg = d3.select '.js-contrib-calendar' .append 'svg' - .attr 'width', 54 * 17 + .attr 'width', 54 * daySizeWithSpace .attr 'height', 167 .attr 'class', 'contrib-calendar' @@ -64,7 +68,7 @@ class @Calendar _.each group, (stamp, a) -> if a is 0 and stamp.day is 0 month = stamp.date.getMonth() - x = (17 * i + 1) + 17 + x = (daySizeWithSpace * i + 1) + daySizeWithSpace lastMonth = _.last(months) if lastMonth? lastMonthX = lastMonth.x @@ -73,12 +77,12 @@ class @Calendar months.push month: month x: x - else if month isnt lastMonth.month and x - 17 isnt lastMonthX + else if month isnt lastMonth.month and x - daySizeWithSpace isnt lastMonthX months.push month: month x: x - "translate(#{(17 * i + 1) + 17}, 18)" + "translate(#{(daySizeWithSpace * i + 1) + daySizeWithSpace}, 18)" .selectAll 'rect' .data (stamp) -> stamp @@ -86,9 +90,9 @@ class @Calendar .append 'rect' .attr 'x', '0' .attr 'y', (stamp, i) -> - (17 * stamp.day) - .attr 'width', 15 - .attr 'height', 15 + (daySizeWithSpace * stamp.day) + .attr 'width', daySize + .attr 'height', daySize .attr 'title', (stamp) -> contribText = 'No contributions' @@ -106,22 +110,22 @@ class @Calendar '#ededed' .attr 'data-container', 'body' .on 'click', (stamp) -> - if currentSelectedDate is '' + if currentSelectedDate isnt stamp.date currentSelectedDate = stamp.date - formated_date = currentSelectedDate.getFullYear() + "-" + (currentSelectedDate.getMonth()+1) + "-" + currentSelectedDate.getDate() + formatted_date = currentSelectedDate.getFullYear() + "-" + (currentSelectedDate.getMonth()+1) + "-" + currentSelectedDate.getDate() $.ajax url: calendar_activities_path data: - date: formated_date + date: formatted_date cache: false dataType: 'html' + beforeSend: -> + $('.user-calendar-activities').html '
' success: (data) -> $('.user-calendar-activities').html data else - currentSelectedDate = '' - $('.user-calendar-activities, .content_list').html '' - Pager.getOld() + $('.user-calendar-activities').html '' # Month titles svg.append 'g' @@ -139,13 +143,13 @@ class @Calendar # Day titles days = [{ text: 'M' - y: 29 + (17 * 1) + y: 29 + (daySizeWithSpace * 1) }, { text: 'W' - y: 29 + (17 * 3) + y: 29 + (daySizeWithSpace * 3) }, { text: 'F' - y: 29 + (17 * 5) + y: 29 + (daySizeWithSpace * 5) }] svg.append 'g' .selectAll 'text' @@ -162,15 +166,15 @@ class @Calendar # Key with color boxes svg.append 'g' - .attr 'transform', "translate(18, #{17 * 8 + 16})" + .attr 'transform', "translate(18, #{daySizeWithSpace * 8 + 16})" .selectAll 'rect' .data keyColors .enter() .append 'rect' - .attr 'width', 15 - .attr 'height', 15 + .attr 'width', daySize + .attr 'height', daySize .attr 'x', (color, i) -> - 17 * i + daySizeWithSpace * i .attr 'y', 0 .attr 'fill', (color) -> color diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss index 5b48801485b..81118b13bef 100644 --- a/app/assets/stylesheets/framework/calendar.scss +++ b/app/assets/stylesheets/framework/calendar.scss @@ -5,24 +5,12 @@ } .user-calendar-activities { - .calendar_onclick_hr { - padding: 0; - margin: 10px 0; - } - .str-truncated { max-width: 70%; } - .text-expander { - background: #eee; - color: #555; - padding: 0 5px; - cursor: pointer; - margin-left: 4px; - &:hover { - background-color: #ddd; - } + .user-calendar-activities-loading { + font-size: 24px; } } diff --git a/app/views/users/calendar_activities.html.haml b/app/views/users/calendar_activities.html.haml index 027a93a75fc..630d97e339d 100644 --- a/app/views/users/calendar_activities.html.haml +++ b/app/views/users/calendar_activities.html.haml @@ -1,23 +1,27 @@ %h4.prepend-top-20 - %span.light Contributions for + Contributions for %strong #{@calendar_date.to_s(:short)} -%ul.bordered-list - - @events.sort_by(&:created_at).each do |event| - %li - %span.light - %i.fa.fa-clock-o - = event.created_at.to_s(:time) - - if event.push? - #{event.action_name} #{event.ref_type} #{event.ref_name} - - else - = event_action_name(event) - - if event.target - %strong= link_to "##{event.target_iid}", [event.project.namespace.becomes(Namespace), event.project, event.target] - - at - %strong - - if event.project - = link_to_project event.project +- if @events.any? + %ul.bordered-list + - @events.sort_by(&:created_at).each do |event| + %li + %span.light + %i.fa.fa-clock-o + = event.created_at.to_s(:time) + - if event.push? + #{event.action_name} #{event.ref_type} #{event.ref_name} - else - = event.project_name + = event_action_name(event) + - if event.target + %strong= link_to "##{event.target_iid}", [event.project.namespace.becomes(Namespace), event.project, event.target] + + at + %strong + - if event.project + = link_to_project event.project + - else + = event.project_name +- else + %p + No contributions found for #{@calendar_date.to_s(:short)} -- cgit v1.2.1 From b54ea9de7c99df737d8f6fc358f8eb0ef8b20c76 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Thu, 28 Apr 2016 11:07:17 +0100 Subject: Updated spacing of the calendar --- app/assets/stylesheets/framework/calendar.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss index 81118b13bef..8642b7530e2 100644 --- a/app/assets/stylesheets/framework/calendar.scss +++ b/app/assets/stylesheets/framework/calendar.scss @@ -1,4 +1,7 @@ .calender-block { + padding-left: 0; + padding-right: 0; + @media (min-width: $screen-sm-min) and (max-width: $screen-lg-min) { overflow-x: scroll; } -- cgit v1.2.1 From 527d64463530df5a2f5f800885f5f84920b1058b Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Mon, 16 May 2016 12:51:49 +0100 Subject: Moved into class methods --- app/assets/javascripts/calendar.js.coffee | 195 ++++++++++++++++-------------- 1 file changed, 105 insertions(+), 90 deletions(-) diff --git a/app/assets/javascripts/calendar.js.coffee b/app/assets/javascripts/calendar.js.coffee index 701117747d5..f9c7bffdadb 100644 --- a/app/assets/javascripts/calendar.js.coffee +++ b/app/assets/javascripts/calendar.js.coffee @@ -1,32 +1,34 @@ class @Calendar - constructor: (timestamps, calendar_activities_path) -> - currentSelectedDate = '' - daySpace = 1 - daySize = 15 - daySizeWithSpace = daySize + (daySpace * 2) + constructor: (timestamps, @calendar_activities_path) -> + @currentSelectedDate = '' + @daySpace = 1 + @daySize = 15 + @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 - highestValue = 0 - _.each timestamps, (count) -> - if count > highestValue - highestValue = count + _.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 = [] + @timestampsTmp = [] i = 0 group = 0 - _.each timestamps, (count, date) -> + _.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 [] + @timestampsTmp.push [] group++ - innerArray = timestampsTmp[group-1] + innerArray = @timestampsTmp[group-1] # Push to the inner array the values that will be used to render map innerArray.push @@ -36,64 +38,61 @@ class @Calendar i++ - # Color function for chart - color = d3 - .scale - .linear() - .range(['#acd5f2', '#254e77']) - .domain([0, highestValue]) + # Init color functions + @color = @initColor() + @colorKey = @initColorKey() - # Color function for key - colorKey = d3 - .scale - .linear() - .range(['#acd5f2', '#254e77']) - .domain([0, 3]) - keyColors = ['#ededed', colorKey(0), colorKey(1), colorKey(2), colorKey(3)] + # Init the svg element + @renderSvg(group) + @renderDays() + @renderMonths() + @renderDayTitles() + @renderKey() + + @initTooltips() - monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - months = [] - svg = d3.select '.js-contrib-calendar' + renderSvg: (group) -> + @svg = d3.select '.js-contrib-calendar' .append 'svg' - .attr 'width', 54 * daySizeWithSpace + .attr 'width', (group + 1) * @daySizeWithSpace .attr 'height', 167 .attr 'class', 'contrib-calendar' - # Setup each day box - svg.selectAll 'g' - .data timestampsTmp + renderDays: -> + @svg.selectAll 'g' + .data @timestampsTmp .enter() .append 'g' - .attr 'transform', (group, i) -> - _.each group, (stamp, a) -> + .attr 'transform', (group, i) => + _.each group, (stamp, a) => if a is 0 and stamp.day is 0 month = stamp.date.getMonth() - x = (daySizeWithSpace * i + 1) + daySizeWithSpace - lastMonth = _.last(months) + x = (@daySizeWithSpace * i + 1) + @daySizeWithSpace + lastMonth = _.last(@months) if lastMonth? lastMonthX = lastMonth.x if !lastMonth? - months.push + @months.push month: month x: x - else if month isnt lastMonth.month and x - daySizeWithSpace isnt lastMonthX - months.push + else if month isnt lastMonth.month and x - @daySizeWithSpace isnt lastMonthX + @months.push month: month x: x - "translate(#{(daySizeWithSpace * i + 1) + daySizeWithSpace}, 18)" + "translate(#{(@daySizeWithSpace * i + 1) + @daySizeWithSpace}, 18)" .selectAll 'rect' .data (stamp) -> stamp .enter() .append 'rect' .attr 'x', '0' - .attr 'y', (stamp, i) -> - (daySizeWithSpace * stamp.day) - .attr 'width', daySize - .attr 'height', daySize - .attr 'title', (stamp) -> + .attr 'y', (stamp, i) => + (@daySizeWithSpace * stamp.day) + .attr 'width', @daySize + .attr 'height', @daySize + .attr 'title', (stamp) => contribText = 'No contributions' if stamp.count > 0 @@ -103,55 +102,26 @@ class @Calendar "#{contribText}
#{date}" .attr 'class', 'user-contrib-cell js-tooltip' - .attr 'fill', (stamp) -> + .attr 'fill', (stamp) => if stamp.count isnt 0 - color(stamp.count) + @color(stamp.count) else '#ededed' .attr 'data-container', 'body' - .on 'click', (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 '
' - 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] + .on 'click', @clickDay - # Day titles + renderDayTitles: -> days = [{ text: 'M' - y: 29 + (daySizeWithSpace * 1) + y: 29 + (@daySizeWithSpace * 1) }, { text: 'W' - y: 29 + (daySizeWithSpace * 3) + y: 29 + (@daySizeWithSpace * 3) }, { text: 'F' - y: 29 + (daySizeWithSpace * 5) + y: 29 + (@daySizeWithSpace * 5) }] - svg.append 'g' + @svg.append 'g' .selectAll 'text' .data days .enter() @@ -164,20 +134,65 @@ class @Calendar day.text .attr 'class', 'user-contrib-text' - # Key with color boxes - svg.append 'g' - .attr 'transform', "translate(18, #{daySizeWithSpace * 8 + 16})" + renderMonths: -> + @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] + + renderKey: -> + keyColors = ['#ededed', @colorKey(0), @colorKey(1), @colorKey(2), @colorKey(3)] + @svg.append 'g' + .attr 'transform', "translate(18, #{@daySizeWithSpace * 8 + 16})" .selectAll 'rect' .data keyColors .enter() .append 'rect' - .attr 'width', daySize - .attr 'height', daySize - .attr 'x', (color, i) -> - daySizeWithSpace * i + .attr 'width', @daySize + .attr 'height', @daySize + .attr 'x', (color, i) => + @daySizeWithSpace * i .attr 'y', 0 .attr 'fill', (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 '
' + success: (data) -> + $('.user-calendar-activities').html data + else + $('.user-calendar-activities').html '' + + initTooltips: -> $('.js-contrib-calendar .js-tooltip').tooltip html: true -- cgit v1.2.1