Commit 63dbf9aa authored by Kjetil Thuen's avatar Kjetil Thuen
Browse files

Added a slider for direct access to years

parent f05e6308
......@@ -4,7 +4,8 @@
"description": "Animated barcharts",
"dependencies": {
"d3-browserify": "3.3.x",
"lodash": "2.4.x"
"lodash": "2.4.x",
"dragdealer": "^0.9.7-snapshot"
},
"devDependencies": {
"browserify": "~3.28.1",
......
......@@ -24,13 +24,13 @@ window.nesstartimebars.main = (containerId, dataDesc) ->
if timeBarAnim?
clearInterval timeBarAnim
timeBarAnim = undefined
document.getElementById("playBtn")
document.getElementById(containerId + "playBtn")
.innerHTML = "<i class='fa fa-play'></i>"
else
timeBarAnim = setInterval ->
currentFrame = timebars.nextFrame containerId, currentFrame
, timebars.speed()
document.getElementById("playBtn")
document.getElementById(containerId + "playBtn")
.innerHTML = "<i class='fa fa-pause'></i>"
undefined
d3 = require 'd3-browserify'
lodash = require 'lodash'
dragDealer = require('dragdealer').Dragdealer
slider = {}
completeData = {}
chartWidth = (chartId) ->
parseInt d3.select(chartId).style "width"
parseInt d3.select("#" + chartId).style "width"
chartHeight = (chartId) -> 700
......@@ -119,19 +121,19 @@ updateMetadata = (chartId, currentYear, ageGroup) ->
# FIXME: Add a delay to reduce flicker
data = lodash.filter completeData[chartId].yearData[currentYear],
{ 'birthyear': ageGroup }
d3.select chartId + " div.dataDetails"
d3.select "#" + chartId + " div.dataDetails"
.html prepareMetadataDiv chartId, data[0]
hoverBar = (chartId) ->
(data, index) ->
d3.selectAll chartId + " svg.chart g.valuepoint"
d3.selectAll "#" + chartId + " svg.chart g.valuepoint"
.filter (p) -> p.birthyear is data.birthyear
.classed "hovered", true
updateMetadata chartId, data.year, data.birthyear
unhoverBar = (chartId) ->
(data, index) ->
d3.selectAll chartId + " svg.chart g.valuepoint"
d3.selectAll "#" + chartId + " svg.chart g.valuepoint"
.classed "hovered", false
updateMetadata chartId, data.year, completeData[chartId].selectedYear
......@@ -139,7 +141,7 @@ selectBar = (chartId) ->
(data, index) ->
completeData[chartId].selectedYear = data.birthyear
#FIXME: Shouln't this be updated automatically when the backed data changes?
d3.selectAll chartId + " svg.chart g.valuepoint"
d3.selectAll "#" + chartId + " svg.chart g.valuepoint"
.classed "selected", (d) ->
d.birthyear is completeData[chartId].selectedYear
......@@ -191,9 +193,9 @@ valuesFromFrame = (chartId, frameNum) ->
updateChart = (chartId, frameNum) ->
data = valuesFromFrame chartId, frameNum
chart = d3.select chartId + " svg.chart"
chart = d3.select "#" + chartId + " svg.chart"
label = d3.select chartId + " span.yearLabel"
label = d3.select "#" + chartId + " span.yearLabel"
.html completeData[chartId].displayDetails.name +
" <span class='year'>" +
lodash.keys(completeData[chartId].yearData)[frameNum] +
......@@ -232,6 +234,8 @@ updateChart = (chartId, frameNum) ->
updateMetadata chartId,
lodash.keys(completeData[chartId].yearData)[frameNum],
completeData[chartId].selectedYear
undefined
nextFrame = (chartId, frameNum) ->
......@@ -241,7 +245,7 @@ nextFrame = (chartId, frameNum) ->
num++
if num >= dataLength
num = 0
updateChart chartId, num
slider[chartId].setStep(num, 0, snap=true)
num
#Constructor.
......@@ -278,11 +282,11 @@ setupChart = (chartId, data, displayDetails) ->
"Problems rendering chart",
"Could not understand data")
else
d3.select chartId
.html ""
container = d3.select "#" + chartId
container.html ""
svg = d3.select chartId
.insert "svg"
svg = container.insert "svg"
.attr "class", "chart"
.attr "shape-rendering", "geometricPrecision"
.attr "width", chartWidth chartId
......@@ -329,8 +333,7 @@ setupChart = (chartId, data, displayDetails) ->
.style("text-anchor", "middle")
metadata = d3.select chartId
.append "div"
metadata = container.append "div"
.attr "class", "metaData"
metadata.append "span"
......@@ -339,31 +342,53 @@ setupChart = (chartId, data, displayDetails) ->
metadata.append "div"
.attr "class", "dataDetails"
d3.select chartId
.append "div"
container.append "div"
.attr "class", "leftLabel"
.html "<i class='" +
completeData[chartId].displayDetails.leftsymbol +
"'></i> " +
completeData[chartId].displayDetails.leftlabel
d3.select chartId
.append "div"
container.append "div"
.attr "class", "rightLabel"
.html completeData[chartId].displayDetails.rightlabel +
" <i class='" +
completeData[chartId].displayDetails.rightsymbol +
"'></i>"
controls = container.append "div"
.attr "class", "controls"
controls.append "button"
.attr "id", chartId + "playBtn"
.attr "class", "btn btn-primary"
.on "click", -> window.nesstartimebars.toggleAnimation chartId
.append "i"
.attr "class", "fa fa-play"
controls.append "div"
.attr "id", chartId + "Slider"
.attr "class", "dragdealer"
.append "div"
.attr "class", "handle red-bar"
slider[chartId] = new dragDealer(chartId + "Slider", {
steps: lodash.keys(data).length
animationCallback: ->
year = lodash.keys(completeData[chartId].yearData)[@getStep()[0] - 1]
d3.select "#" + chartId + " .dragdealer .handle"
.html year
callback: -> updateChart chartId, @getStep()[0]-1
})
nextFrame chartId, 0
window.onresize = -> setupChart chartId, data, displayDetails
displayPoster = (chartId, icon, header, message) ->
d3.select chartId
.html ""
container = d3.select "#" + chartId
container.html ""
poster = d3.select chartId
.append "div"
poster = container.append "div"
.attr "class", "poster"
.style "min-height", -> chartHeight(chartId) / 2 + "px"
.style "margin-top", -> chartHeight(chartId) / 4 + "px"
......
......@@ -15,14 +15,49 @@
margin: 1em;
}
#main button {
margin: 1em;
}
#main svg {
@include rounded(1em);
}
.controls {
height: 30px;
padding: 0px;
margin: 0px;
display: table;
button {
width: 40px;
display: table-cell;
}
.dragdealer {
@include rounded();
width: 100%;
display: table-cell;
background: none repeat scroll 0% 0% #E1E1E1;
height: 100%;
position: relative;
padding: 0px;
.handle {
@include rounded();
margin: 0px;
height: 100%;
padding-left: 1em;
padding-right: 1em;
background: none repeat scroll 0% 0% #C00;
color: #FFF;
font-size: 14px;
line-height: 30px;
text-align: center;
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
}
}
}
div.chartContainer {
position: relative;
}
......@@ -140,15 +175,15 @@ div.metaData {
div.leftLabel {
font-size: 200%;
position: absolute;
left: 1em;
bottom: 1em;
left: 0.5em;
bottom: 2em;
}
div.rightLabel {
font-size: 200%;
position: absolute;
right: 1em;
bottom: 1em;
bottom: 2em;
text-align: right;
}
......@@ -11,9 +11,6 @@
<body>
<section id="main">
<div class="chartContainer" id="content"></div>
<button id="playBtn" class="btn btn-primary" onclick="window.nesstartimebars.toggleAnimation('#content')">
<i class="fa fa-play"></i>
</button>
</section>
<script>
//Values for hfk Nesstar REST api proxied through Grunt
......@@ -62,7 +59,7 @@
/* #content is the id of the container that should contain the chart. The
dataDesc object is a copy of the hardcoded defaults. Omitting the
dataDesc parameter is equivalent to passing the object above. */
window.nesstartimebars.main("#content", dataDesc);
window.nesstartimebars.main("content", dataDesc);
</script>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment