visualization component

SmartRouteDiagram

Reusable smart route diagram component.

@wrnexus/ui 0.2.676 props1 slots0 events

Usage

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

<SmartRouteDiagram
  title="title"
  value="value"
  description="description"
  summary="summary"
  loading="false"
/>

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

Props and attributes

Prop	Type	Requirement	Default
`title`	`string`	Optional	`""`
`value`	`string`	Optional	`""`
`description`	`string`	Optional	`""`
`summary`	`string`	Optional	`""`
`loading`	`boolean`	Optional	`false`
`class`	`string`	Optional	`""`

Slots

default

Events

This component does not declare a custom event.

Source contract

Installed source: components/SmartRouteDiagram.wrn

component SmartRouteDiagram {
  props {
    title = ""
    value = ""
    description = ""
    summary = ""
    loading = false
    class = ""
  }
  view {
        <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
        <figcaption>{#if title}<strong>{title}</strong>{/if}{#if value}<span class="wire-metric__value">{value}</span>{/if}{#if description}<span class="wire-muted">{description}</span>{/if}</figcaption>{#if loading}<div class="wire-skeleton wire-catalog-visualization__skeleton">
        </div>{:else}<div class="wire-catalog-visualization__content">
        <slot />
        </div>{/if}{#if summary}<p class="wire-visually-hidden">{summary}</p>{/if}</figure>
    }
}