Dashboard: visualizing data

View the source code for this file.

This page shows the Dashboard view of the IoT Center. Each visual element represents a device.

It has a dropdown menu to select time range, as well as buttons to refresh the view and change settings. It can filter and display a time graph.

Getting started

The dashboard uses queries to the InfluxDB API to populate data.

We want descibe the essential data and functions of working with a time series database. We also need to import the libraries with this functionality built in for the InfluxDB API. Code like this is in each of the files.

InfluxDB client libraries

The InfluxDB client libraries provide language-specific ways to interact with the InfluxDB API. These can aid greatly in development. Sometimes, however, you might want to use a language’s own libraries to send raw HTTP requests (e.g. on an embedded or low-powered device).

Device configuration

We define an interface for device configurations. The elements of the interface correspong to the concepts described in Key concepts above.

interface DeviceConfig {
  influx_url: string
  influx_org: string
  influx_token: string
  influx_bucket: string
  id: string
}

(Source)

Imports

import PageContent, {Message} from './PageContent'
import {
  Plot,
  timeFormatter,
  Table as GiraffeTable,
  GAUGE_THEME_LIGHT,
  GaugeLayerConfig,
  LineLayerConfig,
} from '@influxdata/giraffe'
import {
  SettingFilled,
  ReloadOutlined,
  InfoCircleFilled,
} from '@ant-design/icons'
import CollapsePanel from 'antd/lib/collapse/CollapsePanel'
import {DeviceInfo} from './DevicesPage'
import {getXDomainFromTable} from '../util/tableUtils'
import {flux, fluxDuration, InfluxDB} from '@influxdata/influxdb-client'
import {queryTable} from '../util/queryTable'
import {VIRTUAL_DEVICE} from '../App'

(Source)

Fetch Measurements

+ +

The fetchDeviceMeasurements function contains a Flux script to query InfluxDB. It uses Flux’s fieldsAsCols() function, and fluxDuration() imported from the InfluxDB JS library.

const fetchDeviceMeasurements = async (
  config: DeviceConfig,
  timeStart = '-30d'
): Promise<GiraffeTable> => {
  const {
    // influx_url: url, // use '/influx' proxy to avoid problem with InfluxDB v2 Beta (Docker)
    influx_token: token,
    influx_org: org,
    influx_bucket: bucket,
    id,
  } = config
  const queryApi = new InfluxDB({url: '/influx', token}).getQueryApi(org)
  const result = await queryTable(
    queryApi,
    flux`
  import "influxdata/influxdb/v1"
  from(bucket: ${bucket})
    |> range(start: ${fluxDuration(timeStart)})
    |> filter(fn: (r) => r._measurement == "environment")
    |> filter(fn: (r) => r.clientId == ${id})
    |> v1.fieldsAsCols()`
  )
  return result
}

(Source)