FazBrowse GitHub Viewer
|
Trending
|
URL:
|
Home
Tools:
[Download Repo ZIP]
[View Raw Code]
[Original HTTPS Page]
progress/progress.coffee at master · drewnewell/progress · GitHub
drewnewell
progress
Repository navigation
Code
Issues
Pull requests
Actions
Projects
Wiki
Security and quality
Insights
Expand file tree
Breadcrumbs
progress
/
progress.coffee
Copy path
More file actions
More file actions
Latest commit
History
History
History
96 lines (89 loc) · 2.83 KB
Breadcrumbs
progress
/
progress.coffee
Copy path
File metadata and controls
96 lines (89 loc) · 2.83 KB
Raw
Copy raw file
Download raw file
Open symbols panel
Edit and raw actions
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
#
initialize angular module
app
=
angular
.
module
(
'
simpleApp
'
, [])
#
add directive which creates progress indicator and input fields``
app
.
directive
(
'
myProgress
'
,
->
restrict
:
'
E
'
template
:
"""
Actual: <input ng-model='actual' ng-change='change()' /><br/>
Expected: <input ng-model='expected' ng-change='change()' />
<br/><br/>
<div id='progress-indicator'></div>
"""
,
link
:
(
scope
,
element
)
->
r1
=
56
#
outer/actual indicator radius
r2
=
50
#
inner/expected indicator radius
padding
=
10
points
=
100
#
to draw on the line - more is smoother but uses more CPU
dimension
=
(
2
*
r1)
+
(
2
*
padding)
#
create the svg object
svg
=
d3
.
selectAll
(
"
#progress-indicator
"
).
append
(
"
svg
"
)
.
attr
(
"
width
"
, dimension)
.
attr
(
"
height
"
, dimension)
.
append
(
"
g
"
)
.
attr
(
"
transform
"
,
"
translate(
"
+
(r1
+
padding)
+
"
,
"
+
(r1
+
padding)
+
"
)
"
)
#
add elements to the svg obejct; circle, arc line, and progress text
svg
.
append
(
"
circle
"
)
.
attr
(
'
cx
'
,
0
)
.
attr
(
'
cy
'
,
0
)
.
attr
(
"
r
"
,
43.5
)
.
attr
(
"
class
"
,
"
circ
"
)
a
=
svg
.
append
(
"
path
"
).
datum
(
d3
.
range
(points))
.
attr
(
"
class
"
,
"
line
"
)
b
=
svg
.
append
(
"
path
"
).
datum
(
d3
.
range
(points))
.
attr
(
"
class
"
,
"
sm-line
"
)
progress
=
svg
.
append
(
"
text
"
)
.
attr
(
"
x
"
,
10
)
.
attr
(
"
y
"
,
0
)
.
attr
(
"
text-anchor
"
,
"
end
"
)
.
attr
(
"
font-size
"
,
"
30px
"
)
.
attr
(
"
fill
"
,
"
#454545
"
)
svg
.
append
(
"
text
"
)
.
attr
(
"
x
"
,
10
)
.
attr
(
"
y
"
,
0
)
.
attr
(
"
text-anchor
"
,
"
start
"
)
.
text
(
"
%
"
)
.
attr
(
"
font-size
"
,
"
18px
"
)
.
attr
(
"
fill
"
,
"
#454545
"
)
svg
.
append
(
"
text
"
)
.
attr
(
"
x
"
,
0
)
.
attr
(
"
y
"
,
15
)
.
text
(
"
Progress
"
)
.
attr
(
"
text-anchor
"
,
"
middle
"
)
.
attr
(
"
font-size
"
,
"
12px
"
)
.
attr
(
"
fill
"
,
"
#898989
"
)
#
custom tween function to draw the lines at each new step t
lTween
=
(
transition
,
newAngle
,
r
)
->
transition
.
attrTween
(
"
d
"
, (
d
)
->
interpolate
=
d3
.
interpolate
(
0
, newAngle)
(
t
)
->
rads
=
interpolate
(t)
angleint
=
d3
.
scale
.
linear
()
.
domain
([
0
, points
-
1
])
.
range
([
0
, rads])
bline
=
d3
.
svg
.
line
.
radial
()
.
interpolate
(
"
basis
"
)
.
tension
(
0
)
.
radius
(r)
.
angle
((
d
,
i
)
->
angleint
(i))
bline
(d)
)
#
update function redraws progress bars according to inputs
#
inputs must be in the range [0,1]
#
inputs: actual, expected
update
=
(
actual
,
expected
)
->
color
=
"
#78C000
"
#
green
amt
=
actual
/
expected
if
amt
<=
0.75
and
amt
>
0.5
color
=
"
#FFF799
"
#
yellow
else
if
amt
<=
0.5
color
=
"
#FF8667
"
#
red
a
.
transition
().
duration
(
1000
).
call
(lTween, actual
*
2
*
Math
.
PI
,
56
).
style
(
"
stroke
"
, color)
b
.
transition
().
duration
(
1000
).
call
(lTween, expected
*
2
*
Math
.
PI
,
50
)
progress
.
text
((actual
*
100
).
toFixed
(
0
))
#
Set initial values
scope
.
actual
=
0.5
scope
.
expected
=
0.75
scope
.
change
=
->
update
(
scope
.
actual
,
scope
.
expected
)
#
draw initial values
update
(
scope
.
actual
,
scope
.
expected
)
)
Back
|
FazBrowse Home
|
New Git URL