Analytics

A store dashboard with a sidebar, metric cards you can swap and drag, revenue charts with a hatched forecast, and a customers table with bulk actions.

Change the period or product, swap or drag a metric card, hover a chart, or select customers for the action bar.

Full page

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/analytics.json

Features

One toolbar row. The period (this year, 30 days, 7 days, 24 hours) and the product sit in one row with Export. Every figure and chart follows them.
Metric cards. Each card's label is a menu to swap which metric it shows, and the handle drags it into a new order, with the Sortable primitive.
Forecast charts. ForecastChart draws this period against the last one, dashed. Points after today are a projection: the line fades and the zone behind it is hatched. Hover for both values. The two chart cards can be reordered too.
Customers. A Data Table with avatars, a status filter and delete and edit on each row. Selecting rows raises the Action Bar with Export, Archive and Delete, and deletes can be undone from the toast.
Sidebar. A workspace menu with keyboard shortcuts, navigation with a badge, a folder tree, a dismissible "What's new" card and the signed-in user. It hides on narrow screens.

Usage

import { AnalyticsPage, ForecastChart } from "@/components/blocks/analytics"
 
<AnalyticsPage
  workspace="Acme"
  user={{ name: "Ana Cheng", email: "ana@acme.com", avatar: "/ana.png" }}
  customers={customers}
/>
 
<ForecastChart
  data={[{ label: "Jan", value: 4200, previous: 3900 } /* ... */]}
  forecastFrom={10}
  format={(v) => `$${v.toLocaleString()}`}
/>

Props

workspace, user. Shown in the sidebar.
customers. Rows for the table: name, handle, email, avatar, date (ISO), status (paid, pending or refunded) and amount. Demo rows are used when left out.
ForecastChart. data is a list of label, value and an optional previous. forecastFrom is the index of the first projected point. format formats the tooltip values.

Transactions motion

On This Page

Installation Features Usage Props