content component

AnalyticsDashboardPreview

Reusable analytics dashboard preview component.

@wrnexus/ui 0.3.48 props1 slots0 events

Usage

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

<AnalyticsDashboardPreview
  eyebrow="eyebrow"
  title="title"
  description="description"
  href="href"
  actionLabel="Learn more"
/>

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

Props and attributes

Prop	Type	Requirement	Default
`eyebrow`	`string`	Optional	`""`
`title`	`string`	Optional	`""`
`description`	`string`	Optional	`""`
`href`	`string`	Optional	`""`
`actionLabel`	`string`	Optional	`"Learn more"`
`image`	`string`	Optional	`""`
`alt`	`string`	Optional	`""`
`class`	`string`	Optional	`""`

Slots

default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AnalyticsDashboardPreview.wrn

component AnalyticsDashboardPreview {
  props {
    eyebrow = ""
    title = ""
    description = ""
    href = ""
    actionLabel = "Learn more"
    image = ""
    alt = ""
    class = ""
  }

  view {
        <section class="wire-analytics-preview {class}">
        <div class="wire-analytics-preview__surface">
        <div class="wire-analytics-preview__visual">
          {#if image}
            <img
              src="{image}"
              alt="{alt}"
              class="wire-analytics-preview__image"
            />
          {:else}
            <div
              class="wire-analytics-preview__chart"
              role="img"
              aria-label="Delivery trend rising over seven days"
            >
        <div class="wire-analytics-preview__chart-header">
        <strong>Delivery trend</strong>
        <span>↗ 18.4%</span>
        </div>
        <svg
                class="wire-analytics-preview__chart-svg"
                viewBox="0 0 700 250"
                aria-hidden="true"
              >
        <defs>
        <linearGradient id="wire-analytics-area" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="currentColor" stop-opacity=".3">
        </stop>
        <stop offset="100%" stop-color="currentColor" stop-opacity="0">
        </stop>
        </linearGradient>
        </defs>
        <g fill="none" stroke="var(--wire-color-border,#e2e8f0)">
        <path d="M20 50H680M20 115H680M20 180H680M20 230H680">
        </path>
        </g>
        <path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z">
        </path>
        <path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32">
        </path>
        </svg>
        <div class="wire-analytics-preview__days">
        <span>Mon</span>
        <span>Tue</span>
        <span>Wed</span>
        <span>Thu</span>
        <span>Fri</span>
        <span>Sat</span>
        <span>Sun</span>
        </div>
        </div>
          {/if}
        </div>
        <div class="wire-analytics-preview__content">
          {#if eyebrow}
            <p class="wire-analytics-preview__eyebrow">{eyebrow}</p>
          {/if}

          {#if title}
            <h2 class="wire-analytics-preview__title">{title}</h2>
          {/if}

          {#if description}
            <p class="wire-analytics-preview__description">{description}</p>
          {/if}

          <div class="wire-analytics-preview__metrics">
        <slot />
        </div>

          {#if href}
            <a href="{href}" class="wire-analytics-preview__action">
              {actionLabel}<span aria-hidden="true">→</span>
        </a>
          {/if}
        </div>
        </div>
        </section>
    }
}