hb-dashboard-counter-lines

Category: data · Tags: data, dashboard

Overview

hb-dashboard-counter-lines renders a vertical list of dashboard-style metrics. Each row can show an optional Bootstrap Icon, a primary label, and a compact counter value in a Bulma light, rounded tag. Rows may be static or clickable depending on an optional link object.

The custom element is registered as hb-dashboard-counter-lines.

When to use it

Use this component when you need a simple, scannable summary of several numeric or textual KPIs (counts, rates, totals) with optional navigation or a custom click action per row.

Data model (lines)

The lines prop is a Line[] array. From HTML, pass it as a JSON string (serialized array).

Each line object supports:

| Field | Type | Description | | --- | --- | --- | | text | string | Primary label shown on the row (truncated with an ellipsis when space is tight). | | value | string | Counter text rendered inside the Bulma tag is-light is-rounded pill. | | icon | string (optional) | Bootstrap Icons glyph name only (without the bi- prefix), e.g. "people", "clock". Renders as class="bi bi-{icon}". | | link | object (optional) | When present and valid, the whole row becomes clickable. See Link behavior below. | | index | number (optional) | Reserved in the type for ordering or metadata; the current markup does not display it. |

Parsing rules

• If lines is omitted, null, or an empty string after trim, nothing is rendered.
• If lines is a string, the component JSON.parses it once (synchronously) before paint. Invalid JSON logs an error to the console and results in an empty list.
• Non-array JSON or an empty array also yields no visible content.

Attributes and properties (snake_case)

Web component attributes are strings. Complex values must be JSON strings.

| Name | Required | Description | | --- | --- | --- | | id | No | Optional; present on the authoring Component type for integrations that set it from JavaScript. | | style | No | Optional on the authoring Component type; the implementation does not forward a style prop into the shadow tree—use Bulma variables, ::part, or the native HTML style attribute on the host element if you need one-off host styling. | | lines | No | JSON string representing Line[], e.g. [{"text":"Users","value":"42","icon":"people"}]. |

Link behavior

When link is set and includes both type and uri, the row is interactive (cursor/click styling from your theme and ::part(item)).

| link.type | Effect | | --- | --- | | "tab" | Opens link.uri in a new browser tab (window.open(..., "_blank")). | | "page" | Navigates the current window to link.uri (window.location.href). | | "event" | Dispatches a counterClick custom event with detail.key equal to link.uri (use uri as your logical event key). |

If link is missing, incomplete, or uri is empty, the row is not clickable.

Events

| Event name | detail shape | When it fires | | --- | --- | --- | | counterClick | { key: string } | When the user activates a row whose link.type is "event". key is the line’s link.uri. |

Listen with addEventListener("counterClick", ...) or the equivalent in your framework.

Layout and styling

• Host: :host is a column flex container with spacing between rows, full width, min-width: 0 so flex children can shrink inside tight layouts.
• Row: Label cluster (icon + text) grows/shrinks; the value tag stays on the right and does not shrink.
• Typography: Long labels use a single line with ellipsis overflow.

Theming uses Bulma CSS variables inside the shadow root. You can also target exposed CSS parts from the light DOM.

CSS custom properties (--bulma-*)

| Variable | Default | Role | | --- | --- | --- | | --bulma-primary | #00d1b2 | Primary brand color (e.g. tag accents when using Bulma color modifiers). | | --bulma-text | #363636 | Main label text color. | | --bulma-text-weak | #7a7a7a | Muted supporting text where applicable. | | --bulma-radius | 0.375rem | Base radius for components that depend on Bulma radius tokens. | | --bulma-radius-rounded | 9999px | Pill radius for .tag.is-rounded. |

Set --bulma-* on html, body, or on the element / its ancestors so values inherit into the shadow tree. See the Bulma CSS variables documentation.

CSS parts (::part(...))

| Part | Description | | --- | --- | | item | Outer row container; meaningful for hover, cursor, padding, or background when the row has a link. | | icon | Bootstrap Icon <i> element for that row. | | text | Primary label <span>. | | value | Bulma tag showing the counter value (tag is-light is-rounded). |

Slots

None.

Dependencies (runtime)

• Bootstrap Icons font (loaded for icon classes used in the shadow tree).
• Bulma (Sass modules forwarded in the component styles).

Examples

Several static metrics

<hb-dashboard-counter-lines
  lines='[{"text":"Active users","value":"1.2k","icon":"people"},{"text":"Errors","value":"3","icon":"exclamation-triangle"},{"text":"Latency p95","value":"120ms","icon":"speedometer2"}]'
></hb-dashboard-counter-lines>

Row that opens a URL in a new tab

<hb-dashboard-counter-lines
  lines='[{"text":"Open reports","value":"12","icon":"graph-up-arrow","link":{"type":"tab","uri":"https://example.com/reports"}}]'
></hb-dashboard-counter-lines>

Row that emits counterClick

<hb-dashboard-counter-lines
  id="kpi-block"
  lines='[{"text":"Drill down","value":"99+","link":{"type":"event","uri":"open-details"}}]'
></hb-dashboard-counter-lines>

<script>
  document.getElementById("kpi-block").addEventListener("counterClick", (e) => {
    console.log("key:", e.detail.key); // "open-details"
  });
</script>

Internationalization

No built-in i18n strings; pass already-translated text and value values in lines.