data component

MetricGrid

Reusable metric grid component.

@wrnexus/ui 0.3.45 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MetricGrid
  label="Platform metrics"
  metrics="[]"
  compact="false"
  columns="4"
/>

Legacy mount name: data-component="MetricGrid".

Props and attributes

Prop	Type	Requirement	Default
`label`	`string`	Optional	`"Platform metrics"`
`metrics`	`string`	Optional	`[]`
`compact`	`boolean`	Optional	`false`
`columns`	`number`	Optional	`4`
`class`	`string`	Optional	`""`

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/MetricGrid.wrn

component MetricGrid {
  props {
    label = "Platform metrics"
    metrics = []
    compact = false
    columns = 4
    class = ""
  }

  view {
        <section
      class="wire-metric-grid-shell {compact ? 'wire-metric-grid-shell--compact' : ''} {class}"
      aria-label="{label}"
    >
        <div
        class="wire-metric-grid"
        class:wire-metric-grid--compact='{compact}'
        data-columns="{columns}"
      >
        {#each metrics as metric}
          <article class="wire-metric-card" class:wire-metric-card--compact='{compact}'>
        <strong class="wire-metric-card__value">{metric.value}</strong>
        <span class="wire-metric-card__label">{metric.label}</span>

            {#if metric.description}
              <p class="wire-metric-card__description">{metric.description}</p>
            {/if}
          </article>
        {:empty}
          <p class="wire-metric-grid__empty">No metrics available.</p>
        {/each}
      </div>
        </section>
    }
}