Metrics dashboardPro
A dense analytics view with KPI tabs, one inspectable chart, and top pages and sources.
- A small, explorable KPI overview with a range toggle and one chart.
- Product or marketing dashboards with four headline metrics, a 7, 30, or 90 day range, and top pages and sources.
- Use metric-explorer or revenue-explorer for larger or drill-down data.
- Use stat-card for a single number.
- Use sparkline for inline trends in a table.
Installation
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { MetricsDashboard } from 'animui/metrics-dashboard';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this to make a small set of key measures explorable. Replace the sample figures with your analytics source.
import { MetricsDashboard } from "animui/metrics-dashboard"; export function Overview() { return <MetricsDashboard />;}MetricsDashboard
A dense analytics view: a range control, four KPI tabs that pick the charted metric, one line chart with an optional previous-period comparison and a hover or keyboard tooltip, and top pages and sources lists. Takes no props; all figures are sample data.
No props.
- Tab
- Moves through the range control, Export, the KPI tabs, Compare, and the chart.
- ArrowLeftorArrowRight
- With the chart focused, moves the inspected point.
- HomeorEnd
- Jumps to the first or last point.
- Range buttons use aria-pressed; the KPI tiles are tabs with aria-selected.
- The chart is role="img" with a label; the inspected value is announced through a status tooltip.
- Deltas carry a text direction, not only color.
- KPI values and list counts count to their new amounts with tabular numerals.
- The range thumb and KPI underline slide on a spring; the chart crossfades between metrics and ranges.
- Reduced motion swaps values and views immediately.
- Layout follows the block's own width through a ResizeObserver: below 640px the KPI tabs form a two by two grid and the top pages and sources lists stack.
- Below 460px padding tightens, the range control and actions fill the width, KPI values shrink, and the chart is 168px tall.
- Chart hover is mouse based; touch and keyboard select points through focus and the arrow keys.
- The chart is a hand-built SVG with a monotone cubic path: up to 30 daily points, or 13 weekly points for 90 days. No charting library.
- All aggregation runs over an in-memory daily series on each change; for larger data or drill-down use metric-explorer.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for a compact product or marketing analytics overview.
- Replace the generated daily series with your analytics source; Export only shows a local confirmation.
- The layout follows the block's own width (measured), so it works in narrow panels as well as full pages.
- For larger sets, prefer metric-explorer or revenue-explorer.
The full library index for assistants is at /llms.txt.