a usable ui
This commit is contained in:
Radek Stepan
parent
6f3a8473e0
commit
e1fd2403e9
|
|
@ -81,7 +81,7 @@ module.exports =
|
|||
# Get available space.
|
||||
{ height, width } = document.querySelector('#graph').getBoundingClientRect()
|
||||
|
||||
margin = { top: 20, right: 30, bottom: 40, left: 50 }
|
||||
margin = { top: 10, right: 30, bottom: 40, left: 50 }
|
||||
width -= margin.left + margin.right
|
||||
height -= margin.top + margin.bottom
|
||||
|
||||
|
|
@ -104,13 +104,6 @@ module.exports =
|
|||
.tickSize(-width)
|
||||
.ticks(5)
|
||||
.tickPadding(10)
|
||||
|
||||
# Area generator.
|
||||
area = d3.svg.area()
|
||||
.interpolate("precise")
|
||||
.x( (d) -> x(d.date) )
|
||||
.y0(height)
|
||||
.y1( (d) -> y(d.points) )
|
||||
|
||||
# Line generator.
|
||||
line = d3.svg.line()
|
||||
|
|
@ -129,18 +122,6 @@ module.exports =
|
|||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
|
||||
|
||||
# Add the clip path.
|
||||
svg.append("clipPath")
|
||||
.attr("id", "clip")
|
||||
.append("rect")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
|
||||
# Add the area path.
|
||||
svg.append("path")
|
||||
.attr("class", "area")
|
||||
.attr("d", area(ideal))
|
||||
|
||||
# Add the x-axis.
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
|
|
@ -152,34 +133,27 @@ module.exports =
|
|||
.attr("class", "y axis")
|
||||
.call(yAxis)
|
||||
|
||||
# Add a line showing where we are now.
|
||||
svg.append("svg:line")
|
||||
.attr("class", "today")
|
||||
.attr("x1", x(new Date()))
|
||||
.attr("y1", 0)
|
||||
.attr("x2", x(new Date()))
|
||||
.attr("y2", height)
|
||||
|
||||
# Add the ideal line path.
|
||||
svg.append("path")
|
||||
.attr("class", "ideal line")
|
||||
.attr("d", line(ideal))
|
||||
|
||||
# Add an actual line drop shadow.
|
||||
svg.append("path")
|
||||
.attr("class", "actual line shadow")
|
||||
.attr("d", line.y( (d) -> y(d.points) + 4 )(actual))
|
||||
.attr("d", line.interpolate("basis")(ideal))
|
||||
|
||||
# Add the actual line path.
|
||||
svg.append("path")
|
||||
.attr("class", "actual line")
|
||||
.attr("d", line.y( (d) -> y(d.points) )(actual))
|
||||
.attr("d", line.interpolate("linear").y( (d) -> y(d.points) )(actual))
|
||||
|
||||
# Collect the tooltip here.
|
||||
tooltip = null
|
||||
|
||||
# Add circle shadows.
|
||||
svg.selectAll('circle.shadow')
|
||||
.data(actual[1...])
|
||||
.enter()
|
||||
.append('svg:circle')
|
||||
.attr("cx", ({ date }) -> x date )
|
||||
.attr("cy", ({ points }) -> y(points) + 4 )
|
||||
.attr("r", ({ radius }) -> 5 )
|
||||
.attr('class', 'shadow')
|
||||
|
||||
# Show when we closed an issue.
|
||||
svg.selectAll("a.issue")
|
||||
.data(actual[1...]) # skip the starting point
|
||||
|
|
@ -207,12 +181,4 @@ module.exports =
|
|||
tooltip?.hide(200)
|
||||
)
|
||||
|
||||
# Add a line showing where we are now.
|
||||
svg.append("svg:line")
|
||||
.attr("class", "today")
|
||||
.attr("x1", x(new Date()))
|
||||
.attr("y1", 0)
|
||||
.attr("x2", x(new Date()))
|
||||
.attr("y2", height)
|
||||
|
||||
cb null
|
||||
|
|
@ -44,14 +44,12 @@ h2
|
|||
|
||||
h1
|
||||
margin: 0
|
||||
padding: 10px 30px
|
||||
color: #FFF
|
||||
background: #55BC75
|
||||
padding: 20px
|
||||
color: #64584c
|
||||
font-size: 20px
|
||||
text-transform: uppercase
|
||||
|
||||
#graph
|
||||
background: #55BC75
|
||||
height: 200px
|
||||
position: relative
|
||||
|
||||
|
|
@ -68,46 +66,36 @@ h2
|
|||
clip-path: url(#clip)
|
||||
|
||||
&.actual
|
||||
stroke-width: 4px
|
||||
stroke: #FFF
|
||||
|
||||
&.shadow
|
||||
stroke-width: 5px
|
||||
stroke: rgba(#000, 0.25)
|
||||
stroke-width: 3px
|
||||
stroke: #64584c
|
||||
|
||||
&.ideal
|
||||
stroke: #3D9E68
|
||||
stroke-dasharray: 5,5
|
||||
|
||||
&.area
|
||||
clip-path: url(#clip)
|
||||
fill: #4DAF7C
|
||||
stroke: #CACACA
|
||||
stroke-width: 3px
|
||||
|
||||
line
|
||||
&.today
|
||||
stroke: rgba(#FFF, 0.75)
|
||||
stroke: #CACACA
|
||||
stroke-width: 1px
|
||||
shape-rendering: crispEdges
|
||||
stroke-dasharray: 5,5
|
||||
|
||||
circle
|
||||
fill: #FFF
|
||||
fill: #64584c
|
||||
stroke: transparent
|
||||
stroke-width: 15px
|
||||
cursor: pointer
|
||||
|
||||
&.shadow
|
||||
fill: rgba(#000, 0.25)
|
||||
|
||||
.axis
|
||||
shape-rendering: crispEdges
|
||||
|
||||
line
|
||||
stroke: #3D9E68
|
||||
stroke: rgba(#CACACA, 0.25)
|
||||
shape-rendering: crispEdges
|
||||
|
||||
text
|
||||
font-weight: bold
|
||||
fill: #FFF
|
||||
fill: #CACACA
|
||||
|
||||
path
|
||||
display: none
|
||||
|
|
|
|||
Loading…
Reference in New Issue