PCCW Global

  1. Home
  2. Widgets

Widgets

Widgets are stand-alone components, suitable for report-oriented graphical elements like charts, graphs, maps or tables.

Widget component

All widget components must lie inside a container element with the widget-container class in order to expose all their features as intended. A widget component is formed by the following:

  • A widget header, that is consisted of the widget title and optionally export options and widget-specific settings.
  • An optional widget settings sidebar that may or may not consist of an optional action footer
  • An optional widget menu bar that consists of the chart display options and the chart time controls - on the right side of the chart time controls, an optional vertical progress bar may be used to indicate chart time intervals.
  • The widget body is the area where the data are represented in the form of a chart, a graph, a map, a table or a combination of either
  • An optional scrollable widget legend block that contains chart labels when necessary
  • An optional widget footer that holds any drill-in/out options

A fully-featured widget component is rendered in the example below.

Code output HTML markup

Chart customization

Widget title

Chart|Table
Chart / Graph
  • Sample label 1
  • Sample label 2
  • Sample label 3
  • Sample label 4
  • Sample label 5
Column header 1 Column header 2 Column header 3 Column header 4 Column header 5 Column header 6 Column header 7 Column header 8 Column header 9 Column header 10
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content 
Copy<div class="widget">
  <div class="widget-box">
    <div class="widget-sidebar">
      <div class="widget-sidebar-header">
        <button class="btn btn-icon btn-widget-sidebar-toggle" data-toggle="widget">&times;</button>
        <h3>Chart customization</h3>
      </div>
      <div class="widget-sidebar-body scroll-lock">
        <div class="pad-sm">
          <div class="form-col">
            <label>Sample label</label>
            <select class="form-control-sm">
              <option>Option 1</option>
              <option>...</option>
            </select>
          </div>
          <div class="form-col">
            <label>Sample label 2</label>
            <select class="form-control-sm">
              <option>Option 1</option>
              <option>...</option>
            </select>
          </div>
          <div class="form-col">
            <label>Sample label 3</label>
            <select class="form-control-sm">
              <option>Option 1</option>
              <option>...</option>
            </select>
          </div>
          <div class="form-col">
            <label>Sample label 4</label>
            <select class="form-control-sm">
              <option>Option 1</option>
              <option>...</option>
            </select>
          </div>
          <div class="form-col">
            <label>Sample label 5</label>
            <select class="form-control-sm">
              <option>Option 1</option>
              <option>...</option>
            </select>
          </div>
          <div class="form-col">
            <label>Sample label 6</label>
            <select class="form-control-sm">
              <option>Option 1</option>
              <option>...</option>
            </select>
          </div>
          <div class="form-col">
            <label>Sample label 7</label>
            <select class="form-control-sm">
              <option>Option 1</option>
              <option>...</option>
            </select>
          </div>
          <div class="form-col">
            <label>Sample label 8</label>
            <select class="form-control-sm">
              <option>Option 1</option>
              <option>...</option>
            </select>
          </div>
        </div>
      </div>
      <div class="widget-sidebar-footer">
        <button class="btn btn-sm btn-faded btn-widget-sidebar-toggle" data-toggle="toggle">Discard</button>
        <button class="btn btn-sm btn-main btn-widget-sidebar-toggle" data-toggle="toggle">Apply</button>
      </div>
    </div>
    <div class="widget-header">
      <button class="btn btn-icon btn-widget-sidebar-toggle" data-toggle="widget"><i class="sky-icon-menu"></i></button>
      <div class="dropdown">
        <button class="btn btn-icon btn-dropdown-toggle" data-toggle="dropdown"><i class="sky-icon-file"></i></button>
        <ul class="dropdown-menu dropdown-right">
          <li><a href=#>Export in XLS format</a></li>
          <li><a href=#>Export in CSV format</a></li>
        </ul>
      </div>
      <h3>Widget title</h3>
    </div>
    <div class="widget-menu-bar">
      <a class="btn btn-icon"><i class="sky-icon-pause"></i></a>
      <a class="btn btn-icon"><i class="sky-icon-play_arrow"></i></a>
      <a class="btn btn-icon"><i class="sky-icon-sync"></i></a>
      <div class="progress progress-thin">
        <div class="progress-bar" data-progress="20%"></div>
      </div>
      <div class="tab-buttons">
        <a class="btn btn-sm btn-faded active" data-href=".widget-chart">Chart</a>|<a class="btn btn-sm btn-faded" data-href=".widget-table">Table</a>
      </div>
    </div>
    <div class="widget-body">
      <div class="widget-chart tab active">
        <div class="sky-chart line-chart" style="position:relative;background:#00498f;">
          <div style="position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#fff;">Chart / Graph</div>
        </div>
        <div class="widget-legend">
          <div class="scroll-lock">
            <ul class="legend-list">
              <li><i class="color-square color-scale-1"></i> Sample label 1</li>
              <li><i class="color-square color-scale-2"></i> Sample label 2</li>
              <li><i class="color-square color-scale-3"></i> Sample label 3</li>
              <li><i class="color-square color-scale-4"></i> Sample label 4</li>
              <li><i class="color-square color-scale-5"></i> Sample label 5</li>
              <li><i class="color-square color-scale-6"></i> Sample label 6</li>
              <li><i class="color-square color-scale-7"></i> Sample label 7</li>
              <li><i class="color-square color-scale-8"></i> Sample label 8</li>
              <li><i class="color-square color-scale-9"></i> Sample label 9</li>
              <li><i class="color-square color-scale-10"></i> Sample label 10</li>
              <li><i class="color-square color-scale-1"></i> Sample label 11</li>
              <li><i class="color-square color-scale-2"></i> Sample label 12</li>
              <li><i class="color-square color-scale-3"></i> Sample label 13</li>
              <li><i class="color-square color-scale-4"></i> Sample label 14</li>
              <li><i class="color-square color-scale-5"></i> Sample label 15</li>
              <li><i class="color-square color-scale-6"></i> Sample label 16</li>
              <li><i class="color-square color-scale-7"></i> Sample label 17</li>
              <li><i class="color-square color-scale-8"></i> Sample label 18</li>
              <li><i class="color-square color-scale-9"></i> Sample label 19</li>
              <li><i class="color-square color-scale-10"></i> Sample label 20</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="widget-table tab">
        <div class="table-fixed-height">
          <div class="table-scrollable table-fixed-header scroll-lock">
            <table class="table">
              <thead>
                <tr>
                  <th>Column header 1</th>
                  <th>Column header 2</th>
                  <th>Column header 3</th>
                  <th>Column header 4</th>
                  <th>Column header 5</th>
                  <th>Column header 6</th>
                  <th>Column header 7</th>
                  <th>Column header 8</th>
                  <th>Column header 9</th>
                  <th>Column header 10</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                </tr>
                <tr>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                </tr>
                <tr>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                </tr>
                <tr>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                </tr>
                <tr>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                </tr>
                <tr>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                </tr>
                <tr>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                </tr>
                <tr>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                </tr>
                <tr>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                  <td>Table cell content</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="widget-footer">
      <a class="btn btn-icon btn-sm float-left" disabled><i class="sky-icon-back"></i></a>
      <div class="custom-select-wrapper">
        <select class="form-control-sm">
          <option>Drill-in option 1</option>
          <option>...</option>
        </select>
      </div>
    </div>
  </div>
