Skip to content
GitLab
Next
Menu
Why GitLab
Pricing
Contact Sales
Explore
Why GitLab
Pricing
Contact Sales
Explore
Sign in
Get free trial
Primary navigation
Search or go to…
Project
GitLab
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Iterations
Requirements
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Locked files
Build
Pipelines
Jobs
Pipeline schedules
Test cases
Artifacts
Deploy
Releases
Package Registry
Container Registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Service Desk
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Code review analytics
Issue analytics
Insights
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Privacy statement
Keyboard shortcuts
?
What's new
4
Snippets
Groups
Projects
Show more breadcrumbs
GitLab.org
GitLab
Commits
527d6446
Commit
527d6446
authored
8 years ago
by
Phil Hughes
Browse files
Options
Downloads
Patches
Plain Diff
Moved into class methods
parent
b54ea9de
No related branches found
No related tags found
1 merge request
!425
CE upstream
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
app/assets/javascripts/calendar.js.coffee
+105
-90
105 additions, 90 deletions
app/assets/javascripts/calendar.js.coffee
with
105 additions
and
90 deletions
app/assets/javascripts/calendar.js.coffee
+
105
−
90
View file @
527d6446
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
}
<br />
#{
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
'<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
]
.
on
'click'
,
@
clickDay
#
Day
t
itles
render
Day
T
itles
:
->
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
'<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
html
:
true
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment