Dashboards

The Dashboard page shows a live display of all configured dashboards. A dashboard consists of a grid-based layout of a number of specified panels.

Viewing Dashboards

To view all Live Dashboards, select Dashboards from the left-hand navigation.

A dashboard will be shown that is updated in real-time. To select another dashboard, find the Dashboard Selector in the top left section of the page, and select it. A dropdown should appear, providing you with the ability to switch between dashboards.

Dashboard Format

A dashboard is a JavaScript program that defines a number of panels and a layout specification.

It is defined as a anonymous function that takes zero parameters, and returns a JS object as described below:

Return

Field	Description
panels	An object whose keys correspond to the identifier for the panel, and values are JS object (see Panel Types below). The JS object must specify a title (string), type (string), and data (varies).
layout	An array whose entries may either a string, specifying the identifier of a panel, or an object with the keys type, size, and entries. entries is recursive, meaning it can contain one of the two types just described.

When specifying size for a layout, a grid system of 12 units is used. For example, a size of 3 would mean it should take up 25% of the space allotted.

Panel Types

A few different panel types are available, and should be specified via the type field.

ObservationBarChartCard

Shows the latest numerical recorded observation for a specified topic and field.

Data Field	Description
topic	The topic of the observations to chart
field	The field of the observations to chart

ObservationCard

Shows the latest textual recorded observation for a specified topic and field.

Data Field	Description
topic	The topic of the observations to display
field	The field of the observations to display

ObservationTimeSeriesCard

Shows a history of recorded observations for a specified topic and field.

Data Field	Description
topic	The topic of the observations to chart
field	The field of the observations to chart
plotType	Optional. Declares how to render the chart. Valid values: “line”, “area”, “bar”
aggregate	Optional. A function that receives the topic and an array of observations, and returns an aggregated observation.

Example

The following defines a dashboard that contains two panels, placed in the same row in two equally sized columns:

function() {
  return {
    panels: {
      latestWaterHeightBar: {
        title: 'Latest Water Level',
        type: 'ObservationBarChartCard',
        data: {
          topic: 'waterstate-data-up-json',
          field: 'height',
          plotType: 'line'
        }
      },
      historicalWater: {
        title: 'Water Levels',
        type: 'ObservationTimeSeriesCard',
        data: {
          topic: 'waterstate-data-up-json',
          field: 'height',
          aggregate: function(topic, observations) {
            let maxHeight = 0;

            for (const o of observations) {
              if (typeof o.height === 'number' && o.height > maxHeight) {
                maxHeight = o.height;
              }
            }

            return {
              height: maxHeight
            };
          }
        }
      }
    },
    layout: [
      { type: "row", entries: [
        { type: "col", size: 6, entries: ["latestWaterHeightBar"] },
        { type: "col", size: 6, entries: ["historicalWater"] }
      ]}
    ]
  };
}

Creating a Dashboard

To create a dashboard, follow the steps below:

1. Select Settings from the left-hand navigation.
2. Select Dashboards from the section navigation.
3. Select New from the right-hand part of the page.
4. A form will now appear prompting for the name and dashboard program. Fill out the form, referring to the above program description as necessary.
5. Select Save. The dashboard should now appear in the listing.

Editing a Dashboard

To edit a dashboard, follow the steps below:

1. Select Settings from the left-hand navigation.
2. Select Dashboards from the section navigation.
3. Find the dashboard you wish to modify, and select its row. Alternatively, you can select the gear icon, followed by Edit.
4. Modify the form as required.
5. Select Save.

Removing a Dashboard

To remove a dashboard, follow the steps below:

1. Select Settings from the left-hand navigation.
2. Select Dashboards from the section navigation.
3. Find the dashboard you wish to modify, and select the gear icon, followed by Delete. The observation type should now be removed from the listing.