hb-dashboard-indicator — dashboard-indicator

Category: data | Tags: data, dashboard

What it does

Compact KPI tile: large number, caption text, configurable Bootstrap Icon, and karma accent from Bulma semantic colors. When link_label is set, a footer strip is shown and clicks dispatch dashboardIndicatorClick with the component id.

Custom element

hb-dashboard-indicator

Attributes / props (snake_case)

| Property | Type | Notes | | --- | --- | --- | | id | string (optional) | Element identifier (used in click payload). | | style | string (optional) | Inline style string. | | number | number (required) | Main KPI value. | | text | string (optional) | Caption under the number. | | icon | string (required) | Bootstrap Icons name. | | link_label | string (optional) | If set, shows footer and enables click dispatch. | | karma | string (optional) | Accent: Bulma semantics success, danger, warning, primary, secondary, info (secondary uses Bulma’s dark palette), or none to use the host CSS variable below. Default success. |

CSS var (with karma="none"): --hb--dashboard-indicator-background — header background and footer accent (any valid CSS color). If omitted while karma is none, falls back to Bulma success. With any other karma, this variable is ignored. No slots or parts in metadata.

Events (CustomEvent names)

• dashboardIndicatorClick — { id: string }

Usage notes

• With Bulma karma values, accent comes from --bulma-* tokens on :host. With karma="none", set --hb--dashboard-indicator-background on hb-dashboard-indicator (e.g. style="--hb--dashboard-indicator-background: #6366f1").
• Icon name must match bootstrap-icons.
• Shadow DOM wraps the tile; pass id when using click events.
• No i18n in docs.ts.

Minimal HTML example

<hb-dashboard-indicator
  id="kpi-sales"
  number="128"
  text="Orders today"
  icon="cart-check"
  link_label="View details"
  karma="success"
></hb-dashboard-indicator>

Custom color (karma="none")

<hb-dashboard-indicator
  karma="none"
  style="--hb--dashboard-indicator-background: #6366f1"
  number="12"
  text="Custom"
  icon="stars"
></hb-dashboard-indicator>