Database Reference
In-Depth Information
combined organizational elements such as grouping (
<g>
) elements to
construct an image. SVG also has its own set of
<text>
elements, though
they do not typically have the level of control in layout as those offered by
HTML.
Using these elements, the gauge visualization from the previous section
can be constructed statically in the
mixin
found in the
jade
files in
dashboard/views
:
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")
svg(data-counter-gauge="#{id}")
path(class="back")
path(class="front")
div(class="value-wrap")
h1(data-counter="#{id}")= "--"
h4
span.glyphicon(data-direction="#{id}")
span(data-change="#{id}")= ""
if footer
div.panel-footer= footer
The path elements inside of the
<svg>
element are then styled in CSS to
produce the desired effect:
path.back {
fill: none;
stroke: #ccc;
stroke-width: 25px;
}
path.front {
fill: none;
stroke: #ccc;
stroke-width: 25px;
}
