Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
527d6446
G
gitlab-foss
项目概览
李少辉-开发者
/
gitlab-foss
通知
15
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gitlab-foss
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
527d6446
编写于
5月 16, 2016
作者:
P
Phil Hughes
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Moved into class methods
上级
b54ea9de
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
105 addition
and
90 deletion
+105
-90
app/assets/javascripts/calendar.js.coffee
app/assets/javascripts/calendar.js.coffee
+105
-90
未找到文件。
app/assets/javascripts/calendar.js.coffee
浏览文件 @
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 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
'<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
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录