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

standing out more

This commit is contained in:
Radek Stepan 2013-08-20 00:06:02 +01:00
parent ccce66c4af
commit 4cbb4b04a1
9 changed files with 129 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/fonts/SourceSansPro-Bold.woff Normal file
View File

Binary file not shown.

BIN
public/fonts/SourceSansPro-Regular.woff Normal file
View File

Binary file not shown.

BIN
public/fonts/SourceSansPro-Semibold.woff Normal file
View File

Binary file not shown.

1
src/component.json
View File

@ -29,6 +29,7 @@
"templates/progress.eco"
],
"styles": [
"styles/fonts.css",
"styles/app.styl"
]
}

21
src/modules/graph.coffee
View File

@ -81,7 +81,7 @@ module.exports =
# Get available space.
{ height, width } = document.querySelector('#graph').getBoundingClientRect()
margin = { top: 20, right: 20, bottom: 20, left: 20 }
margin = { top: 20, right: 30, bottom: 30, left: 30 }
width -= margin.left + margin.right
height -= margin.top + margin.bottom
@ -106,7 +106,7 @@ module.exports =
# Line generator.
line = d3.svg.line()
.interpolate("precise")
.interpolate("linear")
.x( (d) -> x(d.date) )
.y( (d) -> y(d.points) )
@ -144,14 +144,29 @@ module.exports =
.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))
# Add the actual line path.
svg.append("path")
.attr("class", "actual line")
.attr("d", line(actual))
.attr("d", line.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

2
src/modules/repo.coffee
View File

@ -67,7 +67,7 @@ class exports.Repo
)
], (err, values) ->
# Render the body.
render 'body', 'graph'
render 'body', 'graph', name: self.repo
# Render the progress.
render '#progress', 'progress', { progress }

159
src/styles/app.styl
View File

@ -1,11 +1,13 @@
$closed = #4ACAB4
$opened = #FE5D55
$grey = #CBC8C3
$closed = #4DAF7C
$opened = #E55F3A
$grey = #E2E2E2
$ideal = $grey
body
background: #31323A
font-family: 'Source Sans Pro', sans-serif
background: linear-gradient(135deg, #d7bcab 0%, #cc9485 100%)
padding: 100px
color: #64584C
ul
list-style-type: none
@ -15,31 +17,104 @@ ul
padding: 0
h2
font-size: 14px
font-size: 16px
text-transform: uppercase
.box
background: #43444f
color: #FFF
background: #FFF
box-shadow: 2px 4px 6px rgba(0,0,0,0.2)
&.generic, &.info, &.error, &.success
border-top: 4px solid #E2E2E2
border-top: 4px solid #EAC85D
padding: 20px
width: 50%
margin: 0 auto
&.info
border-top-color: #96CFFB
border-top-color: #5F90B0
&.error
border-top-color: #FE5D55
border-top-color: #E45E39
&.success
border-top-color: #4ACAB4
border-top-color: #4DB07A
a
color: #64584C
h1
margin: 0
padding: 10px 30px
color: #FFF
background: #55BC75
font-size: 20px
text-transform: uppercase
#graph
background: #55BC75
height: 200px
position: relative
#tooltip
position: absolute
top: 0
left: 0
svg
path
&.line
fill: none
stroke-width: 1px
clip-path: url(#clip)
&.actual
stroke-width: 4px
stroke: #FFF
&.shadow
stroke-width: 5px
stroke: rgba(#000, 0.25)
&.ideal
stroke: #3D9E68
stroke-dasharray: 5,5
&.area
clip-path: url(#clip)
fill: #4DAF7C
line
&.today
stroke: rgba(#FFF, 0.75)
stroke-width: 1px
circle
fill: #FFF
stroke: transparent
stroke-width: 15px
cursor: pointer
&.shadow
fill: rgba(#000, 0.25)
.axis
shape-rendering: crispEdges
&.x
line
stroke: #3D9E68
text
font-weight: bold
fill: #FFF
path
display: none
&.y
line, path
fill: none
stroke: #000
#progress
padding: 20px
@ -79,64 +154,4 @@ h2
&.opened
float: right
color: $opened
#graph
background: #FFF
height: 200px
position: relative
#tooltip
position: absolute
top: 0
left: 0
svg
path
&.line
fill: none
stroke: $grey
stroke-width: 1px
clip-path: url(#clip)
&.actual
stroke-width: 2px
stroke: $closed
&.ideal
stroke: $ideal
&.area
clip-path: url(#clip)
fill: lighten($grey, 90%)
line
&.today
stroke: $grey
stroke-width: 2px
stroke-dasharray: 5,5
circle
fill: $closed
stroke: transparent
stroke-width: 20px
cursor: pointer
.axis
shape-rendering: crispEdges
&.x
line
stroke: #EBEBE9
text
font-weight: bold
fill: $grey
path
display: none
&.y
line, path
fill: none
stroke: #000
color: $opened

21
src/styles/fonts.css Normal file
View File

@ -0,0 +1,21 @@
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro'), local('SourceSansPro-Regular'),
url('/fonts/SourceSansPro-Regular.woff') format('woff');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'),
url('/fonts/SourceSansPro-Semibold.woff') format('woff');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
url('/fonts/SourceSansPro-Bold.woff') format('woff');
}

1
src/templates/graph.eco
View File

@ -1,4 +1,5 @@
<div class="box">
<h1><%- @name %></h2>
<div id="graph">
<div id="tooltip"></div>
</div>