Revenue Dashboard

Watch it in Grid

See this model in motion.

Watch the model respond in the product, then inspect the exact source and checkpoints on this page.

What this model gives you

A compact Layout dashboard bound to a five-month forecast, average, and explanatory note.

10 min to study · Source reviewed 2026-08-25

Continue with guided practice

What to notice

Semantic KPI bindings
Layout grid coordinates
Static metric and note tiles

Requirements

Layout surface
No connector
No network

Expected checkpoint

A known state for this walkthrough.

After loading five authored monthly values and the 186,000 pipeline.

Actual revenue: 715,000SUM(MonthlyRevenue#)
Forecast: 901,000Forecast
Average month: 143,000AverageMonth
Tiles: 2 metrics + 1 noteDashboard

01 · Calculate

KPIs belong to the model

Forecast and average are named formulas independent of any presentation surface.

02 · Arrange

Layout positions references rather than formulas

Metric tiles bind to the named KPIs and the note explains their scope.

03 · Update

The tiles follow the dependency graph

A monthly edit recalculates the formulas first; Layout renders the new values.

12-surface-revenue-dashboard.grid

Get Grid

MODEL "Revenue Dashboard"
DESCRIPTION "Summarize a forecast in dashboard tiles."
VERSION "1.0.0"
AUTHOR "AI Agent"
TAGS "surface-template", "dashboard", "layout", "surfaces"

MonthlyRevenue = [120000, 135000, 142000, 150000, 168000]
Pipeline = 186000
Forecast IS currency = SUM(MonthlyRevenue#) + Pipeline
AverageMonth IS currency = AVERAGE(MonthlyRevenue#)

Dashboard!type = "layout"
Dashboard!config = """
version = 1
kind = "layout"
title = "Dashboard"

[layout]
cols = 12
rows = 6
show_controls = true

[[tiles.static]]
title = "Forecast"
x = 0
y = 0
w = 4
h = 2
formula = "=Forecast"

[[tiles.static]]
title = "Average Month"
x = 4
y = 0
w = 4
h = 2
formula = "=AverageMonth"

[[tiles.static]]
title = "Notes"
x = 0
y = 2
w = 12
h = 4
body = "Forecast includes five months of actuals plus open pipeline."
"""
Dashboard!data = ""

END MODEL