feat: KPI / stat tile widget type (#26) #33

2026-07-28T17:58:18Z

claude-bot commented

2026-07-28 17:58:18 +00:00

Closes #26

Adds a non-chart dashboard widget: a large value with its label, an optional signed delta versus the previous period, and an optional sparkline. Four tiles (total revenue, open orders, new customers, avg. order value) now sit above the charts, 3x1 each.

What's in it

components/KpiTile — draws no surface of its own and fills the grid item's, styled from the --dialect-* token layer. Value and delta share one row: stacking them costs a line the tile does not have at its default height of one grid cell. Two new tokens, --dialect-positive / --dialect-negative, carry the delta direction, so it follows the light/dark toggle instead of hardcoding colours.
components/SparklineChart — a chrome-free line chart, built from a new DialectTheme.sparklineOptions() so palette and font stay shared with the real charts rather than duplicated.
DashboardView — the KPI row is added at y=0 and the existing chart widgets shift down one cell. Existing users keep their layout: it is persisted per gs-id in localStorage, and no ids changed.

Two things worth flagging

The registry registration in the issue is not implemented. #21 (widget registry + picker) is ai-blocked, so there is nothing to register with yet — the acceptance criterion "addable from the widget picker" is not met. The tiles are wired into DashboardView the same way the chart widgets are; when #21 lands, each becomes one WidgetDefinition with a 3x1 default size.

Values come from the translation bundle, not from a data service — they carry locale-specific formatting (1,24 Mio. € / €1.24M / 1,24 M€). They move to the service in #20, alongside the chart literals that are already there.

Verification

./mvnw test — 13 tests green. Two new browserless tests cover value, label and delta rendering (both signs) plus the 3x1 default size; the existing widget-count assertions were updated for the four extra widgets.

Checked in a real browser at h=1, light and dark: the tile measures exactly its grid item (212x104, no overflow) and both delta colours read against either surface. Two layout bugs surfaced and were fixed there:

height: 100% plus content-box padding made the tile 28px taller than its item — it now sets box-sizing: border-box.
ApexCharts' sparkline.enabled drops the axes on the initial render, but updateOptions — how the theme toggle recolours a chart — brings the y-axis labels back, clipped to a smudge at the tile's left edge. They are hidden in CSS, which reaches the chart SVG since apex-chart.ts renders into light DOM.

🤖 Generated with Claude Code

https://claude.ai/code/session_0124BiJikbhbiEsNfJxdWM69

Closes #26 Adds a non-chart dashboard widget: a large value with its label, an optional signed delta versus the previous period, and an optional sparkline. Four tiles (total revenue, open orders, new customers, avg. order value) now sit above the charts, `3x1` each. ## What's in it - **`components/KpiTile`** — draws no surface of its own and fills the grid item's, styled from the `--dialect-*` token layer. Value and delta share one row: stacking them costs a line the tile does not have at its default height of one grid cell. Two new tokens, `--dialect-positive` / `--dialect-negative`, carry the delta direction, so it follows the light/dark toggle instead of hardcoding colours. - **`components/SparklineChart`** — a chrome-free line chart, built from a new `DialectTheme.sparklineOptions()` so palette and font stay shared with the real charts rather than duplicated. - **`DashboardView`** — the KPI row is added at `y=0` and the existing chart widgets shift down one cell. Existing users keep their layout: it is persisted per `gs-id` in `localStorage`, and no ids changed. ## Two things worth flagging **The registry registration in the issue is not implemented.** #21 (widget registry + picker) is `ai-blocked`, so there is nothing to register with yet — the acceptance criterion "addable from the widget picker" is not met. The tiles are wired into `DashboardView` the same way the chart widgets are; when #21 lands, each becomes one `WidgetDefinition` with a `3x1` default size. **Values come from the translation bundle**, not from a data service — they carry locale-specific formatting (`1,24 Mio. €` / `€1.24M` / `1,24 M€`). They move to the service in #20, alongside the chart literals that are already there. ## Verification `./mvnw test` — 13 tests green. Two new browserless tests cover value, label and delta rendering (both signs) plus the `3x1` default size; the existing widget-count assertions were updated for the four extra widgets. Checked in a real browser at `h=1`, light and dark: the tile measures exactly its grid item (212x104, no overflow) and both delta colours read against either surface. Two layout bugs surfaced and were fixed there: - `height: 100%` plus content-box padding made the tile 28px taller than its item — it now sets `box-sizing: border-box`. - ApexCharts' `sparkline.enabled` drops the axes on the initial render, but `updateOptions` — how the theme toggle recolours a chart — brings the y-axis labels back, clipped to a smudge at the tile's left edge. They are hidden in CSS, which reaches the chart SVG since `apex-chart.ts` renders into light DOM. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_0124BiJikbhbiEsNfJxdWM69

claude-bot added 1 commit 2026-07-28 17:58:19 +00:00

fix: add KPI tile widget type to the dashboard (#26 )

CI / build-and-test (pull_request) Successful in 2m24s

Details

21834ec9a0

Adds a non-chart dashboard widget: a large value with its label, an
optional signed delta versus the previous period, and an optional
sparkline. Four tiles now sit above the charts, 3x1 each.

- KpiTile draws no surface of its own and fills the grid item's, styled
  from the --dialect-* token layer; the delta's up/down colors are new
  tokens rather than literals, so they follow the light/dark toggle.
- Value and delta share one row: stacking them costs a line the tile does
  not have at its default height of one grid cell.
- SparklineChart is a chrome-free line chart built on DialectTheme, so it
  shares the palette and font with the real charts.
- ApexCharts' sparkline.enabled drops the axes on the initial render but
  updateOptions (how the theme toggle recolors a chart) brings the y-axis
  labels back; they are hidden in CSS, which reaches the chart SVG since
  it renders into light DOM.

The registry registration the issue asks for is left out: #21 is blocked,
so there is no widget picker to register with yet. The tiles are wired
into DashboardView the same way the chart widgets are, and their values
come from the translation bundle until the data service (#20) lands.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0124BiJikbhbiEsNfJxdWM69

pitfriedrich merged commit e62292b96c into main

2026-07-28 18:04:48 +00:00

pitfriedrich deleted branch ai/issue-26-kpi-tile

2026-07-28 18:04:48 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: pitfriedrich/chart-app#33