Dashboard

Overview

A dashboard is a view that displays a varied set of relevant data values.

• Dashboards can display analytical data that allow users to quickly see and understand trends, helping them make better decisions.
• Dashboards can also act as a digital “command center”, displaying current values for various key performance indicators that are monitored by users, helping them keep a system running smoothly.

Dashboard Data

Dashboards display data values in the following ways:

• Key performance indicator (KPI) values: Each KPI shows the current value for a single metric that the user needs to monitor. These typically display as a large numeric value.
• Trend data: This is text that often accompanies a KPI value, indicating whether the value is trending up or trending down.
• Charts: Charts display multi-dimensional data graphically. Typical dashboard charts include column/bar charts, line charts, pie and doughnut charts, sparklines, bubble charts, scatter charts, etc.
• Tabular data: Tables display two-dimensional data in rows and columns, optionally providing column sort capability.

Dashboard Layout

Each group of data in the dashboard – whether a single value like a KPI or more complex data like a table – is contained within its own display block. The display block title identifies the data in the display block. This helps to visually partition the data values, allowing the user to grasp the data more quickly and easily.

On average, display blocks in dashboard views tend to be smaller than in other views, since they contain relatively small chunks of data. This means you‘ll typically fit more display blocks on the screen in dashboard views than in other types of views.

Ideally, dashboard display blocks should line up in rows and columns. Some display blocks may span multiple rows, others may span multiple columns.

In some cases, a dashboard displays the same set of data to all users. In this case you have the option to hard code a pleasing responsive row/column layout for the display blocks, perhaps even using fixed layout.

In many cases though, a dashboard shows different data to different users. Maybe this is based on user role, maybe it’s configurable by the user. A strict row/column layout may be difficult to plan in advance with this kind of variable data scenario; fixed layout is out of the question due to the variability. In this scenario, try to adopt a strong column formation, where the display blocks line up in columns but don’t necessarily line up in rows.

Filtering the Data

Dashboard display blocks often provide components that allow the user to filter that section of data. These filter components typically take the form of a dropdown button or a button group, displayed in the display block toolbar.

These filters start with a default value. The user can change the filter value(s) to look at the data differently. Changes to data filters typically take place immediately, without the need for pressing a separate button.

Data Freshness

A dashboard must display current data values in order to help user make the best decisions.

Dashboards should show the date and time that the data was last refreshed.

If your dashboard retrieves the data for all display blocks at the same time, display the last refresh date/time in the function toolbar. It can be helpful to include a refresh button to the right of the last refresh date/time text; pressing the button refreshes all data in the dashboard view.

If your dashboard retrieves the data for each display block separately, display the last refresh date/time in the bottom-left corner of the display block. If the data supports real-time refreshes, display a Refresh button in the display block toolbar, to the left of any data filters.

If the data supports real-time refreshes, you may want to consider automatically refreshing the data every so often without requiring the user to press a Refresh button or reload the page. If your dashboard does this, be sure to update the last refresh date/time to reflect the latest data refresh.

Providing More Info

Dashboard data is typically simple enough to understand at a glance. However, the source of some dashboard data may not be apparent to users.

In these cases, it can be helpful to include a “more info” icon that displays a tooltip with information on how this data was calculated when the user hovers or clicks the icon. When present, this icon should display at the bottom-right of the display block.

Development

Web component development

Component reference

rui-dashboard-info

Implementation

A dashboard is not an individual component itself, but rather a collection of display block components organized either in a responsive layout or a fixed layout.

These rui-display-block components can include the four types of elements we see in Responsive UI dashboards:

• KPI (key performance indicator) values
• Trend values: up/down
• Charts
• Data grids: responsive tables or grids

Each display block can also optionally contain an instance of the rui-dashboard-info component to display the data “freshness” date/time and/or a “more info” tooltip icon.

Display block layout

Let’s first create a new view with a collection of rui-display-block components.

<rui-function-view titleText="Dashboard">

    <div class="row">

        <div class="col-xs-12 col-lg-6">

            <div class="row">

                <div class="col-xs-12 col-sm-6">
                    <rui-display-block titleText="Loans"></rui-display-block>
                </div>

                <div class="col-xs-12 col-sm-6">
                    <rui-display-block titleText="Revenue"></rui-display-block>
                </div>

            </div>

            <div class="row">

                <div class="col-sm-12">
                    <rui-display-block titleText="Sector Growth by {{selectedGrowthRange}}"></rui-display-block>
                </div>

            </div>

        </div>

        <div class="col-xs-12 col-lg-6">
            <rui-display-block titleText="Ticklers"></rui-display-block>
        </div>

    </div>

