Skip to content

GitLab

Commit 431ac8ca authored by Kjetil Thuen's avatar Kjetil Thuen
Browse files

Made slider layout work in Firefox

parent 5ada49cc
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 119 deletions
src/app/main.coffee
View file @ 431ac8ca
......@@ -10,7 +10,6 @@ window.nesstartimebars.main = (containerId, dataDesc) ->
"Please wait"
nesstarloader.reloadNesstarData( (data) ->
timebars.setupChart containerId, data, dataDesc.display
timebars.nextFrame containerId
, (errorStatus) ->
timebars.displayPoster containerId,
"fa fa-exclamation-triangle"
......
src/app/timebars.coffee
View file @ 431ac8ca
......@@ -92,7 +92,6 @@ yAxisLabels = (chartId) ->
.orient "right"
.ticks 5
prepareMetadataDiv = (chartId, data, mapping) ->
if data
fieldMapping = mapping or {
......@@ -120,7 +119,6 @@ prepareMetadataDiv = (chartId, data, mapping) ->
_results.join ""
updateMetadata = (chartId, currentYear, ageGroup) ->
# FIXME: Add a delay to reduce flicker
data = lodash.filter chartState[chartId].yearData[currentYear],
{ 'birthyear': ageGroup }
d3.select "#" + chartId + " div.dataDetails"
......@@ -142,14 +140,13 @@ unhoverBar = (chartId) ->
selectBar = (chartId) ->
(data, index) ->
chartState[chartId].selectedYear = data.birthyear
#FIXME: Shouln't this be updated automatically when the backed data changes?
d3.selectAll "#" + chartId + " svg.chart g.valuepoint"
.classed "selected", (d) ->
d.birthyear is chartState[chartId].selectedYear
updateMetadata chartId, "2015", data.birthyear
addBar = (newBar, chartId) ->
addBars = (newBar, chartId) ->
barGroup = newBar.append "g"
.attr "class", "valuepoint"
.attr "transform", (d, i) ->
......@@ -193,6 +190,113 @@ valuesFromFrame = (chartId, frameNum) ->
frameIndexes = lodash.keys(chartState[chartId].yearData)
chartState[chartId].yearData['' + frameIndexes[frameNum] + '']
initChart = (chartId, data, displayDetails) ->
container = d3.select "#" + chartId
container.html ""
svg = container.insert "svg"
.attr "class", "chart"
.attr "shape-rendering", "geometricPrecision"
.attr "width", chartWidth chartId
.attr "height", chartHeight chartId
svg.append "g"
.attr "class", "axisLabels"
.attr "transform", (d, i) ->
"translate(" +
horizMargin(chartId) +
", " +
(chartHeight(chartId) - vertMargin(chartId) + 5) +
")"
.call xAxisLeft(chartId)
svg.append "g"
.attr "class", "axisLabels"
.attr "transform", (d, i) ->
"translate(" +
(horizMargin(chartId) + (chartWidth(chartId) / 2)) +
", " +
(chartHeight(chartId) - vertMargin(chartId) + 5) +
")"
.call xAxisRight(chartId)
svg.append "g"
.attr "class", "yAxisGrid"
.attr "transform", (d, i) ->
"translate(0, " +
((barThickness(chartId) / 2) + 1) +
")"
.call yAxisGrid(chartId)
svg.append "g"
.attr "class", "axisLabels"
.attr "transform", (d, i) ->
"translate(" +
((chartWidth(chartId) - horizMargin(chartId)) / 2) +
", " +
((barThickness(chartId) / 2) + 1) +
")"
.call yAxisLabels(chartId)
.selectAll("text")
.style("text-anchor", "middle")
metadata = container.append "div"
.attr "class", "metaData"
metadata.append "span"
.attr "class", "yearLabel"
metadata.append "div"
.attr "class", "dataDetails"
container.append "div"
.attr "class", "inlineLabel left"
.html "<i class='" +
chartState[chartId].displayDetails.leftsymbol +
"'></i> " +
chartState[chartId].displayDetails.leftlabel
container.append "div"
.attr "class", "inlineLabel right"
.html chartState[chartId].displayDetails.rightlabel +
" <i class='" +
chartState[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"
.attr "style", "width " + chartWidth - 40
chartState[chartId].slider = new dragDealer(chartId + "Slider", {
steps: lodash.keys(data).length
animationCallback: ->
frame = @getStep()[0]
d3.select "#" + chartId + " .dragdealer .handle"
.html lodash.keys(chartState[chartId].yearData)[frame - 1]
callback: ->
chartState[chartId].currentFrame = @getStep()[0]
requestAnimationFrame ->
updateChart chartId, chartState[chartId].currentFrame - 1
})
setFrame chartId, 0
window.onresize = -> initChart chartId, data, displayDetails
updateChart = (chartId, frameNum) ->
data = valuesFromFrame chartId, frameNum
chart = d3.select "#" + chartId + " svg.chart"
......@@ -224,15 +328,16 @@ updateChart = (chartId, frameNum) ->
valuepoints.select "rect.right"
.transition()
.attr "width", (d) -> xScaleRight(chartId)(d.rvalue)
addBar valuepoints.enter(), chartId
valuepoints.exit()
.transition()
.duration speed() / 2
.duration 10
.attr "height", 0
.remove()
addBars valuepoints.enter(), chartId
updateMetadata chartId,
lodash.keys(chartState[chartId].yearData)[frameNum],
chartState[chartId].selectedYear
......@@ -250,7 +355,7 @@ nextFrame = (chartId) ->
setFrame = (chartId, frame) ->
dataLength = lodash.keys(chartState[chartId].yearData).length
if frame <= dataLength
if frame >= 0 and frame <= dataLength
chartState[chartId].currentFrame = frame
chartState[chartId].slider.setStep(frame, 0, snap=true)
......@@ -333,109 +438,8 @@ setupChart = (chartId, data, displayDetails) ->
"Problems rendering chart",
"Could not understand data")
else
container = d3.select "#" + chartId
container.html ""
svg = container.insert "svg"
.attr "class", "chart"
.attr "shape-rendering", "geometricPrecision"
.attr "width", chartWidth chartId
.attr "height", chartHeight chartId
svg.append "g"
.attr "class", "axisLabels"
.attr "transform", (d, i) ->
"translate(" +
horizMargin(chartId) +
", " +
(chartHeight(chartId) - vertMargin(chartId) + 5) +
")"
.call xAxisLeft(chartId)
svg.append "g"
.attr "class", "axisLabels"
.attr "transform", (d, i) ->
"translate(" +
(horizMargin(chartId) + (chartWidth(chartId) / 2)) +
", " +
(chartHeight(chartId) - vertMargin(chartId) + 5) +
")"
.call xAxisRight(chartId)
svg.append "g"
.attr "class", "yAxisGrid"
.attr "transform", (d, i) ->
"translate(0, " +
((barThickness(chartId) / 2) + 1) +
")"
.call yAxisGrid(chartId)
svg.append "g"
.attr "class", "axisLabels"
.attr "transform", (d, i) ->
"translate(" +
((chartWidth(chartId) - horizMargin(chartId)) / 2) +
", " +
((barThickness(chartId) / 2) + 1) +
")"
.call yAxisLabels(chartId)
.selectAll("text")
.style("text-anchor", "middle")
metadata = container.append "div"
.attr "class", "metaData"
metadata.append "span"
.attr "class", "yearLabel"
metadata.append "div"
.attr "class", "dataDetails"
container.append "div"
.attr "class", "inlineLabel left"
.html "<i class='" +
chartState[chartId].displayDetails.leftsymbol +
"'></i> " +
chartState[chartId].displayDetails.leftlabel
container.append "div"
.attr "class", "inlineLabel right"
.html chartState[chartId].displayDetails.rightlabel +
" <i class='" +
chartState[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"
chartState[chartId].slider = new dragDealer(chartId + "Slider", {
steps: lodash.keys(data).length
animationCallback: ->
frame = @getStep()[0]
d3.select "#" + chartId + " .dragdealer .handle"
.html lodash.keys(chartState[chartId].yearData)[frame - 1]
callback: ->
chartState[chartId].currentFrame = @getStep()[0]
updateChart(chartId, chartState[chartId].currentFrame - 1)
})
initChart chartId, data, displayDetails
setFrame chartId, 0
window.onresize = -> setupChart chartId, data, displayDetails
exports.displayPoster = displayPoster
exports.setupChart = setupChart
......
src/style/timebars.scss
View file @ 431ac8ca
......@@ -15,24 +15,23 @@
position: relative;
.controls {
display: table;
border-spacing: 5px;
height: 45px;
button {
display: table-cell;
float: left;
}
.dragdealer {
@include rounded();
width: 100%;
margin-left: 40px;
height: 35px;
font-size: 14px;
display: table-cell;
background: #e1e1e1;
position: relative;
.handle {
@include rounded();
height: 100%;
height: 35px;
line-height: 35px;
width: 75px;
background: #c00;
color: white;
......@@ -42,7 +41,6 @@
text-align:center;
border:1px solid silver;
vertical-align:middle; //now we can center vertically like in a TD
line-height: 35px;
}
}
}
......
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