this
/**
- * Render the callout element.
- */
- renderCallout: ->
-
- this
-
- /**
* Render the chart and other Graph-derived view components.
*/
render: ->
catch err
console.error "GraphController.autoload(#id, #{typeof cb}) -->\nerr"
cb err
-
+
# GET /graphs.:format?
index: (req, res) ->
# if format is json, then return the graph JSON
.seq (graphs) -> res.send _.values graphs
default
res.render 'graph/index'
-
+
# GET /graphs/:graph
show: (req, res) ->
if req.format is 'json'
- var graph_id = view.id
section.graph-display.graph(id=graph_id)
- .graph-name-row.page-header.row-fluid
- h2.graph-name
- a(id="graph-title", href="#{model.toLink()}", data-bind='name') #{name}
+ .graph-name-row.row-fluid
.callout
.latest-metric(data-bind='callout.latest') #{callout.latest}
.metric-change.year-over-year
.metric-change.month-over-month
span.dates(data-bind='callout.month.dates') #{callout.month.dates}
span.value(data-bind='callout.month.value') #{callout.month.value}
+ h2.graph-name
+ a(id="graph-title", href="#{model.toLink()}", data-bind='name') #{name}
.graph-viewport-row.row-fluid
.viewport
*
position relative
+ .graph-name-row
+ clearfix()
+
/* * * * Chart & Viewport * * * {{{ */
.callout
- absolute top 0 right 1em
+ float right
z-index 100
width 200px
- padding 0 0 2em 4em
+ padding 0 1em 0 0
font 11px/1.5 "helvetica neue", helvetica, arial, sans-serif
- border-radius 5px
background-color white
text-align right
// line-height 24px
span
display inline-block
- width 100px
+ &.dates
+ width 140px
+ &.value
+ width 60px
.graph-legend
- absolute top 2em right 1em
+ absolute top 1em right 1em
z-index 100
width 200px
overflow hidden
.callout
- absolute top 0 right 1em
+ float right
z-index 100
width 200px
- padding 0 0 2em 4em
- font 12px/1.5 "helvetica neue", helvetica, arial, sans-serif
- border-radius 5px
+ padding 0 1em 0 0
+ font 11px/1.5 "helvetica neue", helvetica, arial, sans-serif
background-color white
text-align right
font-size 18px
line-height 36px
.metric-change
- // line-height 24px
span
display inline-block
width 100px
.graph-legend
- absolute top 2em right 1em
+ absolute top 1em right 1em
z-index 100
width 200px
/* * * * Graph Details & Info Pane * * * {{{ */
.graph-name-row
// Accommodate the callout box
- padding-right 272px
margin 0 0 1em
min-height 38px