Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
288e8ea1
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,发现更多精彩内容 >>
提交
288e8ea1
编写于
7月 27, 2017
作者:
M
Mike Greiling
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
resolve remaining eslint violations
上级
17b43cd4
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
58 addition
and
63 deletion
+58
-63
app/assets/javascripts/users/activity_calendar.js
app/assets/javascripts/users/activity_calendar.js
+57
-62
app/assets/javascripts/users/user_tabs.js
app/assets/javascripts/users/user_tabs.js
+1
-1
未找到文件。
app/assets/javascripts/users/activity_calendar.js
浏览文件 @
288e8ea1
/* eslint-disable no-var, vars-on-top, one-var, one-var-declaration-per-line, max-len, class-methods-use-this */
import
d3
from
'
d3
'
;
const
LOADING_HTML
=
`
...
...
@@ -8,8 +6,22 @@ const LOADING_HTML = `
</div>
`
;
function
formatTooltipText
({
date
,
count
})
{
const
dateObject
=
new
Date
(
date
);
const
dateDayName
=
gl
.
utils
.
getDayName
(
dateObject
);
const
dateText
=
dateObject
.
format
(
'
mmm d, yyyy
'
);
let
contribText
=
'
No contributions
'
;
if
(
count
>
0
)
{
contribText
=
`
${
count
}
contribution
${
count
>
1
?
'
s
'
:
''
}
`
;
}
return
`
${
contribText
}
<br />
${
dateDayName
}
${
dateText
}
`
;
}
const
initColorKey
=
()
=>
d3
.
scale
.
linear
().
range
([
'
#acd5f2
'
,
'
#254e77
'
]).
domain
([
0
,
3
]);
export
default
class
ActivityCalendar
{
constructor
(
timestamps
,
calendarActivitiesPath
)
{
constructor
(
container
,
timestamps
,
calendarActivitiesPath
)
{
this
.
calendarActivitiesPath
=
calendarActivitiesPath
;
this
.
clickDay
=
this
.
clickDay
.
bind
(
this
);
this
.
currentSelectedDate
=
''
;
...
...
@@ -22,22 +34,22 @@ export default class ActivityCalendar {
// 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
this
.
timestampsTmp
=
[];
var
group
=
0
;
let
group
=
0
;
var
today
=
new
Date
();
const
today
=
new
Date
();
today
.
setHours
(
0
,
0
,
0
,
0
,
0
);
var
oneYearAgo
=
new
Date
(
today
);
const
oneYearAgo
=
new
Date
(
today
);
oneYearAgo
.
setFullYear
(
today
.
getFullYear
()
-
1
);
var
days
=
gl
.
utils
.
getDayDifference
(
oneYearAgo
,
today
);
const
days
=
gl
.
utils
.
getDayDifference
(
oneYearAgo
,
today
);
for
(
var
i
=
0
;
i
<=
days
;
i
+=
1
)
{
var
date
=
new
Date
(
oneYearAgo
);
for
(
let
i
=
0
;
i
<=
days
;
i
+=
1
)
{
const
date
=
new
Date
(
oneYearAgo
);
date
.
setDate
(
date
.
getDate
()
+
i
);
var
day
=
date
.
getDay
();
var
count
=
timestamps
[
date
.
format
(
'
yyyy-mm-dd
'
)]
||
0
;
const
day
=
date
.
getDay
();
const
count
=
timestamps
[
date
.
format
(
'
yyyy-mm-dd
'
)]
||
0
;
// Create a new group array if this is the first day of the week
// or if is first object
...
...
@@ -47,28 +59,30 @@ export default class ActivityCalendar {
}
// Push to the inner array the values that will be used to render map
var
innerArray
=
this
.
timestampsTmp
[
group
-
1
];
const
innerArray
=
this
.
timestampsTmp
[
group
-
1
];
innerArray
.
push
({
count
,
date
,
day
});
}
// Init color functions
this
.
colorKey
=
this
.
initColorKey
();
this
.
colorKey
=
initColorKey
();
this
.
color
=
this
.
initColor
();
// Init the svg element
this
.
renderSvg
(
group
);
this
.
svg
=
this
.
renderSvg
(
container
,
group
);
this
.
renderDays
();
this
.
renderMonths
();
this
.
renderDayTitles
();
this
.
renderKey
();
this
.
initTooltips
();
// Init tooltips
$
(
`
${
container
}
.js-tooltip`
).
tooltip
({
html
:
true
});
}
// Add extra padding for the last month label if it is also the last column
getExtraWidthPadding
(
group
)
{
var
extraWidthPadding
=
0
;
var
lastColMonth
=
this
.
timestampsTmp
[
group
-
1
][
0
].
date
.
getMonth
();
var
secondLastColMonth
=
this
.
timestampsTmp
[
group
-
2
][
0
].
date
.
getMonth
();
let
extraWidthPadding
=
0
;
const
lastColMonth
=
this
.
timestampsTmp
[
group
-
1
][
0
].
date
.
getMonth
();
const
secondLastColMonth
=
this
.
timestampsTmp
[
group
-
2
][
0
].
date
.
getMonth
();
if
(
lastColMonth
!==
secondLastColMonth
)
{
extraWidthPadding
=
3
;
...
...
@@ -77,9 +91,9 @@ export default class ActivityCalendar {
return
extraWidthPadding
;
}
renderSvg
(
group
)
{
var
width
=
((
group
+
1
)
*
this
.
daySizeWithSpace
)
+
this
.
getExtraWidthPadding
(
group
);
this
.
svg
=
d3
.
select
(
'
.js-contrib-calendar
'
)
renderSvg
(
container
,
group
)
{
const
width
=
((
group
+
1
)
*
this
.
daySizeWithSpace
)
+
this
.
getExtraWidthPadding
(
group
);
return
d3
.
select
(
container
)
.
append
(
'
svg
'
)
.
attr
(
'
width
'
,
width
)
.
attr
(
'
height
'
,
167
)
...
...
@@ -90,15 +104,14 @@ export default class ActivityCalendar {
this
.
svg
.
selectAll
(
'
g
'
).
data
(
this
.
timestampsTmp
).
enter
().
append
(
'
g
'
)
.
attr
(
'
transform
'
,
(
group
,
i
)
=>
{
_
.
each
(
group
,
(
stamp
,
a
)
=>
{
var
lastMonth
,
lastMonthX
,
month
,
x
;
if
(
a
===
0
&&
stamp
.
day
===
0
)
{
month
=
stamp
.
date
.
getMonth
();
x
=
(
this
.
daySizeWithSpace
*
i
)
+
1
+
this
.
daySizeWithSpace
;
lastMonth
=
_
.
last
(
this
.
months
);
if
(
lastMonth
!=
null
)
{
lastMonth
X
=
lastMonth
.
x
;
}
if
(
lastMonth
==
null
||
(
month
!==
lastMonth
.
month
&&
x
-
this
.
daySizeWithSpace
!==
lastMonthX
)
)
{
const
month
=
stamp
.
date
.
getMonth
();
const
x
=
(
this
.
daySizeWithSpace
*
i
)
+
1
+
this
.
daySizeWithSpace
;
const
lastMonth
=
_
.
last
(
this
.
months
);
if
(
lastMonth
==
null
||
(
month
!==
lastMonth
.
month
&&
x
-
this
.
daySizeWithSpace
!==
lastMonth
.
x
)
)
{
this
.
months
.
push
({
month
,
x
});
}
}
...
...
@@ -106,29 +119,20 @@ export default class ActivityCalendar {
return
`translate(
${(
this
.
daySizeWithSpace
*
i
)
+
1
+
this
.
daySizeWithSpace
}
, 18)`
;
})
.
selectAll
(
'
rect
'
)
.
data
(
stamp
=>
stamp
)
.
enter
()
.
append
(
'
rect
'
)
.
attr
(
'
x
'
,
'
0
'
)
.
attr
(
'
y
'
,
stamp
=>
this
.
daySizeWithSpace
*
stamp
.
day
)
.
attr
(
'
width
'
,
this
.
daySize
)
.
attr
(
'
height
'
,
this
.
daySize
)
.
attr
(
'
title
'
,
(
stamp
)
=>
{
var
contribText
,
date
,
dateText
;
date
=
new
Date
(
stamp
.
date
);
contribText
=
'
No contributions
'
;
if
(
stamp
.
count
>
0
)
{
contribText
=
`
${
stamp
.
count
}
contribution
${
stamp
.
count
>
1
?
'
s
'
:
''
}
`
;
}
dateText
=
date
.
format
(
'
mmm d, yyyy
'
);
return
`
${
contribText
}
<br />
${
gl
.
utils
.
getDayName
(
date
)}
${
dateText
}
`
;
})
.
attr
(
'
class
'
,
'
user-contrib-cell js-tooltip
'
)
.
attr
(
'
fill
'
,
stamp
=>
(
stamp
.
count
!==
0
?
this
.
color
(
Math
.
min
(
stamp
.
count
,
40
))
:
'
#ededed
'
))
.
attr
(
'
data-container
'
,
'
body
'
)
.
on
(
'
click
'
,
this
.
clickDay
);
.
data
(
stamp
=>
stamp
)
.
enter
()
.
append
(
'
rect
'
)
.
attr
(
'
x
'
,
'
0
'
)
.
attr
(
'
y
'
,
stamp
=>
this
.
daySizeWithSpace
*
stamp
.
day
)
.
attr
(
'
width
'
,
this
.
daySize
)
.
attr
(
'
height
'
,
this
.
daySize
)
.
attr
(
'
fill
'
,
stamp
=>
(
stamp
.
count
!==
0
?
this
.
color
(
Math
.
min
(
stamp
.
count
,
40
))
:
'
#ededed
'
))
.
attr
(
'
title
'
,
stamp
=>
formatTooltipText
(
stamp
))
.
attr
(
'
class
'
,
'
user-contrib-cell js-tooltip
'
)
.
attr
(
'
data-container
'
,
'
body
'
)
.
on
(
'
click
'
,
this
.
clickDay
);
}
renderDayTitles
()
{
...
...
@@ -190,15 +194,10 @@ export default class ActivityCalendar {
}
initColor
()
{
var
colorRange
;
colorRange
=
[
'
#ededed
'
,
this
.
colorKey
(
0
),
this
.
colorKey
(
1
),
this
.
colorKey
(
2
),
this
.
colorKey
(
3
)];
const
colorRange
=
[
'
#ededed
'
,
this
.
colorKey
(
0
),
this
.
colorKey
(
1
),
this
.
colorKey
(
2
),
this
.
colorKey
(
3
)];
return
d3
.
scale
.
threshold
().
domain
([
0
,
10
,
20
,
30
]).
range
(
colorRange
);
}
initColorKey
()
{
return
d3
.
scale
.
linear
().
range
([
'
#acd5f2
'
,
'
#254e77
'
]).
domain
([
0
,
3
]);
}
clickDay
(
stamp
)
{
if
(
this
.
currentSelectedDate
!==
stamp
.
date
)
{
this
.
currentSelectedDate
=
stamp
.
date
;
...
...
@@ -222,8 +221,4 @@ export default class ActivityCalendar {
$
(
'
.user-calendar-activities
'
).
html
(
''
);
}
}
initTooltips
()
{
$
(
'
.js-contrib-calendar .js-tooltip
'
).
tooltip
({
html
:
true
});
}
}
app/assets/javascripts/users/user_tabs.js
浏览文件 @
288e8ea1
...
...
@@ -158,7 +158,7 @@ export default class UserTabs {
$calendarWrap
.
html
(
CALENDAR_TEMPLATE
);
// eslint-disable-next-line no-new
new
ActivityCalendar
(
activityData
,
calendarActivitiesPath
);
new
ActivityCalendar
(
'
.js-contrib-calendar
'
,
activityData
,
calendarActivitiesPath
);
},
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录