</rui-function-view>

KPIs and Trend Text

Now let’s add some KPI (key performance indicator) text to the first two rui-display-blocks. We display the KPI text in a div with the rui-dashboard-kpi-text CSS class added.

Next, let’s add some trend text. We add the rui-dashboard-trend-text CSS class to all trend text. We add the rui-dashboard-trend-up-text CSS class to any text that indicates upward trending (green) and the and rui-dashboard-trend-down-text CSS class to any text that indicates downward trending (red).

All values shown here are hard coded. In a production application, you would bind these to backing values in your TypeScript, then use [ngClass] to set either the trend up or trend down CSS class based on the actual values.

<div class="row">

    <div class="col-xs-12 col-sm-6">
        <rui-display-block titleText="Loans">

            <div class="rui-dashboard-kpi-text">1,487</div>

            <div class="rui-dashboard-trend-text">
                <span class="rui-dashboard-trend-up-text">+2.3%</span> since Jan 1 2020
            </div>

        </rui-display-block>
    </div>

    <div class="col-xs-12 col-sm-6">
        <rui-display-block titleText="Revenue">

            <div class="rui-dashboard-kpi-text">$2,058M</div>

            <div class="rui-dashboard-trend-text"><span class="rui-dashboard-trend-down-text">-0.582%</span></div>

        </rui-display-block>
    </div>

</div>

Charts

Let’s add a chart to the third rui-display-block. See Charts for more details on developing charts.

<rui-display-block titleText="Growth by Sector">

    <div class="chart-container-outer">
        <div class="chart-container-inner">
            <canvas id="growthChart"></canvas>
        </div>
    </div>

</rui-display-block>

Tables

Let’s add a responsive table to the final rui-display-block. See Data Grid for more details on developing a responsive table.

<rui-display-block titleText="Ticklers" [isBusy]="loading">

    <table class="rui-responsive-table rui-table-minimal">
        <thead>
            <tr>
                <th>
                    <rui-sort-button text="Needed" [showArrow]="sortColumn == 'TranDate'"
                        arrowDirection="{{ sortDirection == -1 ? 'Down' : 'Up'}}"
                        (rui-click)="sortHistory('TranDate')">
                    </rui-sort-button>
                </th>
                <th>
                    <rui-sort-button text="Client Name" [showArrow]="sortColumn == 'Payee'"
                        arrowDirection="{{ sortDirection == -1 ? 'Down' : 'Up'}}"
                        (rui-click)="sortHistory('Payee')">
                    </rui-sort-button>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let tickler of sortedTicklerList">
                <td data-title="Needed">{{ tickler.TranDate | jhaDate }}</td>
                <td data-title="Client Name">{{ tickler.Payee }}</td>
            </tr>
        </tbody>
    </table>

</rui-display-block>

Data filters

Let’s add some data filters to the display block toolbars to allow our users to quickly change the data parameters. We add a dropdown button to the “Loans” display block and a button group to the “Sector Growth” display block.

<rui-display-block titleText="Loans">

    <rui-toolbar slot="display-block-toolbar-right">
        <rui-dropdown-button text="Last 30 Days">
            <rui-button-menu-option text="Last 60 Days"></rui-button-menu-option>
            <rui-button-menu-option text="Last 90 Days"></rui-button-menu-option>
            <rui-button-menu-option text="Last 12 Months"></rui-button-menu-option>
        </rui-dropdown-button>
    </rui-toolbar>

    <div class="rui-dashboard-kpi-text">1,487</div>
    <div class="rui-dashboard-trend-text"><span class="rui-dashboard-trend-up-text">+2.3%</span> since Jan 1 2020</div>

</rui-display-block>

...

