🏠 Overview › 🧩 Components ›🧩 KPI Card Widget

KPI Card Widget

Component Detail

User Interface low complexity frontend
1
Dependencies
0
Dependents
0
Entities
0
Integrations

Description

Reusable card component rendering a single KPI metric with its label, current value, trend arrow, and optional sparkline. Accepts a typed KPI descriptor and renders with proper WCAG 2.2 AA contrast ratios and keyboard-accessible focus states.

Feature: Dashboard KPIs

kpi-card-widget

Sources & reasoning

Individual KPI metrics need a consistent, accessible card component. Extracting this as a dedicated widget enforces the WCAG AA constraint uniformly and enables reuse across the dashboard grid without duplicating accessibility logic.

  • docs/source/likeperson.md · line 186
    Coordinator and organization-level dashboards and KPIs
  • docs/source/likeperson.md · line 317
    Aktivitetsoversikt og grunnleggende statistikk
  • docs/source/likeperson.md · line 231
    Admin Web Portal: `admin-dashboard`, `admin-user-management`, `admin-organization`, `admin-security`

Responsibilities

  • Display a single KPI value with label and trend indicator
  • Apply correct color coding for positive/negative trends without relying on color alone
  • Meet WCAG 2.2 AA contrast and touch-target requirements
  • Support skeleton loading state during data fetch

Interfaces

KPICard({ metric: KPIMetric, loading: boolean }): ReactNode

Relationships

Dependencies (1)

Components this component depends on

ui KPI Dashboard Page