Database Reference
In-Depth Information
first task is tobuild metric panels. Bootstrap already has styling and markup
for building simple panels. The following HTML fragment serves as a good
starting point for building new panels:
<div id="first-metric" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Header</h3>
</div>
<div class="panel-body">
<!-- Body Goes Here -->
</div>
<div class="panel-footer">My First Metric</div>
</div>
This markup serves as a template for a
mixin
to the Jade template
language. Using the
mixin
feature makes it easy to quickly create a layout
for a number of metrics. The
mixin
defines all of the basic data fields for a
metric, making it easy to bind data to them on the back end. The template
language also allows for conditional statements, so the title and footer can
be optional elements of the panel:
mixin metric(id,title,footer)
div(class="panel panel-default",id="#{id}-metric" )
if title
div.panel-heading: h3.panel-title= title
div(class="panel-body metric")
h1(data-counter="#{id}")= "--"
h3
span.glyphicon(data-direction="#{id}")
span(data-change="#{id}")= ""
if footer
div.panel-footer= footer
This
mixin
is then added to the usual Bootstrap layout to build a simple
dashboard with a number of different metrics in the
index.jade
view,
located in the
views
director:
block styles
link(rel='stylesheet',href='/stylesheets/
