caliper uidocs
DemoSign inGet Pro

Metric explorer

Pro

Pick a metric, a split and a range, and see it plotted.

Installs components/ui/metric-explorer.tsxDepends on @radix-ui/react-popover, d3-shape, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/metric-explorer
Sessions by channel
Sessions by channel
PointOrganicPaid searchEmailReferralEvent
10-178526552635932225
10-187938616236972786
10-197882532736972878
10-207734813436842620
10-217835813139642511
10-228298977945063112
10-238407880842102827
10-249504907241013045
10-259502901747392898
10-2698061088046153339
10-2710212916049343341
10-28106331080944383371
10-29105061124152513026
10-30114261142746083043
Sessions by channel
ChannelTotal
Organic128k
Paid search123k
Email60.0k
Referral41.0k

When to use #

Use it for

  • Self-serve analysis without writing a query.

Skip it when

  • A fixed report; use a dashboard.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/metric-explorer

Adds its 7 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { MetricExplorer } from "@/components/ui/metric-explorer"

The worked example comes with Pro

The 38-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

MetricExplorer

component
PropTypeDefault
data *readonly ExplorerRow[]—
metrics *readonly ExplorerMetric[]—
dimensions *readonly { id: string; label: string; }[]—
classNamestring—

Accessibility #

It is built on native elements and keeps aria-label, aria-valuetext and aria-hidden in step with state.

Keyboard and focus handling comes from Radix popover: arrow keys move through items, Enter and Space select, and Escape closes and returns focus.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.