[Feat]: Notebooks: display a single query result as a KPI card

Open
  • Is something wrong?
#1,509 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 2 days

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
35/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
react, sql, typescript
Domain
data-visualization, frontend

Research direction

Start with SqlCellResult.tsx, CellChart.tsx and notebook.ts to trace result rendering and chart configuration. Then read notebookFile.ts and notebookUndo.ts for persistence behavior, and review the named notebook tests. Done means the acceptance criteria are covered, including exact scalar formatting, explicit result states, save/load and undo/redo, with focused tests.

Written by the indexing model from the issue text.

Description

feature request
Prerequisites
  • I have written a descriptive issue title.
  • I have searched existing issues and open pull requests to avoid duplicating an existing feature request.
🚀 Feature Proposal

Add an optional KPI presentation for an SQL cell returning one row. The author selects a result column, a display label and a small set of formatting options while retaining access to the original result table.

Motivation

A report often needs to emphasize revenue, active users or an error count without a full table or chart.

Example
An SQL cell returns one row with active_users = 1240. Configure the active_users column and label Active users to show a large 1,240 value.
Acceptance criteria
  • Offer KPI presentation for a selected scalar column of an exactly-one-row result; keep table access available and never execute SQL when changing presentation.
  • Support label, decimal places and optional prefix/suffix with locale-aware formatting; preserve large integers and exact decimal strings without unsafe Number coercion.
  • Render explicit states for zero rows, multiple rows, missing column, NULL, nonnumeric data, execution error and absent output; never silently use the first row of a multi-row result.
  • Persist KPI configuration through save/load, notebook import/export and undo/redo; older notebooks retain their current table/chart behavior.
  • Respect theme tokens and accessible text; reflect outdated state where available and show the KPI in Report view when that mode exists.
  • Cover zero, negatives, large integers, decimal strings, result-column changes and configuration round-trips.
Where to start

Verified against main at 066e41c34001edbc6c869ed726aa3958d3ae7db5: CellChart offers bar, line and pie views and CellChartConfig stores chart axes/series. There is no single-value/KPI output configuration.

Existing test references:

Scope: Single-value display only; comparisons, targets, spark lines, extra chart types and HTML export rendering are separate work.

Plugin behavior: This uses already loaded result values for any driver and must not issue an aggregate query or choose SQL by driver id.

Related notebook proposals:

Contributor notes
  • Follow AGENTS.md and the repository rules. Run upstream GitNexus impact analysis before editing existing symbols and report the blast radius; run change detection before committing.
  • Add new UI strings to every locale under packages/web-ui/src/i18n/locales/. Use design tokens, keyboard access, accessible labels and visible focus.
  • Keep pure frontend helpers under packages/web-ui/src/utils/ and tests under matching packages/web-ui/tests/ paths. Run focused tests, pnpm typecheck, pnpm lint and pnpm build; extend existing notebook tests for the behaviors above.
  • Preserve desktop and web behavior. Any necessary shared backend logic belongs in src-tauri/src/application/ or plain modules, with transport-specific code in the corresponding transport module. For backend changes, run relevant Rust tests and cargo check --no-default-features from src-tauri/.
  • Questions? Ask here or on Discord.
Dominant language
TypeScript
Stars
5.1k
Forks
335
Avg merge
1d 19h
Merged PRs (30d)
240

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from TabularisDB/tabularis

All issues in TabularisDB/tabularis

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.