Dashboard

Dashboard

Dashboards are layouts for presenting high-level information and guiding users to related actions and details.

Dashboards are composed by a set of cards which might include text, lists of records, images, graphics widgets and data visualizations.

They should allow users to understand key information as well as the overall situation in an intuitive way.

Fixed layout

Start by adding a .row or a .card-group wrapping .col-**-** containers. Cards are placed inside these containers ensuring the right alignment and spacing.

If you want to keep all cards balanced on each row, use a .card-group.

Administration home



<div class="card-group">
  <div class="col-md-5 col-xs-12">
    <div class="card">[…]</div>
  </div>
  <div class="col-md-7 col-xs-12">
    <div class="card">[…]</div>
  </div>
</div>
<div class="card-group">
  <div class="col-md-4 col-xs-12">
    <div class="card">[…]</div>
  </div>
  <div class="col-md-4 col-xs-12">
    <div class="card">[…]</div>
  </div>
  <div class="col-md-4 col-xs-12">
    <div class="card">[…]</div>
  </div>
</div>

Service Monitoring



<div class="card-group">
  <div class="col-md-4 col-xs-12">
    <div class="card">[…]</div>
  </div>
  <div class="col-md-4 col-xs-12">
    <div class="card">[…]</div>
  </div>
  <div class="col-md-4 col-xs-12">
    <div class="card">[…]</div>
  </div>
</div>
<div class="card-group">
  <div class="col-xs-12">
    <div class="card">[…]</div>
  </div>
</div>

Device configuration



<div class="row">
  <div class="col-md-12">
    <div class="card">[…]</div>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
    <div class="card">[…]</div>
  </div>
  <div class="col-md-6">
    <div class="card">[…]</div>
  </div>
</div>

Gridstack dashboards

This type of dashboards always uses a c8y-ui-action-bar component.

The cards take the class .card-dashboard and are resizable and draggable in the UI using the c8y-gridstack-dashboard directive.

Cockpit welcome


Group dashboard


Device info


<c8y-dashboard-gridstack
set-page-title="true"
name="{{dashboardName}}"
default-children="children"
is-frozen="true"
class="welcome"
>
</c8y-dashboard-gridstack>