84 lines
2.8 KiB
Plaintext
84 lines
2.8 KiB
Plaintext
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>
|
|
}
|
|
}
|