Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
T
timebars
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Nesstar
timebars
Commits
a940a0a5
Commit
a940a0a5
authored
Feb 13, 2014
by
Kjetil Thuen
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Feed graph from actual rest data.
Still need some pre-display data manipulation to work properly
parent
df2dd1b0
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
59 additions
and
64 deletions
+59
-64
src/app/main.coffee
src/app/main.coffee
+5
-7
src/app/nesstarloader.coffee
src/app/nesstarloader.coffee
+12
-16
src/app/timebars.coffee
src/app/timebars.coffee
+32
-39
src/style/timebars.scss
src/style/timebars.scss
+8
-0
www/index.html
www/index.html
+2
-2
No files found.
src/app/main.coffee
View file @
a940a0a5
timebars
=
require
'./timebars.coffee'
nesstarloader
=
require
'./nesstarloader.coffee'
completeData
=
{}
timeBarAnim
=
undefined
currentFrame
=
0
window
.
nesstartimebars
=
{}
window
.
nesstartimebars
.
main
=
(
containerId
)
->
nesstarloader
.
reloadNesstarData
(
(
foo
)
->
completeData
=
foo
timebars
.
setupChart
containerId
,
completeData
timebars
.
setupChart
containerId
,
foo
currentFrame
=
timebars
.
nextFrame
containerId
,
currentFrame
)
window
.
nesstartimebars
.
toggleAnimation
=
(
containerId
)
->
if
timeBarAnim
?
clearInterval
window
.
timeBarAnim
clearInterval
timeBarAnim
timeBarAnim
=
undefined
document
.
getElementById
(
"playBtn"
)
.
innerHTML
=
"<i class='fa fa-play'></i>"
else
timeBarAnim
=
setInterval
->
timebars
.
se
tFrame
containerId
timebars
.
nex
tFrame
containerId
,
timebars
.
speed
()
document
.
getElementById
(
"playBtn"
)
.
innerHTML
=
"<i class='fa fa-pause'></i>"
timebars
.
setupChart
containerId
,
window
.
data
undefined
src/app/nesstarloader.coffee
View file @
a940a0a5
lodash
=
require
'lodash'
getData
Description
=
()
->
request
Description
=
()
->
{
host
:
"http://nesstar-dev.nsd.uib.no"
port
:
80
...
...
@@ -38,13 +38,15 @@ fetchData = (url, callback) ->
request
.
send
()
assembleDataRequest
=
()
->
datadesc
=
getData
Description
()
datadesc
=
request
Description
()
datadesc
.
host
+
":"
+
datadesc
.
port
+
"/"
+
datadesc
.
service
+
"/cube/"
+
datadesc
.
cube
+
"/query?q="
+
JSON
.
stringify
(
datadesc
.
filter
)
# Turns the over-verbose and rigid cell descriptions from the Nesstar REST cube
# JSON format into something more manageble
flattenNesstarData
=
(
cellValue
)
->
flattenedCell
=
lodash
.
object
lodash
.
map
cellValue
.
coordinate
,
(
x
)
->
[
x
.
category
,
x
.
member
]
...
...
@@ -52,27 +54,21 @@ flattenNesstarData = (cellValue) ->
flattenedCell
.
value
=
cellValue
.
value
[
0
].
value
flattenedCell
# Runs a Nesstar cube REST response through flattenNesstarData and then sorts
# the resulting collection of objects by year and gender
prepareFuncFactory
=
(
callback
)
->
prepareDataForTimeBar
=
->
values
=
JSON
.
parse
(
@
response
).
payload
.
values
saneValueStore
=
lodash
.
map
(
values
,
flattenNesstarData
)
men
=
lodash
.
filter
saneValueStore
,
(
cell
)
->
parseInt
(
cell
.
Kjnn
)
is
1
women
=
lodash
.
filter
saneValueStore
,
(
cell
)
->
parseInt
(
cell
.
Kjnn
)
is
2
menByYear
=
lodash
.
groupBy
men
,
(
cell
)
->
valuesByYear
=
lodash
.
groupBy
saneValueStore
,
(
cell
)
->
parseInt
(
cell
.
tid
)
womenByYear
=
lodash
.
groupBy
women
,
(
cell
)
->
parseInt
(
cell
.
tid
)
restructuredData
=
{
men
:
menByYear
women
:
womenByYear
}
valuesByYearAndGender
=
lodash
.
mapValues
valuesByYear
,
(
cells
)
->
lodash
.
groupBy
cells
,
(
cell
)
->
parseInt
(
cell
.
Kjnn
)
callback
restructuredData
callback
valuesByYearAndGender
prepareDataForTimeBar
...
...
@@ -80,4 +76,4 @@ reloadData = (consumerFunc) ->
prep
=
prepareFuncFactory
consumerFunc
fetchData
assembleDataRequest
(),
prep
window
.
reloadNesstarData
=
reloadData
exports
.
reloadNesstarData
=
reloadData
src/app/timebars.coffee
View file @
a940a0a5
d3
=
require
'd3-browserify'
lodash
=
require
'lodash'
completeData
=
{}
chartWidth
=
->
900
chartHeight
=
->
500
numBars
=
->
100
speed
=
->
100
margin
=
->
10
next
=
(
prev
)
->
prv
=
(
if
prev
?
rvalue
then
prev
.
rvalue
else
25
)
plv
=
(
if
prev
?
lvalue
then
prev
.
lvalue
else
25
)
{
rvalue
:
Math
.
max
(
1
,
Math
.
min
(
100
,
prv
+
10
*
(
Math
.
random
()
-
.
5
)))
lvalue
:
Math
.
max
(
1
,
Math
.
min
(
100
,
plv
+
10
*
(
Math
.
random
()
-
.
5
)))
}
barThickness
=
->
chartHeight
()
/
numBars
()
...
...
@@ -44,7 +38,12 @@ addBar = (newBar) ->
.
attr
"width"
,
(
d
)
->
x
d
.
lvalue
.
attr
"height"
,
barThickness
()
updateChart
=
(
containerId
,
data
)
->
valuesFromFrame
=
(
containerId
,
frameNum
)
->
frameIndexes
=
lodash
.
keys
(
completeData
[
containerId
])
completeData
[
containerId
][
''
+
frameIndexes
[
frameNum
]
+
''
]
updateChart
=
(
containerId
,
frameNum
)
->
data
=
valuesFromFrame
containerId
,
frameNum
chart
=
d3
.
select
containerId
+
" svg.chart"
valuepoints
=
chart
.
selectAll
"g.valuepoint"
.
data
data
,
(
d
)
->
d
.
lvalue
+
","
+
d
.
rvalue
...
...
@@ -55,46 +54,40 @@ updateChart = (containerId, data) ->
.
attr
"transform"
,
(
d
,
i
)
->
"translate(0, "
+
(
y
(
i
)
+
.
5
)
+
")"
newBar
=
valuepoints
.
enter
()
addBar
newBar
addBar
valuepoints
.
enter
()
valuepoints
.
exit
()
.
transition
()
.
duration
speed
()
/
2
.
attr
"height"
,
0
.
remove
()
undefined
nextFrame
=
(
containerId
,
frameNum
)
->
num
=
frameNum
or
0
num
++
if
num
>
lodash
.
keys
(
completeData
[
containerId
]).
length
num
=
0
updateChart
containerId
,
num
num
#Constructor.
#
#The data parameter should be an object with named years. Each year member
#should be an array with at least two members (male and female, further members
#are ignored), each element in these arrays should contain an object that has
#the value property.
#
#The conteinerId is just a string identfying a div within wich the graph should
#be built
setupChart
=
(
containerId
,
data
)
->
completeData
[
containerId
]
=
data
chart
=
d3
.
select
containerId
.
append
"svg"
.
insert
"svg"
.
attr
"class"
,
"chart"
.
attr
"width"
,
chartWidth
()
.
attr
"height"
,
chartHeight
()
updateData
=
(
data
)
->
lodash
.
rest
(
lodash
.
clone
(
data
).
concat
(
next
(
lodash
.
last
(
data
))))
# State (data and intervals) stored in the window object
window
.
initTimeBars
=
(
containerId
)
->
window
.
data
=
d3
.
range
numBars
()
.
map
->
next
lodash
.
last
(
window
.
data
)
setupChart
(
containerId
,
window
.
data
)
updateChart
(
containerId
,
data
)
window
.
animateBarChart
=
(
containerId
)
->
if
window
.
timeBarAnim
?
console
.
log
(
"stopp"
)
clearInterval
(
window
.
timeBarAnim
)
window
.
timeBarAnim
=
undefined
document
.
getElementById
(
"playBtn"
).
innerHTML
=
"<i class='fa fa-play'></i>"
else
console
.
log
(
"start"
)
window
.
timeBarAnim
=
setInterval
->
data
=
updateData
window
.
data
updateChart
(
containerId
,
data
)
window
.
data
=
data
,
speed
()
document
.
getElementById
(
"playBtn"
).
innerHTML
=
"<i class='fa fa-pause'></i>"
undefined
exports
.
setupChart
=
setupChart
exports
.
speed
=
speed
exports
.
nextFrame
=
nextFrame
src/style/timebars.scss
View file @
a940a0a5
#main
{
margin-top
:
5em
;
}
#main
button
{
margin
:
1em
;
}
.chart
rect
.right
{
fill
:
maroon
;
}
...
...
www/index.html
View file @
a940a0a5
...
...
@@ -11,12 +11,12 @@
<body>
<section
id=
"main"
>
<div
id=
"content"
></div>
<button
id=
"playBtn"
class=
"btn btn-primary"
onclick=
"window.
animateBarChart
('#content')"
>
<button
id=
"playBtn"
class=
"btn btn-primary"
onclick=
"window.
nesstartimebars.toggleAnimation
('#content')"
>
<i
class=
"fa fa-play"
></i>
</button>
</section>
<script>
window
.
initTimeBars
(
"
#content
"
);
window
.
nesstartimebars
.
main
(
"
#content
"
);
</script>
</body>
</html>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment