Skip to main content
A
Docs

Dashboards

Build executive dashboards with KPI cards, charts, and data tables on a grid canvas.

Overview

Dashboards in Insights are grid-based layouts of widgets -- KPI cards, charts, and data tables -- that provide at-a-glance visibility into key government metrics. Widgets are positioned on a 12-column grid and persist across sessions.

Creating a Dashboard

Create a dashboard by specifying a name, description, and an initial set of widgets. Each widget has a type, position (x, y), size (w, h), title, and a type-specific configuration.

curl -X POST http://localhost:8010/api/v1/dashboards \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Executive KPI Dashboard",
    "description": "Key performance indicators for government leadership",
    "widgets": [
      {
        "id": "w1",
        "type": "kpi",
        "title": "Total Budget (AED M)",
        "x": 0, "y": 0, "w": 3, "h": 2,
        "config": {"metric": "budget_aed_millions", "aggregation": "sum"}
      },
      {
        "id": "w2",
        "type": "chart",
        "title": "Satisfaction by Department",
        "x": 3, "y": 0, "w": 6, "h": 4,
        "config": {
          "chart_type": "bar",
          "x_axis": "department",
          "y_axis": "citizen_satisfaction_pct"
        }
      },
      {
        "id": "w3",
        "type": "table",
        "title": "Department Breakdown",
        "x": 0, "y": 2, "w": 3, "h": 4,
        "config": {
          "columns": ["department", "budget_aed_millions", "spending_pct"]
        }
      }
    ]
  }'

Widget Types

KPI Cards

KPI widgets display a single metric with an aggregation function. They are ideal for headline numbers like total budget, average satisfaction, or count of active services.

{
  "type": "kpi",
  "config": {
    "metric": "citizen_satisfaction_pct",
    "aggregation": "avg"
  }
}

Supported aggregations: sum, avg, min, max, count.

Charts

Chart widgets render data visualizations. Five chart types are available:

Chart TypeBest For
lineTime series and trend data
barCategorical comparisons
pieProportional distribution
areaCumulative trends
tableRaw tabular data
{
  "type": "chart",
  "config": {
    "chart_type": "bar",
    "x_axis": "department",
    "y_axis": "ai_adoption_pct"
  }
}

Data Tables

Table widgets display raw data in a sortable, filterable grid. Specify which columns to display and the table renders the latest data from the connected source.

Grid Layout

The dashboard uses a 12-column grid system. Widget positions and sizes are defined with:

PropertyDescription
xColumn offset (0-11)
yRow offset (0-based)
wWidth in grid columns (1-12)
hHeight in grid rows

Widgets can overlap, but the dashboard builder provides snap-to-grid behavior that prevents unintentional overlaps.

Dashboard Builder

The dashboard builder in the UI provides a visual drag-and-drop interface. The API accepts the same widget definitions for programmatic dashboard creation.

Updating Dashboards

Dashboards can be modified after creation. Add, remove, or reposition widgets by updating the dashboard with a new widget array. The dashboard ID is stable, so bookmarks and shared links continue to work after updates.

Real-Time Data

Widgets automatically reflect the latest data from their connected source. When a CSV is re-uploaded or an API source refreshes, all dashboards using that source update on the next page load.

Data SourcesReports