Store analytics drawn in plain SVG and HTML — revenue area, orders by channel, conversion funnel and top products — that draw in, spring between periods and explain every point on hover or arrow keys.
Revenue area
revenue-area.tsxNet revenue as a volt area over the previous period, with 7D, 30D and 12M tabs that spring-morph the curve, counting totals and a crosshair tooltip.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Net revenue" | Card heading. |
periods | RevenuePeriod[] | — | { key, labels, revenue, previous, orders } per tab. Keep the point count equal across periods so the curve can morph. |
defaultPeriod | string | "30D" | Initially selected tab key. |
currency | string | "USD" | ISO currency for formatting. |
className | string | — | Extra classes on the card. |
Orders by channel
channel-stacked.tsxWeekly orders stacked by channel on a neutral-to-volt ramp; bars grow in, flip between counts and share with a spring, and break down per week on hover or arrows.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Orders by channel" | Card heading. |
labels | string[] | — | One label per bar. |
channels | Channel[] | — | { id, label, values } ordered most to least important; the first gets volt. |
defaultMode | "count" | "share" | "count" | Start with absolute orders or percent of total. |
className | string | — | Extra classes on the card. |
Conversion funnel
conversion-funnel.tsxCentred funnel bars joined by tapered connectors with drop-off between steps; device tabs spring every width and the selected step reads its step and overall rate.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Store conversion" | Card heading. |
steps | string[] | — | Step names, top of funnel first. |
segments | FunnelSegment[] | — | { key, counts } per tab, one count per step. |
defaultSegment | string | "All" | Initially selected segment. |
range | string | "Last 30 days" | Time range caption. |
Top products
top-products.tsxBest sellers as ranked bars that grow in with counting values; switching between revenue and units re-ranks the rows with a layout spring.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Top products" | Card heading. |
products | TopProduct[] | — | { id, name, category, revenue, units, change }. |
defaultMetric | "revenue" | "units" | "revenue" | Metric used to rank rows. |
currency | string | "USD" | ISO currency for revenue. |
range | string | "Last 30 days" | Time range caption. |
Install the whole set
Installs every ecommerce charts variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Every chart has role="img" with a written summary, and the plot is a focusable group: left and right arrows move the crosshair while a polite live region reads the values.
- Period, segment and metric switches are real buttons with aria-pressed; funnel steps are buttons that also move with up and down arrows.
- Reduced motion skips the draw-in, morphs and count-ups and renders the final state immediately.