Add 'big number' cell type (Grafana Stat panel equivalent)

[madesroches-ubi]

Problem

Dashboards have no cell type for showing a single headline value — e.g. "current error rate", "active players", "p99 latency", or a status string like "healthy"/"degraded". The closest existing options are table (too much chrome for one value) or piechart with a single slice (wrong semantics, no threshold coloring). Grafana's "Stat" panel covers this need; micromegas has no equivalent.

Note: despite the "big number" name (matching Grafana's older naming), the value isn't necessarily numeric — it should render whatever scalar the query returns (number, string, boolean), the same way a single table cell would.

Proposal

Add a bignumber cell type: runs a query, takes the first row's value column, and renders it large, with:

• Unit formatting (prefix/suffix), for numeric values — reuse the existing options.unit convention (see PieChartCell.tsx, ChartCell.tsx) and the shared helpers in lib/units.ts (normalizeUnit, unitDisplayAbbrev, unitSuffix) so a big-number cell formats bytes, milliseconds, %, currency codes, etc. exactly like chart/pie cells already do — no new formatting logic.
• Threshold-based coloring, for numeric values — an ordered list of { value, color } steps (Grafana-style); the cell picks the highest step whose value <= result, similar in spirit to the existing snapInterval "largest match ≤ input, fallback to smallest" pattern in notebook-expression-eval.ts.
• Value mappings, for non-numeric (or discrete) values — map specific values (or ranges) to a display label + color, e.g. 0 -> "Down" (red), 1 -> "Up" (green), or "error" -> "Error" (red). This is how Grafana's Stat panel colors text/boolean results, and it composes with thresholds rather than replacing them: thresholds handle continuous numeric ranges, mappings handle discrete/enum-like values.
• Optional label/title text and a compact sparkline/trend (nice-to-have, can be a follow-up).

Cell config sketch

Numeric, threshold-colored:

{
  "type": "bignumber",
  "sql": "SELECT avg(duration) AS value FROM measures WHERE name = 'frame_time'",
  "options": {
    "unit": "milliseconds",
    "label": "Frame time (avg)",
    "thresholds": [
      { "value": 0, "color": "green" },
      { "value": 16, "color": "yellow" },
      { "value": 33, "color": "red" }
    ]
  }
}

Text/status, mapping-colored:

{
  "type": "bignumber",
  "sql": "SELECT status AS value FROM service_health WHERE service = 'ingestion'",
  "options": {
    "label": "Ingestion status",
    "mappings": [
      { "value": "ok", "text": "Healthy", "color": "green" },
      { "value": "degraded", "text": "Degraded", "color": "yellow" },
      { "value": "down", "text": "Down", "color": "red" }
    ]
  }
}

Implementation sketch (per analytics-web-app/src/lib/screen-renderers/ architecture)

1. Add 'bignumber' to the CellType union and to QueryCellConfig['type'] in notebook-types.ts.
2. Add cells/BigNumberCell.tsx: renderer (formats numeric values via units.ts, resolves color from options.thresholds or options.mappings depending on value type), an EditorComponent (SQL + unit + label + threshold/mapping list editor), and a bigNumberMetadata object satisfying CellTypeMetadata.
3. Register it in CELL_TYPE_METADATA in cell-registry.ts.

Open questions

• Which column supplies the value when the query returns multiple columns — first column, or a configured column name?
• Threshold/mapping color values: named palette (green/yellow/red) or arbitrary hex?
• Sparkline/trend: same query re-aggregated over the time range, or a separate optional query — worth splitting into its own issue if it adds much scope.