status-im
/
burnchart
mirror of https://github.com/status-im/burnchart.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

show y axis

This commit is contained in:
Radek Stepan 2013-08-20 22:59:08 +01:00
parent 4cbb4b04a1
commit 6f3a8473e0
2 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/modules/graph.coffee
View File

@ -81,11 +81,11 @@ module.exports =
# Get available space. # Get available space.
{ height, width } = document.querySelector('#graph').getBoundingClientRect() { height, width } = document.querySelector('#graph').getBoundingClientRect()
margin = { top: 20, right: 30, bottom: 30, left: 30 } margin = { top: 20, right: 30, bottom: 40, left: 50 }
width -= margin.left + margin.right width -= margin.left + margin.right
height -= margin.top + margin.bottom height -= margin.top + margin.bottom
# Scales and axis. # Scales and axes.
x = d3.time.scale().range([ 0, width ]) x = d3.time.scale().range([ 0, width ])
y = d3.scale.linear().range([ height, 0 ]) y = d3.scale.linear().range([ height, 0 ])
@ -94,8 +94,16 @@ module.exports =
.tickSize(-height) .tickSize(-height)
# ...with day of the month... # ...with day of the month...
.tickFormat( (d) -> d.getDate() ) .tickFormat( (d) -> d.getDate() )
# ...once per day. # ...once per day...
.ticks(d3.time.hours, 24) .ticks(d3.time.hours, 24)
# ...and give us a spacer.
.tickPadding(10)
yAxis = d3.svg.axis().scale(y)
.orient("left")
.tickSize(-width)
.ticks(5)
.tickPadding(10)
# Area generator. # Area generator.
area = d3.svg.area() area = d3.svg.area()
@ -139,6 +147,11 @@ module.exports =
.attr("transform", "translate(0,#{height})") .attr("transform", "translate(0,#{height})")
.call(xAxis) .call(xAxis)
# Add the y-axis.
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
# Add the ideal line path. # Add the ideal line path.
svg.append("path") svg.append("path")
.attr("class", "ideal line") .attr("class", "ideal line")
@ -185,7 +198,7 @@ module.exports =
# Absolutely position the div. # Absolutely position the div.
div = document.querySelector '#tooltip' div = document.querySelector '#tooltip'
div.style.left = x(date) + margin.left + 'px' div.style.left = x(date) + margin.left + 'px'
div.style.top = y(points) + margin.top + 'px' div.style.top = -10 + y(points) + margin.top + 'px'
# And now show us on the div. # And now show us on the div.
tooltip.show '#tooltip' tooltip.show '#tooltip'
) )

8
src/styles/app.styl
View File

@ -87,6 +87,7 @@ h2
&.today &.today
stroke: rgba(#FFF, 0.75) stroke: rgba(#FFF, 0.75)
stroke-width: 1px stroke-width: 1px
shape-rendering: crispEdges
circle circle
fill: #FFF fill: #FFF
@ -100,9 +101,9 @@ h2
.axis .axis
shape-rendering: crispEdges shape-rendering: crispEdges
&.x
line line
stroke: #3D9E68 stroke: #3D9E68
shape-rendering: crispEdges
text text
font-weight: bold font-weight: bold
@ -111,11 +112,6 @@ h2
path path
display: none display: none
&.y
line, path
fill: none
stroke: #000
#progress #progress
padding: 20px padding: 20px
border-radius: 0 0 6px 6px border-radius: 0 0 6px 6px