Project Dashboard

Real projects need a bird's-eye view — not just a single calculation card, but a dashboard. Use section for grouping, grid for multi-column layout, and each card to show one area of focus.

slex: "0.1",
  namespace: "example_dashboard",
  g: {
    sprint: 8, team: 6, sprintProgress: 72, bugs: 12, resolved: 9,
    scope: "on-track",
    bugRate: function () { return this.resolved / this.bugs * 100; },
    teamLoad: function () { return Math.min(100, this.sprint / this.team * 20); },
    scopeStatus: function () { return this.scope === "on-track" ? "On Track" : this.scope === "at-risk" ? "At Risk" : "Off Track"; }
  },
  layout: {
    "section:dashboard": {
      eyebrow: "Sprint Overview",
      title: "Project Dashboard · Sprint 24",
      subtitle: "Data as of today 10:00 AM. Drag sliders to see how different data affects the view.",
      "grid:row1": {
        columns: 1, mdColumns: 3,
        "card:sprint": {
          title: "Sprint Progress",
          "progress:sp": { label: "Completion", "$value": "g.sprintProgress" },
          "stat:scope": { "$label": "Scope Status", "$value": "g.scopeStatus()" },
          "badge:flag": { "$label": "g.scope === 'on-track' ? 'On Track' : g.scope === 'at-risk' ? '⚠ Warning' : '🚨 Off Track'", "$tone": "g.scope === 'on-track' ? 'success' : g.scope === 'at-risk' ? 'warning' : 'danger'" }
        },
        "card:quality": {
          title: "Quality Metrics",
          "stat:bugs": { label: "Open bugs", value: "3", unit: "" },
          "progress:bugFix": { label: "Fix rate", "$value": "g.bugRate()" },
          "badge:trend": { label: "Trend: Improving", tone: "success" }
        },
        "card:team": {
          title: "Team Health",
          "stat:members": { label: "Team members", value: "6", unit: "" },
          "progress:load": { label: "Load index", "$value": "g.teamLoad()" },
          "callout:note": { "$tone": "g.teamLoad() > 80 ? 'warning' : 'info'", "$text": "g.teamLoad() > 80 ? 'Load is high — consider redistributing tasks.' : 'Team load is within a healthy range.'" }
        }
      },
      "card:detail": {
        title: "Detailed Data",
        "table:tasks": {
          columns: ["Task", "Owner", "Status", "Duration"],
          rows: [["API Refactor", "Alice", "Done", "3d"], ["Frontend Components", "Bob", "In Progress", "2d"], ["Integration Tests", "Carol", "Code Review", "1.5d"], ["Performance Tuning", "Dave", "Pending", "—"]]
        },
        "callout:help": { "$tone": "g.bugRate() < 80 ? 'warning' : 'success'", "$text": "g.bugRate() < 80 ? 'Bug fix rate is below 80% — prioritize high-severity bugs.' : 'Bug fix rate looks good — project quality is under control.'" }
      }
    }
  }
}

Dashboard design principles:

This pattern works for: tech lead weekly reports, release QA dashboards, team OKR tracking, SRE service dashboards.