</div>

Compact widget component

Applying a class widget-compact on the widget element transforms a widget to its compact form, which is essentially a smaller height widget, that is particularly useful for widgets that contain sparklines or any other similar charts focused on information trends rather than actual values. The use of compact widgets leads to more compact dashboards, able to fit more information on-screen.

Code output HTML markup

Widget title

Chart / Graph
Copy<div class="widget-container">
<!---->
<div class="widget widget-compact">
  <div class="widget-box">
    <div class="widget-header">
      <h3>Widget title</h3>
    </div>
    <div class="widget-body">
      <div class="widget-chart">
        <div class="sky-chart line-chart"></div>
      </div>
    </div>
  </div>
</div>
<!---->
</div>

Widget dashboards

Groups of widgets form dashboards.

Content page layout widget dashboards

In content page layouts widget dashboards are formed using the responsive grid. Widgets are contained inside a widget-row container and their width depends on the column grid classes that are applied directly on the widget.

HTML markup
<div class="widget-row">
 <div class="widget col-xs-12">
    <!-- WIDGET COMPONENT MARKUP -->
  </div>

  <div class="widget col-xs-12 col-sm-6 col-md-4">
    <!-- WIDGET COMPONENT MARKUP -->
  </div>

  <div class="widget col-xs-12 col-sm-6 col-md-4">
    <!-- WIDGET COMPONENT MARKUP -->
  </div>
</div> <!-- widget-row END -->

Application layout widget dashboards

In application layouts widgets are contained inside a widget-container and come in three different width variations; the normal widget, the widget-medium and the widget-large variation.

Widget dashboards in application layouts were designed having in mind that they could be dynamic and populated by casual users (aka not developers), so they had to be flexible and aesthetically pleasing at the same time.

In order to achieve this flexibility, it is essential for widgets to be ordered in transparent logical groups depending on their width - all widget-large widgets first, followed by widget-medium widgets, followed by normal width widgets.

HTML markup
<div class="widget-container">
 <div class="widget widget-large">
    <!-- WIDGET COMPONENT MARKUP -->
  </div>
  <div class="widget widget-large">
    <!-- WIDGET COMPONENT MARKUP -->
  </div>
  <div class="widget widget-large">
    <!-- WIDGET COMPONENT MARKUP -->
  </div>

  <div class="widget widget-medium">
    <!-- WIDGET COMPONENT MARKUP -->
  </div>
  <div class="widget widget-medium">
    <!-- WIDGET COMPONENT MARKUP -->
  </div>

  <div class="widget">
    <!-- WIDGET COMPONENT MARKUP -->
  </div>
  <div class="widget">
    <!-- WIDGET COMPONENT MARKUP -->
  </div>
  <div class="widget">
    <!-- WIDGET COMPONENT MARKUP -->
  </div>
</div> <!-- widget-container END -->

Consult the widget dashboard application layout sample for more details.

Depending on the screen resolution, it is possible for different width variation widgets to end up having the same width.

© 2024, PCCW Global