Experience / Application

Analytics

page
play-fn

Advanced analytics — why the numbers on the dashboard are moving.

The dashboard answers how many; this page answers why, which is why it is a separate destination rather than a longer dashboard. Every panel is one question, and each can be pinned back to the dashboard, so the summary screen is assembled from the answers a particular person keeps rereading rather than from a fixed guess about what everyone wants.

The range control sits above everything and changes the counts throughout. The mix — sources, devices, geography — is held as shares and multiplied out, because that is what the mix actually is: switching to 90 days should not re-poll the world's browser share.

Nothing persists. Pins live for as long as the page does.

Not exported from @meetcard/deck — this is a composed screen, built from the components below rather than shipped as one.

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Default

Source

const Default = () => <Analytics />;

Changing the range changes the counts everywhere at once — the tiles, the funnel, the buckets on the trend, and every breakdown derived from the period's view total.

Changing The Range

Source

const ChangingTheRange = () => <Analytics />;

Pinning is a toggle, not a link, so it reports its state. The accessible name says which way it will go — eight buttons all called "Pin" name nothing.

Pinning A Section

Source

const PinningASection = () => <Analytics />;

The page in the shell it actually lives in.

In The Shell

Source

const InTheShell = () => (
  <AppShell currentId="/">
    <Analytics />
  </AppShell>
);

Props

Prop	Type	Default	Description
`defaultRange`	`'7d' \| '30d' \| '90d'`	`'30d'`	Which span the page opens on.