KPI chart cards

A custom component for a dashboard: pick a table, the number to add up (an amount, a total, a duration) or just count rows, and the date that places them. It shows the total, the average and the count for the last 7, 30 or 90 days with the change against the same number of days before, the best day, a per-day (or per-week) area chart of this period over a dashed line for the period before, and a breakdown by a choice field such as status or category. Money, plain numbers and percentages are formatted for you, in your app's colours, light or dark, and every number counts only the rows the viewer may see.

View the files
KPI chart cards: the KPIs page, added to Atelier, on desktopKPI chart cards: the KPIs page, added to Atelier, on a phone

What it adds to your app

Component KpiCards (props: entity, valueField, dateField, groupField, format, currency, days). A KPIs page for the role you choose.

Pages

  • /kpis KPIs (‹page_role›)

Components

  • KpiCards KPI cards and a trend chart for ‹entity›: the total, average and count over 7, 30 or 90 days with the change on the period before, a per-day trend against the previous period, and a breakdown by a choice field

Set it up

It merges into the contract of an app you already have. Nothing is overwritten: a name you already use is refused until you pass a prefix.

  1. Pick the project

    Use the button above, or ask your coding agent with the Appbricx MCP server connected (quickstart).

  2. Point it at your tables and roles

    Leave out the ones with defaults; a wrong one is refused with the options your app has.

    ParamWhat it isExample
    entityThe table whose rows the cards add up or count.order
    value_fieldOptional: a number field to total and average (an amount, a price, minutes). Leave it out to count rows. Optional.total
    date_fieldThe date that places a row in a period. Optional.placed_on
    group_fieldOptional: a choice field for the breakdown, such as status or category. Optional.status
    formatHow the number reads: number, currency or percent. Optional.currency
    currencyThe ISO currency code when the format is currency. Optional.EUR
    page_roleThe role the KPIs page is for. Optional.admin
  3. Preview, then apply to dev

    A dry run shows the diff and the check report; applying it changes your dev environment only.

  4. Deploy

    When dev looks right, deploy. Production gets a snapshot first, so you can roll back.

Use it with your coding agent

The agent reads the template, runs a dry run, shows you the diff and applies it.

Prompt
Add the KPI chart cards template (slug "chart-cards") to my Appbricx project. Read it with get_template, run use_template with dry_run first and show me the diff, then apply it. Ask me where it attaches if you can't tell from my contract (entity: table to measure; value_field: number to add up (optional); date_field: date field; group_field: break down by (optional); format: number format; currency: currency; page_role: who sees the cards).
MCP call
{
  "tool": "use_template",
  "arguments": {
    "slug": "chart-cards",
    "project_id": "<your project id>",
    "params": {
      "entity": "order",
      "value_field": "total",
      "date_field": "placed_on",
      "group_field": "status",
      "format": "currency",
      "currency": "EUR",
      "page_role": "admin"
    },
    "dry_run": true
  }
}
CLI
appbricx templates use chart-cards --param entity=order --param value_field=total --param date_field=placed_on --param group_field=status --param format=currency --param currency=EUR --param page_role=admin --dry-run

Your agent adds it. Appbricx runs it.

Start freeAll templates