ConversionChart

Usage

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

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

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

Props and attributes

Slots

• default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ConversionChart.wrn

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