Copy page

Panels

Panels

A panel is a single visualization on a dashboard. It fetches data from a data source, runs that data through a transformation pipeline, and renders the result as a chart, table, or raw JSON.

Every panel answers three questions:

1. Where does the data come from? — the data source, endpoint, and query.
2. How should it be reshaped? — the transformations applied to it.
3. How should it look? — the chart type and visualization options.

---

Chart types

Pick a chart type in the panel editor under "Visualization".

Type	Code	Best for
Line	LINE	Time-series trends — one line per metric.
Bar	BAR	Comparing values across categories.
Area	AREA	Cumulative or stacked trends over time.
Pie	PIE	Share of a whole across a few categories.
Table	TABLE	Row-and-column data, many fields at once.
JSON	JSON	Inspecting the raw transformed output.

---

Choosing data

The "Query" tab configures where a panel gets its data.

• "Data Source" — pick a configured data source.
• "Endpoint" — the path appended to the data source's base URL (e.g. /api/v1/metrics).
• "Method" — the HTTP method: GET (default), POST, PUT, PATCH, or DELETE.
• "Query Parameters" — key/value pairs appended to the URL as ?key=value.
• "Headers" — extra request headers sent with this panel's request only.

Binding to the dashboard time range

In the "Query" tab you can map the dashboard's global time range onto your endpoint:

• Choose start and end parameter names (default startDate / endDate).
• Choose a date format — ISO (yyyy-MM-dd'T'HH:mm:ss), date-only (yyyy-MM-dd), dd/MM/yyyy, MM/dd/yyyy, Unix seconds (t), or Unix milliseconds (T).

When bound, changing the dashboard time range automatically updates the request.

---

Plotting axes

Set which columns map to the chart axes under "Axes":

• "X Axis Field" — the column for the horizontal axis (e.g. timestamp).
• "Y Axis Field" — the column(s) for the vertical axis. Comma-separate to plot several series at once, e.g. pm10,pm2.5.
• "Y Min" / "Y Max" — fix the vertical scale. Leave blank to auto-scale.

---

Display options

Found under "Display":

Option	Effect
"Show Legend"	Show or hide the series legend.
"Show Grid"	Show or hide background grid lines.
"Unit"	A label appended to values, e.g. kWh, °C, %.
"Decimals"	Number of decimal places to display.
"Thresholds"	Value/colour pairs that tint the chart when readings cross a limit.
"Color Palette"	The colour scheme for series — choose a preset (Default, Warm, Cool, Pastel, Earth, Neon, Ocean, Forest, Sunset, Monochrome) or set colours per field.

---

Configuration shape

A panel is stored as:

Code
{
  "title": "Energy Consumption",
  "description": "Hourly kWh per device",
  "chartType": "LINE",
  "dataSource": "<data-source-id>",
  "endpoint": "/api/v1/energy",
  "httpMethod": "GET",
  "headers": { "X-Tenant": "acme" },
  "xAxisField": "timestamp",
  "yAxisField": "kwh",
  "colorPalette": ["#3b82f6", "#ef4444", "#22c55e"],
  "options": {
    "showLegend": true,
    "showGrid": true,
    "unit": "kWh",
    "decimals": 2,
    "yMin": 0,
    "yMax": 100,
    "thresholds": [
      { "value": 80, "color": "#ef4444", "label": "High" }
    ]
  }
}

Field	Type	Notes
title	string	Required.
description	string	Optional subtitle.
chartType	enum	One of LINE, BAR, PIE, AREA, TABLE, JSON.
dataSource	string	ID of the data source. Required.
endpoint	string	Path appended to the data source URL.
httpMethod	enum	GET (default), POST, PUT, PATCH, DELETE.
headers	object	Per-panel request headers.
xAxisField / yAxisField	string	Columns to plot. yAxisField accepts a comma-separated list.
colorPalette	string[]	Hex colours for series.
options	object	Visualization options (see table above).

Transformations attached to a panel run as an ordered pipeline — see Data Transformations.

---

Tip: use the JSON chart type while building a panel to see exactly what your transformation pipeline outputs before switching to a chart.