<rui-display-block titleText="Sector Growth by {{selectedGrowthRange}}">

    <rui-toolbar slot="display-block-toolbar-right">
        <rui-button iconType="refresh"></rui-button>
        <rui-button-group [value]="selectedGrowthRange" (rui-button-group-value-change)="selectedGrowthRange = $event.detail">
            <rui-button-group-option value="Month">Month</rui-button-group-option>
            <rui-button-group-option value="Quarter">Quarter</rui-button-group-option>
            <rui-button-group-option value="Year">Year</rui-button-group-option>
        </rui-button-group>
    </rui-toolbar>

    <div class="chart-container-outer">
        <div class="chart-container-inner">
            <canvas id="growthChart"></canvas>
        </div>
    </div>

</rui-display-block>

Freshness data and ‘More Info’ tooltip

Finally, let’s add a rui-dashboard-info component to one of the display blocks in order to show the data “freshness” date/time using the dataFreshnessText property and a ‘more info’ icon with additional information on hover/click using the moreInfoText property.

<rui-display-block titleText="Revenue">

    <div class="rui-dashboard-kpi-text">$2,058M</div>
    <div class="rui-dashboard-trend-text"><span class="rui-dashboard-trend-down-text">-0.582%</span></div>

    <rui-dashboard-info
        dataFreshnessText="Last updated 6/8/2020 10:00AM"
        moreInfoText="This tooltip provides more information on how this dashboard element's values were calculated">
    </rui-dashboard-info>

</rui-display-block>

Angular wrapper development

Wrapper reference

jha-dashboard-info

Implementation

A dashboard is not an individual component itself, but rather a collection of display block components organized either in a responsive layout or a fixed layout.

These jha-display-block components can include the four types of elements we see in Responsive UI dashboards:

• KPI (key performance indicator) values
• Trend values: up/down
• Charts
• Data grids: responsive tables or grids

Each display block can also optionally contain an instance of the jha-dashboard-info component to display the data “freshness” date/time and/or a “more info” tooltip icon.

Display block layout

Let’s first create a new view with a collection of jha-display-block components.

<jha-function-view jhaTitle="Dashboard">

    <div class="row jha-tight-gutters">

        <div class="col-xs-12 col-lg-6">

            <div class="row">

                <div class="col-xs-12 col-sm-6">
                    <jha-display-block jhaTitle="Loans"></jha-display-block>
                </div>

                <div class="col-xs-12 col-sm-6">
                    <jha-display-block jhaTitle="Revenue"></jha-display-block>
                </div>

            </div>

            <div class="row">

                <div class="col-sm-12">
                    <jha-display-block jhaTitle="Growth by Sector"></jha-display-block>
                </div>

            </div>

        </div>

        <div class="col-xs-12 col-lg-6">
            <jha-display-block jhaTitle="Ticklers"></jha-display-block>
        </div>

    </div>

</jha-function-view>

KPIs and Trend Text

Now let’s add some KPI (key performance indicator) text to the first two jha-display-blocks. We display the KPI text in a div with the jha-dashboard-kpi-text CSS class added.

Next, let’s add some trend text. We add the jha-dashboard-trend-text CSS class to all trend text. We add the jha-dashboard-trend-up-text CSS class to any text that indicates upward trending (green) and the and jha-dashboard-trend-down-text CSS class to any text that indicates downward trending (red).

All values shown here are hard coded. In a production application, you would bind these to backing values in your TypeScript, then use [ngClass] to set either the trend up or trend down CSS class based on the actual values.

<div class="row">

    <div class="col-xs-12 col-sm-6">
        <jha-display-block jhaTitle="Loans">

            <div class="jha-dashboard-kpi-text">1,487</div>

            <div class="jha-dashboard-trend-text">
                <span class="jha-dashboard-trend-up-text">+2.3%</span> since Jan 1 2020
            </div>

        </jha-display-block>
    </div>

    <div class="col-xs-12 col-sm-6">
        <jha-display-block jhaTitle="Revenue">

            <div class="jha-dashboard-kpi-text">$2,058M</div>

            <div class="jha-dashboard-trend-text"><span class="jha-dashboard-trend-down-text">-0.582%</span></div>

        </jha-display-block>
    </div>

</div>

Charts

Let’s add a chart to the third jha-display-block. See Charts for more details on developing charts.

<jha-display-block jhaTitle="Growth by Sector">

    <div id="canvasWrapper"><canvas id="growthSector"></canvas></div>

</jha-display-block>

Tables

Let’s add a responsive table to the final jha-display-block. See Data Grid for more details on developing a responsive table.

