Dashboard Designer

Build dashboards with a drag-and-drop grid of charts, KPI cards, tables, and text blocks — backed by your live architecture inventory.

Dashboard Designer

The Dashboard Designer is a drag-and-drop builder for analytics dashboards. Pick components from a library, drop them onto a 12-column grid, point each one at a slice of your inventory, and save the result as a reusable template that anyone with project access can run.

Opening the designer

From Dashboards in the sidebar, click + New dashboard to open the designer in edit mode. To edit an existing template, open it from the dashboards list and click Edit.

The designer has three panels:

  • Component Library (left) — the catalog of components, grouped by category.
  • Canvas (center) — a 12-column grid where components live. Row height is 60 pixels.
  • Config Panel (right) — settings for the currently-selected component.

You can collapse the library and the config panel independently. The canvas takes the remaining width.

Components

The library ships these components, grouped by category:

Metrics

  • Single Value — a one-number KPI card (e.g. “Total Applications: 142”).

Charts

  • Bar Chart (vertical and horizontal variants)
  • Pie Chart
  • Donut Chart
  • Status Distribution — a specialized stacked bar showing how a population splits across status values.
  • Top N List — ranked list of the highest (or lowest) N items by a metric.
  • Bubble Chart
  • Heatmap — two-axis density grid (configurable row type vs. column type).
  • Sunburst — hierarchical breakdown with configurable max depth.
  • Radar Chart
  • Scatter Plot

Tables

  • Data Table — row-per-object listing with selectable columns.
  • Pivot Table

Layout

  • Text Block — markdown-formatted notes inline with the data.
  • Report Header — title, subtitle, and date band for the top of a dashboard.

Each component has sensible defaults for size and starting query. Resize by dragging the bottom-right corner; reposition by dragging the component’s header. The grid snaps to columns and 60-pixel rows.

Configuring a component

Click any placed component to open the config panel on the right. Most data components share these settings via the data config:

  • Data Source / Object Type — the inventory type to query (Application, Capability, Technology, etc., or __all__).
  • Filters — field op value rules. Operators: eq, neq, gt, gte, lt, lte, contains, in.
  • Group By — the field to bucket results by.
  • Aggregation — count, sum, avg, min, max. (sum/avg/min/max need a numeric field via Value Field.)
  • Mode — aggregate (group-by results) or list (raw rows).
  • Columns — for table modes, which fields to render.
  • Sort — sort field and direction (asc / desc).
  • Limit — max rows returned.

The display config covers cosmetics:

  • Title — the heading shown on the component.
  • Color Scheme
  • Show Legend / Show Labels — boolean toggles for chart components.
  • Orientation — vertical / horizontal for bar charts.

Specialized components add their own fields. For example, the Heatmap exposes Row Type and Column Type (different object types for each axis); the Sunburst exposes Max Depth. The available fields are driven by a per-component config schema (COMPONENT_CONFIGS) and can include a type-picker, select, number, boolean, text, or object-search input.

Numeric and categorical extension fields you’ve defined on objects also appear in the X-axis / Y-axis / Group-By dropdowns automatically.

Two modes: Edit vs View

Toggle between Edit (drag, resize, configure) and View (interact with data, no layout changes) via the mode pill in the header. View mode is what everyone else sees when they open your saved dashboard. The library and config panel hide automatically in View mode so the canvas can use the full width.

Saving as a template

  1. Click the dashboard name at the top of the canvas to rename it.
  2. Click Save to capture a new template, or Save on an existing template to update it.
  3. The dashboard now appears in the Dashboards list alongside built-in views like Capability Map, Application Landscape, and Technology Radar.
  4. Optionally mark Default to make this dashboard the landing page for everyone in the project.

Templates are project-scoped — each project has its own catalog. To copy a template between projects, use Import/Export.

Permissions

Creating, editing, and deleting dashboards requires the Editor or Admin role on the project. Viewers are redirected away from the designer route and can only run already-saved dashboards.

Built-in dashboards

The dashboards list mixes your custom templates with built-in views that ship out of the box:

  • Capability Map
  • Application Landscape
  • Technology Radar
  • Object Distribution
  • Governance Health
  • Financial Summary
  • Custom Query

These are not editable in the designer — they’re handled by dedicated routes under /dashboards/<slug> — but you can copy their query patterns into a custom dashboard if you want to extend them.