Delivering Streaming Metrics - Real-Time Analytics - page 318

implemented in the various. .jade view files found in dashboard/views
such as dashboard/views/canvas_ex1.jade :
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")
div(class="canvas-wrap")
canvas(data-canvas-gauge="#{id}")
div(class="value-wrap")
h1(data-counter="#{id}")= "--"
h4
span.glyphicon(data-direction="#{id}")
span(data-change="#{id}")= ""
if footer
div.panel-footer= footer
Without styling, the elements would be arranged one after another, so the
next step is to stack the elements on top of each other and set the
appropriate z-index, which makes the elements render in the correct order.
This is added to dashboard/public/stylesheets/dashboard.css :
.metric div.canvas-wrap {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.metric div.canvas-wrap canvas {
width: 100%;
height: 100%;
}
.metric div.value-wrap {
position: relative;
width: 100%;
z-index: 2;
}