<jha-display-block jhaTitle="Ticklers" [jhaIsBusy]="loading">

    <table class="table jha-table-minimal jha-responsive-table">
        <thead>
            <tr>
                <th>
                    <jha-sort-button jhaText="Needed" [jhaShowArrow]="sortColumn == 'TranDate'"
                     jhaArrowDirection="{{ sortDirection == -1 ? 'Down' : 'Up'}}" (click)="sortHistory('TranDate')">
                    </jha-sort-button>
                </th>
                <th>
                    <jha-sort-button jhaText="Client Name" [jhaShowArrow]="sortColumn == 'Payee'"
                     jhaArrowDirection="{{ sortDirection == -1 ? 'Down' : 'Up'}}" (click)="sortHistory('Payee')">
                    </jha-sort-button>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let tickler of sortedTicklerList">
                <td data-title="Needed">{{ tickler.TranDate | jhaDate }}</td>
                <td data-title="Client Name">{{ tickler.Payee }}</td>
            </tr>
        </tbody>
    </table>

</jha-display-block>

Data filters

Let’s add some data filters to the display block toolbars to allow our users to quickly change the data parameters. We add a dropdown button to the “Loans” display block and a button group to the “Sector Growth” display block.

<jha-display-block jhaTitle="Loans">

    <jha-display-block-toolbar-right>
        <jha-dropdown-button jhaText="Last 30 Days">
            <jha-button-menu-option jhaText="Last 60 Days"></jha-button-menu-option>
            <jha-button-menu-option jhaText="Last 90 Days"></jha-button-menu-option>
            <jha-button-menu-option jhaText="Last 12 Months"></jha-button-menu-option>
        </jha-dropdown-button>
    </jha-display-block-toolbar-right>

    <div class="jha-dashboard-kpi-text">1,487</div>
    <div class="jha-dashboard-trend-text"><span class="jha-dashboard-trend-up-text">+2.3%</span> since Jan 1 2020</div>

</jha-display-block>

...

<jha-display-block jhaTitle="Growth by Sector">

    <jha-display-block-toolbar-right>
        <jha-button-group [(jhaValue)]="selectedGrowthRange" [jhaOptions]="growthRange"></jha-button-group>
    </jha-display-block-toolbar-right>

    <div id="canvasWrapper"><canvas id="growthSector"></canvas></div>

</jha-display-block>

Freshness data and ‘More Info’ tooltip

Finally, let’s add a jha-dashboard-info component to one of the display blocks in order to show the data “freshness” date/time using the jhaDataFreshnessText property and a ‘more info’ icon with additional information on hover/click using the jhaMoreInfoText property.

<jha-display-block jhaTitle="Revenue">

    <div class="jha-dashboard-kpi-text">$2,058M</div>
    <div class="jha-dashboard-trend-text"><span class="jha-dashboard-trend-down-text">-0.582%</span></div>

    <jha-dashboard-info
     jhaMoreInfoText="This tooltip provides more information on how this dashboard element's values were calculated">
    </jha-dashboard-info>

</jha-display-block>

Component playground

Design

Figma design

Within each display block in your dashboard, you’ll display key performance indicator data, charts, and/or grid data. It helps to let the user know when each section of data was last refreshed so they understand how fresh the dashboard data is.

Here are special considerations when designing dashboards:

• KPI Text: Add text, then apply the “rui/dashboard-kpi” text style and the “rui-pacific/text-regular” color style.
• Trend Up Text: Add text, then apply the “rui/dashboard-trend” text style and the “rui-pacific/notification-success-accent” color style.
• Trend Down Text: Add text, then apply the “rui/dashboard-trend” text style and the “rui-pacific/text-error” color style.
• Trend Text (neither up nor down): Add text, then apply the “rui/dashboard-trend” text style and the “rui-pacific/text-regular” color style.
• Data Freshness Text in display block: Add text, then apply the “rui/regular” text style and the “rui-pacific/text-help” color style.
• Data Freshness Text in function toolbar: Add text, then apply the “rui/toolbar” text style and the “rui-pacific/function-title” color style.

Adobe XD design

Display a KPI using KPI text.

Display trend up data with Trend Up text and trend down data with Trend Down text. Display trend data that’s neither up nor down with Trend text.

Display the last refresh date/time within display blocks using Data Freshness Text.

Display the last refresh date/time within the function toolbar using Function toolbar text.