pitfriedrich/chart-app
1
1
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

KPI / stat tile widget type (non-chart widget) #26

New Issue
Closed
opened 2026-07-28 16:54:27 +00:00 by claude-bot · 1 comment
claude-bot commented 2026-07-28 16:54:27 +00:00
Collaborator
Copy Link
Copy Source

Problem

Every widget on the dashboard is a chart. There is no way to show a single number — total revenue, count of open items, delta versus the previous period — which is normally the first thing a dashboard shows and the cheapest to read.

Proposal

Add a KPI tile widget:

  • Large value, label, optional delta indicator (up/down with sign and colour).
  • Optional sparkline (ApexCharts supports sparkline.enabled with chrome stripped).
  • Styled via the existing --dialect-* token layer in styles.css, same as .dialect-card — no new hardcoded colours. Delta up/down colours should come from the token layer, not literals.
  • Registered in the widget registry (#21) so it is addable like any other widget.
  • Default grid size smaller than a chart widget (e.g. 3×1).

Acceptance criteria

  • KPI tile renders correctly in light and dark theme.
  • Works at small grid sizes without overflowing.
  • Addable from the widget picker.
  • Browserless test asserting value and delta rendering.

Depends on

#20 (values come from the data service), #21 (registration).

Scope

Small. High visual payoff per line of code.

## Problem Every widget on the dashboard is a chart. There is no way to show a single number — total revenue, count of open items, delta versus the previous period — which is normally the first thing a dashboard shows and the cheapest to read. ## Proposal Add a KPI tile widget: - Large value, label, optional delta indicator (up/down with sign and colour). - Optional sparkline (ApexCharts supports `sparkline.enabled` with chrome stripped). - Styled via the existing `--dialect-*` token layer in `styles.css`, same as `.dialect-card` — no new hardcoded colours. Delta up/down colours should come from the token layer, not literals. - Registered in the widget registry (#21) so it is addable like any other widget. - Default grid size smaller than a chart widget (e.g. 3×1). ## Acceptance criteria - KPI tile renders correctly in light and dark theme. - Works at small grid sizes without overflowing. - Addable from the widget picker. - Browserless test asserting value and delta rendering. ## Depends on #20 (values come from the data service), #21 (registration). ## Scope Small. High visual payoff per line of code.
claude-bot added the enhancement label 2026-07-28 16:54:27 +00:00
pitfriedrich added the ai-ready label 2026-07-28 17:30:09 +00:00
claude-bot added the ai-wip label 2026-07-28 17:30:36 +00:00
claude-bot commented 2026-07-28 17:58:27 +00:00
Author
Collaborator
Copy Link
Copy Source

PR: #33

KpiTile + SparklineChart are in, four tiles wired into DashboardView at 3x1, ./mvnw test green (13 tests, two new browserless ones for value/delta/size). Verified in a real browser at h=1 in both themes — no overflow.

One acceptance criterion is not met: "addable from the widget picker". #21 is ai-blocked, so there is no registry or picker to register with. The tiles are added to the dashboard directly, the same way the chart widgets are; registering them is a few lines once #21 lands.

Also, the displayed values live in the translation bundle rather than a data service — they carry locale-specific formatting. They move to the service in #20, together with the chart literals already sitting in the view.

PR: https://gitea.pitfriedrich.net/pitfriedrich/chart-app/pulls/33 `KpiTile` + `SparklineChart` are in, four tiles wired into `DashboardView` at `3x1`, `./mvnw test` green (13 tests, two new browserless ones for value/delta/size). Verified in a real browser at `h=1` in both themes — no overflow. **One acceptance criterion is not met:** "addable from the widget picker". #21 is `ai-blocked`, so there is no registry or picker to register with. The tiles are added to the dashboard directly, the same way the chart widgets are; registering them is a few lines once #21 lands. Also, the displayed values live in the translation bundle rather than a data service — they carry locale-specific formatting. They move to the service in #20, together with the chart literals already sitting in the view.
claude-bot added ai-review and removed ai-wipai-ready labels 2026-07-28 17:58:40 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
ai-blocked
AI Autofix is blocked - issue needs human
 ai-ready
May be solved by the Autofix loop
 ai-review
Autofix is done, merge ready
 ai-wip
AI Autofix is work-in-progress
 bug
Something is not working
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 question
More information is needed
 wontfix
This won't be fixed
No Label ai-review enhancement
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claude-bot pitfriedrich
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: pitfriedrich/chart-app#26
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?